analytica-frontend-lib 1.0.17 → 1.0.18

package/dist/index.css

@@ -78,22 +78,32 @@
     --color-background-50: #f6f6f6;
     --color-background-100: #f2f1f1;
     --color-background-200: #dcdbdb;
+    --color-background-500: #8e8e8e;
     --color-background-muted: #f7f8f7;
     --color-border-50: #f3f3f3;
     --color-border-100: #e6e6e6;
     --color-border-200: #dddcdb;
     --color-border-400: #a5a3a3;
     --color-border-500: #8c8d8d;
+    --color-success: #e4fff4;
+    --color-success-200: #84d3a2;
     --color-success-300: #66b584;
     --color-success-400: #489766;
     --color-success-500: #348352;
     --color-success-600: #2a7948;
     --color-success-700: #206f3e;
+    --color-success-800: #166534;
     --color-error-300: #f87171;
     --color-error-400: #ef4444;
     --color-error-500: #e63535;
     --color-error-600: #dc2626;
     --color-error-700: #b91c1c;
+    --color-warning: #fff9f5;
+    --color-warning-200: #fecdaa;
+    --color-warning-800: #824417;
+    --color-info: #ecf8fe;
+    --color-info-200: #7ccff8;
+    --color-info-800: #075a83;
     --color-indicator-primary: #373737;
     --color-indicator-info: #5399ec;
     --color-indicator-error: #b91c1c;
@@ -324,12 +334,21 @@
   .relative {
     position: relative;
   }
+  .top-4 {
+    top: calc(var(--spacing) * 4);
+  }
   .top-full {
     top: 100%;
   }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
+  .right-4 {
+    right: calc(var(--spacing) * 4);
+  }
+  .bottom-4 {
+    bottom: calc(var(--spacing) * 4);
+  }
   .bottom-full {
     bottom: 100%;
   }
@@ -339,6 +358,9 @@
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
+  .left-4 {
+    left: calc(var(--spacing) * 4);
+  }
   .z-50 {
     z-index: 50;
   }
@@ -369,6 +391,9 @@
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
   .mt-1\.5 {
     margin-top: calc(var(--spacing) * 1.5);
   }
@@ -453,6 +478,9 @@
   .w-full {
     width: 100%;
   }
+  .max-w-\[390px\] {
+    max-width: 390px;
+  }
   .min-w-\[210px\] {
     min-width: 210px;
   }
@@ -490,6 +518,12 @@
   .items-end {
     align-items: flex-end;
   }
+  .items-start {
+    align-items: flex-start;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
   .justify-center {
     justify-content: center;
   }
@@ -562,6 +596,10 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 2px;
   }
+  .border-none {
+    --tw-border-style: none;
+    border-style: none;
+  }
   .border-background-200 {
     border-color: var(--color-background-200);
   }
@@ -598,6 +636,9 @@
   .border-indicator-primary {
     border-color: var(--color-indicator-primary);
   }
+  .border-info-200 {
+    border-color: var(--color-info-200);
+  }
   .border-primary-600 {
     border-color: var(--color-primary-600);
   }
@@ -607,12 +648,18 @@
   .border-primary-950 {
     border-color: var(--color-primary-950);
   }
+  .border-success-200 {
+    border-color: var(--color-success-200);
+  }
   .border-success-300 {
     border-color: var(--color-success-300);
   }
   .border-success-500 {
     border-color: var(--color-success-500);
   }
+  .border-warning-200 {
+    border-color: var(--color-warning-200);
+  }
   .\!bg-primary-50 {
     background-color: var(--color-primary-50) !important;
   }
@@ -631,6 +678,9 @@
   .bg-error-500 {
     background-color: var(--color-error-500);
   }
+  .bg-info {
+    background-color: var(--color-info);
+  }
   .bg-primary-50 {
     background-color: var(--color-primary-50);
   }
@@ -643,12 +693,18 @@
   .bg-primary-950 {
     background-color: var(--color-primary-950);
   }
+  .bg-success {
+    background-color: var(--color-success);
+  }
   .bg-success-500 {
     background-color: var(--color-success-500);
   }
   .bg-transparent {
     background-color: transparent;
   }
