@koaris/bloom-ui 1.3.2 → 1.3.4

package/dist/index.cjs

@@ -400,7 +400,7 @@ var fractionRegex = /^\d+\/\d+$/;
 var stringLengths = /* @__PURE__ */ new Set(["px", "full", "screen"]);
 var tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
 var lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/;
-var colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/;
+var colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/;
 var shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
 var imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
 var isLength = (value) => isNumber(value) || stringLengths.has(value) || fractionRegex.test(value);
@@ -2543,7 +2543,7 @@ var Card = ({
         direction === "col" ? "flex-col" : "flex-row",
         cardSizeClasses[size],
         hoverable && !disabled && "hover:shadow-md hover:shadow-neutral-500",
-        // selected && 'border-2 border-orange-500',
+        selected && "border-2 border-orange-500",
         disabled && "opacity-50 cursor-not-allowed",
         onClick && !disabled && "cursor-pointer",
         className
@@ -2564,7 +2564,7 @@ var Card = ({
           "div",
           {
             className: twMerge(
-              "flex-shrink-0",
+              "shrink-0",
               direction === "row" ? "mr-4" : "mb-4",
               size === "small" && direction === "row" ? "mr-3" : "",
               size === "small" && direction === "col" ? "mb-3" : ""
@@ -2576,7 +2576,7 @@ var Card = ({
                 alt: imageAlt,
                 width: imageSize,
                 height: "auto",
-                className: "rounded object-cover"
+                className: "rounded-sm object-cover"
               }
             )
           }
@@ -2590,14 +2590,17 @@ var Card = ({
               direction === "row" && "flex-1"
             ),
             children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-md text-left font-bold font-default leading-tight mb-1", children: title }),
-              content && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: twMerge(
-                "text-sm text-left"
-                // direction === 'col' ? 'text-left' : 'text-left'
-              ), children: content }),
-              footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: twMerge(
-                "pt-2 text-sm border-t border-neutral-300 text-left"
-              ), children: footer })
+              title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-md text-left font-bold leading-tight mb-1", children: title }),
+              content && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm text-left", children: content }),
+              footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: twMerge(
+                    "pt-2 text-sm border-t border-neutral-300 text-left"
+                  ),
+                  children: footer
+                }
+              )
             ]
           }
         )
