@andreagiugni/tailwind-dashboard-ui 0.5.4 → 0.5.6

package/dist/index.js

@@ -1,10 +1,11 @@
 "use client";
 export { BarChart } from './chunk-YAKIMPXZ.js';
 export { LineChart } from './chunk-NWIOJGF7.js';
-export { Calendar, Modal } from './chunk-GIAGOO72.js';
+export { Calendar, Modal } from './chunk-XXWKR4DP.js';
 export { CountryMap } from './chunk-R66LONPQ.js';
 export { Editor } from './chunk-DXUWFHPF.js';
-export { ColorPicker } from './chunk-LXA5UOBC.js';
+export { ColorPicker } from './chunk-ASRYDS2W.js';
+import { layers } from './chunk-VX7S6VYG.js';
 import { cn } from './chunk-ZLIYUUA4.js';
 export { cn } from './chunk-ZLIYUUA4.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -433,7 +434,8 @@ var Dropdown = ({
     {
       ref: dropdownRef,
       className: cn(
-        "absolute z-40 right-0 mt-2 rounded-xl border border-gray-200 bg-white shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark",
+        "absolute right-0 mt-2 rounded-xl border border-gray-200 bg-white shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark",
+        layers.menu,
         className
       ),
       ...rest,
@@ -1351,9 +1353,10 @@ var AccordionItem = ({
             id: panelId,
             role: "region",
             "aria-labelledby": buttonId,
-            hidden: !open,
+            "aria-hidden": !open,
+            inert: !open,
             className: cn(
-              "grid transition-all duration-200 ease-in-out",
+              "grid transition-[grid-template-rows,opacity] duration-300 ease-in-out motion-reduce:transition-none",
               open ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
             ),
             children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 text-sm text-gray-500 dark:text-gray-400", children }) })
@@ -1583,7 +1586,8 @@ var Tooltip = ({
             id: tooltipId,
             role: "tooltip",
             className: cn(
-              "pointer-events-none absolute z-50 whitespace-nowrap rounded-lg bg-gray-900 px-3 py-2 text-xs font-medium text-white shadow-theme-lg dark:bg-gray-700 dark:text-white/90",
+              "pointer-events-none absolute whitespace-nowrap rounded-lg bg-gray-900 px-3 py-2 text-xs font-medium text-white shadow-theme-lg dark:bg-gray-700 dark:text-white/90",
+              layers.floating,
               placementClasses[placement]
             ),
             style: {
@@ -1671,7 +1675,8 @@ var Popover = ({
       {
         role: "dialog",
         className: cn(
-          "absolute z-50 min-w-[12rem] rounded-xl border border-gray-200 bg-white p-4 shadow-theme-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white/90",
+          "absolute min-w-[12rem] rounded-xl border border-gray-200 bg-white p-4 shadow-theme-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white/90",
+          layers.floating,
           placementClasses2[placement],
           className
         ),
@@ -1741,7 +1746,7 @@ var Drawer = ({
     };
   }, [isOpen]);
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-99999 drawer", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("drawer fixed inset-0", layers.overlay), children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -1769,7 +1774,7 @@ var Drawer = ({
             {
               onClick: onClose,
               "aria-label": "Close drawer",
-              className: "absolute right-3 top-3 z-999 flex h-9.5 w-9.5 items-center justify-center rounded-full bg-gray-100 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",
+              className: "absolute right-3 top-3 z-99 flex h-9.5 w-9.5 items-center justify-center rounded-full bg-gray-100 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",
               children: /* @__PURE__ */ jsx(
                 "svg",
                 {
@@ -2586,7 +2591,10 @@ var Select = ({
       "ul",
       {
         role: "listbox",
-        className: "absolute left-0 top-full z-40 mt-1.5 max-h-60 w-full overflow-y-auto rounded-lg border border-gray-200 bg-white py-1 shadow-theme-lg dark:border-gray-800 dark:bg-gray-900",
+        className: cn(
+          "absolute left-0 top-full mt-1.5 max-h-60 w-full overflow-y-auto rounded-lg border border-gray-200 bg-white py-1 shadow-theme-lg dark:border-gray-800 dark:bg-gray-900",
+          layers.menu
+        ),
         children: options.map((option) => {
           const isSelected = option.value === selectedValue;
           return /* @__PURE__ */ jsxs(
@@ -2659,7 +2667,7 @@ var MultiSelect = ({
   );
   return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
     /* @__PURE__ */ jsx("label", { className: "mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400", children: label }),
-    /* @__PURE__ */ jsx("div", { className: "relative z-20 inline-block w-full", children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "relative inline-block w-full", children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center", children: [
       /* @__PURE__ */ jsx("div", { onClick: toggleDropdown, className: "w-full", children: /* @__PURE__ */ jsxs("div", { className: "mb-2 flex h-11 rounded-lg border border-gray-300 py-1.5 px-4 shadow-theme-xs outline-hidden transition focus:border-brand-300 focus:shadow-focus-ring dark:border-gray-700 dark:bg-gray-900 dark:focus:border-brand-300", children: [
         /* @__PURE__ */ jsx("div", { className: "flex flex-wrap flex-auto gap-2", children: selectedValuesText.length > 0 ? selectedValuesText.map((text, index) => /* @__PURE__ */ jsxs(
           "div",
@@ -2738,7 +2746,10 @@ var MultiSelect = ({
       isOpen && /* @__PURE__ */ jsx(
         "div",
         {
-          className: "absolute left-0 z-40 w-full overflow-y-auto bg-white rounded-lg shadow-sm top-full max-h-select dark:bg-gray-900",
+          className: cn(
+            "absolute left-0 top-full max-h-select w-full overflow-y-auto rounded-lg bg-white shadow-sm dark:bg-gray-900",
+            layers.menu
+          ),
           onClick: (e) => e.stopPropagation(),
           children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: options.map((option, index) => {
             const isSelected = selectedOptions.includes(option.value);