+  .bg-warning {
+    background-color: var(--color-warning);
+  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -802,18 +858,27 @@
   .\!text-primary-950 {
     color: var(--color-primary-950) !important;
   }
+  .text-background-500 {
+    color: var(--color-background-500);
+  }
   .text-error-500 {
     color: var(--color-error-500);
   }
   .text-error-600 {
     color: var(--color-error-600);
   }
+  .text-info-800 {
+    color: var(--color-info-800);
+  }
   .text-primary-950 {
     color: var(--color-primary-950);
   }
   .text-success-500 {
     color: var(--color-success-500);
   }
+  .text-success-800 {
+    color: var(--color-success-800);
+  }
   .text-text {
     color: var(--color-text);
   }
@@ -838,18 +903,33 @@
   .text-text-950 {
     color: var(--color-text-950);
   }
+  .text-warning-800 {
+    color: var(--color-warning-800);
+  }
   .capitalize {
     text-transform: capitalize;
   }
   .italic {
     font-style: italic;
   }
+  .opacity-0 {
+    opacity: 0%;
+  }
   .opacity-40 {
     opacity: 40%;
   }
   .opacity-50 {
     opacity: 50%;
   }
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
   .shadow-md {
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow:
@@ -923,6 +1003,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
@@ -936,6 +1021,13 @@
     -moz-user-select: none;
     user-select: none;
   }
+  .group-hover\:opacity-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .hover\:border-border-500 {
     &:hover {
       @media (hover: hover) {

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef, InputHTMLAttributes, HTMLAttributes, TdHTMLAttributes } from 'react';
+import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef, HTMLAttributes, InputHTMLAttributes, TdHTMLAttributes } from 'react';
+import * as zustand from 'zustand';
 
 /**
  * Button component props interface
@@ -184,6 +185,41 @@ type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
  */
 declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
 
+type ToastPosition$1 = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'default';
+type ToastProps = {
+    title: string;
+    description?: string;
+    onClose: () => void;
+    /** Visual variant of the badge */
+    variant?: 'solid' | 'outlined';
+    /** Action type of the badge  */
+    action?: 'warning' | 'success' | 'info';
+    position?: ToastPosition$1;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Toast: ({ variant, action, className, onClose, title, description, position, ...props }: ToastProps) => react_jsx_runtime.JSX.Element;
+
+type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'default';
+type ToastData = {
+    id: string;
+    title: string;
+    description?: string;
+    variant?: 'solid' | 'outlined';
+    action?: 'warning' | 'success' | 'info';
+    position?: ToastPosition;
+};
+type ToastStore = {
+    toasts: ToastData[];
+    addToast: (toast: Omit<ToastData, 'id'>) => void;
+    removeToast: (id: string) => void;
+};
+declare const useToastStore: zustand.UseBoundStore<zustand.StoreApi<ToastStore>>;
+
+declare const Toaster: () => react_jsx_runtime.JSX.Element;
+declare const useToast: () => {
+    addToast: (toast: Omit<ToastData, "id">) => void;
+    removeToast: (id: string) => void;
+};
+
 /**
  * CheckBox size variants
  */
@@ -418,4 +454,4 @@ declare const IconButton: react.ForwardRefExoticComponent<{
     className?: string;
 } & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
 
-export { Button, CheckBox, type CheckBoxProps, DropdownMenu, DropdownMenuTrigger, IconButton, type IconButtonProps, IconRoundedButton, MenuContent, MenuItem, MenuLabel, MenuSeparator, NavButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text };
+export { Button, CheckBox, type CheckBoxProps, DropdownMenu, DropdownMenuTrigger, IconButton, type IconButtonProps, IconRoundedButton, MenuContent, MenuItem, MenuLabel, MenuSeparator, NavButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text, Toast, type ToastData, Toaster, useToast, useToastStore };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef, InputHTMLAttributes, HTMLAttributes, TdHTMLAttributes } from 'react';
+import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef, HTMLAttributes, InputHTMLAttributes, TdHTMLAttributes } from 'react';
+import * as zustand from 'zustand';
 
 /**
  * Button component props interface
@@ -184,6 +185,41 @@ type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
  */
 declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
 
+type ToastPosition$1 = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'default';
+type ToastProps = {
+    title: string;
+    description?: string;
+    onClose: () => void;
+    /** Visual variant of the badge */
+    variant?: 'solid' | 'outlined';
+    /** Action type of the badge  */
+    action?: 'warning' | 'success' | 'info';
+    position?: ToastPosition$1;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Toast: ({ variant, action, className, onClose, title, description, position, ...props }: ToastProps) => react_jsx_runtime.JSX.Element;
+
+type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'default';
+type ToastData = {
+    id: string;
+    title: string;
+    description?: string;
+    variant?: 'solid' | 'outlined';
+    action?: 'warning' | 'success' | 'info';
+    position?: ToastPosition;
+};
+type ToastStore = {
+    toasts: ToastData[];
+    addToast: (toast: Omit<ToastData, 'id'>) => void;
+    removeToast: (id: string) => void;
+};
+declare const useToastStore: zustand.UseBoundStore<zustand.StoreApi<ToastStore>>;
+
+declare const Toaster: () => react_jsx_runtime.JSX.Element;
+declare const useToast: () => {
+    addToast: (toast: Omit<ToastData, "id">) => void;
+    removeToast: (id: string) => void;
+};
+
 /**
  * CheckBox size variants
  */
@@ -418,4 +454,4 @@ declare const IconButton: react.ForwardRefExoticComponent<{
     className?: string;
 } & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
 
-export { Button, CheckBox, type CheckBoxProps, DropdownMenu, DropdownMenuTrigger, IconButton, type IconButtonProps, IconRoundedButton, MenuContent, MenuItem, MenuLabel, MenuSeparator, NavButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text };
+export { Button, CheckBox, type CheckBoxProps, DropdownMenu, DropdownMenuTrigger, IconButton, type IconButtonProps, IconRoundedButton, MenuContent, MenuItem, MenuLabel, MenuSeparator, NavButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text, Toast, type ToastData, Toaster, useToast, useToastStore };

package/dist/index.js

@@ -40,7 +40,11 @@ __export(index_exports, {
   TableHead: () => TableHead,
   TableHeader: () => TableHeader,
   TableRow: () => TableRow,
-  Text: () => Text
+  Text: () => Text,
+  Toast: () => Toast,
+  Toaster: () => Toaster,
+  useToast: () => useToast,
+  useToastStore: () => useToastStore
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -252,10 +256,123 @@ var Text = ({
   );
 };
 
-// src/components/CheckBox/CheckBox.tsx
-var import_react2 = require("react");
+// src/components/Toast/Toast.tsx
 var import_phosphor_react = require("phosphor-react");
 var import_jsx_runtime5 = require("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"
+  },
+  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: import_phosphor_react.CheckCircle,
+  info: import_phosphor_react.Info,
+  warning: import_phosphor_react.WarningCircle
+};
+var Toast = ({
+  variant = "outlined",
+  action = "success",
+  className = "",
+  onClose,
+  title,
+  description,
+  position = "default",
+  ...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";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-atomic": "true",
+      className: `${baseClasses} ${positionClasses[position]} ${variantClasses} ${className}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-row items-start gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconAction, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col items-start justify-start", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "font-semibold text-md", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-md text-text-900", children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            onClick: onClose,
+            "aria-label": "Dismiss notification",
+            className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity",
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react.X, {})
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/Toast/utils/ToastStore.ts
+var import_zustand = require("zustand");
+var useToastStore = (0, import_zustand.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
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Toaster = () => {
+  const toasts = useToastStore((state) => state.toasts);
+  const removeToast = useToastStore((state) => state.removeToast);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    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
+var import_react2 = require("react");
+var import_phosphor_react2 = require("phosphor-react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var SIZE_CLASSES2 = {
   small: {
     checkbox: "w-4 h-4",
@@ -350,8 +467,8 @@ var CheckBox = (0, import_react2.forwardRef)(
     const checkboxClasses = `${BASE_CHECKBOX_CLASSES} ${sizeClasses.checkbox} ${borderWidthClass} ${stylingClasses} ${className}`;
     const renderIcon = () => {
       if (indeterminate) {
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_phosphor_react.Minus,
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_phosphor_react2.Minus,
           {
             size: sizeClasses.iconSize,
             weight: "bold",
@@ -360,8 +477,8 @@ var CheckBox = (0, import_react2.forwardRef)(
         );
       }
       if (checked) {
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_phosphor_react.Check,
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_phosphor_react2.Check,
           {
             size: sizeClasses.iconSize,
             weight: "bold",
@@ -371,13 +488,13 @@ var CheckBox = (0, import_react2.forwardRef)(
       }
       return null;
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         "div",
         {
           className: `flex flex-row items-center ${sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "input",
               {
                 ref,
@@ -390,12 +507,12 @@ var CheckBox = (0, import_react2.forwardRef)(
                 ...props
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
-            label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
+            label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "div",
               {
                 className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   Text,
                   {
                     as: "label",
@@ -412,8 +529,8 @@ var CheckBox = (0, import_react2.forwardRef)(
           ]
         }
       ),
-      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
-      helperText && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperText })
+      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
+      helperText && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperText })
     ] });
   }
 );
