@asnewyla/unstyled-checkbox 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 XD
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,60 @@
+# @asnewyla/unstyled-checkbox
+
+Unstyled, accessible checkbox input primitive. Handles checked/indeterminate
+state, focus, and invalid-state tracking without imposing any visual
+styling — the base layer under `@asnewyla/checkbox`.
+
+## Install
+
+```bash
+npm install @asnewyla/unstyled-checkbox
+```
+
+## Usage
+
+```tsx
+import { UnstyledCheckbox } from '@asnewyla/unstyled-checkbox';
+
+// Uncontrolled
+<UnstyledCheckbox aria-label="Accept terms" defaultChecked={false} />
+
+// Controlled
+<UnstyledCheckbox
+  aria-label="Accept terms"
+  checked={accepted}
+  onChange={(e) => setAccepted(e.target.checked)}
+/>
+
+// Indeterminate ("select all" style)
+<UnstyledCheckbox aria-label="Select all" indeterminate />
+
+// Invalid state
+<UnstyledCheckbox aria-label="Accept terms" invalid />
+```
+
+### Props
+
+| Prop | Type | Default |
+|---|---|---|
+| `checked` / `defaultChecked` | `boolean` | — |
+| `indeterminate` | `boolean` | `false` |
+| `onChange` | `(event: React.ChangeEvent<HTMLInputElement>) => void` | — |
+| `disabled` | `boolean` | `false` |
+| `invalid` | `boolean` | `false` |
+
+Uncontrolled by default, same as a native `<input type="checkbox">` — pass
+`checked` + `onChange` to control it yourself. `indeterminate` is a
+DOM-only property with no HTML attribute or plain-JSX-prop equivalent, so
+it's applied imperatively via a ref internally; you don't need to do
+anything differently as a consumer.
+
+State is exposed via `data-checked`, `data-indeterminate`, `data-focused`,
+`data-disabled`, and `data-invalid`/`aria-invalid` — style off these
+attributes in `@asnewyla/checkbox` (or your own styled wrapper) rather than
+`:checked`/`:indeterminate` pseudo-classes, for the same DevTools-visible,
+test-stable reasons every other `@asnewyla/*` primitive uses `data-*` for
+state.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+
+type UnstyledCheckboxProps = {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    invalid?: boolean;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'defaultChecked' | 'onChange' | 'disabled' | 'invalid'>;
+declare const UnstyledCheckbox: react.ForwardRefExoticComponent<{
+    checked?: boolean;
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    invalid?: boolean;
+} & Omit<react.InputHTMLAttributes<HTMLInputElement>, "type" | "checked" | "defaultChecked" | "onChange" | "disabled" | "invalid"> & react.RefAttributes<HTMLInputElement>>;
+
+export { UnstyledCheckbox, type UnstyledCheckboxProps };

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+
+type UnstyledCheckboxProps = {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    invalid?: boolean;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'defaultChecked' | 'onChange' | 'disabled' | 'invalid'>;
+declare const UnstyledCheckbox: react.ForwardRefExoticComponent<{
+    checked?: boolean;
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    invalid?: boolean;
+} & Omit<react.InputHTMLAttributes<HTMLInputElement>, "type" | "checked" | "defaultChecked" | "onChange" | "disabled" | "invalid"> & react.RefAttributes<HTMLInputElement>>;
+
+export { UnstyledCheckbox, type UnstyledCheckboxProps };

package/dist/index.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/UnstyledCheckbox.tsx
+function booleanToString(value) {
+  return value ? "true" : void 0;
+}
+function UnstyledCheckboxInner({
+  checked,
+  defaultChecked,
+  indeterminate,
+  onChange,
+  disabled,
+  invalid,
+  onFocus,
+  onBlur,
+  ...rest
+}, ref) {
+  const isControlled = checked !== void 0;
+  const [internalChecked, setInternalChecked] = react.useState(
+    defaultChecked ?? false
+  );
+  const isChecked = isControlled ? checked : internalChecked;
+  const [focused, setFocused] = react.useState(false);
+  const inputRef = react.useRef(null);
+  react.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate ?? false;
+    }
+  }, [indeterminate]);
+  const setRefs = (node) => {
+    inputRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };
+  const handleChange = (e) => {
+    if (!isControlled) {
+      setInternalChecked(e.target.checked);
+    }
+    onChange?.(e);
+  };
+  const handleFocus = (e) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
+  const handleBlur = (e) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref: setRefs,
+      ...rest,
+      type: "checkbox",
+      checked: isChecked,
+      onChange: handleChange,
+      "data-checked": booleanToString(isChecked),
+      "data-indeterminate": booleanToString(indeterminate),
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      "data-focused": booleanToString(focused),
+      disabled,
+      "data-disabled": booleanToString(disabled),
+      "data-invalid": booleanToString(invalid),
+      "aria-invalid": invalid ? "true" : void 0
+    }
+  );
+}
+var UnstyledCheckbox = react.forwardRef(UnstyledCheckboxInner);
+
+exports.UnstyledCheckbox = UnstyledCheckbox;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/UnstyledCheckbox.tsx"],"names":["useState","useRef","useEffect","jsx","forwardRef"],"mappings":";;;;;;AAoBA,SAAS,gBAAgB,KAAA,EAAgD;AACvE,EAAA,OAAO,QAAQ,MAAA,GAAS,MAAA;AAC1B;AAEA,SAAS,qBAAA,CACP;AAAA,EACE,OAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,eAAe,OAAA,KAAY,MAAA;AACjC,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAIA,cAAA;AAAA,IAC5C,cAAA,IAAkB;AAAA,GACpB;AACA,EAAA,MAAM,SAAA,GAAY,eAAe,OAAA,GAAU,eAAA;AAE3C,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAAS,KAAK,CAAA;AAE5C,EAAA,MAAM,QAAA,GAAWC,aAAgC,IAAI,CAAA;AAErD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAS,OAAA,EAAS;AACpB,MAAA,QAAA,CAAS,OAAA,CAAQ,gBAAgB,aAAA,IAAiB,KAAA;AAAA,IACpD;AAAA,EACF,CAAA,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,EAAA,MAAM,OAAA,GAAU,CAAC,IAAA,KAAkC;AACjD,IAAA,QAAA,CAAS,OAAA,GAAU,IAAA;AACnB,IAAA,IAAI,OAAO,QAAQ,UAAA,EAAY;AAC7B,MAAA,GAAA,CAAI,IAAI,CAAA;AAAA,IACV,WAAW,GAAA,EAAK;AACd,MAAA,GAAA,CAAI,OAAA,GAAU,IAAA;AAAA,IAChB;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,YAAA,GAAe,CAAC,CAAA,KAA2C;AAC/D,IAAA,IAAI,CAAC,YAAA,EAAc;AACjB,MAAA,kBAAA,CAAmB,CAAA,CAAE,OAAO,OAAO,CAAA;AAAA,IACrC;AACA,IAAA,QAAA,GAAW,CAAC,CAAA;AAAA,EACd,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,CAAA,KAA0C;AAC7D,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,OAAA,GAAU,CAAC,CAAA;AAAA,EACb,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,CAAC,CAAA,KAA0C;AAC5D,IAAA,UAAA,CAAW,KAAK,CAAA;AAChB,IAAA,MAAA,GAAS,CAAC,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,OAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MACJ,IAAA,EAAK,UAAA;AAAA,MACL,OAAA,EAAS,SAAA;AAAA,MACT,QAAA,EAAU,YAAA;AAAA,MACV,cAAA,EAAc,gBAAgB,SAAS,CAAA;AAAA,MACvC,oBAAA,EAAoB,gBAAgB,aAAa,CAAA;AAAA,MACjD,OAAA,EAAS,WAAA;AAAA,MACT,MAAA,EAAQ,UAAA;AAAA,MACR,cAAA,EAAc,gBAAgB,OAAO,CAAA;AAAA,MACrC,QAAA;AAAA,MACA,eAAA,EAAe,gBAAgB,QAAQ,CAAA;AAAA,MACvC,cAAA,EAAc,gBAAgB,OAAO,CAAA;AAAA,MACrC,cAAA,EAAc,UAAU,MAAA,GAAS;AAAA;AAAA,GACnC;AAEJ;AAEO,IAAM,gBAAA,GAAmBC,iBAG9B,qBAAqB","file":"index.js","sourcesContent":["import {\n  type ForwardedRef,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nexport type UnstyledCheckboxProps = {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  indeterminate?: boolean;\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  disabled?: boolean;\n  invalid?: boolean;\n} & Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type' | 'checked' | 'defaultChecked' | 'onChange' | 'disabled' | 'invalid'\n>;\n\nfunction booleanToString(value: boolean | undefined): string | undefined {\n  return value ? 'true' : undefined;\n}\n\nfunction UnstyledCheckboxInner(\n  {\n    checked,\n    defaultChecked,\n    indeterminate,\n    onChange,\n    disabled,\n    invalid,\n    onFocus,\n    onBlur,\n    ...rest\n  }: UnstyledCheckboxProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const isControlled = checked !== undefined;\n  const [internalChecked, setInternalChecked] = useState(\n    defaultChecked ?? false,\n  );\n  const isChecked = isControlled ? checked : internalChecked;\n\n  const [focused, setFocused] = useState(false);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate ?? false;\n    }\n  }, [indeterminate]);\n\n  const setRefs = (node: HTMLInputElement | null) => {\n    inputRef.current = node;\n    if (typeof ref === 'function') {\n      ref(node);\n    } else if (ref) {\n      ref.current = node;\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) {\n      setInternalChecked(e.target.checked);\n    }\n    onChange?.(e);\n  };\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(true);\n    onFocus?.(e);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(false);\n    onBlur?.(e);\n  };\n\n  return (\n    <input\n      ref={setRefs}\n      {...rest}\n      type=\"checkbox\"\n      checked={isChecked}\n      onChange={handleChange}\n      data-checked={booleanToString(isChecked)}\n      data-indeterminate={booleanToString(indeterminate)}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      data-focused={booleanToString(focused)}\n      disabled={disabled}\n      data-disabled={booleanToString(disabled)}\n      data-invalid={booleanToString(invalid)}\n      aria-invalid={invalid ? 'true' : undefined}\n    />\n  );\n}\n\nexport const UnstyledCheckbox = forwardRef<\n  HTMLInputElement,\n  UnstyledCheckboxProps\n>(UnstyledCheckboxInner);\n"]}

package/dist/index.mjs

@@ -0,0 +1,77 @@
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/UnstyledCheckbox.tsx
+function booleanToString(value) {
+  return value ? "true" : void 0;
+}
+function UnstyledCheckboxInner({
+  checked,
+  defaultChecked,
+  indeterminate,
+  onChange,
+  disabled,
+  invalid,
+  onFocus,
+  onBlur,
+  ...rest
+}, ref) {
+  const isControlled = checked !== void 0;
+  const [internalChecked, setInternalChecked] = useState(
+    defaultChecked ?? false
+  );
+  const isChecked = isControlled ? checked : internalChecked;
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate ?? false;
+    }
+  }, [indeterminate]);
+  const setRefs = (node) => {
+    inputRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };
+  const handleChange = (e) => {
+    if (!isControlled) {
+      setInternalChecked(e.target.checked);
+    }
+    onChange?.(e);
+  };
+  const handleFocus = (e) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
+  const handleBlur = (e) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: setRefs,
+      ...rest,
+      type: "checkbox",
+      checked: isChecked,
+      onChange: handleChange,
+      "data-checked": booleanToString(isChecked),
+      "data-indeterminate": booleanToString(indeterminate),
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      "data-focused": booleanToString(focused),
+      disabled,
+      "data-disabled": booleanToString(disabled),
+      "data-invalid": booleanToString(invalid),
+      "aria-invalid": invalid ? "true" : void 0
+    }
+  );
+}
+var UnstyledCheckbox = forwardRef(UnstyledCheckboxInner);
+
+export { UnstyledCheckbox };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/UnstyledCheckbox.tsx"],"names":[],"mappings":";;;;AAoBA,SAAS,gBAAgB,KAAA,EAAgD;AACvE,EAAA,OAAO,QAAQ,MAAA,GAAS,MAAA;AAC1B;AAEA,SAAS,qBAAA,CACP;AAAA,EACE,OAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,eAAe,OAAA,KAAY,MAAA;AACjC,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,QAAA;AAAA,IAC5C,cAAA,IAAkB;AAAA,GACpB;AACA,EAAA,MAAM,SAAA,GAAY,eAAe,OAAA,GAAU,eAAA;AAE3C,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAE5C,EAAA,MAAM,QAAA,GAAW,OAAgC,IAAI,CAAA;AAErD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAS,OAAA,EAAS;AACpB,MAAA,QAAA,CAAS,OAAA,CAAQ,gBAAgB,aAAA,IAAiB,KAAA;AAAA,IACpD;AAAA,EACF,CAAA,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,EAAA,MAAM,OAAA,GAAU,CAAC,IAAA,KAAkC;AACjD,IAAA,QAAA,CAAS,OAAA,GAAU,IAAA;AACnB,IAAA,IAAI,OAAO,QAAQ,UAAA,EAAY;AAC7B,MAAA,GAAA,CAAI,IAAI,CAAA;AAAA,IACV,WAAW,GAAA,EAAK;AACd,MAAA,GAAA,CAAI,OAAA,GAAU,IAAA;AAAA,IAChB;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,YAAA,GAAe,CAAC,CAAA,KAA2C;AAC/D,IAAA,IAAI,CAAC,YAAA,EAAc;AACjB,MAAA,kBAAA,CAAmB,CAAA,CAAE,OAAO,OAAO,CAAA;AAAA,IACrC;AACA,IAAA,QAAA,GAAW,CAAC,CAAA;AAAA,EACd,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,CAAA,KAA0C;AAC7D,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,OAAA,GAAU,CAAC,CAAA;AAAA,EACb,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,CAAC,CAAA,KAA0C;AAC5D,IAAA,UAAA,CAAW,KAAK,CAAA;AAChB,IAAA,MAAA,GAAS,CAAC,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,OAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MACJ,IAAA,EAAK,UAAA;AAAA,MACL,OAAA,EAAS,SAAA;AAAA,MACT,QAAA,EAAU,YAAA;AAAA,MACV,cAAA,EAAc,gBAAgB,SAAS,CAAA;AAAA,MACvC,oBAAA,EAAoB,gBAAgB,aAAa,CAAA;AAAA,MACjD,OAAA,EAAS,WAAA;AAAA,MACT,MAAA,EAAQ,UAAA;AAAA,MACR,cAAA,EAAc,gBAAgB,OAAO,CAAA;AAAA,MACrC,QAAA;AAAA,MACA,eAAA,EAAe,gBAAgB,QAAQ,CAAA;AAAA,MACvC,cAAA,EAAc,gBAAgB,OAAO,CAAA;AAAA,MACrC,cAAA,EAAc,UAAU,MAAA,GAAS;AAAA;AAAA,GACnC;AAEJ;AAEO,IAAM,gBAAA,GAAmB,WAG9B,qBAAqB","file":"index.mjs","sourcesContent":["import {\n  type ForwardedRef,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nexport type UnstyledCheckboxProps = {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  indeterminate?: boolean;\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  disabled?: boolean;\n  invalid?: boolean;\n} & Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type' | 'checked' | 'defaultChecked' | 'onChange' | 'disabled' | 'invalid'\n>;\n\nfunction booleanToString(value: boolean | undefined): string | undefined {\n  return value ? 'true' : undefined;\n}\n\nfunction UnstyledCheckboxInner(\n  {\n    checked,\n    defaultChecked,\n    indeterminate,\n    onChange,\n    disabled,\n    invalid,\n    onFocus,\n    onBlur,\n    ...rest\n  }: UnstyledCheckboxProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const isControlled = checked !== undefined;\n  const [internalChecked, setInternalChecked] = useState(\n    defaultChecked ?? false,\n  );\n  const isChecked = isControlled ? checked : internalChecked;\n\n  const [focused, setFocused] = useState(false);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate ?? false;\n    }\n  }, [indeterminate]);\n\n  const setRefs = (node: HTMLInputElement | null) => {\n    inputRef.current = node;\n    if (typeof ref === 'function') {\n      ref(node);\n    } else if (ref) {\n      ref.current = node;\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) {\n      setInternalChecked(e.target.checked);\n    }\n    onChange?.(e);\n  };\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(true);\n    onFocus?.(e);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(false);\n    onBlur?.(e);\n  };\n\n  return (\n    <input\n      ref={setRefs}\n      {...rest}\n      type=\"checkbox\"\n      checked={isChecked}\n      onChange={handleChange}\n      data-checked={booleanToString(isChecked)}\n      data-indeterminate={booleanToString(indeterminate)}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      data-focused={booleanToString(focused)}\n      disabled={disabled}\n      data-disabled={booleanToString(disabled)}\n      data-invalid={booleanToString(invalid)}\n      aria-invalid={invalid ? 'true' : undefined}\n    />\n  );\n}\n\nexport const UnstyledCheckbox = forwardRef<\n  HTMLInputElement,\n  UnstyledCheckboxProps\n>(UnstyledCheckboxInner);\n"]}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@asnewyla/unstyled-checkbox",
+  "version": "0.2.0",
+  "description": "Unstyled checkbox input primitive with accessibility",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xavierDelaFuente/xd-components.git",
+    "directory": "packages/unstyled-checkbox"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "keywords": [
+    "react",
+    "checkbox",
+    "unstyled",
+    "accessible"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tsup": "^8.1.0",
+    "vitest": "^2.0.0",
+    "@vitest/coverage-v8": "^2.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.0",
+    "@testing-library/jest-dom": "^6.4.0",
+    "jsdom": "^24.0.0",
+    "typescript": "^5.5.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "type-check": "tsc --noEmit"
+  }
+}