@andreagiugni/tailwind-dashboard-ui 1.0.26 → 1.0.28

package/README.md

@@ -185,7 +185,7 @@ Legend: **(+native)** = also extends the element's native HTML attributes.
 | `PollResults` | `options` (`{ label, value?, series? }[]`), `maxValue?`, `size` (sm/md/lg), `color`, `trackColor?`, `showValueLabel?`, `showSeriesLabels?`, `valueFormatter?`, `labelTextSize?`/`labelTextColor?`/`labelTextWeight?`, `valueTextSize?`/`valueTextColor?`/`valueTextWeight?`, `seriesLabelTextSize?`/`seriesLabelTextColor?`/`seriesLabelTextWeight?`, `seriesValueTextSize?`/`seriesValueTextColor?`/`seriesValueTextWeight?`, (+native div) (+override) |
 | `Spinner` | `size` (sm/md/lg), `color`, `label?` |
 | `Skeleton` | `isLoaded`, `width?`, `height?`, `className`, `children?` |
-| `Toast` | `variant` (success/danger/warning/info), `title`, `message?`, `icon?`, `hideIcon?`, `showCloseButton?`, `onClose?`, `hideAccentBar?`, (+native div) (+override) |
+| `Toast` | `variant` (success/danger/warning/info), `position?` (left/center/right), `duration?` (ms), `title`, `message?`, `icon?`, `hideIcon?`, `showCloseButton?`, `onClose?`, `hideAccentBar?`, (+native div) (+override) |
 
 ### Overlays
 

package/dist/index.cjs