@@ -421,23 +538,23 @@ CheckBox.displayName = "CheckBox";
 
 // src/components/Table/Table.tsx
 var import_react3 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var Table = (0, import_react3.forwardRef)(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "table",
     {
       ref,
       className: `w-full caption-bottom text-sm ${className ?? ""}`,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("caption", { className: "sr-only", children: "My Table" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("caption", { className: "sr-only", children: "My Table" }),
         children
       ]
     }
   ) })
 );
 Table.displayName = "Table";
-var TableHeader = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+var TableHeader = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
   "thead",
   {
     ref,
@@ -446,7 +563,7 @@ var TableHeader = (0, import_react3.forwardRef)(({ className, ...props }, ref) =
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+var TableBody = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
   "tbody",
   {
     ref,
@@ -455,7 +572,7 @@ var TableBody = (0, import_react3.forwardRef)(({ className, ...props }, ref) =>
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+var TableFooter = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
   "tfoot",
   {
     ref,
@@ -472,7 +589,7 @@ var VARIANT_STATES_ROW = {
 };
 var TableRow = (0, import_react3.forwardRef)(
   ({ state = "default", className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "tr",
       {
         ref,
@@ -489,7 +606,7 @@ var TableRow = (0, import_react3.forwardRef)(
   }
 );
 TableRow.displayName = "TableRow";
-var TableHead = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+var TableHead = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
   "th",
   {
     ref,
@@ -498,7 +615,7 @@ var TableHead = (0, import_react3.forwardRef)(({ className, ...props }, ref) =>
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+var TableCell = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
   "td",
   {
     ref,
@@ -507,7 +624,7 @@ var TableCell = (0, import_react3.forwardRef)(({ className, ...props }, ref) =>
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+var TableCaption = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
   "caption",
   {
     ref,
@@ -519,7 +636,7 @@ TableCaption.displayName = "TableCaption";
 
 // src/components/DropdownMenu/DropdownMenu.tsx
 var import_react4 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var DropdownMenuContext = (0, import_react4.createContext)(
   void 0
 );
@@ -559,14 +676,14 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
     () => ({ open: currentOpen, setOpen }),
     [currentOpen, setOpen]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "relative", ref: menuRef, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative", ref: menuRef, children }) });
 };
 var DropdownMenuTrigger = (0, import_react4.forwardRef)(({ className, children, onClick, ...props }, ref) => {
   const context = (0, import_react4.useContext)(DropdownMenuContext);
   if (!context)
     throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");
   const { open, setOpen } = context;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "button",
     {
       ref,
@@ -598,7 +715,7 @@ var ALIGN_CLASSES = {
   center: "left-1/2 -translate-x-1/2",
   end: "right-0"
 };
-var MenuLabel = (0, import_react4.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+var MenuLabel = (0, import_react4.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   "fieldset",
   {
     ref,
@@ -633,7 +750,7 @@ var MenuContent = (0, import_react4.forwardRef)(
       const horizontal = ALIGN_CLASSES[align];
       return `absolute ${vertical} ${horizontal}`;
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "div",
       {
         ref,
@@ -678,7 +795,7 @@ var MenuItem = (0, import_react4.forwardRef)(
       }
       onClick?.(e);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "div",
       {
         ref,
@@ -707,7 +824,7 @@ var MenuItem = (0, import_react4.forwardRef)(
   }
 );
 MenuItem.displayName = "MenuItem";
-var MenuSeparator = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+var MenuSeparator = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   "div",
   {
     ref,
@@ -719,7 +836,7 @@ MenuSeparator.displayName = "MenuSeparator";
 
 // src/components/NavButton/NavButton.tsx
 var import_react5 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var NavButton = (0, import_react5.forwardRef)(
   ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
     const baseClasses = [
@@ -747,7 +864,7 @@ var NavButton = (0, import_react5.forwardRef)(
     ];
     const stateClasses = selected ? ["bg-primary-50", "text-primary-950"] : [];
     const allClasses = [...baseClasses, ...stateClasses].join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "button",
       {
         ref,
@@ -757,8 +874,8 @@ var NavButton = (0, import_react5.forwardRef)(
         "aria-pressed": selected,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "whitespace-nowrap", children: label })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "whitespace-nowrap", children: label })
         ]
       }
     );
@@ -768,7 +885,7 @@ NavButton.displayName = "NavButton";
 
 // src/components/IconButton/IconButton.tsx
 var import_react6 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var IconButton = (0, import_react6.forwardRef)(
   ({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
     const baseClasses = [
@@ -801,7 +918,7 @@ var IconButton = (0, import_react6.forwardRef)(
       ...activeClasses
     ].join(" ");
     const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "button",
       {
         ref,
@@ -811,7 +928,7 @@ var IconButton = (0, import_react6.forwardRef)(
         "aria-pressed": active,
         "aria-label": ariaLabel,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "flex items-center justify-center", children: icon })
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "flex items-center justify-center", children: icon })
       }
     );
   }
@@ -839,5 +956,9 @@ IconButton.displayName = "IconButton";
   TableHead,
   TableHeader,
   TableRow,
-  Text
+  Text,
+  Toast,
+  Toaster,
+  useToast,
+  useToastStore
 });

package/dist/index.mjs

@@ -206,6 +206,119 @@ var Text = ({
   );
 };
 
+// src/components/Toast/Toast.tsx
+import { CheckCircle, WarningCircle, Info, X } 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"
+  },
+  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_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";
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-atomic": "true",
+      className: `${baseClasses} ${positionClasses[position]} ${variantClasses} ${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, {})
+          }
+        )
+      ]
+    }
+  );
+};
+
+// 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,
@@ -213,7 +326,7 @@ import {
   useId
 } from "react";
 import { Check, Minus } from "phosphor-react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var SIZE_CLASSES2 = {
   small: {
     checkbox: "w-4 h-4",
@@ -308,7 +421,7 @@ var CheckBox = forwardRef2(
     const checkboxClasses = `${BASE_CHECKBOX_CLASSES} ${sizeClasses.checkbox} ${borderWidthClass} ${stylingClasses} ${className}`;
     const renderIcon = () => {
       if (indeterminate) {
-        return /* @__PURE__ */ jsx5(
+        return /* @__PURE__ */ jsx7(
           Minus,
           {
             size: sizeClasses.iconSize,
@@ -318,7 +431,7 @@ var CheckBox = forwardRef2(
         );
       }
       if (checked) {
-        return /* @__PURE__ */ jsx5(
+        return /* @__PURE__ */ jsx7(
           Check,
           {
             size: sizeClasses.iconSize,
@@ -329,13 +442,13 @@ var CheckBox = forwardRef2(
       }
       return null;
     };
-    return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs4(
         "div",
         {
           className: `flex flex-row items-center ${sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
           children: [
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx7(
               "input",
               {
                 ref,
@@ -348,12 +461,12 @@ var CheckBox = forwardRef2(
                 ...props
               }
             ),
-            /* @__PURE__ */ jsx5("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
-            label && /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx7("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
+            label && /* @__PURE__ */ jsx7(
               "div",
               {
                 className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
-                children: /* @__PURE__ */ jsx5(
+                children: /* @__PURE__ */ jsx7(
                   Text,
                   {
                     as: "label",
@@ -370,8 +483,8 @@ var CheckBox = forwardRef2(
           ]
         }
       ),
-      errorMessage && /* @__PURE__ */ jsx5(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
-      helperText && !errorMessage && /* @__PURE__ */ jsx5(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperText })
+      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 })
     ] });
   }
 );
@@ -379,23 +492,23 @@ CheckBox.displayName = "CheckBox";
 
 // src/components/Table/Table.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var Table = forwardRef3(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx6("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ jsxs4(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx8("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__ */ jsx6("caption", { className: "sr-only", children: "My Table" }),
+        /* @__PURE__ */ jsx8("caption", { className: "sr-only", children: "My Table" }),
         children
       ]
     }
   ) })
 );
 Table.displayName = "Table";
-var TableHeader = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+var TableHeader = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
   "thead",
   {
     ref,
@@ -404,7 +517,7 @@ var TableHeader = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+var TableBody = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
   "tbody",
   {
     ref,
@@ -413,7 +526,7 @@ var TableBody = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ js
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+var TableFooter = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
   "tfoot",
   {
     ref,
@@ -430,7 +543,7 @@ var VARIANT_STATES_ROW = {
 };
 var TableRow = forwardRef3(
   ({ state = "default", className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx8(
       "tr",
       {
         ref,
@@ -447,7 +560,7 @@ var TableRow = forwardRef3(
   }
 );
 TableRow.displayName = "TableRow";
-var TableHead = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+var TableHead = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
   "th",
   {
     ref,
@@ -456,7 +569,7 @@ var TableHead = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ js
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+var TableCell = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
   "td",
   {
     ref,
@@ -465,7 +578,7 @@ var TableCell = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ js
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+var TableCaption = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
   "caption",
   {
     ref,
@@ -486,7 +599,7 @@ import {
   useRef,
   useMemo
 } from "react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var DropdownMenuContext = createContext(
   void 0
 );
@@ -526,14 +639,14 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
     () => ({ open: currentOpen, setOpen }),
     [currentOpen, setOpen]
   );
-  return /* @__PURE__ */ jsx7(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx7("div", { className: "relative", ref: menuRef, children }) });
+  return /* @__PURE__ */ jsx9(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx9("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__ */ jsx7(
+  return /* @__PURE__ */ jsx9(
     "button",
     {
       ref,
@@ -565,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__ */ jsx7(
+var MenuLabel = forwardRef4(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx9(
   "fieldset",
   {
     ref,
@@ -600,7 +713,7 @@ var MenuContent = forwardRef4(
       const horizontal = ALIGN_CLASSES[align];
       return `absolute ${vertical} ${horizontal}`;
     };
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx9(
       "div",
       {
         ref,
@@ -645,7 +758,7 @@ var MenuItem = forwardRef4(
       }
       onClick?.(e);
     };
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         ref,
@@ -674,7 +787,7 @@ var MenuItem = forwardRef4(
   }
 );
 MenuItem.displayName = "MenuItem";
-var MenuSeparator = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+var MenuSeparator = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
   "div",
   {
     ref,
@@ -686,7 +799,7 @@ MenuSeparator.displayName = "MenuSeparator";
 
 // src/components/NavButton/NavButton.tsx
 import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var NavButton = forwardRef5(
   ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
     const baseClasses = [
@@ -714,7 +827,7 @@ var NavButton = forwardRef5(
     ];
     const stateClasses = selected ? ["bg-primary-50", "text-primary-950"] : [];
     const allClasses = [...baseClasses, ...stateClasses].join(" ");
-    return /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsxs7(
       "button",
       {
         ref,
@@ -724,8 +837,8 @@ var NavButton = forwardRef5(
         "aria-pressed": selected,
         ...props,
         children: [
-          /* @__PURE__ */ jsx8("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
-          /* @__PURE__ */ jsx8("span", { className: "whitespace-nowrap", children: label })
+          /* @__PURE__ */ jsx10("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
+          /* @__PURE__ */ jsx10("span", { className: "whitespace-nowrap", children: label })
         ]
       }
     );
@@ -735,7 +848,7 @@ NavButton.displayName = "NavButton";
 
 // src/components/IconButton/IconButton.tsx
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var IconButton = forwardRef6(
   ({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
     const baseClasses = [
@@ -768,7 +881,7 @@ var IconButton = forwardRef6(
       ...activeClasses
     ].join(" ");
     const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx11(
       "button",
       {
         ref,
@@ -778,7 +891,7 @@ var IconButton = forwardRef6(
         "aria-pressed": active,
         "aria-label": ariaLabel,
         ...props,
-        children: /* @__PURE__ */ jsx9("span", { className: "flex items-center justify-center", children: icon })
+        children: /* @__PURE__ */ jsx11("span", { className: "flex items-center justify-center", children: icon })
       }
     );
   }
@@ -805,5 +918,9 @@ export {
   TableHead,
   TableHeader,
   TableRow,
-  Text
+  Text,
+  Toast,
+  Toaster,
+  useToast,
+  useToastStore
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "analytica-frontend-lib",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "Repositório público dos componentes utilizados nas plataformas da Analytica Ensino",
   "main": "dist/index.cjs",
   "module": "./dist/index.js",
@@ -64,7 +64,10 @@
     "react-dom": ">=19.0.0"
   },
   "dependencies": {
-    "phosphor-react": "^1.4.1"
+    "phosphor-react": "^1.4.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "zustand": "^5.0.5"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",