@andreagiugni/tailwind-dashboard-ui 1.0.26 → 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;
@@ -1873,9 +1892,9 @@ var Progress = ({
   ] });
 };
 var trackSizes = {
-  sm: "h-2",
-  md: "h-2.5",
-  lg: "h-3.5"
+  sm: "h-2.5",
+  md: "h-3",
+  lg: "h-4"
 };
 var colorStyles = {
   primary: "bg-brand-500",
@@ -1969,7 +1988,7 @@ var PollResults = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("w-full space-y-7 text-gray-800 dark:text-white/90", className),
+      className: cn("w-full space-y-5 text-gray-800 dark:text-white/90", className),
       style: { ...styleOverride({ bgColor, textColor, borderColor }), ...style },
       ...rest,
       children: options.map((option, optionIndex) => {
@@ -1985,7 +2004,7 @@ var PollResults = ({
         const isGrouped = series.length > 1;
         const singlePercent = toPercent(series[0]?.value ?? 0, safeMax);
         return /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-4", children: [
             /* @__PURE__ */ jsx(
               "span",
               {
@@ -2003,7 +2022,7 @@ var PollResults = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", isGrouped ? "gap-3" : "gap-0"), children: series.map((entry, seriesIndex) => {
+          /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", isGrouped ? "gap-2.5" : "gap-0"), children: series.map((entry, seriesIndex) => {
             const percent = toPercent(entry.value, safeMax);
             const fillColor = entry.fillColor;
             const entryColor = entry.color ?? (isGrouped ? defaultSeriesColorCycle[seriesIndex % defaultSeriesColorCycle.length] : option.color ?? defaultColorCycle[optionIndex % defaultColorCycle.length]) ?? color;