analytica-frontend-lib 1.0.18 → 1.0.20

package/dist/index.mjs

@@ -206,119 +206,96 @@ var Text = ({
   );
 };
 
-// src/components/Toast/Toast.tsx
-import { CheckCircle, WarningCircle, Info, X } from "phosphor-react";
+// src/components/Badge/Badge.tsx
+import { Bell } from "phosphor-react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var VARIANT_ACTION_CLASSES2 = {
   solid: {
-    warning: "bg-warning text-warning-800 border-none focus-visible:outline-none",
-    success: "bg-success text-success-800 border-none focus-visible:outline-none",
-    info: "bg-info text-info-800 border-none focus-visible:outline-none"
+    error: "bg-error text-error-700 focus-visible:outline-none",
+    warning: "bg-warning text-warning-800 focus-visible:outline-none",
+    success: "bg-success text-success-800 focus-visible:outline-none",
+    info: "bg-info text-info-800 focus-visible:outline-none",
+    muted: "bg-background-muted text-background-800 focus-visible:outline-none"
   },
   outlined: {
-    warning: "bg-warning text-warning-800 border border-warning-200 focus-visible:outline-none",
-    success: "bg-success text-success-800 border border-success-200 focus-visible:outline-none",
-    info: "bg-info text-info-800 border border-info-200 focus-visible:outline-none"
-  }
+    error: "bg-error text-error-700 border border-error-300 focus-visible:outline-none",
+    warning: "bg-warning text-warning-800 border border-warning-300 focus-visible:outline-none",
+    success: "bg-success text-success-800 border border-success-300 focus-visible:outline-none",
+    info: "bg-info text-info-800 border border-info-300 focus-visible:outline-none",
+    muted: "bg-background-muted text-background-800 border border-border-300 focus-visible:outline-none"
+  },
+  exams: {
+    exam1: "bg-exam-1 text-info-200 focus-visible:outline-none",
+    exam2: "bg-exam-2 text-typography-1 focus-visible:outline-none",
+    exam3: "bg-exam-3 text-typography-2 focus-visible:outline-none",
+    exam4: "bg-exam-4 text-success-700 focus-visible:outline-none"
+  },
+  resultStatus: {
+    negative: "bg-error text-error-800 focus-visible:outline-none",
+    positive: "bg-success text-success-800 focus-visible:outline-none"
+  },
+  notification: "text-primary"
 };
