@ladder-ui/checkbox 0.3.0 → 0.5.0

package/dist/checkbox.css

@@ -1,88 +1 @@
-@layer components {
-  .lui-checkbox {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    vertical-align: middle;
-    width: var(--lui-checkbox-size-md);
-    height: var(--lui-checkbox-size-md);
-  }
-  .lui-checkbox__input {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    opacity: 0;
-    cursor: pointer;
-    z-index: 1;
-  }
-  .lui-checkbox__input:disabled {
-    cursor: not-allowed;
-  }
-  .lui-checkbox__control {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    background-color: var(--lui-checkbox-bg);
-    border: 1px solid var(--lui-checkbox-border);
-    border-radius: var(--lui-checkbox-radius);
-    color: var(--lui-checkbox-checked-text);
-    transition: var(--lui-transition);
-    pointer-events: none;
-    flex-shrink: 0;
-  }
-  .lui-checkbox__icon {
-    display: none;
-    align-items: center;
-    justify-content: center;
-    width: 65%;
-    height: 65%;
-  }
-  .lui-checkbox__icon svg {
-    width: 100%;
-    height: 100%;
-  }
-  .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);
-  }
-  .lui-checkbox:has(.lui-checkbox__input:checked:not(:indeterminate)) .lui-checkbox__control {
-    background-color: var(--lui-checkbox-checked-bg);
-    border-color: var(--lui-checkbox-checked-bg);
-  }
-  .lui-checkbox:has(.lui-checkbox__input:checked:not(:indeterminate)) .lui-checkbox__icon--check {
-    display: flex;
-  }
-  .lui-checkbox:has(.lui-checkbox__input:indeterminate) .lui-checkbox__control {
-    background-color: var(--lui-checkbox-checked-bg);
-    border-color: var(--lui-checkbox-checked-bg);
-  }
-  .lui-checkbox:has(.lui-checkbox__input:indeterminate) .lui-checkbox__icon--indeterminate {
-    display: flex;
-  }
-  .lui-checkbox:has(.lui-checkbox__input:disabled) {
-    opacity: var(--lui-disabled-opacity);
-  }
-  .lui-checkbox--error .lui-checkbox__control {
-    border-color: var(--lui-error);
-  }
-  .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);
-  }
-  .lui-checkbox--sm {
-    width: var(--lui-checkbox-size-sm);
-    height: var(--lui-checkbox-size-sm);
-  }
-  .lui-checkbox--lg {
-    width: var(--lui-checkbox-size-lg);
-    height: var(--lui-checkbox-size-lg);
-  }
-}
+@layer components{.lui-checkbox{align-items:center;display:inline-flex;flex-shrink:0;height:var(--lui-checkbox-size-md);justify-content:center;position:relative;vertical-align:middle;width:var(--lui-checkbox-size-md)}.lui-checkbox__input{cursor:pointer;height:100%;inset:0;margin:0;opacity:0;padding:0;position:absolute;width:100%;z-index:1}.lui-checkbox__input:disabled{cursor:not-allowed}.lui-checkbox__control{align-items:center;background-color:var(--lui-checkbox-bg);border:1px solid var(--lui-checkbox-border);border-radius:var(--lui-checkbox-radius);color:var(--lui-checkbox-checked-text);display:flex;flex-shrink:0;height:100%;justify-content:center;pointer-events:none;transition:var(--lui-transition);width:100%}.lui-checkbox__icon{align-items:center;display:none;height:65%;justify-content:center;width:65%}.lui-checkbox__icon svg{height:100%;width:100%}.lui-checkbox:has(.lui-checkbox__input:focus-visible) .lui-checkbox__control{border-color:var(--lui-checkbox-focus-border);box-shadow:0 0 0 2px var(--lui-bg-surface),0 0 0 4px var(--lui-checkbox-focus-ring-color);outline:none}.lui-checkbox:has(.lui-checkbox__input:checked:not(:indeterminate)) .lui-checkbox__control{background-color:var(--lui-checkbox-checked-bg);border-color:var(--lui-checkbox-checked-bg)}.lui-checkbox:has(.lui-checkbox__input:checked:not(:indeterminate)) .lui-checkbox__icon--check{display:flex}.lui-checkbox:has(.lui-checkbox__input:indeterminate) .lui-checkbox__control{background-color:var(--lui-checkbox-checked-bg);border-color:var(--lui-checkbox-checked-bg)}.lui-checkbox:has(.lui-checkbox__input:indeterminate) .lui-checkbox__icon--indeterminate{display:flex}.lui-checkbox:has(.lui-checkbox__input:disabled){opacity:var(--lui-disabled-opacity)}.lui-checkbox--error .lui-checkbox__control{border-color:var(--lui-error)}.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-bg-surface),0 0 0 4px color-mix(in srgb,var(--lui-error) 40%,transparent)}.lui-checkbox--sm{height:var(--lui-checkbox-size-sm);width:var(--lui-checkbox-size-sm)}.lui-checkbox--lg{height:var(--lui-checkbox-size-lg);width:var(--lui-checkbox-size-lg)}}

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

