@koaris/bloom-ui 1.2.2 → 1.2.4

package/dist/index.mjs

@@ -1,35 +1,3 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-
 // ../../node_modules/tailwind-merge/dist/bundle-mjs.mjs
 var CLASS_PART_SEPARATOR = "-";
 var createClassGroupUtils = (config) => {
@@ -58,7 +26,6 @@ var createClassGroupUtils = (config) => {
   };
 };
 var getGroupRecursive = (classParts, classPartObject) => {
-  var _a;
   if (classParts.length === 0) {
     return classPartObject.classGroupId;
   }
@@ -72,15 +39,15 @@ var getGroupRecursive = (classParts, classPartObject) => {
     return void 0;
   }
   const classRest = classParts.join(CLASS_PART_SEPARATOR);
-  return (_a = classPartObject.validators.find(({
+  return classPartObject.validators.find(({
     validator
-  }) => validator(classRest))) == null ? void 0 : _a.classGroupId;
+  }) => validator(classRest))?.classGroupId;
 };
 var arbitraryPropertyRegex = /^\[(.+)\]$/;
 var getGroupIdForArbitraryProperty = (className) => {
   if (arbitraryPropertyRegex.test(className)) {
     const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
-    const property = arbitraryPropertyClassName == null ? void 0 : arbitraryPropertyClassName.substring(0, arbitraryPropertyClassName.indexOf(":"));
+    const property = arbitraryPropertyClassName?.substring(0, arbitraryPropertyClassName.indexOf(":"));
     if (property) {
       return "arbitrary.." + property;
     }
@@ -265,10 +232,11 @@ var sortModifiers = (modifiers) => {
   sortedModifiers.push(...unsortedModifiers.sort());
   return sortedModifiers;
 };
-var createConfigUtils = (config) => __spreadValues({
+var createConfigUtils = (config) => ({
   cache: createLruCache(config.cacheSize),
-  parseClassName: createParseClassName(config)
-}, createClassGroupUtils(config));
+  parseClassName: createParseClassName(config),
+  ...createClassGroupUtils(config)
+});
 var SPLIT_CLASSES_REGEX = /\s+/;
 var mergeClassList = (classList, configUtils) => {
   const {
@@ -2492,50 +2460,97 @@ var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // src/components/Card/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var Card = (_a) => {
-  var _b = _a, {
-    className,
-    selected = false,
-    direction,
-    size,
-    disabled,
-    imageSize,
-    onClick
-  } = _b, rest = __objRest(_b, [
-    "className",
-    "selected",
-    "direction",
-    "size",
-    "disabled",
-    "imageSize",
-    "onClick"
-  ]);
+var Card = ({
+  className,
+  selected = false,
+  direction = "row",
+  size = "medium",
+  disabled = false,
+  image,
+  imageSize = "100px",
+  imageAlt = "",
+  title,
+  content,
+  onClick,
+  footer,
+  hoverable = true,
+  ...rest
+}) => {
+  const handleClick = () => {
+    if (!disabled && onClick) {
+      onClick();
+    }
+  };
+  const cardSizeClasses = {
+    small: "max-w-xs p-3",
+    medium: "max-w-md p-4",
+    large: "max-w-lg p-5",
+    full: "w-full p-5"
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: twMerge(
-        "flex items-center justify-center rounded-lg cursor-pointer bg-neutral",
-        "hover:shadow-md hover:shadow-neutral-500 border border-neutral-500 text-neutral-1000",
-        size === "medium" && "w-64 px-8 py-4",
-        size === "large" && "w-96 pr-5",
-        direction === "col" && "flex-col",
-        selected === true && "border-2 border-orange-500",
-        disabled === true && "opacity-50 cursor-not-allowed",
+        "flex items-center rounded-lg bg-neutral border border-neutral-500 text-neutral-1000 transition-all duration-200",
+        direction === "col" ? "flex-col" : "flex-row",
+        cardSizeClasses[size],
+        hoverable && !disabled && "hover:shadow-md hover:shadow-neutral-500",
+        selected && "border-2 border-orange-500",
+        disabled && "opacity-50 cursor-not-allowed",
+        onClick && !disabled && "cursor-pointer",
         className
       ),
-      onClick,
+      onClick: handleClick,
+      role: onClick && !disabled ? "button" : void 0,
+      tabIndex: onClick && !disabled ? 0 : void 0,
+      onKeyDown: (e) => {
+        if ((e.key === "Enter" || e.key === " ") && onClick && !disabled) {
+          e.preventDefault();
+          onClick();
+        }
+      },
+      "aria-disabled": disabled,
+      ...rest,
       children: [
-        /* @__PURE__ */ jsx("img", { src: rest.image, alt: rest.title, width: imageSize, height: "auto" }),
+        image && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: twMerge(
+              "flex-shrink-0",
+              direction === "row" ? "mr-4" : "mb-4",
+              size === "small" && direction === "row" ? "mr-3" : "",
+              size === "small" && direction === "col" ? "mb-3" : ""
+            ),
+            children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: image,
+                alt: imageAlt,
+                width: imageSize,
+                height: "auto",
+                className: "rounded object-cover"
+              }
+            )
+          }
+        ),
         /* @__PURE__ */ jsxs(
-          "aside",
+          "div",
           {
             className: twMerge(
-              direction === "col" && "text-center",
-              "flex flex-col gap-2"
+              "flex flex-col",
+              direction === "col" && "text-center w-full",
+              direction === "row" && "flex-1"
             ),
             children: [
-              /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold font-default leading-tight", children: rest.title }),
-              /* @__PURE__ */ jsx("p", { className: "text-justify", children: rest.content })
+              title && /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold font-default leading-tight mb-2", children: title }),
+              content && /* @__PURE__ */ jsx("div", { className: twMerge(
+                "text-base",
+                direction === "col" ? "text-center" : "text-left"
+              ), children: content }),
+              footer && /* @__PURE__ */ jsx("div", { className: twMerge(
+                "mt-4 pt-3 border-t border-neutral-300",
+                direction === "col" ? "text-center" : "text-left"
+              ), children: footer })
             ]
           }
         )
@@ -2543,74 +2558,132 @@ var Card = (_a) => {
     }
   );
 };
+Card.displayName = "Card";
 
 // src/components/Button/index.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Button = (_a) => {
-  var _b = _a, {
+import { forwardRef } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Button = forwardRef(
+  ({
     className,
     variant = "primary",
     size = "md",
-    disabled,
-    onClick
-  } = _b, rest = __objRest(_b, [
-    "className",
-    "variant",
-    "size",
-    "disabled",
-    "onClick"
-  ]);
-  return /* @__PURE__ */ jsx2(
-    "button",
-    __spreadValues({
-      className: twMerge(
-        "flex gap-4 items-center justify-center rounded-sm px-8 py-2 text-md font-medium hover:shadow-md hover:shadow-neutral-500 w-full max-w-[180px]",
-        variant === "primary" && "bg-orange-500 text-neutral hover:bg-orange-700",
-        variant === "secondary" && "bg-neutral text-orange-500 border border-orange-500 hover:text-orange-100 hover:bg-orange-500",
-        size === "sm" && "px-6 py-1",
-        typeof rest.children !== "string" && "px-4",
-        disabled === true && "opacity-50 cursor-not-allowed",
-        className
-      ),
-      onClick
-    }, rest)
-  );
-};
+    disabled = false,
+    loading = false,
+    startIcon,
+    endIcon,
+    fullWidth = false,
+    onClick,
+    children,
+    ...rest
+  }, ref) => {
+    const sizeClasses = {
+      xs: "px-3 py-1 text-xs",
+      sm: "px-5 py-1.5 text-sm",
+      md: "px-6 py-2 text-md",
+      lg: "px-8 py-3 text-lg"
+    };
+    const variantClasses = {
+      primary: "bg-orange-500 text-neutral hover:bg-orange-700 focus:ring-orange-500",
+      secondary: "bg-neutral text-orange-500 border border-orange-500 hover:text-neutral hover:bg-orange-500 focus:ring-orange-500",
+      outline: "bg-transparent text-orange-500 border border-orange-500 hover:bg-orange-50 focus:ring-orange-500",
+      ghost: "bg-transparent text-orange-500 hover:bg-orange-50 focus:ring-orange-500",
+      link: "bg-transparent text-orange-500 hover:underline p-0 h-auto shadow-none focus:ring-0"
+    };
+    const handleClick = (e) => {
+      if (loading || disabled) return;
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        ref,
+        className: twMerge(
+          "relative font-medium rounded-sm transition-all duration-200",
+          "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-opacity-50",
+          variantClasses[variant],
+          sizeClasses[size],
+          fullWidth ? "w-full" : "max-w-[180px]",
+          "inline-flex items-center justify-center gap-2",
+          (disabled || loading) && "opacity-50 cursor-not-allowed hover:shadow-none hover:bg-opacity-100",
+          className
+        ),
+        onClick: handleClick,
+        disabled: disabled || loading,
+        ...rest,
+        children: [
+          loading && /* @__PURE__ */ jsx2("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs2(
+            "svg",
+            {
+              className: "animate-spin h-5 w-5",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: [
+                /* @__PURE__ */ jsx2(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "path",
+                  {
+                    className: "opacity-75",
+                    fill: "currentColor",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs2("span", { className: loading ? "invisible" : "flex items-center gap-2", children: [
+            startIcon && /* @__PURE__ */ jsx2("span", { className: "mr-1", children: startIcon }),
+            children,
+            endIcon && /* @__PURE__ */ jsx2("span", { className: "ml-1", children: endIcon })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
 
 // src/components/Link/index.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
-var Link = (_a) => {
-  var _b = _a, {
-    className,
-    disabled,
-    url,
-    newPage = true,
-    onClick
-  } = _b, rest = __objRest(_b, [
-    "className",
-    "disabled",
-    "url",
-    "newPage",
-    "onClick"
-  ]);
+var Link = ({
+  className,
+  disabled,
+  url,
+  newPage = true,
+  onClick,
+  ...rest
+}) => {
   return /* @__PURE__ */ jsx3(
     "a",
-    __spreadValues(__spreadValues({
+    {
       className: twMerge(
         "text-blue-800 font-bold",
         typeof rest.children !== "string" && "px-4",
         disabled === true && "opacity-50 cursor-not-allowed",
         className
       ),
-      href: url
-    }, newPage && { target: "_blank", rel: "noopener noreferrer" }), rest)
+      href: url,
+      ...newPage && { target: "_blank", rel: "noopener noreferrer" },
+      ...rest
+    }
   );
 };
 
 // src/components/RadioGroup/index.tsx
 import { useState } from "react";
 import { FiCheck } from "react-icons/fi";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var RadioGroup = ({
   disabled,
   options = [
@@ -2624,8 +2697,8 @@ var RadioGroup = ({
   const handleOptionChange = (value) => {
     setSelectedOption(value);
   };
-  return /* @__PURE__ */ jsx4("div", { className: "flex flex-col ", children: options.map((option) => /* @__PURE__ */ jsxs2("div", { className: "flex py-2 items-center", children: [
-    /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx4("div", { className: "flex flex-col ", children: options.map((option) => /* @__PURE__ */ jsxs3("div", { className: "flex py-2 items-center", children: [
+    /* @__PURE__ */ jsxs3(
       "label",
       {
         htmlFor: `radio${option.id}`,
@@ -2661,13 +2734,13 @@ var RadioGroup = ({
 // src/components/Checkbox/index.tsx
 import { useState as useState2 } from "react";
 import { FiCheck as FiCheck2 } from "react-icons/fi";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var Checkbox = ({ className, required, disabled }) => {
   const [selected, setSelected] = useState2(false);
   const handleCheckboxChange = (value) => {
     setSelected(!value);
   };
-  return /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs4(
     "label",
     {
       className: twMerge(
@@ -2701,179 +2774,302 @@ var Checkbox = ({ className, required, disabled }) => {
 import {
   useEffect,
   useState as useState3,
-  forwardRef
+  forwardRef as forwardRef2
 } from "react";
 import { FiCheck as FiCheck3, FiX } from "react-icons/fi";
-
-// src/components/Shared/masks.tsx
-var masks = {
-  password: [/^(?=.*[!@#$%^&*])/, /(?=.*[0-9])/, /.{8,}$/],
-  date: [/\d/, /\d/, "/", /\d/, /\d/, "/", /\d/, /\d/, /\d/, /\d/],
-  cpf: [
-    /\d/,
-    /\d/,
-    /\d/,
-    ".",
-    /\d/,
-    /\d/,
-    /\d/,
-    ".",
-    /\d/,
-    /\d/,
-    /\d/,
-    "-",
-    /\d/,
-    /\d/
-  ],
-  cnpj: [
-    /\d/,
-    /\d/,
-    ".",
-    /\d/,
-    /\d/,
-    /\d/,
-    ".",
-    /\d/,
-    /\d/,
-    /\d/,
-    "/",
-    /\d/,
-    /\d/,
-    /\d/,
-    /\d/,
-    "-",
-    /\d/,
-    /\d/
-  ],
-  cep: [/\d/, /\d/, /\d/, /\d/, /\d/, "-", /\d/, /\d/, /\d/],
-  phone: [
-    "(",
-    /[1-9]/,
-    /[1-9]/,
-    ")",
-    " ",
-    /\d/,
-    /\d/,
-    /\d/,
-    /\d/,
-    /\d/,
-    "-",
-    /\d/,
-    /\d/,
-    /\d/,
-    /\d/
-  ]
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var passwordMask = {
+  password: [/^(?=.*[!@#$%^&*])/, /(?=.*[0-9])/, /.{8,}$/]
 };
-var masks_default = masks;
-
-// src/components/Input/index.tsx
-import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var Input = forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      className,
-      disabled,
-      placeholder,
-      value,
-      validated,
-      error,
-      required,
-      type,
-      onClick
-    } = _b, rest = __objRest(_b, [
-      "className",
-      "disabled",
-      "placeholder",
-      "value",
-      "validated",
-      "error",
-      "required",
-      "type",
-      "onClick"
-    ]);
+var phoneFormats = {
+  "BR": { countryCode: "+55", format: "($1) $2-$3" },
+  "US": { countryCode: "+1", format: "($1) $2-$3" },
+  "UK": { countryCode: "+44", format: "$1 $2 $3" },
+  "DE": { countryCode: "+49", format: "$1 $2 $3" },
+  "FR": { countryCode: "+33", format: "$1 $2 $3 $4" }
+  // Add more countries as needed
+};
+var Input = forwardRef2(
+  ({
+    className,
+    disabled,
+    placeholder,
+    value,
+    validated,
+    error,
+    required,
+    type,
+    onClick,
+    errorMessage,
+    onChange: externalOnChange,
+    label,
+    helperText,
+    id,
+    countryCode = "BR",
+    // Default to Brazil
+    ...rest
+  }, ref) => {
     const [selected, setSelected] = useState3(false);
-    const [inputValue, setInputValue] = useState3(value);
-    const [hasNumber, setHasNumber] = useState3(false);
-    const [hasSpecialCharacteres, setHasSpecialCharacteres] = useState3(false);
-    const [hasEightCharacteres, setHasEightCharacteres] = useState3(false);
+    const [inputValue, setInputValue] = useState3(value || "");
+    const [passwordValidation, setPasswordValidation] = useState3({
+      hasEightCharacters: false,
+      hasSpecialCharacters: false,
+      hasNumber: false
+    });
+    const [isValid, setIsValid] = useState3(false);
     const handleFocus = () => {
-      setSelected(!selected);
+      setSelected(true);
     };
     const handleBlur = () => {
       setSelected(false);
+      validateInput(inputValue || "");
+    };
+    const applyMask = (value2, type2) => {
+      let result = value2;
+      switch (type2) {
+        case "date":
+          result = value2.replace(/\D/g, "");
+          if (result.length > 8) result = result.substring(0, 8);
+          if (result.length > 4) result = result.replace(/(\d{2})(\d{2})(\d+)/, "$1/$2/$3");
+          else if (result.length > 2) result = result.replace(/(\d{2})(\d+)/, "$1/$2");
+          break;
+        case "cpf":
+          result = value2.replace(/\D/g, "");
+          if (result.length > 11) result = result.substring(0, 11);
+          if (result.length > 9) result = result.replace(/(\d{3})(\d{3})(\d{3})(\d+)/, "$1.$2.$3-$4");
+          else if (result.length > 6) result = result.replace(/(\d{3})(\d{3})(\d+)/, "$1.$2.$3");
+          else if (result.length > 3) result = result.replace(/(\d{3})(\d+)/, "$1.$2");
+          break;
+        case "cnpj":
+          result = value2.replace(/\D/g, "");
+          if (result.length > 14) result = result.substring(0, 14);
+          if (result.length > 12)
+            result = result.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d+)/, "$1.$2.$3/$4-$5");
+          else if (result.length > 8)
+            result = result.replace(/(\d{2})(\d{3})(\d{3})(\d+)/, "$1.$2.$3/$4");
+          else if (result.length > 5)
+            result = result.replace(/(\d{2})(\d{3})(\d+)/, "$1.$2.$3");
+          else if (result.length > 2)
+            result = result.replace(/(\d{2})(\d+)/, "$1.$2");
+          break;
+        case "cep":
+          result = value2.replace(/\D/g, "");
+          if (result.length > 8) result = result.substring(0, 8);
+          if (result.length > 5) result = result.replace(/(\d{5})(\d+)/, "$1-$2");
+          break;
+        case "phone":
+          result = applyPhoneMask(value2, countryCode);
+          break;
+        case "email":
+          result = value2.trim();
+          break;
+        default:
+          break;
+      }
+      return result;
+    };
+    const applyPhoneMask = (value2, countryCode2) => {
+      let digits = value2.replace(/\D/g, "");
+      const format = phoneFormats[countryCode2] || phoneFormats["BR"];
+      switch (countryCode2) {
+        case "BR":
+          if (digits.length > 11) digits = digits.substring(0, 11);
+          if (digits.length > 10)
+            return digits.replace(/(\d{2})(\d{5})(\d+)/, "($1) $2-$3");
+          else if (digits.length > 6)
+            return digits.replace(/(\d{2})(\d{4})(\d+)/, "($1) $2-$3");
+          else if (digits.length > 2)
+            return digits.replace(/(\d{2})(\d+)/, "($1) $2");
+          return digits;
+        case "US":
+          if (digits.length > 10) digits = digits.substring(0, 10);
+          if (digits.length > 6)
+            return digits.replace(/(\d{3})(\d{3})(\d+)/, "($1) $2-$3");
+          else if (digits.length > 3)
+            return digits.replace(/(\d{3})(\d+)/, "($1) $2");
+          return digits;
+        case "UK":
+          if (digits.length > 10) digits = digits.substring(0, 10);
+          if (digits.length > 7)
+            return digits.replace(/(\d{3})(\d{3})(\d+)/, "$1 $2 $3");
+          else if (digits.length > 3)
+            return digits.replace(/(\d{3})(\d+)/, "$1 $2");
+          return digits;
+        default:
+          if (digits.length > 10) digits = digits.substring(0, 10);
+          if (digits.length > 6)
+            return digits.replace(/(\d{3})(\d{3})(\d+)/, "$1 $2 $3");
+          else if (digits.length > 3)
+            return digits.replace(/(\d{3})(\d+)/, "$1 $2");
+          return digits;
+      }
+    };
+    const validateInput = (value2) => {
+      if (!value2) return false;
+      let valid = false;
+      switch (type) {
+        case "password":
+          valid = passwordValidation.hasEightCharacters && passwordValidation.hasSpecialCharacters && passwordValidation.hasNumber;
+          break;
+        case "date":
+          valid = /^\d{2}\/\d{2}\/\d{4}$/.test(value2);
+          break;
+        case "cpf":
+          valid = /^\d{3}\.\d{3}\.\d{3}-\d{2}$/.test(value2);
+          break;
+        case "cnpj":
+          valid = /^\d{2}\.\d{3}\.\d{3}\/\d{4}-\d{2}$/.test(value2);
+          break;
+        case "cep":
+          valid = /^\d{5}-\d{3}$/.test(value2);
+          break;
+        case "phone":
+          if (countryCode === "BR") {
+            valid = /^\(\d{2}\) \d{5}-\d{4}$/.test(value2) || /^\(\d{2}\) \d{4}-\d{4}$/.test(value2);
+          } else if (countryCode === "US") {
+            valid = /^\(\d{3}\) \d{3}-\d{4}$/.test(value2);
+          } else {
+            valid = /^[\d\s()-]{8,}$/.test(value2);
+          }
+          break;
+        case "email":
+          valid = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value2);
+          break;
+        default:
+          valid = value2.length > 0;
+          break;
+      }
+      setIsValid(valid);
+      return valid;
     };
     const handleInput = (event) => {
-      setInputValue(event.currentTarget.value);
-      checkPassword(event.currentTarget.value);
+      let newValue = event.currentTarget.value;
+      if (["date", "cpf", "phone", "cnpj", "cep", "email"].includes(type)) {
+        newValue = applyMask(newValue, type);
+      }
+      const newEvent = {
+        ...event,
+        currentTarget: {
+          ...event.currentTarget,
+          value: newValue
+        },
+        target: {
+          ...event.target,
+          value: newValue
+        }
+      };
+      setInputValue(newValue);
+      if (type === "password") {
+        checkPassword(newValue);
+      } else {
+        validateInput(newValue);
+      }
+      externalOnChange?.(newEvent);
     };
     useEffect(() => {
-      setInputValue(value);
-    }, [value]);
+      setInputValue(value || "");
+      if (value && type === "password") {
+        checkPassword(value);
+      } else if (value) {
+        validateInput(value);
+      }
+    }, [value, type]);
     const checkPassword = (value2) => {
-      setHasSpecialCharacteres((value2 == null ? void 0 : value2.match(masks_default.password[0])) !== null);
-      setHasNumber((value2 == null ? void 0 : value2.match(masks_default.password[1])) !== null);
-      setHasEightCharacteres((value2 == null ? void 0 : value2.match(masks_default.password[2])) !== null);
+      const validationResult = {
+        hasEightCharacters: value2?.match(passwordMask.password[2]) !== null,
+        hasSpecialCharacters: value2?.match(passwordMask.password[0]) !== null,
+        hasNumber: value2?.match(passwordMask.password[1]) !== null
+      };
+      setPasswordValidation(validationResult);
+      setIsValid(
+        validationResult.hasEightCharacters && validationResult.hasSpecialCharacters && validationResult.hasNumber
+      );
     };
-    return /* @__PURE__ */ jsxs4(Fragment, { children: [
-      type === "text" || type === "password" || type === "date" ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+    const getInputType = () => {
+      switch (type) {
+        case "password":
+          return "password";
+        case "email":
+          return "email";
+        case "date":
+        case "cpf":
+        case "phone":
+        case "cnpj":
+        case "cep":
+          return "text";
+        default:
+          return "text";
+      }
+    };
+    const renderPhonePrefix = () => {
+      if (type !== "phone") return null;
+      const format = phoneFormats[countryCode] || phoneFormats["BR"];
+      return /* @__PURE__ */ jsx6("span", { className: "absolute left-2 top-2.5 text-gray-500", children: format.countryCode });
+    };
+    const inputClasses = twMerge(
+      "flex items-center justify-center border-2 border-neutral rounded-sm w-full px-3 py-2 text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none transition-all duration-200",
+      className,
+      disabled && "opacity-50 cursor-not-allowed",
+      selected && "border-2 border-orange-500",
+      validated && isValid && "border-2 border-green-900",
+      error && "border-2 border-red-900",
+      type === "phone" && "pl-10"
+    );
+    const renderPasswordValidation = () => {
+      if (type !== "password") return null;
+      return /* @__PURE__ */ jsxs5("ul", { className: "py-1 text-sm", role: "list", children: [
+        /* @__PURE__ */ jsxs5("li", { className: "flex items-center px-2", role: "listitem", children: [
+          passwordValidation.hasEightCharacters ? /* @__PURE__ */ jsx6(FiCheck3, { className: "text-green-500" }) : /* @__PURE__ */ jsx6(FiX, { className: "text-red-500" }),
+          /* @__PURE__ */ jsx6("span", { className: "px-1", children: "Pelo menos 8 caracteres" })
+        ] }),
+        /* @__PURE__ */ jsxs5("li", { className: "flex items-center px-2", role: "listitem", children: [
+          passwordValidation.hasSpecialCharacters ? /* @__PURE__ */ jsx6(FiCheck3, { className: "text-green-500" }) : /* @__PURE__ */ jsx6(FiX, { className: "text-red-500" }),
+          /* @__PURE__ */ jsx6("span", { className: "px-1", children: "Pelo menos 1 s\xEDmbolo (@, !, $, etc)" })
+        ] }),
+        /* @__PURE__ */ jsxs5("li", { className: "flex items-center px-2", role: "listitem", children: [
+          passwordValidation.hasNumber ? /* @__PURE__ */ jsx6(FiCheck3, { className: "text-green-500" }) : /* @__PURE__ */ jsx6(FiX, { className: "text-red-500" }),
+          /* @__PURE__ */ jsx6("span", { className: "px-1", children: "Deve conter 1 n\xFAmero" })
+        ] })
+      ] });
+    };
+    return /* @__PURE__ */ jsxs5("div", { className: "w-full", children: [
+      label && /* @__PURE__ */ jsxs5(
+        "label",
+        {
+          htmlFor: id,
+          className: "block text-sm font-medium text-gray-700 mb-1",
+          children: [
+            label,
+            required && /* @__PURE__ */ jsx6("span", { className: "text-red-500 ml-1", children: "*" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+        renderPhonePrefix(),
         /* @__PURE__ */ jsx6(
           "input",
-          __spreadValues({
-            type,
+          {
+            type: getInputType(),
             required,
+            disabled,
             ref,
-            className: twMerge(
-              "flex items-center justify-center border-2 border-neutral rounded-sm w-full px-3 py-2 text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none",
-              className,
-              disabled === true && "opacity-50 cursor-not-allowed",
-              selected === true && "border-2 border-orange-500",
-              validated === true && "border-2 border-green-900",
-              error === true && "border-2 border-red-900"
-            ),
+            id,
+            className: inputClasses,
             onClick,
             onFocus: handleFocus,
             onChange: handleInput,
             onBlur: handleBlur,
             placeholder,
-            value: inputValue
-          }, rest)
-        ),
-        type === "password" && (!hasEightCharacteres || !hasSpecialCharacteres || !hasNumber) && /* @__PURE__ */ jsxs4("ul", { className: "py-1", children: [
-          /* @__PURE__ */ jsxs4("li", { className: "flex items-center px-2", children: [
-            hasEightCharacteres ? /* @__PURE__ */ jsx6(FiCheck3, {}) : /* @__PURE__ */ jsx6(FiX, {}),
-            /* @__PURE__ */ jsx6("span", { className: "px-1", children: "Pelo menos 8 caracteres" })
-          ] }),
-          /* @__PURE__ */ jsxs4("li", { className: "flex items-center px-2", children: [
-            hasSpecialCharacteres ? /* @__PURE__ */ jsx6(FiCheck3, {}) : /* @__PURE__ */ jsx6(FiX, {}),
-            /* @__PURE__ */ jsx6("span", { className: "px-1", children: "Pelo menos 1 s\xEDmbolo (@, !, $, etc)" })
-          ] }),
-          /* @__PURE__ */ jsxs4("li", { className: "flex items-center px-2", children: [
-            hasNumber ? /* @__PURE__ */ jsx6(FiCheck3, {}) : /* @__PURE__ */ jsx6(FiX, {}),
-            /* @__PURE__ */ jsx6("span", { className: "px-1", children: "Deve conter 1 n\xFAmero" })
-          ] })
-        ] })
-      ] }) : /* @__PURE__ */ jsx6(
-        "input",
-        __spreadValues({
-          type,
-          required,
-          ref,
-          className: twMerge(
-            "flex items-center justify-center border-2 border-neutral rounded-sm w-full px-3 py-2 text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none",
-            className,
-            disabled === true && "opacity-50 cursor-not-allowed",
-            selected === true && "border-2 border-orange-500",
-            error === true && "border-2 border-red-900"
-          ),
-          onClick,
-          onFocus: handleFocus,
-          onChange: handleInput,
-          onBlur: handleBlur,
-          placeholder,
-          value: inputValue
-        }, rest)
-      ),
-      error === true && /* @__PURE__ */ jsx6("label", { htmlFor: rest.id, className: "text-red-900", children: "Campo inv\xE1lido." })
+            value: inputValue,
+            "aria-invalid": error,
+            "aria-describedby": error ? `${id}-error` : helperText ? `${id}-helper` : void 0,
+            ...rest
+          }
+        )
+      ] }),
+      renderPasswordValidation(),
+      error && /* @__PURE__ */ jsx6("p", { id: `${id}-error`, className: "mt-1 text-sm text-red-900", role: "alert", children: errorMessage || "Invalid field." }),
+      helperText && !error && /* @__PURE__ */ jsx6("p", { id: `${id}-helper`, className: "mt-1 text-sm text-gray-500", children: helperText })
     ] });
   }
 );
@@ -2883,32 +3079,22 @@ Input.displayName = "Input";
 import {
   useEffect as useEffect2,
   useState as useState4,
-  forwardRef as forwardRef2
+  forwardRef as forwardRef3
 } from "react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var TextInput = forwardRef2(
-  (_a, ref) => {
-    var _b = _a, {
-      className,
-      disabled,
-      value,
-      prefix,
-      placeholder,
-      error,
-      type = "text",
-      variant = "primary",
-      onClick
-    } = _b, rest = __objRest(_b, [
-      "className",
-      "disabled",
-      "value",
-      "prefix",
-      "placeholder",
-      "error",
-      "type",
-      "variant",
-      "onClick"
-    ]);
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var TextInput = forwardRef3(
+  ({
+    className,
+    disabled,
+    value,
+    prefix,
+    placeholder,
+    error,
+    type = "text",
+    variant = "primary",
+    onClick,
+    ...rest
+  }, ref) => {
     const [selected, setSelected] = useState4(false);
     const [inputValue, setInputValue] = useState4(value);
     const handleFocus = () => {
@@ -2923,7 +3109,7 @@ var TextInput = forwardRef2(
     useEffect2(() => {
       setInputValue(value);
     }, [value]);
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         className: twMerge(
@@ -2938,7 +3124,7 @@ var TextInput = forwardRef2(
           !!prefix && /* @__PURE__ */ jsx7("span", { className: "text-neutral-500 sm:text-sm", children: prefix }),
           /* @__PURE__ */ jsx7(
             "input",
-            __spreadValues({
+            {
               type,
               required: rest.required,
               onClick,
@@ -2955,8 +3141,9 @@ var TextInput = forwardRef2(
                 disabled === true && "cursor-not-allowed",
                 variant === "secondary" && "bg-neutral-800 text-neutral",
                 className
-              )
-            }, rest)
+              ),
+              ...rest
+            }
           )
         ]
       }
@@ -2971,28 +3158,18 @@ import {
   useState as useState5
 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
-var TextArea = (_a) => {
-  var _b = _a, {
-    className,
-    disabled,
-    reference,
-    value,
-    error,
-    required,
-    placeholder,
-    resize,
-    onClick
-  } = _b, rest = __objRest(_b, [
-    "className",
-    "disabled",
-    "reference",
-    "value",
-    "error",
-    "required",
-    "placeholder",
-    "resize",
-    "onClick"
-  ]);
+var TextArea = ({
+  className,
+  disabled,
+  reference,
+  value,
+  error,
+  required,
+  placeholder,
+  resize,
+  onClick,
+  ...rest
+}) => {
   const [selected, setSelected] = useState5(false);
   const [inputValue, setInputValue] = useState5(value);
   const handleFocus = () => {
@@ -3009,7 +3186,7 @@ var TextArea = (_a) => {
   }, [value]);
   return /* @__PURE__ */ jsx8(
     "textarea",
-    __spreadValues({
+    {
       required,
       ref: reference,
       disabled,
@@ -3027,27 +3204,22 @@ var TextArea = (_a) => {
       onChange: handleInput,
       onBlur: handleBlur,
       placeholder,
-      value: inputValue
-    }, rest)
+      value: inputValue,
+      ...rest
+    }
   );
 };
 
 // src/components/Text/index.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
-var Text = (_a) => {
-  var _b = _a, {
-    children,
-    color = "neutral-800",
-    size = "md",
-    tag = "p",
-    className
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "color",
-    "size",
-    "tag",
-    "className"
-  ]);
+var Text = ({
+  children,
+  color = "neutral-800",
+  size = "md",
+  tag = "p",
+  className,
+  ...rest
+}) => {
   const fontSize = {
     xxs: "text-xxs",
     xs: "text-xs",
@@ -3065,7 +3237,7 @@ var Text = (_a) => {
     "9xl": "text-9xl"
   }[size];
   const Tag = tag;
-  return /* @__PURE__ */ jsx9(Tag, __spreadProps(__spreadValues({}, rest), { className: twMerge(`text-${color} ${fontSize}`, className), children }));
+  return /* @__PURE__ */ jsx9(Tag, { ...rest, className: twMerge(`text-${color} ${fontSize}`, className), children });
 };
 
 // src/components/Heading/index.tsx
@@ -3120,39 +3292,33 @@ var Box = ({
 
 // src/components/Form/index.tsx
 import { jsx as jsx12 } from "react/jsx-runtime";
-var Form = (_a) => {
-  var _b = _a, {
-    className,
-    children,
-    variant = "secondary",
-    orientation = "row"
-  } = _b, rest = __objRest(_b, [
-    "className",
-    "children",
-    "variant",
-    "orientation"
-  ]);
+var Form = ({
+  className,
+  children,
+  variant = "secondary",
+  orientation = "row",
+  ...rest
+}) => {
   return /* @__PURE__ */ jsx12(
     "form",
-    __spreadProps(__spreadValues({
+    {
       className: twMerge(
         "flex flex-row gap-2 p-6 rounded-md border-2",
         variant === "primary" && "text-neutral-800 bg-neutral-200 border-neutral-300",
         variant === "secondary" && "text-neutral-200 bg-neutral-600 border-neutral-800",
         orientation === "col" && "flex-col",
         className
-      )
-    }, rest), {
+      ),
+      ...rest,
       children
-    })
+    }
   );
 };
 
 // src/components/Avatar/index.tsx
 import { FaUser } from "react-icons/fa";
 import { jsx as jsx13 } from "react/jsx-runtime";
-var Avatar = (_a) => {
-  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+var Avatar = ({ className, ...rest }) => {
   return /* @__PURE__ */ jsx13(
     "div",
     {
@@ -3162,15 +3328,15 @@ var Avatar = (_a) => {
             bg-neutral-600 justify-center`,
         className
       ),
-      children: rest.src ? /* @__PURE__ */ jsx13("img", __spreadValues({ className: "w-full h-full object-cover rounded-full" }, rest)) : /* @__PURE__ */ jsx13(FaUser, { color: "#FFFFFF", size: 24 })
+      children: rest.src ? /* @__PURE__ */ jsx13("img", { className: "w-full h-full object-cover rounded-full", ...rest }) : /* @__PURE__ */ jsx13(FaUser, { color: "#FFFFFF", size: 24 })
     }
   );
 };
 
 // src/components/MultiStep/index.tsx
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 var MultiStep = ({ className, size, currentStep }) => {
-  return /* @__PURE__ */ jsxs6("div", { className: "w-full", children: [
+  return /* @__PURE__ */ jsxs7("div", { className: "w-full", children: [
     /* @__PURE__ */ jsx14(Text, { tag: "label", color: "neutral-100", size: "xs", children: `Passo ${currentStep} de ${size}` }),
     /* @__PURE__ */ jsx14("div", { className: `grid gap-2 grid-cols-${size} grid-flow-col mt-1`, children: Array.from(Array(size).keys()).map((_, index) => {
       return /* @__PURE__ */ jsx14(
@@ -3187,6 +3353,474 @@ var MultiStep = ({ className, size, currentStep }) => {
     }) })
   ] });
 };
+
+// src/components/Toggle/index.tsx
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+var Toggle = ({
+  className,
+  disabled,
+  active,
+  label,
+  setActive,
+  size = "md",
+  hideLabel = false,
+  id,
+  ...rest
+}) => {
+  const toggleId = id || `toggle-${Math.random().toString(36).substring(2, 9)}`;
+  const sizeClasses = {
+    sm: {
+      toggle: "h-5 w-9",
+      knob: "h-3 w-3",
+      translate: active ? "translate-x-5" : "translate-x-1"
+    },
+    md: {
+      toggle: "h-6 w-11",
+      knob: "h-4 w-4",
+      translate: active ? "translate-x-6" : "translate-x-1"
+    },
+    lg: {
+      toggle: "h-7 w-14",
+      knob: "h-5 w-5",
+      translate: active ? "translate-x-8" : "translate-x-1"
+    }
+  };
+  const selectedSize = sizeClasses[size];
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (!disabled) {
+        setActive(!active);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: twMerge("flex items-center gap-3", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx15(
+          "button",
+          {
+            type: "button",
+            role: "switch",
+            "aria-checked": active,
+            "aria-labelledby": hideLabel ? void 0 : `${toggleId}-label`,
+            "aria-label": hideLabel ? label : void 0,
+            id: toggleId,
+            disabled,
+            onClick: () => setActive(!active),
+            onKeyDown: handleKeyDown,
+            className: twMerge(`
+          relative inline-flex items-center rounded-full
+          ${selectedSize.toggle}
+          ${active ? "bg-blue-600" : "bg-gray-300 dark:bg-gray-600"}
+          ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+          transition-colors duration-300 ease-in-out 
+          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
+        `),
+            children: /* @__PURE__ */ jsx15("span", { className: `
+          inline-block transform rounded-full bg-white shadow-md
+          ${selectedSize.knob}
+          ${selectedSize.translate}
+          transition-transform duration-300 ease-in-out
+        ` })
+          }
+        ),
+        !hideLabel && /* @__PURE__ */ jsx15(
+          "label",
+          {
+            id: `${toggleId}-label`,
+            htmlFor: toggleId,
+            className: `text-sm font-medium text-gray-700 dark:text-gray-300 ${disabled ? "opacity-50" : ""}`,
+            children: label
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/Skeleton/index.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Skeleton = ({
+  width = "full",
+  height = "16",
+  rounded = false,
+  circle = false,
+  animate = true,
+  className
+}) => {
+  const widthClass = typeof width === "string" ? width.includes("px") || width.includes("%") || width.includes("rem") || width.includes("em") ? `w-[${width}]` : `w-${width}` : `w-[${width}px]`;
+  const heightClass = typeof height === "string" ? height.includes("px") || height.includes("%") || height.includes("rem") || height.includes("em") ? `h-[${height}]` : `h-${height}` : `h-[${height}px]`;
+  const safeWidthClass = widthClass.includes("[") ? "w-full" : widthClass;
+  const safeHeightClass = heightClass.includes("[") ? "h-16" : heightClass;
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      className: twMerge(
+        "bg-gray-200",
+        safeWidthClass,
+        safeHeightClass,
+        rounded && !circle && "rounded-md",
+        circle && "rounded-full",
+        animate && "animate-pulse",
+        className
+      ),
+      "aria-hidden": "true"
+    }
+  );
+};
+Skeleton.displayName = "Skeleton";
+
+// src/components/Loading/index.tsx
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+var Loading = ({
+  size = "md",
+  color = "primary",
+  withText = false,
+  text = "Loading...",
+  centered = false,
+  className
+}) => {
+  const sizeClasses = {
+    xs: "h-4 w-4",
+    sm: "h-6 w-6",
+    md: "h-8 w-8",
+    lg: "h-12 w-12"
+  };
+  const colorClasses = {
+    primary: "text-orange-500",
+    secondary: "text-neutral",
+    white: "text-white",
+    black: "text-black",
+    gray: "text-gray-400"
+  };
+  const textSizeClasses = {
+    xs: "text-xs",
+    sm: "text-sm",
+    md: "text-base",
+    lg: "text-lg"
+  };
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className: twMerge(
+        "inline-flex items-center",
+        centered && "justify-center",
+        className
+      ),
+      role: "status",
+      children: [
+        /* @__PURE__ */ jsxs9(
+          "svg",
+          {
+            className: twMerge(
+              "animate-spin",
+              sizeClasses[size],
+              colorClasses[color]
+            ),
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            children: [
+              /* @__PURE__ */ jsx17(
+                "circle",
+                {
+                  className: "opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor",
+                  strokeWidth: "4"
+                }
+              ),
+              /* @__PURE__ */ jsx17(
+                "path",
+                {
+                  className: "opacity-75",
+                  fill: "currentColor",
+                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                }
+              )
+            ]
+          }
+        ),
+        withText && /* @__PURE__ */ jsx17("span", { className: twMerge(
+          "ml-3",
+          textSizeClasses[size],
+          colorClasses[color]
+        ), children: text }),
+        /* @__PURE__ */ jsx17("span", { className: "sr-only", children: "Loading" })
+      ]
+    }
+  );
+};
+Loading.displayName = "Loading";
+
+// src/components/Modal/index.tsx
+import { useEffect as useEffect4, useState as useState6, useRef } from "react";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+var Modal = ({
+  className,
+  isOpen,
+  onClose,
+  title,
+  size = "md",
+  children,
+  showCloseButton = true,
+  closeOnOutsideClick = true,
+  closeOnEsc = true,
+  footer,
+  ...rest
+}) => {
+  const modalRef = useRef(null);
+  const portalRoot = useRef(null);
+  const [mounted, setMounted] = useState6(false);
+  useEffect4(() => {
+    portalRoot.current = document.createElement("div");
+    portalRoot.current.id = "bloom-ui-portal-root";
+    document.body.appendChild(portalRoot.current);
+    setMounted(true);
+    return () => {
+      portalRoot.current?.remove();
+      document.body.style.overflow = "";
+    };
+  }, []);
+  useEffect4(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+  }, [isOpen]);
+  useEffect4(() => {
+    const handleKeyDown = (e) => {
+      if (isOpen && closeOnEsc && e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose, closeOnEsc]);
+  const handleBackdropClick = (e) => {
+    if (closeOnOutsideClick && modalRef.current && !modalRef.current.contains(e.target)) {
+      onClose();
+    }
+  };
+  const sizeClasses = {
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-lg",
+    xl: "max-w-xl"
+  };
+  if (!isOpen || !mounted || !portalRoot.current) return null;
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50 transition-opacity duration-300",
+      onClick: handleBackdropClick,
+      "aria-modal": "true",
+      role: "dialog",
+      ...rest,
+      children: /* @__PURE__ */ jsxs10(
+        "div",
+        {
+          ref: modalRef,
+          className: twMerge(
+            `relative bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full 
+                    ${sizeClasses[size]} opacity-100 scale-100 
+                    transition-all duration-300 ease-in-out`,
+            className
+          ),
+          children: [
+            (title || showCloseButton) && /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700", children: [
+              title && /* @__PURE__ */ jsx18("h3", { className: "text-lg font-medium text-gray-900 dark:text-gray-100", children: title }),
+              showCloseButton && /* @__PURE__ */ jsx18(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Close modal",
+                  onClick: onClose,
+                  className: "p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full",
+                  children: /* @__PURE__ */ jsx18("svg", { className: "h-5 w-5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx18("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx18("div", { className: "px-6 py-4 max-h-[70vh] overflow-y-auto", children }),
+            footer && /* @__PURE__ */ jsx18("div", { className: "px-6 py-4 border-t border-gray-200 dark:border-gray-700", children: footer })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/components/Toast/index.tsx
+import { useEffect as useEffect5, useState as useState7, useRef as useRef2 } from "react";
+import { Fragment, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+var ToastService = class _ToastService {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Set();
+    this.toasts = [];
+  }
+  static getInstance() {
+    if (!_ToastService.instance) {
+      _ToastService.instance = new _ToastService();
+    }
+    return _ToastService.instance;
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  notify() {
+    this.listeners.forEach((listener) => listener([...this.toasts]));
+  }
+  showToast(toast) {
+    const id = `toast-${Date.now()}`;
+    this.toasts.push({
+      ...toast,
+      id,
+      onDismiss: (toastId) => this.hideToast(toastId)
+    });
+    this.notify();
+    return id;
+  }
+  hideToast(id) {
+    this.toasts = this.toasts.filter((toast) => toast.id !== id);
+    this.notify();
+  }
+  clearToasts() {
+    this.toasts = [];
+    this.notify();
+  }
+  getToasts() {
+    return [...this.toasts];
+  }
+};
+var toastService = ToastService.getInstance();
+var Toast = ({
+  id,
+  message,
+  title,
+  variant = "info",
+  duration = 5e3,
+  showCloseButton = true,
+  onDismiss,
+  className
+}) => {
+  const [isRemoving, setIsRemoving] = useState7(false);
+  const timerRef = useRef2();
+  const handleDismiss = () => {
+    setIsRemoving(true);
+    setTimeout(() => onDismiss?.(id), 300);
+  };
+  useEffect5(() => {
+    if (duration > 0) {
+      timerRef.current = window.setTimeout(handleDismiss, duration);
+    }
+    return () => window.clearTimeout(timerRef.current);
+  }, [duration]);
+  const variantStyles = {
+    success: "bg-green-100 border-green-500 text-green-800",
+    error: "bg-red-100 border-red-500 text-red-800",
+    warning: "bg-yellow-100 border-yellow-500 text-yellow-800",
+    info: "bg-blue-100 border-blue-500 text-blue-800"
+  };
+  const icons = {
+    success: /* @__PURE__ */ jsx19("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx19("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }),
+    error: /* @__PURE__ */ jsx19("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx19("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }),
+    warning: /* @__PURE__ */ jsx19("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx19("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
+    info: /* @__PURE__ */ jsx19("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx19("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) })
+  };
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: twMerge(
+        "flex items-start p-4 mb-3 w-full max-w-xs rounded-md shadow-md border-l-4 transform transition-all duration-300",
+        variantStyles[variant],
+        isRemoving ? "translate-x-full opacity-0" : "translate-x-0 opacity-100",
+        className
+      ),
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsx19("div", { className: `flex-shrink-0 mr-3 text-${variant}-500`, children: icons[variant] }),
+        /* @__PURE__ */ jsxs11("div", { className: "flex-1", children: [
+          title && /* @__PURE__ */ jsx19("h3", { className: "font-medium text-sm", children: title }),
+          /* @__PURE__ */ jsx19("div", { className: "text-sm", children: message })
+        ] }),
+        showCloseButton && /* @__PURE__ */ jsx19(
+          "button",
+          {
+            type: "button",
+            className: "ml-3 text-gray-400 hover:text-gray-900",
+            onClick: handleDismiss,
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsx19("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx19("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })
+          }
+        )
+      ]
+    }
+  );
+};
+var ToastContainer = ({
+  position = "top-right",
+  className
+}) => {
+  const containerRef = useRef2(null);
+  const [isMounted, setIsMounted] = useState7(false);
+  const [toasts, setToasts] = useState7([]);
+  useEffect5(() => {
+    const container = document.createElement("div");
+    container.id = "toast-root";
+    container.className = "fixed z-50 p-4";
+    document.body.appendChild(container);
+    containerRef.current = container;
+    setIsMounted(true);
+    const unsubscribe = toastService.subscribe(setToasts);
+    return () => {
+      unsubscribe();
+      container.remove();
+    };
+  }, []);
+  const positionClasses = {
+    "top-right": "top-0 right-0",
+    "top-left": "top-0 left-0",
+    "bottom-right": "bottom-0 right-0",
+    "bottom-left": "bottom-0 left-0",
+    "top-center": "top-0 left-1/2 -translate-x-1/2",
+    "bottom-center": "bottom-0 left-1/2 -translate-x-1/2"
+  };
+  if (!isMounted || !containerRef.current) return null;
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      className: twMerge(
+        "fixed z-50 p-4 flex flex-col items-end",
+        positionClasses[position],
+        className
+      ),
+      children: toasts.map((toast) => /* @__PURE__ */ jsx19(Toast, { ...toast }, toast.id))
+    }
+  );
+};
+var useToast = () => {
+  return {
+    showToast: (toast) => toastService.showToast(toast),
+    hideToast: (id) => toastService.hideToast(id),
+    clearToasts: () => toastService.clearToasts()
+  };
+};
+var ToastProvider = ({ position = "top-right", children }) => {
+  return /* @__PURE__ */ jsxs11(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsx19(ToastContainer, { position })
+  ] });
+};
+Toast.displayName = "Toast";
+ToastContainer.displayName = "ToastContainer";
 export {
   Avatar,
   Box,
@@ -3197,9 +3831,18 @@ export {
   Heading,
   Input,
   Link,
+  Loading,
+  Modal,
   MultiStep,
   RadioGroup,
+  Skeleton,
   Text,
   TextArea,
-  TextInput
+  TextInput,
+  Toast,
+  ToastContainer,
+  ToastProvider,
+  Toggle,
+  toastService,
+  useToast
 };