@andreagiugni/tailwind-dashboard-ui 1.0.4 → 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

@@ -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
       }
     ),
@@ -801,7 +807,7 @@ function DataDrivenTable({
                 setSearch(e.target.value);
                 setPage(1);
               },
-              className: "max-w-[220px]"
+              className: "sm:w-auto"
             }
           )
         ] }),
@@ -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 })
       ]
     }
   );