@@ -1,17 +1 @@
-:root {
-  /* Sizes */
-  --lui-checkbox-size-sm: 0.875rem; /* 14px */
-  --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));
-  /* Checked & indeterminate */
-  --lui-checkbox-checked-bg: var(--lui-primary);
-  --lui-checkbox-checked-text: var(--lui-primary-text);
-  /* Focus ring */
-  --lui-checkbox-focus-border: var(--lui-primary);
-  --lui-checkbox-focus-ring-color: color-mix(in srgb, var(--lui-primary) 40%, transparent);
-  /* Shape */
-  --lui-checkbox-radius: var(--lui-radius-sm);
-}
+:root{--lui-checkbox-size-sm:0.875rem;--lui-checkbox-size-md:1rem;--lui-checkbox-size-lg:1.25rem;--lui-checkbox-bg:var(--lui-bg-surface);--lui-checkbox-border:color-mix(in srgb,var(--lui-border-default) 93%,var(--lui-text-primary));--lui-checkbox-checked-bg:var(--lui-bg-interactive);--lui-checkbox-checked-text:var(--lui-text-inverse);--lui-checkbox-focus-border:var(--lui-bg-interactive);--lui-checkbox-focus-ring-color:color-mix(in srgb,var(--lui-bg-interactive) 40%,transparent);--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

@@ -1,51 +1 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var concatClassNames = require('@ladder-ui/core/concatClassNames');
-var react = require('react');
-
-// ── Internal SVG icons (no external dependency) ───────────────────────────────
-function CheckIcon() {
-    return (jsxRuntime.jsx("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M2 6 L5 9 L10 3" }) }));
-}
-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" }) }));
-}
-// ── Component ─────────────────────────────────────────────────────────────────
-/**
- * Checkbox — a fully accessible, themeable checkbox.
- *
- * - 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.
- */
-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, {}) })] })] }));
-}
-Checkbox.displayName = "Checkbox";
-
-exports.Checkbox = Checkbox;
-exports.default = Checkbox;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("@ladder-ui/core"),s=require("@ladder-ui/primitives");function r(){return e.jsx("svg",{viewBox:"0 0 12 12",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:e.jsx("path",{d:"M2 6 L5 9 L10 3"})})}function a(){return e.jsx("svg",{viewBox:"0 0 12 12",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round","aria-hidden":"true",children:e.jsx("line",{x1:"2.5",y1:"6",x2:"9.5",y2:"6"})})}const t=i.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:!1}});function c({ref:i,className:c,size:n="md",status:o="default",indeterminate:l=!1,disabled:u,...d}){const{wrapperProps:x,inputProps:h}=s.useCheckbox({ref:i,indeterminate:l,status:o,disabled:u,"aria-invalid":d["aria-invalid"]});return e.jsxs("span",{...x,className:t({size:n,status:o,disabled:u,className:c}),children:[e.jsx("input",{className:"lui-checkbox__input",...h,...d}),e.jsxs("span",{className:"lui-checkbox__control","aria-hidden":"true",children:[e.jsx("span",{className:"lui-checkbox__icon lui-checkbox__icon--check",children:e.jsx(r,{})}),e.jsx("span",{className:"lui-checkbox__icon lui-checkbox__icon--indeterminate",children:e.jsx(a,{})})]})]})}c.displayName="Checkbox",Object.defineProperty(exports,"useCheckbox",{enumerable:!0,get:function(){return s.useCheckbox}}),exports.Checkbox=c,exports.default=c;

package/dist/index.mjs

@@ -1,46 +1 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import concatClassNames from '@ladder-ui/core/concatClassNames';
-import { useRef, useEffect } from 'react';
-
-// ── Internal SVG icons (no external dependency) ───────────────────────────────
-function CheckIcon() {
-    return (jsx("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: jsx("path", { d: "M2 6 L5 9 L10 3" }) }));
-}
-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" }) }));
-}
-// ── Component ─────────────────────────────────────────────────────────────────
-/**
- * Checkbox — a fully accessible, themeable checkbox.
- *
- * - 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.
- */
-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, {}) })] })] }));
-}
-Checkbox.displayName = "Checkbox";
-
-export { Checkbox, Checkbox as default };
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import{cva as r}from"@ladder-ui/core";import{useCheckbox as a}from"@ladder-ui/primitives";export{useCheckbox}from"@ladder-ui/primitives";function s(){return i("svg",{viewBox:"0 0 12 12",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:i("path",{d:"M2 6 L5 9 L10 3"})})}function t(){return i("svg",{viewBox:"0 0 12 12",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round","aria-hidden":"true",children:i("line",{x1:"2.5",y1:"6",x2:"9.5",y2:"6"})})}const o=r({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:!1}});function c({ref:r,className:c,size:n="md",status:l="default",indeterminate:d=!1,disabled:u,...h}){const{wrapperProps:m,inputProps:k}=a({ref:r,indeterminate:d,status:l,disabled:u,"aria-invalid":h["aria-invalid"]});return e("span",{...m,className:o({size:n,status:l,disabled:u,className:c}),children:[i("input",{className:"lui-checkbox__input",...k,...h}),e("span",{className:"lui-checkbox__control","aria-hidden":"true",children:[i("span",{className:"lui-checkbox__icon lui-checkbox__icon--check",children:i(s,{})}),i("span",{className:"lui-checkbox__icon lui-checkbox__icon--indeterminate",children:i(t,{})})]})]})}c.displayName="Checkbox";export{c as Checkbox,c as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ladder-ui/checkbox",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -30,7 +30,8 @@
   "license": "ISC",
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com/ivelaval/ladder-ui.git"
+    "url": "https://github.com/ivelaval/ladder-ui.git",
+    "directory": "packages/checkbox"
   },
   "bugs": {
     "url": "https://github.com/ivelaval/ladder-ui/issues"
@@ -47,7 +48,8 @@
     "sass": "^1.90.0",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "@ladder-ui/core": "0.3.0"
+    "@ladder-ui/core": "0.5.0",
+    "@ladder-ui/primitives": "0.5.0"
   },
   "peerDependencies": {
     "@ladder-ui/core": ">=0.0.0",