@andreagiugni/tailwind-dashboard-ui 1.0.4 → 1.0.5

package/README.md

@@ -203,7 +203,7 @@ Legend: **(+native)** = also extends the element's native HTML attributes.
 | `MultiSelect` | `options`, `selected` / `defaultSelected`, `onChange`, `placeholder`, `disabled` |
 | `Checkbox` | `label`, `checked`, `onChange(checked)`, `disabled`, `checkedColor?` |
 | `Radio` / `RadioSm` | `id`, `name`, `value`, `checked`, `label`, `onChange(value)`, `disabled` |
-| `Switch` | `label`, `checked` / `defaultChecked`, `onChange(checked)`, `color` (blue/gray), `disabled` |
+| `Switch` | `label?`, `checked` / `defaultChecked`, `onChange(checked)`, `color` (blue/gray), `disabled` |
 | `TextArea` | `value`, `onChange`, `rows`, `success`, `error`, `hint`, `disabled` |
 | `FileInput` | `onChange`, `accept`, `multiple`, (+native input) |
 | `PasswordInput` | password field with a show/hide eye toggle, (+native input attrs) |

package/dist/index.cjs

@@ -632,6 +632,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__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -643,7 +645,11 @@ var Input = ({
           stateClass,
           className
         ),
-        style: { ...styleOverride({ bgColor, textColor, borderColor }), ...style },
+        style: {
+          minWidth: placeholderMinWidth,
+          ...styleOverride({ bgColor, textColor, borderColor }),
+          ...style
+        },
         ...rest
       }
     ),
@@ -807,7 +813,7 @@ function DataDrivenTable({
                 setSearch(e.target.value);
                 setPage(1);
               },
-              className: "max-w-[220px]"
+              className: "sm:w-auto"
             }
           )
         ] }),
@@ -2220,7 +2226,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] = React5.useState(defaultChecked);
@@ -2235,6 +2246,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,
@@ -2245,14 +2270,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__ */ jsxRuntime.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: chunkYERNSNT4_cjs.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__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -2274,7 +2308,7 @@ var Switch = ({
             }
           )
         ] }),
-        label
+        hasLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
       ]
     }
   );