-var iconMap = {
-  success: CheckCircle,
-  info: Info,
-  warning: WarningCircle
+var SIZE_CLASSES2 = {
+  small: "text-2xs px-2 py-1",
+  medium: "text-xs px-2 py-1",
+  large: "text-sm px-2 py-1"
 };
-var Toast = ({
-  variant = "outlined",
-  action = "success",
+var SIZE_CLASSES_ICON = {
+  small: "size-3",
+  medium: "size-3.5",
+  large: "size-4"
+};
+var Badge = ({
+  children,
+  iconLeft,
+  iconRight,
+  size = "medium",
+  variant = "solid",
+  action = "error",
   className = "",
-  onClose,
-  title,
-  description,
-  position = "default",
+  notificationActive = false,
   ...props
 }) => {
-  const variantClasses = VARIANT_ACTION_CLASSES2[variant][action];
-  const positionClasses = {
-    "top-left": "fixed top-4 left-4",
-    "top-center": "fixed top-4 left-1/2 transform -translate-x-1/2",
-    "top-right": "fixed top-4 right-4",
-    "bottom-left": "fixed bottom-4 left-4",
-    "bottom-center": "fixed bottom-4 left-1/2 transform -translate-x-1/2",
-    "bottom-right": "fixed bottom-4 right-4",
-    default: ""
-  };
-  const IconAction = iconMap[action] || iconMap["success"];
-  const baseClasses = "max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group";
+  const sizeClasses = SIZE_CLASSES2[size];
+  const sizeClassesIcon = SIZE_CLASSES_ICON[size];
+  const variantActionMap = VARIANT_ACTION_CLASSES2[variant] || {};
+  const variantClasses = typeof variantActionMap === "string" ? variantActionMap : variantActionMap[action] ?? variantActionMap.muted ?? "";
+  const baseClasses = "inline-flex items-center justify-center rounded-xs font-medium gap-1 relative";
+  const baseClassesIcon = "flex items-center";
+  if (variant === "notification") {
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx5(Bell, { size: 24, className: "text-primary-950" }),
+          notificationActive && /* @__PURE__ */ jsx5(
+            "span",
+            {
+              "data-testid": "notification-dot",
+              className: "absolute top-[5px] right-[10px] block h-2 w-2 rounded-full bg-indicator-error ring-2 ring-white"
+            }
+          )
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs3(
     "div",
     {
-      role: "alert",
-      "aria-live": "assertive",
-      "aria-atomic": "true",
-      className: `${baseClasses} ${positionClasses[position]} ${variantClasses} ${className}`,
+      className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs3("div", { className: "flex flex-row items-start gap-3", children: [
-          /* @__PURE__ */ jsx5("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ jsx5(IconAction, {}) }),
-          /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-start justify-start", children: [
-            /* @__PURE__ */ jsx5("p", { className: "font-semibold text-md", children: title }),
-            description && /* @__PURE__ */ jsx5("p", { className: "text-md text-text-900", children: description })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx5(
-          "button",
-          {
-            onClick: onClose,
-            "aria-label": "Dismiss notification",
-            className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity",
-            children: /* @__PURE__ */ jsx5(X, {})
-          }
-        )
+        iconLeft && /* @__PURE__ */ jsx5("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconLeft }),
+        children,
+        iconRight && /* @__PURE__ */ jsx5("span", { className: `${baseClassesIcon} ${sizeClassesIcon}`, children: iconRight })
       ]
     }
   );
 };
 
-// src/components/Toast/utils/ToastStore.ts
-import { create } from "zustand";
-var useToastStore = create((set) => ({
-  toasts: [],
-  addToast: (toast) => {
-    const id = crypto.randomUUID();
-    set((state) => ({
-      toasts: [...state.toasts, { id, ...toast }]
-    }));
-  },
-  removeToast: (id) => {
-    set((state) => ({
-      toasts: state.toasts.filter((t) => t.id !== id)
-    }));
-  }
-}));
-
-// src/components/Toast/utils/Toaster.tsx
-import { Fragment, jsx as jsx6 } from "react/jsx-runtime";
-var Toaster = () => {
-  const toasts = useToastStore((state) => state.toasts);
-  const removeToast = useToastStore((state) => state.removeToast);
-  return /* @__PURE__ */ jsx6(Fragment, { children: toasts.map((toast) => /* @__PURE__ */ jsx6(
-    Toast,
-    {
-      title: toast.title,
-      description: toast.description,
-      variant: toast.variant,
-      action: toast.action,
-      position: toast.position,
-      onClose: () => removeToast(toast.id)
-    },
-    toast.id
-  )) });
-};
-var useToast = () => {
-  const addToast = useToastStore((state) => state.addToast);
-  const removeToast = useToastStore((state) => state.removeToast);
-  return { addToast, removeToast };
-};
-
 // src/components/CheckBox/CheckBox.tsx
 import {
   forwardRef as forwardRef2,
@@ -326,8 +303,8 @@ import {
   useId
 } from "react";
 import { Check, Minus } from "phosphor-react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var SIZE_CLASSES2 = {
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var SIZE_CLASSES3 = {
   small: {
     checkbox: "w-4 h-4",
     // 16px x 16px
@@ -414,14 +391,14 @@ var CheckBox = forwardRef2(
       onChange?.(event);
     };
     const currentState = disabled ? "disabled" : state;
-    const sizeClasses = SIZE_CLASSES2[size];
+    const sizeClasses = SIZE_CLASSES3[size];
     const checkVariant = checked || indeterminate ? "checked" : "unchecked";
     const stylingClasses = STATE_CLASSES[currentState][checkVariant];
     const borderWidthClass = state === "focused" || state === "hovered" && size === "large" ? "border-[3px]" : sizeClasses.borderWidth;
     const checkboxClasses = `${BASE_CHECKBOX_CLASSES} ${sizeClasses.checkbox} ${borderWidthClass} ${stylingClasses} ${className}`;
     const renderIcon = () => {
       if (indeterminate) {
-        return /* @__PURE__ */ jsx7(
+        return /* @__PURE__ */ jsx6(
           Minus,
           {
             size: sizeClasses.iconSize,
@@ -431,7 +408,7 @@ var CheckBox = forwardRef2(
         );
       }
       if (checked) {
-        return /* @__PURE__ */ jsx7(
+        return /* @__PURE__ */ jsx6(
           Check,
           {
             size: sizeClasses.iconSize,
@@ -448,7 +425,7 @@ var CheckBox = forwardRef2(
         {
           className: `flex flex-row items-center ${sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
           children: [
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx6(
               "input",
               {
                 ref,
@@ -461,12 +438,12 @@ var CheckBox = forwardRef2(
                 ...props
               }
             ),
-            /* @__PURE__ */ jsx7("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
-            label && /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx6("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
+            label && /* @__PURE__ */ jsx6(
               "div",
               {
                 className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
-                children: /* @__PURE__ */ jsx7(
+                children: /* @__PURE__ */ jsx6(
                   Text,
                   {
                     as: "label",
@@ -483,8 +460,8 @@ var CheckBox = forwardRef2(
           ]
         }
       ),
-      errorMessage && /* @__PURE__ */ jsx7(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
-      helperText && !errorMessage && /* @__PURE__ */ jsx7(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperText })
+      errorMessage && /* @__PURE__ */ jsx6(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
+      helperText && !errorMessage && /* @__PURE__ */ jsx6(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperText })
     ] });
   }
 );
@@ -492,23 +469,23 @@ CheckBox.displayName = "CheckBox";
 
 // src/components/Table/Table.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var Table = forwardRef3(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx8("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ jsxs5(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx7("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ jsxs5(
     "table",
     {
       ref,
       className: `w-full caption-bottom text-sm ${className ?? ""}`,
       ...props,
       children: [
-        /* @__PURE__ */ jsx8("caption", { className: "sr-only", children: "My Table" }),
+        /* @__PURE__ */ jsx7("caption", { className: "sr-only", children: "My Table" }),
         children
       ]
     }
   ) })
 );
 Table.displayName = "Table";
-var TableHeader = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var TableHeader = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
   "thead",
   {
     ref,
@@ -517,7 +494,7 @@ var TableHeader = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var TableBody = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
   "tbody",
   {
     ref,
@@ -526,7 +503,7 @@ var TableBody = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ js
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var TableFooter = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
   "tfoot",
   {
     ref,
@@ -543,7 +520,7 @@ var VARIANT_STATES_ROW = {
 };
 var TableRow = forwardRef3(
   ({ state = "default", className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx7(
       "tr",
       {
         ref,
@@ -560,7 +537,7 @@ var TableRow = forwardRef3(
   }
 );
 TableRow.displayName = "TableRow";
-var TableHead = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var TableHead = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
   "th",
   {
     ref,
@@ -569,7 +546,7 @@ var TableHead = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ js
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var TableCell = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
   "td",
   {
     ref,
@@ -578,7 +555,7 @@ var TableCell = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ js
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var TableCaption = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
   "caption",
   {
     ref,
@@ -599,7 +576,7 @@ import {
   useRef,
   useMemo
 } from "react";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var DropdownMenuContext = createContext(
   void 0
 );
@@ -615,9 +592,32 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
     [isControlled, onOpenChange]
   );
   const menuRef = useRef(null);
-  const handleEscape = (event) => {
+  const handleArrowDownOrArrowUp = (event) => {
+    const menuContent = menuRef.current?.querySelector('[role="menu"]');
+    if (menuContent) {
+      event.preventDefault();
+      const items = Array.from(
+        menuContent.querySelectorAll(
+          '[role="menuitem"]:not([aria-disabled="true"])'
+        )
+      ).filter((el) => el instanceof HTMLElement);
+      if (items.length === 0) return;
+      const focusedItem = document.activeElement;
+      const currentIndex = items.findIndex((item) => item === focusedItem);
+      let nextIndex;
+      if (event.key === "ArrowDown") {
+        nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+      } else {
+        nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
+      }
+      items[nextIndex]?.focus();
+    }
+  };
+  const handleDownkey = (event) => {
     if (event.key === "Escape") {
       setOpen(false);
+    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      handleArrowDownOrArrowUp(event);
     }
   };
   const handleClickOutside = (event) => {
@@ -628,25 +628,25 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
   useEffect(() => {
     if (currentOpen) {
       document.addEventListener("mousedown", handleClickOutside);
-      document.addEventListener("keydown", handleEscape);
+      document.addEventListener("keydown", handleDownkey);
     }
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
+      document.removeEventListener("keydown", handleDownkey);
     };
   }, [currentOpen]);
   const value = useMemo(
     () => ({ open: currentOpen, setOpen }),
     [currentOpen, setOpen]
   );
-  return /* @__PURE__ */ jsx9(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx9("div", { className: "relative", ref: menuRef, children }) });
+  return /* @__PURE__ */ jsx8(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx8("div", { className: "relative", ref: menuRef, children }) });
 };
 var DropdownMenuTrigger = forwardRef4(({ className, children, onClick, ...props }, ref) => {
   const context = useContext(DropdownMenuContext);
   if (!context)
     throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");
   const { open, setOpen } = context;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx8(
     "button",
     {
       ref,
@@ -678,7 +678,7 @@ var ALIGN_CLASSES = {
   center: "left-1/2 -translate-x-1/2",
   end: "right-0"
 };
-var MenuLabel = forwardRef4(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx9(
+var MenuLabel = forwardRef4(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx8(
   "fieldset",
   {
     ref,
@@ -713,7 +713,7 @@ var MenuContent = forwardRef4(
       const horizontal = ALIGN_CLASSES[align];
       return `absolute ${vertical} ${horizontal}`;
     };
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx8(
       "div",
       {
         ref,
@@ -765,6 +765,7 @@ var MenuItem = forwardRef4(
         role: "menuitem",
         "aria-disabled": disabled,
         className: `
+          focus-visible:bg-background-50
           relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
           ${inset && "pl-8"}
           ${sizeClasses}
@@ -787,7 +788,7 @@ var MenuItem = forwardRef4(
   }
 );
 MenuItem.displayName = "MenuItem";
-var MenuSeparator = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+var MenuSeparator = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
   "div",
   {
     ref,
@@ -799,7 +800,7 @@ MenuSeparator.displayName = "MenuSeparator";
 
 // src/components/NavButton/NavButton.tsx
 import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var NavButton = forwardRef5(
   ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
     const baseClasses = [
@@ -837,8 +838,8 @@ var NavButton = forwardRef5(
         "aria-pressed": selected,
         ...props,
         children: [
-          /* @__PURE__ */ jsx10("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
-          /* @__PURE__ */ jsx10("span", { className: "whitespace-nowrap", children: label })
+          /* @__PURE__ */ jsx9("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
+          /* @__PURE__ */ jsx9("span", { className: "whitespace-nowrap", children: label })
         ]
       }
     );
@@ -848,7 +849,7 @@ NavButton.displayName = "NavButton";
 
 // src/components/IconButton/IconButton.tsx
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var IconButton = forwardRef6(
   ({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
     const baseClasses = [
@@ -881,7 +882,7 @@ var IconButton = forwardRef6(
       ...activeClasses
     ].join(" ");
     const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx10(
       "button",
       {
         ref,
@@ -891,13 +892,127 @@ var IconButton = forwardRef6(
         "aria-pressed": active,
         "aria-label": ariaLabel,
         ...props,
-        children: /* @__PURE__ */ jsx11("span", { className: "flex items-center justify-center", children: icon })
+        children: /* @__PURE__ */ jsx10("span", { className: "flex items-center justify-center", children: icon })
       }
     );
   }
 );
 IconButton.displayName = "IconButton";
+
+// src/components/Toast/Toast.tsx
+import { CheckCircle, WarningCircle, Info, X } from "phosphor-react";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var VARIANT_ACTION_CLASSES3 = {
+  solid: {
+    warning: "bg-warning text-warning-800 border-none focus-visible:outline-none",
+    success: "bg-success text-success-800 border-none focus-visible:outline-none",
+    info: "bg-info text-info-800 border-none focus-visible:outline-none"
+  },
+  outlined: {
+    warning: "bg-warning text-warning-800 border border-warning-200 focus-visible:outline-none",
+    success: "bg-success text-success-800 border border-success-200 focus-visible:outline-none",
+    info: "bg-info text-info-800 border border-info-200 focus-visible:outline-none"
+  }
+};
+var iconMap = {
+  success: CheckCircle,
+  info: Info,
+  warning: WarningCircle
+};
+var Toast = ({
+  variant = "outlined",
+  action = "success",
+  className = "",
+  onClose,
+  title,
+  description,
+  position = "default",
+  ...props
+}) => {
+  const variantClasses = VARIANT_ACTION_CLASSES3[variant][action];
+  const positionClasses = {
+    "top-left": "fixed top-4 left-4",
+    "top-center": "fixed top-4 left-1/2 transform -translate-x-1/2",
+    "top-right": "fixed top-4 right-4",
+    "bottom-left": "fixed bottom-4 left-4",
+    "bottom-center": "fixed bottom-4 left-1/2 transform -translate-x-1/2",
+    "bottom-right": "fixed bottom-4 right-4",
+    default: ""
+  };
+  const IconAction = iconMap[action] || iconMap["success"];
+  const baseClasses = "max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group";
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-atomic": "true",
+      className: `${baseClasses} ${positionClasses[position]} ${variantClasses} ${className}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs8("div", { className: "flex flex-row items-start gap-3", children: [
+          /* @__PURE__ */ jsx11("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ jsx11(IconAction, {}) }),
+          /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-start justify-start", children: [
+            /* @__PURE__ */ jsx11("p", { className: "font-semibold text-md", children: title }),
+            description && /* @__PURE__ */ jsx11("p", { className: "text-md text-text-900", children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx11(
+          "button",
+          {
+            onClick: onClose,
+            "aria-label": "Dismiss notification",
+            className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity",
+            children: /* @__PURE__ */ jsx11(X, {})
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/Toast/utils/ToastStore.ts
+import { create } from "zustand";
+var useToastStore = create((set) => ({
+  toasts: [],
+  addToast: (toast) => {
+    const id = crypto.randomUUID();
+    set((state) => ({
+      toasts: [...state.toasts, { id, ...toast }]
+    }));
+  },
+  removeToast: (id) => {
+    set((state) => ({
+      toasts: state.toasts.filter((t) => t.id !== id)
+    }));
+  }
+}));
+
+// src/components/Toast/utils/Toaster.tsx
+import { Fragment, jsx as jsx12 } from "react/jsx-runtime";
+var Toaster = () => {
+  const toasts = useToastStore((state) => state.toasts);
+  const removeToast = useToastStore((state) => state.removeToast);
+  return /* @__PURE__ */ jsx12(Fragment, { children: toasts.map((toast) => /* @__PURE__ */ jsx12(
+    Toast,
+    {
+      title: toast.title,
+      description: toast.description,
+      variant: toast.variant,
+      action: toast.action,
+      position: toast.position,
+      onClose: () => removeToast(toast.id)
+    },
+    toast.id
+  )) });
+};
+var useToast = () => {
+  const addToast = useToastStore((state) => state.addToast);
+  const removeToast = useToastStore((state) => state.removeToast);
+  return { addToast, removeToast };
+};
 export {
+  Badge,
   Button,
   CheckBox,
   DropdownMenu,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "analytica-frontend-lib",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "description": "Repositório público dos componentes utilizados nas plataformas da Analytica Ensino",
   "main": "dist/index.cjs",
   "module": "./dist/index.js",