@ladder-ui/checkbox 0.4.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-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);
-    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 {
-    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.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-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-bg-interactive);
-  --lui-checkbox-checked-text: var(--lui-text-inverse);
-  /* Focus ring */
-  --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);
-}
+: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.js

@@ -1,67 +1 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@ladder-ui/core');
-var primitives = require('@ladder-ui/primitives');
-
-// ── 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" }) }));
-}
-// ── 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.
- *
- * - 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).
- * - No third-party dependencies — checkmark and dash are inline SVGs.
- * - 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 }) {
-    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;
+"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,59 +1 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-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() {
-    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" }) }));
-}
-// ── 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.
- *
- * - 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).
- * - No third-party dependencies — checkmark and dash are inline SVGs.
- * - 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 }) {
-    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";
-
-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.4.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,8 +48,8 @@
     "sass": "^1.90.0",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "@ladder-ui/core": "0.4.0",
-    "@ladder-ui/primitives": "0.4.0"
+    "@ladder-ui/core": "0.5.0",
+    "@ladder-ui/primitives": "0.5.0"
   },
   "peerDependencies": {
     "@ladder-ui/core": ">=0.0.0",