@ladder-ui/checkbox 0.2.0 → 0.4.0

package/dist/checkbox.css

@@ -51,7 +51,7 @@
   .lui-checkbox:has(.lui-checkbox__input:focus-visible) .lui-checkbox__control {
     outline: none;
     border-color: var(--lui-checkbox-focus-border);
-    box-shadow: 0 0 0 2px var(--lui-surface), 0 0 0 4px var(--lui-checkbox-focus-ring-color);
+    box-shadow: 0 0 0 2px var(--lui-bg-surface), 0 0 0 4px var(--lui-checkbox-focus-ring-color);
   }
   .lui-checkbox:has(.lui-checkbox__input:checked:not(:indeterminate)) .lui-checkbox__control {
     background-color: var(--lui-checkbox-checked-bg);
@@ -75,7 +75,7 @@
   }
   .lui-checkbox--error:has(.lui-checkbox__input:focus-visible) .lui-checkbox__control {
     border-color: var(--lui-error);
-    box-shadow: 0 0 0 2px var(--lui-surface), 0 0 0 4px color-mix(in srgb, var(--lui-error) 40%, transparent);
+    box-shadow: 0 0 0 2px var(--lui-bg-surface), 0 0 0 4px color-mix(in srgb, var(--lui-error) 40%, transparent);
   }
   .lui-checkbox--sm {
     width: var(--lui-checkbox-size-sm);

package/dist/checkbox.d.ts

@@ -27,10 +27,8 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
  * - Renders a native `<input type="checkbox">` for full browser and AT support.
  * - `ref` points directly to the native input element.
  * - Supports `indeterminate` state (shows a dash — useful for "select all" patterns).
- * - `status="error"` sets `aria-invalid="true"` automatically.
  * - No third-party dependencies — checkmark and dash are inline SVGs.
- * - All visual state (checked, indeterminate, focus, disabled, error) is driven by
- *   CSS `:has()` selectors — zero JS involved in rendering.
+ * - All visual state is driven by CSS `:has()` selectors — zero JS in rendering.
  */
 export declare function Checkbox({ ref, className, size, status, indeterminate, disabled, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Checkbox {

package/dist/checkbox.vars.css

@@ -4,14 +4,14 @@
   --lui-checkbox-size-md: 1rem; /* 16px */
   --lui-checkbox-size-lg: 1.25rem; /* 20px */
   /* Background & border (unchecked) */
-  --lui-checkbox-bg: var(--lui-surface);
-  --lui-checkbox-border: color-mix(in srgb, var(--lui-surface-border) 93%, var(--lui-surface-text));
+  --lui-checkbox-bg: var(--lui-bg-surface);
+  --lui-checkbox-border: color-mix(in srgb, var(--lui-border-default) 93%, var(--lui-text-primary));
   /* Checked & indeterminate */
-  --lui-checkbox-checked-bg: var(--lui-primary);
-  --lui-checkbox-checked-text: var(--lui-primary-text);
+  --lui-checkbox-checked-bg: var(--lui-bg-interactive);
+  --lui-checkbox-checked-text: var(--lui-text-inverse);
   /* Focus ring */
-  --lui-checkbox-focus-border: var(--lui-primary);
-  --lui-checkbox-focus-ring-color: color-mix(in srgb, var(--lui-primary) 40%, transparent);
+  --lui-checkbox-focus-border: var(--lui-bg-interactive);
+  --lui-checkbox-focus-ring-color: color-mix(in srgb, var(--lui-bg-interactive) 40%, transparent);
   /* Shape */
   --lui-checkbox-radius: var(--lui-radius-sm);
 }

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { Checkbox, type CheckboxProps } from "./checkbox";
 export { Checkbox as default } from "./checkbox";
+export { useCheckbox, type UseCheckboxProps } from "@ladder-ui/primitives";

package/dist/index.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var concatClassNames = require('@ladder-ui/core/concatClassNames');
-var react = require('react');
+var core = require('@ladder-ui/core');
+var primitives = require('@ladder-ui/primitives');
 
 // ── Internal SVG icons (no external dependency) ───────────────────────────────
 function CheckIcon() {
@@ -13,6 +13,30 @@ function CheckIcon() {
 function IndeterminateIcon() {
     return (jsxRuntime.jsx("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: jsxRuntime.jsx("line", { x1: "2.5", y1: "6", x2: "9.5", y2: "6" }) }));
 }
+// ── Variants ──────────────────────────────────────────────────────────────────
+const checkboxVariants = core.cva({
+    base: "lui-checkbox",
+    variants: {
+        size: {
+            sm: "lui-checkbox--sm",
+            md: "lui-checkbox--md",
+            lg: "lui-checkbox--lg",
+        },
+        status: {
+            default: "",
+            error: "lui-checkbox--error",
+        },
+        disabled: {
+            true: "lui-checkbox--disabled",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        status: "default",
+        disabled: false,
+    },
+});
 // ── Component ─────────────────────────────────────────────────────────────────
 /**
  * Checkbox — a fully accessible, themeable checkbox.
@@ -20,32 +44,24 @@ function IndeterminateIcon() {
  * - Renders a native `<input type="checkbox">` for full browser and AT support.
  * - `ref` points directly to the native input element.
  * - Supports `indeterminate` state (shows a dash — useful for "select all" patterns).
- * - `status="error"` sets `aria-invalid="true"` automatically.
  * - No third-party dependencies — checkmark and dash are inline SVGs.
- * - All visual state (checked, indeterminate, focus, disabled, error) is driven by
- *   CSS `:has()` selectors — zero JS involved in rendering.
+ * - All visual state is driven by CSS `:has()` selectors — zero JS in rendering.
  */
 function Checkbox({ ref, className, size = "md", status = "default", indeterminate = false, disabled, ...props }) {
-    // Internal ref required to set .indeterminate imperatively (no HTML attribute).
-    const internalRef = react.useRef(null);
-    react.useEffect(() => {
-        if (internalRef.current) {
-            internalRef.current.indeterminate = indeterminate;
-        }
-    }, [indeterminate]);
-    // Merge external ref (from the consumer) with our internal ref.
-    function setRef(node) {
-        internalRef.current = node;
-        if (typeof ref === "function") {
-            ref(node);
-        }
-        else if (ref) {
-            ref.current = node;
-        }
-    }
-    return (jsxRuntime.jsxs("span", { "data-slot": "checkbox", "data-disabled": disabled ? "true" : undefined, "data-status": status !== "default" ? status : undefined, className: concatClassNames("lui-checkbox", `lui-checkbox--${size}`, status === "error" && "lui-checkbox--error", disabled && "lui-checkbox--disabled", className), children: [jsxRuntime.jsx("input", { ref: setRef, type: "checkbox", className: "lui-checkbox__input", disabled: disabled, "aria-invalid": props["aria-invalid"] ?? (status === "error" ? true : undefined), ...props }), jsxRuntime.jsxs("span", { className: "lui-checkbox__control", "aria-hidden": "true", children: [jsxRuntime.jsx("span", { className: "lui-checkbox__icon lui-checkbox__icon--check", children: jsxRuntime.jsx(CheckIcon, {}) }), jsxRuntime.jsx("span", { className: "lui-checkbox__icon lui-checkbox__icon--indeterminate", children: jsxRuntime.jsx(IndeterminateIcon, {}) })] })] }));
+    const { wrapperProps, inputProps } = primitives.useCheckbox({
+        ref,
+        indeterminate,
+        status,
+        disabled,
+        "aria-invalid": props["aria-invalid"],
+    });
+    return (jsxRuntime.jsxs("span", { ...wrapperProps, className: checkboxVariants({ size, status, disabled, className }), children: [jsxRuntime.jsx("input", { className: "lui-checkbox__input", ...inputProps, ...props }), jsxRuntime.jsxs("span", { className: "lui-checkbox__control", "aria-hidden": "true", children: [jsxRuntime.jsx("span", { className: "lui-checkbox__icon lui-checkbox__icon--check", children: jsxRuntime.jsx(CheckIcon, {}) }), jsxRuntime.jsx("span", { className: "lui-checkbox__icon lui-checkbox__icon--indeterminate", children: jsxRuntime.jsx(IndeterminateIcon, {}) })] })] }));
 }
 Checkbox.displayName = "Checkbox";
 
+Object.defineProperty(exports, "useCheckbox", {
+    enumerable: true,
+    get: function () { return primitives.useCheckbox; }
+});
 exports.Checkbox = Checkbox;
 exports.default = Checkbox;

package/dist/index.mjs

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import concatClassNames from '@ladder-ui/core/concatClassNames';
-import { useRef, useEffect } from 'react';
+import { cva } from '@ladder-ui/core';
+import { useCheckbox } from '@ladder-ui/primitives';
+export { useCheckbox } from '@ladder-ui/primitives';
 
 // ── Internal SVG icons (no external dependency) ───────────────────────────────
 function CheckIcon() {
@@ -9,6 +10,30 @@ function CheckIcon() {
 function IndeterminateIcon() {
     return (jsx("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: jsx("line", { x1: "2.5", y1: "6", x2: "9.5", y2: "6" }) }));
 }
+// ── Variants ──────────────────────────────────────────────────────────────────
+const checkboxVariants = cva({
+    base: "lui-checkbox",
+    variants: {
+        size: {
+            sm: "lui-checkbox--sm",
+            md: "lui-checkbox--md",
+            lg: "lui-checkbox--lg",
+        },
+        status: {
+            default: "",
+            error: "lui-checkbox--error",
+        },
+        disabled: {
+            true: "lui-checkbox--disabled",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        status: "default",
+        disabled: false,
+    },
+});
 // ── Component ─────────────────────────────────────────────────────────────────
 /**
  * Checkbox — a fully accessible, themeable checkbox.
@@ -16,30 +41,18 @@ function IndeterminateIcon() {
  * - Renders a native `<input type="checkbox">` for full browser and AT support.
  * - `ref` points directly to the native input element.
  * - Supports `indeterminate` state (shows a dash — useful for "select all" patterns).
- * - `status="error"` sets `aria-invalid="true"` automatically.
  * - No third-party dependencies — checkmark and dash are inline SVGs.
- * - All visual state (checked, indeterminate, focus, disabled, error) is driven by
- *   CSS `:has()` selectors — zero JS involved in rendering.
+ * - All visual state is driven by CSS `:has()` selectors — zero JS in rendering.
  */
 function Checkbox({ ref, className, size = "md", status = "default", indeterminate = false, disabled, ...props }) {
-    // Internal ref required to set .indeterminate imperatively (no HTML attribute).
-    const internalRef = useRef(null);
-    useEffect(() => {
-        if (internalRef.current) {
-            internalRef.current.indeterminate = indeterminate;
-        }
-    }, [indeterminate]);
-    // Merge external ref (from the consumer) with our internal ref.
-    function setRef(node) {
-        internalRef.current = node;
-        if (typeof ref === "function") {
-            ref(node);
-        }
-        else if (ref) {
-            ref.current = node;
-        }
-    }
-    return (jsxs("span", { "data-slot": "checkbox", "data-disabled": disabled ? "true" : undefined, "data-status": status !== "default" ? status : undefined, className: concatClassNames("lui-checkbox", `lui-checkbox--${size}`, status === "error" && "lui-checkbox--error", disabled && "lui-checkbox--disabled", className), children: [jsx("input", { ref: setRef, type: "checkbox", className: "lui-checkbox__input", disabled: disabled, "aria-invalid": props["aria-invalid"] ?? (status === "error" ? true : undefined), ...props }), jsxs("span", { className: "lui-checkbox__control", "aria-hidden": "true", children: [jsx("span", { className: "lui-checkbox__icon lui-checkbox__icon--check", children: jsx(CheckIcon, {}) }), jsx("span", { className: "lui-checkbox__icon lui-checkbox__icon--indeterminate", children: jsx(IndeterminateIcon, {}) })] })] }));
+    const { wrapperProps, inputProps } = useCheckbox({
+        ref,
+        indeterminate,
+        status,
+        disabled,
+        "aria-invalid": props["aria-invalid"],
+    });
+    return (jsxs("span", { ...wrapperProps, className: checkboxVariants({ size, status, disabled, className }), children: [jsx("input", { className: "lui-checkbox__input", ...inputProps, ...props }), jsxs("span", { className: "lui-checkbox__control", "aria-hidden": "true", children: [jsx("span", { className: "lui-checkbox__icon lui-checkbox__icon--check", children: jsx(CheckIcon, {}) }), jsx("span", { className: "lui-checkbox__icon lui-checkbox__icon--indeterminate", children: jsx(IndeterminateIcon, {}) })] })] }));
 }
 Checkbox.displayName = "Checkbox";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ladder-ui/checkbox",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -47,7 +47,8 @@
     "sass": "^1.90.0",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "@ladder-ui/core": "0.2.0"
+    "@ladder-ui/core": "0.4.0",
+    "@ladder-ui/primitives": "0.4.0"
   },
   "peerDependencies": {
     "@ladder-ui/core": ">=0.0.0",