@@ -2631,8 +2634,8 @@ var Button = (0, import_react.forwardRef)(
       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",
+      primary: "bg-orange-500 text-neutral-100 hover:bg-orange-700 hover:text-white focus:ring-orange-500",
+      secondary: "bg-neutral text-orange-500 border border-orange-500 hover:text-white 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"
@@ -2646,8 +2649,8 @@ var Button = (0, import_react.forwardRef)(
       {
         ref,
         className: twMerge(
-          "relative font-medium rounded-sm transition-all duration-200",
-          "focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-md focus:ring-opacity-50",
+          "relative font-medium rounded-xs transition-all duration-200 hover:cursor-pointer",
+          "focus:outline-hidden focus:ring-2 focus:ring-offset-2 rounded-md focus:ring-opacity-50",
           variantClasses[variant],
           sizeClasses[size],
           fullWidth ? "w-full" : "max-w-[180px]",
@@ -2708,7 +2711,6 @@ var Link = ({
   disabled,
   url,
   newPage = true,
-  onClick,
   ...rest
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -2792,7 +2794,7 @@ var Checkbox = ({ className, required, disabled }) => {
     {
       className: twMerge(
         className,
-        "relative  border-2 w-5 h-5 flex items-center justify-center rounded-sm hover:border-orange-500 hover:cursor-pointer",
+        "relative  border-2 w-5 h-5 flex items-center justify-center rounded-xs hover:border-orange-500 hover:cursor-pointer",
         selected ? "bg-orange-500 border-orange-500" : "border-neutral-500 hover:shadow-md hover:shadow-orange-500",
         disabled === true && "opacity-50 cursor-not-allowed"
       ),
@@ -2825,11 +2827,11 @@ var passwordMask = {
   password: [/^(?=.*[!@#$%^&*])/, /(?=.*[0-9])/, /.{8,}$/]
 };
 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" }
+  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" }
 };
 var Input = (0, import_react4.forwardRef)(
   ({
@@ -2872,21 +2874,29 @@ var Input = (0, import_react4.forwardRef)(
         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");
+          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");
+          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");
+            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)
@@ -2897,7 +2907,8 @@ var Input = (0, import_react4.forwardRef)(
         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");
+          if (result.length > 5)
+            result = result.replace(/(\d{5})(\d+)/, "$1-$2");
           break;
         case "phone":
           result = applyPhoneMask(value2, countryCode);
@@ -2912,7 +2923,6 @@ var Input = (0, import_react4.forwardRef)(
     };
     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);
@@ -2975,7 +2985,9 @@ var Input = (0, import_react4.forwardRef)(
           }
           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);
+          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;
@@ -3008,14 +3020,6 @@ var Input = (0, import_react4.forwardRef)(
       }
       externalOnChange?.(newEvent);
     };
-    (0, import_react4.useEffect)(() => {
-      setInputValue(value || "");
-      if (value && type === "password") {
-        checkPassword(value);
-      } else if (value) {
-        validateInput(value);
-      }
-    }, [value, type]);
     const checkPassword = (value2) => {
       const validationResult = {
         hasEightCharacters: value2?.match(passwordMask.password[2]) !== null,
@@ -3027,6 +3031,18 @@ var Input = (0, import_react4.forwardRef)(
         validationResult.hasEightCharacters && validationResult.hasSpecialCharacters && validationResult.hasNumber
       );
     };
+    const validateInputRef = (0, import_react4.useRef)(validateInput);
+    const checkPasswordRef = (0, import_react4.useRef)(checkPassword);
+    validateInputRef.current = validateInput;
+    checkPasswordRef.current = checkPassword;
+    (0, import_react4.useEffect)(() => {
+      setInputValue(value || "");
+      if (value && type === "password") {
+        checkPasswordRef.current(value);
+      } else if (value) {
+        validateInputRef.current(value);
+      }
+    }, [value, type]);
     const getInputType = () => {
       switch (type) {
         case "password":
@@ -3047,16 +3063,16 @@ var Input = (0, import_react4.forwardRef)(
     };
     const renderPhonePrefix = () => {
       if (type !== "phone") return null;
-      const format = phoneFormats[countryCode] || phoneFormats["BR"];
+      const format = phoneFormats[countryCode] || phoneFormats.BR;
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "absolute left-3 top-1.5 text-gray-500", children: format.countryCode });
     };
     const inputClasses = twMerge(
-      "flex items-center justify-center border-2 border-gray-400 rounded-sm w-full px-3 py-1 text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none transition-all duration-200",
+      "flex items-center justify-center border-2 border-gray-400 rounded-xs w-full px-3 py-1 text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-hidden 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 || !isValid && inputValue != "") && "border-2 border-red-900",
+      (error || !isValid && inputValue !== "") && "border-2 border-red-900",
       type === "phone" && "pl-10"
     );
     const renderPasswordValidation = () => {
@@ -3112,7 +3128,15 @@ var Input = (0, import_react4.forwardRef)(
         )
       ] }),
       renderPasswordValidation(),
-      error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { id: `${id}-error`, className: "mt-1 text-sm text-red-900", role: "alert", children: errorMessage || "Invalid field." }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "p",
+        {
+          id: `${id}-error`,
+          className: "mt-1 text-sm text-red-900",
+          role: "alert",
+          children: errorMessage || "Invalid field."
+        }
+      ),
       helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { id: `${id}-helper`, className: "mt-1 text-sm text-gray-500", children: helperText })
     ] });
   }
@@ -3153,8 +3177,8 @@ var TextInput = (0, import_react5.forwardRef)(
       "div",
       {
         className: twMerge(
-          " py-2 px-4 border-2 rounded-sm box-border flex items-baseline bg-neutral-200",
-          "hover:shadow-md hover:shadow-neutral-500 focus:outline-none",
+          " py-2 px-4 border-2 rounded-xs box-border flex items-baseline bg-neutral-200",
+          "hover:shadow-md hover:shadow-neutral-500 focus:outline-hidden",
           variant === "secondary" && "bg-neutral-800 border-neutral-800 ",
           selected === true && "border-2 border-orange-500",
           disabled === true && "opacity-50 cursor-not-allowed",
@@ -3176,8 +3200,8 @@ var TextInput = (0, import_react5.forwardRef)(
               disabled,
               ref,
               className: twMerge(
-                "flex items-center justify-center bg-neutral-200 rounded-sm w-full px-1 py-2 text-md",
-                "focus:outline-none text-neutral-800",
+                "flex items-center justify-center bg-neutral-200 rounded-xs w-full px-1 py-2 text-md",
+                "focus:outline-hidden text-neutral-800",
                 disabled === true && "cursor-not-allowed",
                 variant === "secondary" && "bg-neutral-800 text-neutral",
                 className
@@ -3262,7 +3286,7 @@ var TextArea = (0, import_react6.forwardRef)(
           JSON.parse(value2);
           setIsValid(true);
           return true;
-        } catch (e) {
+        } catch {
           setIsValid(false);
           return false;
         }
@@ -3289,17 +3313,19 @@ var TextArea = (0, import_react6.forwardRef)(
         externalOnChange(event);
       }
     };
+    const validateInputRef = (0, import_react6.useRef)(validateInput);
+    validateInputRef.current = validateInput;
     (0, import_react6.useEffect)(() => {
       setInputValue(value || "");
       if (value) {
-        validateInput(value);
+        validateInputRef.current(value);
       }
     }, [value, required, maxLength]);
     const characterCount = inputValue?.length || 0;
     const hasMaxLength = maxLength !== void 0 && maxLength > 0;
     const isOverLimit = hasMaxLength && characterCount > maxLength;
     const textareaClasses = twMerge(
-      "w-full border-2 rounded-sm focus:outline-none transition-all duration-200",
+      "w-full border-2 rounded-xs focus:outline-hidden transition-all duration-200",
       "hover:shadow-md hover:shadow-neutral-500",
       sizeStyles[size],
       variantStyles[variant],
@@ -3524,54 +3550,56 @@ var Heading = ({
 // src/components/Box/index.tsx
 var import_react7 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var Box = (0, import_react7.forwardRef)(({
-  className,
-  children,
-  tag = "div",
-  variant = "secondary",
-  size = "md",
-  elevated = false,
-  hasBorder = true,
-  isInteractive = false,
-  fullWidth = false,
-  ...props
-}, ref) => {
-  const Tag = tag;
-  const variantStyles = {
-    primary: "text-neutral-800 bg-neutral-200 border-neutral-300",
-    secondary: "text-neutral-200 bg-neutral-600 border-neutral-800",
-    ghost: "text-neutral-800 bg-transparent border-transparent",
-    outline: "text-neutral-800 bg-transparent border-neutral-300"
-  };
-  const sizeStyles = {
-    sm: "p-3 text-sm",
-    md: "p-6 text-base",
-    lg: "p-8 text-lg",
-    xl: "p-10 text-xl"
-  };
-  const elevationStyles = elevated ? "shadow-md hover:shadow-lg transition-shadow duration-200" : "";
-  const borderStyles = hasBorder ? "border" : "border-0";
-  const interactiveStyles = isInteractive ? "cursor-pointer hover:brightness-105 active:brightness-95 transition-all duration-200" : "";
-  const widthStyles = fullWidth ? "w-full" : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    Tag,
-    {
-      ref,
-      className: twMerge(
-        "rounded-md",
-        borderStyles,
-        sizeStyles[size],
-        variantStyles[variant],
-        elevationStyles,
-        interactiveStyles,
-        widthStyles,
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-});
+var Box = (0, import_react7.forwardRef)(
+  ({
+    className,
+    children,
+    tag = "div",
+    variant = "secondary",
+    size = "md",
+    elevated = false,
+    hasBorder = true,
+    isInteractive = false,
+    fullWidth = false,
+    ...props
+  }, ref) => {
+    const Tag = tag;
+    const variantStyles = {
+      primary: "text-neutral-800 bg-neutral-200 border-neutral-300",
+      secondary: "text-neutral-200 bg-neutral-600 border-neutral-800",
+      ghost: "text-neutral-800 bg-transparent border-transparent",
+      outline: "text-neutral-800 bg-transparent border-neutral-300"
+    };
+    const sizeStyles = {
+      sm: "p-3 text-sm",
+      md: "p-6 text-base",
+      lg: "p-8 text-lg",
+      xl: "p-10 text-xl"
+    };
+    const elevationStyles = elevated ? "shadow-md hover:shadow-lg transition-shadow duration-200" : "";
+    const borderStyles = hasBorder ? "border" : "border-0";
+    const interactiveStyles = isInteractive ? "cursor-pointer hover:brightness-105 active:brightness-95 transition-all duration-200" : "";
+    const widthStyles = fullWidth ? "w-full" : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      Tag,
+      {
+        ref,
+        className: twMerge(
+          "rounded-md",
+          borderStyles,
+          sizeStyles[size],
+          variantStyles[variant],
+          elevationStyles,
+          interactiveStyles,
+          widthStyles,
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
 Box.displayName = "Box";
 
 // src/components/Form/index.tsx
@@ -3602,7 +3630,7 @@ var Form = ({
 // src/components/Avatar/index.tsx
 var import_fa = require("react-icons/fa");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var Avatar = ({ className, ...rest }) => {
+var Avatar = ({ className, src, alt = "", ...rest }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
@@ -3612,7 +3640,15 @@ var Avatar = ({ className, ...rest }) => {
             bg-neutral-600 justify-center`,
         className
       ),
-      children: rest.src ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { className: "w-full h-full object-cover rounded-full", ...rest }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_fa.FaUser, { color: "#FFFFFF", size: 24 })
+      children: src ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "img",
+        {
+          className: "w-full h-full object-cover rounded-full",
+          src,
+          alt,
+          ...rest
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_fa.FaUser, { color: "#FFFFFF", size: 24 })
     }
   );
 };
@@ -3678,52 +3714,50 @@ var Toggle = ({
       }
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-    "div",
-    {
-      className: twMerge("flex items-center gap-3", className),
-      ...rest,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "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(`
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: twMerge("flex items-center gap-3", className), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "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
+          focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
         `),
-            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: `
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "span",
+          {
+            className: `
           inline-block transform rounded-full bg-white shadow-md
           ${selectedSize.knob}
           ${selectedSize.translate}
           transition-transform duration-300 ease-in-out
-        ` })
-          }
-        ),
-        !hideLabel && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "label",
-          {
-            id: `${toggleId}-label`,
-            htmlFor: toggleId,
-            className: `text-sm font-medium text-gray-700 dark:text-gray-300 ${disabled ? "opacity-50" : ""}`,
-            children: label
+        `
           }
         )
-      ]
-    }
-  );
+      }
+    ),
+    !hideLabel && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "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
@@ -3831,11 +3865,17 @@ var Loading = ({
             ]
           }
         ),
-        withText && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: twMerge(
-          "ml-3",
-          textSizeClasses[size],
-          colorClasses[color]
-        ), children: text }),
+        withText && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "span",
+          {
+            className: twMerge(
+              "ml-3",
+              textSizeClasses[size],
+              colorClasses[color]
+            ),
+            children: text
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "sr-only", children: "Loading" })
       ]
     }
@@ -3925,8 +3965,24 @@ var Modal = ({
                   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__ */ (0, import_jsx_runtime18.jsx)("svg", { className: "h-5 w-5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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" }) })
+                  className: "p-1 text-gray-400 hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 rounded-full",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    "svg",
+                    {
+                      className: "h-5 w-5",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      viewBox: "0 0 20 20",
+                      fill: "currentColor",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                        "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"
+                        }
+                      )
+                    }
+                  )
                 }
               )
             ] }),
@@ -3942,17 +3998,11 @@ var Modal = ({
 // src/components/Toast/index.tsx
 var import_react9 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var ToastService = class _ToastService {
+var ToastService = class {
   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 () => {
@@ -3984,7 +4034,7 @@ var ToastService = class _ToastService {
     return [...this.toasts];
   }
 };
-var toastService = ToastService.getInstance();
+var toastService = new ToastService();
 var Toast = ({
   id,
   message,
@@ -3997,16 +4047,21 @@ var Toast = ({
 }) => {
   const [isRemoving, setIsRemoving] = (0, import_react9.useState)(false);
   const timerRef = (0, import_react9.useRef)();
+  const onDismissRef = (0, import_react9.useRef)(onDismiss);
+  onDismissRef.current = onDismiss;
   const handleDismiss = () => {
     setIsRemoving(true);
-    setTimeout(() => onDismiss?.(id), 300);
+    setTimeout(() => onDismissRef.current?.(id), 300);
   };
   (0, import_react9.useEffect)(() => {
     if (duration > 0) {
-      timerRef.current = window.setTimeout(handleDismiss, duration);
+      timerRef.current = window.setTimeout(() => {
+        setIsRemoving(true);
+        setTimeout(() => onDismissRef.current?.(id), 300);
+      }, duration);
     }
     return () => window.clearTimeout(timerRef.current);
-  }, [duration]);
+  }, [duration, id]);
   const variantStyles = {
     success: "bg-green-100 border-green-500 text-green-800",
     error: "bg-red-100 border-red-500 text-red-800",
@@ -4014,10 +4069,38 @@ var Toast = ({
     info: "bg-blue-100 border-blue-500 text-blue-800"
   };
   const icons = {
-    success: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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" }) })
+    success: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "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__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "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__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "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__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "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__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
@@ -4030,7 +4113,7 @@ var Toast = ({
       ),
       role: "alert",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: `flex-shrink-0 mr-3 text-${variant}-500`, children: icons[variant] }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: `shrink-0 mr-3 text-${variant}-500`, children: icons[variant] }),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex-1", children: [
           title && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "font-medium text-sm", children: title }),
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-sm", children: message })
@@ -4042,7 +4125,24 @@ var Toast = ({
             className: "ml-3 text-gray-400 hover:text-gray-900",
             onClick: handleDismiss,
             "aria-label": "Close",
-            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              "svg",
+              {
+                className: "w-4 h-4",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: "2",
+                    d: "M6 18L18 6M6 6l12 12"
+                  }
+                )
+              }
+            )
           }
         )
       ]