@andreagiugni/tailwind-dashboard-ui 1.0.3 → 1.0.5

package/dist/index.d.cts

@@ -519,8 +519,8 @@ interface RadioSmProps {
 }
 declare const RadioSm: React.FC<RadioSmProps>;
 
-interface SwitchProps {
-    label: string;
+interface SwitchProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange" | "color"> {
+    label?: React.ReactNode;
     checked?: boolean;
     defaultChecked?: boolean;
     disabled?: boolean;

package/dist/index.d.ts

@@ -519,8 +519,8 @@ interface RadioSmProps {
 }
 declare const RadioSm: React.FC<RadioSmProps>;
 
-interface SwitchProps {
-    label: string;
+interface SwitchProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange" | "color"> {
+    label?: React.ReactNode;
     checked?: boolean;
     defaultChecked?: boolean;
     disabled?: boolean;

package/dist/index.js

@@ -1,9 +1,9 @@
 "use client";
 export { BarChart } from './chunk-YAKIMPXZ.js';
 export { LineChart } from './chunk-NWIOJGF7.js';
-export { Calendar, Modal } from './chunk-PYZG7RY7.js';
-export { Editor } from './chunk-EQUQBLJC.js';
-export { ColorPicker } from './chunk-W3TC7P3Z.js';
+export { Calendar, Modal } from './chunk-NJBVRPWW.js';
+export { Editor } from './chunk-PFCUA2W2.js';
+export { ColorPicker } from './chunk-OD6N6XWO.js';
 import { layers } from './chunk-VX7S6VYG.js';
 import { cn } from './chunk-ZLIYUUA4.js';
 export { cn } from './chunk-ZLIYUUA4.js';
@@ -234,7 +234,7 @@ var Alert = ({
       className: cn("rounded-xl border p-4", variantClasses2[variant].container, className),
       ...rest,
       children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ jsx("div", { className: cn("-mt-0.5", variantClasses2[variant].icon), children: icon ?? /* @__PURE__ */ jsx(Icon, { className: "h-6 w-6", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx("div", { className: cn("-mt-0.5", variantClasses2[variant].icon), children: icon ?? /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": "true" }) }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("h4", { className: "mb-1 text-sm font-semibold text-gray-800 dark:text-white/90", children: title }),
           /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: message }),
@@ -455,7 +455,7 @@ var DropdownItem = ({
       "span",
       {
         "aria-hidden": "true",
-        className: "flex h-5 w-5 shrink-0 items-center justify-center [&>svg]:h-5 [&>svg]:w-5",
+        className: "flex h-5 w-5 shrink-0 items-center justify-center [&>svg]:size-4",
         children: icon
       }
     ),
@@ -521,7 +521,7 @@ var Dropzone = ({
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
-              /* @__PURE__ */ jsx("div", { className: "mb-[22px] flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "flex h-[68px] w-[68px] items-center justify-center rounded-full bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-400", children: /* @__PURE__ */ jsx(Upload, { className: "h-7 w-7", "aria-hidden": "true" }) }) }),
+              /* @__PURE__ */ jsx("div", { className: "mb-[22px] flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "flex h-[68px] w-[68px] items-center justify-center rounded-full bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-400", children: /* @__PURE__ */ jsx(Upload, { className: "size-4", "aria-hidden": "true" }) }) }),
               /* @__PURE__ */ jsx("h4", { className: "mb-3 text-theme-xl font-semibold text-gray-800 dark:text-white/90", children: title ?? (isDragActive ? "Drop Files Here" : "Drag & Drop Files Here") }),
               /* @__PURE__ */ jsx("span", { className: "mb-5 block w-full max-w-[290px] text-center text-sm text-gray-700 dark:text-gray-400", children: description }),
               /* @__PURE__ */ jsx("span", { className: "text-theme-sm font-medium text-brand-500 underline", children: browseLabel })
@@ -626,6 +626,8 @@ var Input = ({
   style,
   ...rest
 }) => {
+  const placeholder = typeof rest.placeholder === "string" ? rest.placeholder.trim() : "";
+  const placeholderMinWidth = placeholder ? `${Math.min(Math.max(placeholder.length + 6, 18), 40)}ch` : void 0;
   const stateClass = disabled ? "text-gray-500 border-gray-300 cursor-not-allowed dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700" : error ? "text-error-800 border-error-500 focus:ring-3 focus:ring-error-500/10 dark:text-error-400 dark:border-error-500" : success ? "text-success-500 border-success-400 focus:ring-success-500/10 focus:border-success-300 dark:text-success-400 dark:border-success-500" : "text-gray-800 border-gray-300 focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:text-white/90 dark:focus:border-brand-800";
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsx(
@@ -637,7 +639,11 @@ var Input = ({
           stateClass,
           className
         ),
-        style: { ...styleOverride({ bgColor, textColor, borderColor }), ...style },
+        style: {
+          minWidth: placeholderMinWidth,
+          ...styleOverride({ bgColor, textColor, borderColor }),
+          ...style
+        },
         ...rest
       }
     ),
@@ -677,7 +683,7 @@ function SortIcon({
           {
             "data-sort-direction": "asc",
             "aria-hidden": "true",
-            className: cn("h-3 w-3", state === "asc" ? active : inactive)
+            className: cn("size-4", state === "asc" ? active : inactive)
           }
         ),
         /* @__PURE__ */ jsx(
@@ -685,7 +691,7 @@ function SortIcon({
           {
             "data-sort-direction": "desc",
             "aria-hidden": "true",
-            className: cn("h-3 w-3", state === "desc" ? active : inactive)
+            className: cn("size-4", state === "desc" ? active : inactive)
           }
         )
       ]
@@ -784,7 +790,7 @@ function DataDrivenTable({
                 ChevronDown,
                 {
                   "aria-hidden": "true",
-                  className: "pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500 dark:text-gray-400"
+                  className: "pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-gray-500 dark:text-gray-400"
                 }
               )
             ] }),
@@ -801,7 +807,7 @@ function DataDrivenTable({
                 setSearch(e.target.value);
                 setPage(1);
               },
-              className: "max-w-[220px]"
+              className: "sm:w-auto"
             }
           )
         ] }),
@@ -940,7 +946,7 @@ function Table({
   }
   return /* @__PURE__ */ jsx("table", { className: cn("min-w-full", className), ...rest, children });
 }
-var ChevronIcon = () => /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4", strokeWidth: 1.5, "aria-hidden": "true" });
+var ChevronIcon = () => /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", strokeWidth: 1.5, "aria-hidden": "true" });
 var Breadcrumb = ({ pageTitle, items }) => {
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 mb-6", children: [
     /* @__PURE__ */ jsx(
@@ -1010,8 +1016,8 @@ var ThemeToggleButton = ({
       ),
       ...rest,
       children: [
-        /* @__PURE__ */ jsx(Sun, { className: "hidden h-5 w-5 dark:block", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx(Moon, { className: "h-5 w-5 dark:hidden", "aria-hidden": "true" })
+        /* @__PURE__ */ jsx(Sun, { className: "hidden size-4 dark:block", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(Moon, { className: "size-4 dark:hidden", "aria-hidden": "true" })
       ]
     }
   );
@@ -1126,7 +1132,7 @@ var Toast = ({
               "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg",
               styles.iconWrap
             ),
-            children: icon ?? /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5", "aria-hidden": "true" })
+            children: icon ?? /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": "true" })
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -1140,7 +1146,7 @@ var Toast = ({
             "aria-label": "Close",
             onClick: onClose,
             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: "h-[18px] w-[18px]", "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
           }
         ),
         !hideAccentBar && /* @__PURE__ */ jsx(
@@ -1159,7 +1165,7 @@ var ChevronIcon2 = ({ open }) => /* @__PURE__ */ jsx(
   ChevronDown,
   {
     className: cn(
-      "h-5 w-5 shrink-0 text-gray-500 transition-transform duration-200 dark:text-gray-400",
+      "size-4 shrink-0 text-gray-500 transition-transform duration-200 dark:text-gray-400",
       open && "rotate-180"
     ),
     "aria-hidden": "true"
@@ -1638,7 +1644,7 @@ var Drawer = ({
               onClick: onClose,
               "aria-label": "Close drawer",
               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(X, { className: "h-6 w-6", "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
             }
           ),
           children
@@ -1711,7 +1717,7 @@ var Chip = ({
             "aria-label": "Remove",
             onClick: onClose,
             className: "ml-0.5 flex h-4 w-4 items-center justify-center rounded-full text-current opacity-70 transition hover:opacity-100 focus:outline-none",
-            children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3", strokeWidth: 2, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx(X, { className: "size-4", strokeWidth: 2, "aria-hidden": "true" })
           }
         )
       ]
@@ -1977,7 +1983,7 @@ var Snippet = ({
               "absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center rounded-lg text-gray-500 transition hover:bg-gray-200 hover:text-gray-700 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-white/90",
               copied && "text-success-500 dark:text-success-500"
             ),
-            children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4", "aria-hidden": "true" })
+            children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Copy, { className: "size-4", "aria-hidden": "true" })
           }
         )
       ]
@@ -2077,7 +2083,7 @@ var Checkbox = ({
           checked && /* @__PURE__ */ jsx(
             Check,
             {
-              className: "pointer-events-none absolute left-1/2 top-1/2 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 text-white",
+              className: "pointer-events-none absolute left-1/2 top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 text-white",
               strokeWidth: 3,
               "aria-hidden": "true"
             }
@@ -2085,7 +2091,7 @@ var Checkbox = ({
           disabled && /* @__PURE__ */ jsx(
             Check,
             {
-              className: "pointer-events-none absolute left-1/2 top-1/2 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 text-gray-200",
+              className: "pointer-events-none absolute left-1/2 top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 text-gray-200",
               strokeWidth: 3,
               "aria-hidden": "true"
             }
@@ -2214,7 +2220,12 @@ var Switch = ({
   defaultChecked = false,
   disabled = false,
   onChange,
-  color = "blue"
+  color = "blue",
+  className,
+  onClick,
+  onKeyDown,
+  "aria-label": ariaLabel,
+  ...rest
 }) => {
   const isControlled = checked !== void 0;
   const [internalChecked, setInternalChecked] = useState(defaultChecked);
@@ -2229,6 +2240,20 @@ var Switch = ({
       onChange(newCheckedState);
     }
   };
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) {
+      handleToggle();
+    }
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      handleToggle();
+    }
+  };
   const offTrack = "bg-gray-200 ring-1 ring-inset ring-gray-300 dark:bg-white/10 dark:ring-gray-700";
   const switchColors = color === "blue" ? {
     background: isChecked ? "bg-brand-500 " : offTrack,
@@ -2239,14 +2264,23 @@ var Switch = ({
     // Gray version
     knob: isChecked ? "translate-x-full bg-white" : "translate-x-0 bg-white"
   };
+  const hasLabel = label !== void 0 && label !== null && label !== "";
   return /* @__PURE__ */ jsxs(
     "label",
     {
+      role: "switch",
+      "aria-checked": isChecked,
+      "aria-disabled": disabled || void 0,
+      "aria-label": ariaLabel ?? (!hasLabel ? "Toggle switch" : void 0),
+      tabIndex: disabled ? -1 : 0,
       className: cn(
         "flex cursor-pointer select-none items-center gap-3 text-sm font-medium",
-        disabled ? "text-gray-400" : "text-gray-700 dark:text-gray-400"
+        disabled ? "text-gray-400" : "text-gray-700 dark:text-gray-400",
+        className
       ),
-      onClick: handleToggle,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ...rest,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsx(
@@ -2268,7 +2302,7 @@ var Switch = ({
             }
           )
         ] }),
-        label
+        hasLabel && /* @__PURE__ */ jsx("span", { children: label })
       ]
     }
   );
@@ -2330,7 +2364,7 @@ var Select = ({
               "span",
               {
                 "aria-hidden": "true",
-                className: "flex h-5 w-5 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4",
+                className: "flex h-5 w-5 shrink-0 items-center justify-center [&>svg]:size-4",
                 children: selectedOption.icon
               }
             ),
@@ -2340,7 +2374,7 @@ var Select = ({
             ChevronDown,
             {
               className: cn(
-                "ml-2 h-5 w-5 shrink-0 stroke-current text-gray-500 transition-transform dark:text-gray-400",
+                "ml-2 size-4 shrink-0 stroke-current text-gray-500 transition-transform dark:text-gray-400",
                 isOpen && "rotate-180"
               ),
               "aria-hidden": "true"
@@ -2375,7 +2409,7 @@ var Select = ({
                     "span",
                     {
                       "aria-hidden": "true",
-                      className: "flex h-5 w-5 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4",
+                      className: "flex h-5 w-5 shrink-0 items-center justify-center [&>svg]:size-4",
                       children: option.icon
                     }
                   ),
@@ -2384,7 +2418,7 @@ var Select = ({
                 isSelected && /* @__PURE__ */ jsx(
                   Check,
                   {
-                    className: "ml-2 h-4 w-4 shrink-0 stroke-current",
+                    className: "ml-2 size-4 shrink-0 stroke-current",
                     "aria-hidden": "true"
                   }
                 )
@@ -2438,7 +2472,7 @@ var MultiSelect = ({
                 {
                   onClick: () => removeOption(index, selectedOptions[index]),
                   className: "pl-2 text-gray-500 cursor-pointer group-hover:text-gray-400 dark:text-gray-400",
-                  children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5", role: "button", "aria-hidden": "true" })
+                  children: /* @__PURE__ */ jsx(X, { className: "size-4", role: "button", "aria-hidden": "true" })
                 }
               ) })
             ]
@@ -2462,7 +2496,7 @@ var MultiSelect = ({
             children: /* @__PURE__ */ jsx(
               ChevronDown,
               {
-                className: `stroke-current ${isOpen ? "rotate-180" : ""}`,
+                className: `size-4 stroke-current ${isOpen ? "rotate-180" : ""}`,
                 "aria-hidden": "true"
               }
             )
@@ -2499,7 +2533,7 @@ var MultiSelect = ({
                       isSelected && /* @__PURE__ */ jsx(
                         Check,
                         {
-                          className: "mr-2 h-4 w-4 shrink-0 stroke-current text-brand-500",
+                          className: "mr-2 size-4 shrink-0 stroke-current text-brand-500",
                           "aria-hidden": "true"
                         }
                       )
@@ -2561,7 +2595,7 @@ var DatePicker = ({
           className: "h-11 w-full rounded-lg border appearance-none pl-4 pr-11 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 focus:outline-hidden focus:ring-3 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 bg-white text-gray-800 border-gray-300 focus:border-brand-300 focus:ring-brand-500/20 dark:border-gray-700 dark:focus:border-brand-800"
         }
       ),
-      /* @__PURE__ */ jsx("span", { className: "absolute text-gray-500 -translate-y-1/2 pointer-events-none right-3 top-1/2 dark:text-gray-400", children: /* @__PURE__ */ jsx(Calendar, { className: "size-6", "aria-hidden": "true" }) })
+      /* @__PURE__ */ jsx("span", { className: "absolute text-gray-500 -translate-y-1/2 pointer-events-none right-3 top-1/2 dark:text-gray-400", children: /* @__PURE__ */ jsx(Calendar, { className: "size-4", "aria-hidden": "true" }) })
     ] })
   ] });
 };
@@ -2637,7 +2671,7 @@ var DateTimePicker = ({
             className: "h-11 w-full appearance-none rounded-lg border border-gray-300 bg-white py-2.5 pl-4 pr-11 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/20 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ jsx(Calendar, { className: "size-6", "aria-hidden": "true" }) })
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ jsx(Calendar, { className: "size-4", "aria-hidden": "true" }) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex h-11 items-center rounded-lg border border-gray-300 bg-white px-3 text-sm text-gray-800 shadow-theme-xs focus-within:border-brand-300 focus-within:ring-3 focus-within:ring-brand-500/20 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus-within:border-brand-800", children: [
         /* @__PURE__ */ jsx(
@@ -2667,7 +2701,7 @@ var DateTimePicker = ({
             className: timeFieldClass
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "ml-1 text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ jsx(Clock, { className: "h-5 w-5", "aria-hidden": "true" }) })
+        /* @__PURE__ */ jsx("span", { className: "ml-1 text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ jsx(Clock, { className: "size-4", "aria-hidden": "true" }) })
       ] })
     ] })
   ] });
@@ -2696,7 +2730,7 @@ var PasswordInput = ({
         onClick: () => setShow((s) => !s),
         "aria-label": show ? "Hide password" : "Show password",
         className: "absolute right-4 top-1/2 z-30 -translate-y-1/2 cursor-pointer text-gray-500 dark:text-gray-400",
-        children: show ? /* @__PURE__ */ jsx(Eye, { className: "h-5 w-5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(EyeOff, { className: "h-5 w-5", "aria-hidden": "true" })
+        children: show ? /* @__PURE__ */ jsx(Eye, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(EyeOff, { className: "size-4", "aria-hidden": "true" })
       }
     )
   ] });