@@ -10,14 +10,14 @@ var chunkTF3G3E72_cjs = require('./chunk-TF3G3E72.cjs');
 var chunkYERNSNT4_cjs = require('./chunk-YERNSNT4.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
-var React5 = require('react');
+var React6 = require('react');
 var reactDom = require('react-dom');
 var flatpickr = require('flatpickr');
 require('flatpickr/dist/flatpickr.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React5__default = /*#__PURE__*/_interopDefault(React5);
+var React6__default = /*#__PURE__*/_interopDefault(React6);
 var flatpickr__default = /*#__PURE__*/_interopDefault(flatpickr);
 
 // src/lib/styleOverride.ts
@@ -360,10 +360,10 @@ var Dropdown = ({
   style,
   ...rest
 }) => {
-  const dropdownRef = React5.useRef(null);
-  const anchorRef = React5.useRef(null);
-  const [position, setPosition] = React5.useState();
-  React5.useEffect(() => {
+  const dropdownRef = React6.useRef(null);
+  const anchorRef = React6.useRef(null);
+  const [position, setPosition] = React6.useState();
+  React6.useEffect(() => {
     const handleClickOutside = (event) => {
       const trigger = getTriggerElement(anchorRef.current, triggerRef);
       if (dropdownRef.current && !dropdownRef.current.contains(event.target) && !trigger?.contains(event.target)) {
@@ -375,7 +375,7 @@ var Dropdown = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [onClose, triggerRef]);
-  React5.useLayoutEffect(() => {
+  React6.useLayoutEffect(() => {
     if (!isOpen || !portal) return;
     const updatePosition = () => {
       const anchor = anchorRef.current;
@@ -481,8 +481,8 @@ var Dropzone = ({
   browseLabel = "Browse File",
   className
 }) => {
-  const inputRef = React5.useRef(null);
-  const [isDragActive, setIsDragActive] = React5.useState(false);
+  const inputRef = React6.useRef(null);
+  const [isDragActive, setIsDragActive] = React6.useState(false);
   const handleFiles = (list) => {
     if (list && list.length) onDrop?.(Array.from(list));
   };
@@ -721,13 +721,13 @@ function DataDrivenTable({
   emptyContent = "No matching records",
   className
 }) {
-  const [search, setSearch] = React5.useState("");
-  const [pageSize, setPageSize] = React5.useState(rowsPerPage);
-  const [sortKey, setSortKey] = React5.useState(defaultSortKey);
-  const [sortDir, setSortDir] = React5.useState(defaultSortDirection);
-  const [page, setPage] = React5.useState(1);
+  const [search, setSearch] = React6.useState("");
+  const [pageSize, setPageSize] = React6.useState(rowsPerPage);
+  const [sortKey, setSortKey] = React6.useState(defaultSortKey);
+  const [sortDir, setSortDir] = React6.useState(defaultSortDirection);
+  const [page, setPage] = React6.useState(1);
   const showSearch = !!(searchKeys && searchKeys.length > 0);
-  const filtered = React5.useMemo(() => {
+  const filtered = React6.useMemo(() => {
     const q = search.trim().toLowerCase();
     let rows = data;
     if (showSearch && q) {
@@ -1000,7 +1000,7 @@ var ThemeToggleButton = ({
   onClick,
   ...rest
 }) => {
-  const [internalTheme, setInternalTheme] = React5.useState("light");
+  const [internalTheme, setInternalTheme] = React6.useState("light");
   const isControlled = theme !== void 0;
   const currentTheme = isControlled ? theme : internalTheme;
   const handleClick = (e) => {
@@ -1102,6 +1102,11 @@ var variantIcons2 = {
   warning: lucideReact.CircleAlert,
   info: lucideReact.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,
@@ -1111,6 +1116,8 @@ var Toast = ({
   showCloseButton = true,
   onClose,
   hideAccentBar = false,
+  position = "right",
+  duration,
   className,
   bgColor,
   textColor,
@@ -1120,12 +1127,24 @@ var Toast = ({
 }) => {
   const styles = variantStyles[variant];
   const Icon = variantIcons2[variant];
+  const [isVisible, setIsVisible] = React6.useState(true);
+  const handleClose = React6.useCallback(() => {
+    setIsVisible(false);
+    onClose?.();
+  }, [onClose]);
+  React6.useEffect(() => {
+    if (!duration || duration <= 0) return;
+    const timer = window.setTimeout(handleClose, duration);
+    return () => window.clearTimeout(timer);
+  }, [duration, handleClose]);
+  if (!isVisible) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       role: "alert",
       className: chunkYERNSNT4_cjs.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 },
@@ -1150,7 +1169,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__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-4", "aria-hidden": "true" })
           }
@@ -1166,7 +1185,7 @@ var Toast = ({
     }
   );
 };
-var AccordionContext = React5__default.default.createContext(null);
+var AccordionContext = React6__default.default.createContext(null);
 var ChevronIcon2 = ({ open }) => /* @__PURE__ */ jsxRuntime.jsx(
   lucideReact.ChevronDown,
   {
@@ -1186,7 +1205,7 @@ var AccordionItem = ({
   className,
   ...rest
 }) => {
-  const ctx = React5__default.default.useContext(AccordionContext);
+  const ctx = React6__default.default.useContext(AccordionContext);
   if (!ctx) {
     throw new Error("AccordionItem must be used within an Accordion");
   }
@@ -1251,9 +1270,9 @@ var Accordion = ({
   ...rest
 }) => {
   const isControlled = expandedKeys !== void 0;
-  const [internal, setInternal] = React5.useState(defaultExpandedKeys);
+  const [internal, setInternal] = React6.useState(defaultExpandedKeys);
   const expanded = isControlled ? expandedKeys : internal;
-  const toggle = React5.useCallback(
+  const toggle = React6.useCallback(
     (key) => {
       const isOpen = expanded.includes(key);
       let next;
@@ -1298,16 +1317,16 @@ var Tabs = ({
   className,
   ...rest
 }) => {
-  const tabs = React5__default.default.Children.toArray(children).filter(
-    React5__default.default.isValidElement
+  const tabs = React6__default.default.Children.toArray(children).filter(
+    React6__default.default.isValidElement
   );
   const firstKey = tabs[0]?.props.tabKey;
   const isControlled = selectedKey !== void 0;
-  const [internal, setInternal] = React5.useState(
+  const [internal, setInternal] = React6.useState(
     defaultSelectedKey ?? firstKey
   );
   const active = isControlled ? selectedKey : internal;
-  const tabRefs = React5.useRef({});
+  const tabRefs = React6.useRef({});
   const select = (key) => {
     if (!isControlled) setInternal(key);
     onSelectionChange?.(key);
@@ -1425,9 +1444,9 @@ var Tooltip = ({
   style,
   ...rest
 }) => {
-  const [visible, setVisible] = React5.useState(false);
-  const tooltipId = React5.useId();
-  const timeoutRef = React5.useRef(null);
+  const [visible, setVisible] = React6.useState(false);
+  const tooltipId = React6.useId();
+  const timeoutRef = React6.useRef(null);
   const show = () => {
     if (disabled) return;
     if (delay > 0) {
@@ -1502,17 +1521,17 @@ var Popover = ({
   className,
   ...rest
 }) => {
-  const [uncontrolledOpen, setUncontrolledOpen] = React5.useState(defaultOpen);
-  const [panelPosition, setPanelPosition] = React5.useState();
+  const [uncontrolledOpen, setUncontrolledOpen] = React6.useState(defaultOpen);
+  const [panelPosition, setPanelPosition] = React6.useState();
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : uncontrolledOpen;
-  const wrapperRef = React5.useRef(null);
-  const panelRef = React5.useRef(null);
+  const wrapperRef = React6.useRef(null);
+  const panelRef = React6.useRef(null);
   const setOpen = (next) => {
     if (!isControlled) setUncontrolledOpen(next);
     onOpenChange?.(next);
   };
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!open) return;
     const handleClickOutside = (event) => {
       if (closeOnOutsideClick && wrapperRef.current && !wrapperRef.current.contains(event.target) && !panelRef.current?.contains(event.target)) {
@@ -1531,7 +1550,7 @@ var Popover = ({
       document.removeEventListener("keydown", handleEscape);
     };
   }, [open, closeOnOutsideClick, closeOnEsc]);
-  const updatePanelPosition = React5.useCallback(() => {
+  const updatePanelPosition = React6.useCallback(() => {
     const trigger2 = wrapperRef.current;
     const panel2 = panelRef.current;
     if (!trigger2 || !panel2) return;
@@ -1579,7 +1598,7 @@ var Popover = ({
       )
     });
   }, [placement]);
-  React5.useLayoutEffect(() => {
+  React6.useLayoutEffect(() => {
     if (!open || !portal) return;
     updatePanelPosition();
     window.addEventListener("resize", updatePanelPosition);
@@ -1657,7 +1676,7 @@ var Drawer = ({
   size,
   ...rest
 }) => {
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const handleEscape = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -1670,7 +1689,7 @@ var Drawer = ({
       document.removeEventListener("keydown", handleEscape);
     };
   }, [isOpen, onClose, closeOnEsc]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (isOpen) {
       document.body.style.overflow = "hidden";
     } else {
@@ -1879,9 +1898,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",
@@ -1975,7 +1994,7 @@ var PollResults = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: chunkYERNSNT4_cjs.cn("w-full space-y-7 text-gray-800 dark:text-white/90", className),
+      className: chunkYERNSNT4_cjs.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) => {
@@ -1991,7 +2010,7 @@ var PollResults = ({
         const isGrouped = series.length > 1;
         const singlePercent = toPercent(series[0]?.value ?? 0, safeMax);
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-4", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
@@ -2009,7 +2028,7 @@ var PollResults = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkYERNSNT4_cjs.cn("flex flex-col", isGrouped ? "gap-3" : "gap-0"), children: series.map((entry, seriesIndex) => {
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkYERNSNT4_cjs.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;
@@ -2203,7 +2222,7 @@ var Snippet = ({
   style,
   ...rest
 }) => {
-  const [copied, setCopied] = React5.useState(false);
+  const [copied, setCopied] = React6.useState(false);
   const raw = code ?? children ?? "";
   const lines = Array.isArray(raw) ? raw : raw.split("\n");
   const text = lines.join("\n");
@@ -2485,7 +2504,7 @@ var Switch = ({
   ...rest
 }) => {
   const isControlled = checked !== void 0;
-  const [internalChecked, setInternalChecked] = React5.useState(defaultChecked);
+  const [internalChecked, setInternalChecked] = React6.useState(defaultChecked);
   const isChecked = isControlled ? checked : internalChecked;
   const handleToggle = () => {
     if (disabled) return;
@@ -2573,13 +2592,13 @@ var Select = ({
   disabled = false,
   portal = true
 }) => {
-  const [selectedValue, setSelectedValue] = React5.useState(defaultValue);
-  const [isOpen, setIsOpen] = React5.useState(false);
-  const rootRef = React5.useRef(null);
-  const triggerRef = React5.useRef(null);
-  const menuRef = React5.useRef(null);
-  const [menuPosition, setMenuPosition] = React5.useState();
-  React5.useEffect(() => {
+  const [selectedValue, setSelectedValue] = React6.useState(defaultValue);
+  const [isOpen, setIsOpen] = React6.useState(false);
+  const rootRef = React6.useRef(null);
+  const triggerRef = React6.useRef(null);
+  const menuRef = React6.useRef(null);
+  const [menuPosition, setMenuPosition] = React6.useState();
+  React6.useEffect(() => {
     if (!isOpen) return;
     const onPointerDown = (e) => {
       const target = e.target;
@@ -2597,7 +2616,7 @@ var Select = ({
       document.removeEventListener("keydown", onKeyDown);
     };
   }, [isOpen]);
-  React5.useLayoutEffect(() => {
+  React6.useLayoutEffect(() => {
     if (!isOpen || !portal) return;
     const updatePosition = () => {
       const trigger = triggerRef.current;
@@ -2738,13 +2757,13 @@ var MultiSelect = ({
   disabled = false,
   portal = true
 }) => {
-  const [selectedOptions, setSelectedOptions] = React5.useState(defaultSelected);
-  const [isOpen, setIsOpen] = React5.useState(false);
-  const rootRef = React5.useRef(null);
-  const triggerRef = React5.useRef(null);
-  const menuRef = React5.useRef(null);
-  const [menuPosition, setMenuPosition] = React5.useState();
-  React5.useEffect(() => {
+  const [selectedOptions, setSelectedOptions] = React6.useState(defaultSelected);
+  const [isOpen, setIsOpen] = React6.useState(false);
+  const rootRef = React6.useRef(null);
+  const triggerRef = React6.useRef(null);
+  const menuRef = React6.useRef(null);
+  const [menuPosition, setMenuPosition] = React6.useState();
+  React6.useEffect(() => {
     if (!isOpen) return;
     const onPointerDown = (event) => {
       const target = event.target;
@@ -2762,7 +2781,7 @@ var MultiSelect = ({
       document.removeEventListener("keydown", onKeyDown);
     };
   }, [isOpen]);
-  React5.useLayoutEffect(() => {
+  React6.useLayoutEffect(() => {
     if (!isOpen || !portal) return;
     const updatePosition = () => {
       const trigger = triggerRef.current;
@@ -2934,7 +2953,7 @@ var DatePicker = ({
   defaultDate,
   placeholder
 }) => {
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const flatPickr = flatpickr__default.default(`#${id}`, {
       mode: mode || "single",
       appendTo: document.body,
@@ -2977,11 +2996,11 @@ var DateTimePicker = ({
   defaultTime = "",
   onChange
 }) => {
-  const dateRef = React5.useRef(void 0);
-  const [hh, setHh] = React5.useState(defaultTime.split(":")[0] ?? "");
-  const [mm, setMm] = React5.useState(defaultTime.split(":")[1] ?? "");
-  const hhRef = React5.useRef(hh);
-  const mmRef = React5.useRef(mm);
+  const dateRef = React6.useRef(void 0);
+  const [hh, setHh] = React6.useState(defaultTime.split(":")[0] ?? "");
+  const [mm, setMm] = React6.useState(defaultTime.split(":")[1] ?? "");
+  const hhRef = React6.useRef(hh);
+  const mmRef = React6.useRef(mm);
   hhRef.current = hh;
   mmRef.current = mm;
   const emit = () => {
@@ -2990,7 +3009,7 @@ var DateTimePicker = ({
       time: `${(hhRef.current || "0").padStart(2, "0")}:${(mmRef.current || "0").padStart(2, "0")}`
     });
   };
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const flatPickr = flatpickr__default.default(`#${id}-date`, {
       mode: "single",
       appendTo: document.body,
@@ -3075,7 +3094,7 @@ var PasswordInput = ({
   className,
   ...rest
 }) => {
-  const [show, setShow] = React5.useState(false);
+  const [show, setShow] = React6.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -3154,7 +3173,7 @@ var Slider = ({
   ...rest
 }) => {
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React5.useState(defaultValue);
+  const [internalValue, setInternalValue] = React6.useState(defaultValue);
   const currentValue = isControlled ? value : internalValue;
   const handleChange = (e) => {
     const next = Number(e.target.value);