@aiready/components 0.14.5 → 0.14.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiready/components",
-  "version": "0.14.5",
+  "version": "0.14.6",
   "description": "Unified shared components library (UI, charts, hooks, utilities) for AIReady",
   "type": "module",
   "main": "./dist/index.js",
@@ -128,7 +128,7 @@
     "framer-motion": "^12.35.0",
     "lucide-react": "^0.577.0",
     "tailwind-merge": "^3.0.0",
-    "@aiready/core": "0.24.6"
+    "@aiready/core": "0.24.7"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.5",

package/src/components/checkbox.tsx

@@ -18,8 +18,10 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           type="checkbox"
           id={checkboxId}
           ref={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}

package/src/components/separator.tsx

@@ -15,6 +15,7 @@ const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
       ref={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]',

package/src/components/switch.tsx

@@ -9,49 +9,70 @@ export interface SwitchProps extends Omit<
   onCheckedChange?: (checked: boolean) => void;
 }
 
-const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
-  (
-    { className, label, id, checked, onCheckedChange, onChange, ...props },
-    ref
-  ) => {
-    const switchId = id || React.useId();
+const Switch = React.forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
+  const {
+    className,
+    label,
+    id,
+    checked,
+    onCheckedChange,
+    onChange,
+    disabled,
+    ...restProps
+  } = props;
+  const switchId = id || React.useId();
+  const isChecked = checked ?? false;
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      onChange?.(e);
-      onCheckedChange?.(e.target.checked);
-    };
+  // Destructure restProps to omit attributes that cause React warnings/errors on buttons
+  const { type: _type, ...buttonProps } = restProps as any;
 
-    return (
-      <div className="flex items-center">
-        <label
-          htmlFor={switchId}
-          className="relative inline-flex cursor-pointer items-center"
-        >
-          <input
-            type="checkbox"
-            id={switchId}
-            ref={ref}
-            checked={checked}
-            onChange={handleChange}
-            className="peer sr-only"
-            {...props}
-          />
-          <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>
-        {label && (
-          <span className="ml-3 text-sm font-medium text-foreground">
-            {label}
-          </span>
-        )}
-      </div>
-    );
-  }
-);
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange?.(e);
+    onCheckedChange?.(e.target.checked);
+  };
+
+  return (
+    <div className="flex items-center">
+      <label
+        htmlFor={switchId}
+        className="relative inline-flex cursor-pointer items-center"
+      >
+        <input
+          type="checkbox"
+          id={switchId}
+          ref={ref}
+          checked={isChecked}
+          onChange={handleChange}
+          className="peer sr-only"
+          disabled={disabled}
+        />
+        <button
+          type="button"
+          role="switch"
+          aria-checked={isChecked}
+          disabled={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>
+      {label && (
+        <span className="ml-3 text-sm font-medium text-foreground">
+          {label}
+        </span>
+      )}
+    </div>
+  );
+});
 Switch.displayName = 'Switch';
 
 export { Switch };