@aiready/components 0.14.4 → 0.14.6

package/dist/index.js

@@ -631,6 +631,7 @@ var Separator = React2.forwardRef(
       ref,
       role: decorative ? "none" : "separator",
       "aria-orientation": orientation,
+      "data-orientation": orientation,
       className: cn(
         "shrink-0 bg-border",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
@@ -651,8 +652,10 @@ var Checkbox = React2.forwardRef(
           type: "checkbox",
           id: checkboxId,
           ref,
+          role: "checkbox",
+          "aria-checked": props.checked ? "true" : "false",
           className: cn(
-            "h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            "peer h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
             className
           ),
           ...props
@@ -721,48 +724,70 @@ var RadioGroup = React2.forwardRef(
   }
 );
 RadioGroup.displayName = "RadioGroup";
-var Switch = React2.forwardRef(
-  ({ className, label, id, checked, onCheckedChange, onChange, ...props }, ref) => {
-    const switchId = id || React2.useId();
-    const handleChange = (e) => {
-      onChange?.(e);
-      onCheckedChange?.(e.target.checked);
-    };
-    return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ jsxs(
-        "label",
-        {
-          htmlFor: switchId,
-          className: "relative inline-flex cursor-pointer items-center",
-          children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "checkbox",
-                id: switchId,
-                ref,
-                checked,
-                onChange: handleChange,
-                className: "peer sr-only",
-                ...props
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  'peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[""] peer-checked:bg-primary peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-ring peer-focus:ring-offset-2 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-                  className
-                )
-              }
-            )
-          ]
-        }
-      ),
-      label && /* @__PURE__ */ jsx("span", { className: "ml-3 text-sm font-medium text-foreground", children: label })
-    ] });
-  }
-);
+var Switch = React2.forwardRef((props, ref) => {
+  const {
+    className,
+    label,
+    id,
+    checked,
+    onCheckedChange,
+    onChange,
+    disabled,
+    ...restProps
+  } = props;
+  const switchId = id || React2.useId();
+  const isChecked = checked ?? false;
+  const { type: _type, ...buttonProps } = restProps;
+  const handleChange = (e) => {
+    onChange?.(e);
+    onCheckedChange?.(e.target.checked);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: switchId,
+        className: "relative inline-flex cursor-pointer items-center",
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              id: switchId,
+              ref,
+              checked: isChecked,
+              onChange: handleChange,
+              className: "peer sr-only",
+              disabled
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "switch",
+              "aria-checked": isChecked,
+              disabled,
+              className: cn(
+                "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+                'bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[""] peer-checked:bg-primary peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-ring peer-focus:ring-offset-2 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+                className
+              ),
+              onClick: () => {
+                if (!disabled) {
+                  const newChecked = !isChecked;
+                  onCheckedChange?.(newChecked);
+                }
+              },
+              ...buttonProps
+            }
+          )
+        ]
+      }
+    ),
+    label && /* @__PURE__ */ jsx("span", { className: "ml-3 text-sm font-medium text-foreground", children: label })
+  ] });
+});
 Switch.displayName = "Switch";
 var Textarea = React2.forwardRef(
   ({ className, ...props }, ref) => {