@andreagiugni/tailwind-dashboard-ui 1.0.27 → 1.0.28

package/dist/index.d.cts

@@ -267,6 +267,7 @@ interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">,
 declare const Card: React.FC<CardProps>;
 
 type ToastVariant = "success" | "danger" | "warning" | "info";
+type ToastPosition = "left" | "center" | "right";
 interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, ColorOverrideProps {
     /** Color/severity variant. */
     variant?: ToastVariant;
@@ -282,6 +283,10 @@ interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">
     onClose?: () => void;
     /** Hide the colored accent bar at the bottom. */
     hideAccentBar?: boolean;
+    /** Fixed bottom alignment. Default: `"right"`. */
+    position?: ToastPosition;
+    /** Auto-dismiss duration in milliseconds. Omit or pass `0` to keep visible. */
+    duration?: number;
 }
 declare const Toast: React.FC<ToastProps>;
 

package/dist/index.d.ts

@@ -267,6 +267,7 @@ interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">,
 declare const Card: React.FC<CardProps>;
 
 type ToastVariant = "success" | "danger" | "warning" | "info";
+type ToastPosition = "left" | "center" | "right";
 interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, ColorOverrideProps {
     /** Color/severity variant. */
     variant?: ToastVariant;
@@ -282,6 +283,10 @@ interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">
     onClose?: () => void;
     /** Hide the colored accent bar at the bottom. */
     hideAccentBar?: boolean;
+    /** Fixed bottom alignment. Default: `"right"`. */
+    position?: ToastPosition;
+    /** Auto-dismiss duration in milliseconds. Omit or pass `0` to keep visible. */
+    duration?: number;
 }
 declare const Toast: React.FC<ToastProps>;
 

package/dist/index.js

@@ -9,7 +9,7 @@ import { cn } from './chunk-ZLIYUUA4.js';
 export { cn } from './chunk-ZLIYUUA4.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Info, CircleAlert, CircleX, CircleCheck, Upload, Sun, Moon, X, Check, Copy, ChevronDown, Calendar, Clock, Eye, EyeOff, ChevronRight, ChevronUp } from 'lucide-react';
-import React5, { useRef, useState, useEffect, useLayoutEffect, useCallback, useId, useMemo } from 'react';
+import React6, { useRef, useState, useEffect, useLayoutEffect, useCallback, useId, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import flatpickr from 'flatpickr';
 import 'flatpickr/dist/flatpickr.css';
@@ -1096,6 +1096,11 @@ var variantIcons2 = {
   warning: CircleAlert,
   info: Info
 };
+var positionStyles = {
+  left: "bottom-6 left-4 right-4 sm:left-6 sm:right-auto sm:w-full",
+  center: "bottom-6 left-1/2 w-[calc(100%-2rem)] -translate-x-1/2 sm:w-full",
+  right: "bottom-6 left-4 right-4 sm:left-auto sm:right-6 sm:w-full"
+};
 var Toast = ({
   variant = "success",
   title,
@@ -1105,6 +1110,8 @@ var Toast = ({
   showCloseButton = true,
   onClose,
   hideAccentBar = false,
+  position = "right",
+  duration,
   className,
   bgColor,
   textColor,
@@ -1114,12 +1121,24 @@ var Toast = ({
 }) => {
   const styles = variantStyles[variant];
   const Icon = variantIcons2[variant];
+  const [isVisible, setIsVisible] = useState(true);
+  const handleClose = useCallback(() => {
+    setIsVisible(false);
+    onClose?.();
+  }, [onClose]);
+  useEffect(() => {
+    if (!duration || duration <= 0) return;
+    const timer = window.setTimeout(handleClose, duration);
+    return () => window.clearTimeout(timer);
+  }, [duration, handleClose]);
+  if (!isVisible) return null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       role: "alert",
       className: cn(
-        "relative flex items-center gap-3 overflow-hidden rounded-xl border border-gray-200 bg-white px-4 py-3.5 pr-10 shadow-theme-sm dark:border-gray-800 dark:bg-white/[0.03]",
+        "fixed z-9999 flex max-w-md items-center gap-3 overflow-hidden rounded-xl border border-gray-200 bg-white px-4 py-3.5 pr-10 shadow-theme-sm dark:border-gray-800 dark:bg-gray-900",
+        positionStyles[position],
         className
       ),
       style: { ...styleOverride({ bgColor, textColor, borderColor }), ...style },
@@ -1144,7 +1163,7 @@ var Toast = ({
           {
             type: "button",
             "aria-label": "Close",
-            onClick: onClose,
+            onClick: handleClose,
             className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 transition hover:text-gray-700 dark:hover:text-gray-200",
             children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
           }
@@ -1160,7 +1179,7 @@ var Toast = ({
     }
   );
 };
-var AccordionContext = React5.createContext(null);
+var AccordionContext = React6.createContext(null);
 var ChevronIcon2 = ({ open }) => /* @__PURE__ */ jsx(
   ChevronDown,
   {
@@ -1180,7 +1199,7 @@ var AccordionItem = ({
   className,
   ...rest
 }) => {
-  const ctx = React5.useContext(AccordionContext);
+  const ctx = React6.useContext(AccordionContext);
   if (!ctx) {
     throw new Error("AccordionItem must be used within an Accordion");
   }
@@ -1292,8 +1311,8 @@ var Tabs = ({
   className,
   ...rest
 }) => {
-  const tabs = React5.Children.toArray(children).filter(
-    React5.isValidElement
+  const tabs = React6.Children.toArray(children).filter(
+    React6.isValidElement
   );
   const firstKey = tabs[0]?.props.tabKey;
   const isControlled = selectedKey !== void 0;