@spark-ui/checkbox 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 1.1.0 (2023-03-21)
+
+### Bug Fixes
+
+- **checkbox:** solve ts error ([e6fcea3](https://github.com/adevinta/spark/commit/e6fcea3a2ed9d5eb50be31f3e16af38e7b7a9b11))
+
+### Features
+
+- **checkbox:** add cva dependency ([866929e](https://github.com/adevinta/spark/commit/866929e4a6bfb0c2ed5a79e7fa6d7ed81549305a))
+- **checkbox:** add intent prop and use opacity-dim-3 class for disabled components ([54ac320](https://github.com/adevinta/spark/commit/54ac32040d9982daa37ea7ec9ee1d663581170a9))
+- **checkbox:** add to Form group ([3c89bf0](https://github.com/adevinta/spark/commit/3c89bf08c586e2fbf3bed805f65e4c62b78c2ad5))
+- **checkbox:** apply PR suggestions to checkbox ([40f353a](https://github.com/adevinta/spark/commit/40f353a7eb99be04ae8753831839c907cd5c38f6))
+- **checkbox:** basic checkbox component, checkbox disabled and default checked examples ([425f325](https://github.com/adevinta/spark/commit/425f325eb4d2fe02d707fc358fc98c9ef6ddd3fc))
+- **checkbox:** basic component files ([5d6ab52](https://github.com/adevinta/spark/commit/5d6ab52be1ffbbd5a8fa0c38cdae0b92d48444d4))
+- **checkbox:** change unchecked border colors for intent variant ([4da81b5](https://github.com/adevinta/spark/commit/4da81b55c9848d19deca5d7d5ed740266aa12d76))
+- **checkbox:** do not override colors ([cf2a5e0](https://github.com/adevinta/spark/commit/cf2a5e0271a215ad9175894d8b4711a793cffe1c))
+- **checkbox:** remove from Form directory ([222293b](https://github.com/adevinta/spark/commit/222293b90e7a3967667ed253d655dd1699fc9d61))
+- **checkbox:** replace variantPrefix radix by spark ([3c8997b](https://github.com/adevinta/spark/commit/3c8997bd9835d7c6954faec68434365e92d0ae0e))

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Meta Platforms, Inc. and affiliates.
+
+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/dist/Checkbox.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { type StylesProps } from './Checkbox.variants';
+interface CheckboxRadixProps {
+    /**
+     * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
+     */
+    defaultChecked?: boolean;
+    /**
+     * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.
+     */
+    checked?: boolean;
+    /**
+     * Event handler called when the checked state of the checkbox changes.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * When true, prevents the user from interacting with the checkbox.
+     */
+    disabled?: boolean;
+    /**
+     * When true, indicates that the user must check the checkbox before the owning form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * The name of the checkbox. Submitted with its owning form as part of a name/value pair.
+     */
+    name?: string;
+}
+export interface CheckboxProps extends CheckboxRadixProps, // Radix props
+StylesProps, // CVA props (variants)
+Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/Checkbox.variants.d.ts

@@ -0,0 +1,5 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const styles: (props?: ({
+    intent?: "primary" | "success" | "alert" | "error" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export type StylesProps = VariantProps<typeof styles>;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { Checkbox } from './Checkbox';

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),U=require("react-dom"),j=require("class-variance-authority");function g(){return g=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},g.apply(this,arguments)}function R(...e){return o=>e.forEach(t=>function(r,u){typeof r=="function"?r(u):r!=null&&(r.current=u)}(t,o))}function P(...e){return n.useCallback(R(...e),e)}function D(...e){const o=e[0];if(e.length===1)return o;const t=()=>{const r=e.map(u=>({useScope:u(),scopeName:u.scopeName}));return function(u){const s=r.reduce((a,{useScope:i,scopeName:c})=>({...a,...i(u)[`__scope${c}`]}),{});return n.useMemo(()=>({[`__scope${o.scopeName}`]:s}),[s])}};return t.scopeName=o.scopeName,t}function S(e,o,{checkForDefaultPrevented:t=!0}={}){return function(r){if(e?.(r),t===!1||!r.defaultPrevented)return o?.(r)}}function x(e){const o=n.useRef(e);return n.useEffect(()=>{o.current=e}),n.useMemo(()=>(...t)=>{var r;return(r=o.current)===null||r===void 0?void 0:r.call(o,...t)},[])}function z({prop:e,defaultProp:o,onChange:t=()=>{}}){const[r,u]=function({defaultProp:c,onChange:l}){const p=n.useState(c),[d]=p,h=n.useRef(d),y=x(l);return n.useEffect(()=>{h.current!==d&&(y(d),h.current=d)},[d,h,y]),p}({defaultProp:o,onChange:t}),s=e!==void 0,a=s?e:r,i=x(t);return[a,n.useCallback(c=>{if(s){const l=typeof c=="function"?c(e):c;l!==e&&i(l)}else u(c)},[s,e,u,i])]}const O=Boolean(globalThis?.document)?n.useLayoutEffect:()=>{},T=e=>{const{present:o,children:t}=e,r=function(a){const[i,c]=n.useState(),l=n.useRef({}),p=n.useRef(a),d=n.useRef("none"),h=a?"mounted":"unmounted",[y,v]=function(f,m){return n.useReducer((b,E)=>{const k=m[b][E];return k??b},f)}(h,{mounted:{UNMOUNT:"unmounted",ANIMATION_OUT:"unmountSuspended"},unmountSuspended:{MOUNT:"mounted",ANIMATION_END:"unmounted"},unmounted:{MOUNT:"mounted"}});return n.useEffect(()=>{const f=w(l.current);d.current=y==="mounted"?f:"none"},[y]),O(()=>{const f=l.current,m=p.current;if(m!==a){const b=d.current,E=w(f);a?v("MOUNT"):E==="none"||f?.display==="none"?v("UNMOUNT"):v(m&&b!==E?"ANIMATION_OUT":"UNMOUNT"),p.current=a}},[a,v]),O(()=>{if(i){const f=b=>{const E=w(l.current).includes(b.animationName);b.target===i&&E&&U.flushSync(()=>v("ANIMATION_END"))},m=b=>{b.target===i&&(d.current=w(l.current))};return i.addEventListener("animationstart",m),i.addEventListener("animationcancel",f),i.addEventListener("animationend",f),()=>{i.removeEventListener("animationstart",m),i.removeEventListener("animationcancel",f),i.removeEventListener("animationend",f)}}v("ANIMATION_END")},[i,v]),{isPresent:["mounted","unmountSuspended"].includes(y),ref:n.useCallback(f=>{f&&(l.current=getComputedStyle(f)),c(f)},[])}}(o),u=typeof t=="function"?t({present:r.isPresent}):n.Children.only(t),s=P(r.ref,u.ref);return typeof t=="function"||r.isPresent?n.cloneElement(u,{ref:s}):null};function w(e){return e?.animationName||"none"}T.displayName="Presence";const A=n.forwardRef((e,o)=>{const{children:t,...r}=e,u=n.Children.toArray(t),s=u.find($);if(s){const a=s.props.children,i=u.map(c=>c===s?n.Children.count(a)>1?n.Children.only(null):n.isValidElement(a)?a.props.children:null:c);return n.createElement(M,g({},r,{ref:o}),n.isValidElement(a)?n.cloneElement(a,void 0,i):null)}return n.createElement(M,g({},r,{ref:o}),t)});A.displayName="Slot";const M=n.forwardRef((e,o)=>{const{children:t,...r}=e;return n.isValidElement(t)?n.cloneElement(t,{...B(r,t.props),ref:R(o,t.ref)}):n.Children.count(t)>1?n.Children.only(null):null});M.displayName="SlotClone";const q=({children:e})=>n.createElement(n.Fragment,null,e);function $(e){return n.isValidElement(e)&&e.type===q}function B(e,o){const t={...o};for(const r in o){const u=e[r],s=o[r];/^on[A-Z]/.test(r)?u&&s?t[r]=(...a)=>{s(...a),u(...a)}:u&&(t[r]=u):r==="style"?t[r]={...u,...s}:r==="className"&&(t[r]=[u,s].filter(Boolean).join(" "))}return{...e,...t}}const _=["a","button","div","form","h2","h3","img","input","label","li","nav","ol","p","span","svg","ul"].reduce((e,o)=>{const t=n.forwardRef((r,u)=>{const{asChild:s,...a}=r,i=s?A:o;return n.useEffect(()=>{window[Symbol.for("radix-ui")]=!0},[]),n.createElement(i,g({},a,{ref:u}))});return t.displayName=`Primitive.${o}`,{...e,[o]:t}},{}),I="Checkbox",[V,Y]=function(e,o=[]){let t=[];const r=()=>{const u=t.map(s=>n.createContext(s));return function(s){const a=s?.[e]||u;return n.useMemo(()=>({[`__scope${e}`]:{...s,[e]:a}}),[s,a])}};return r.scopeName=e,[function(u,s){const a=n.createContext(s),i=t.length;function c(l){const{scope:p,children:d,...h}=l,y=p?.[e][i]||a,v=n.useMemo(()=>h,Object.values(h));return n.createElement(y.Provider,{value:v},d)}return t=[...t,s],c.displayName=u+"Provider",[c,function(l,p){const d=p?.[e][i]||a,h=n.useContext(d);if(h)return h;if(s!==void 0)return s;throw new Error(`\`${l}\` must be used within \`${u}\``)}]},D(r,...o)]}(I),[H,F]=V(I),K=n.forwardRef((e,o)=>{const{__scopeCheckbox:t,name:r,checked:u,defaultChecked:s,required:a,disabled:i,value:c="on",onCheckedChange:l,...p}=e,[d,h]=n.useState(null),y=P(o,k=>h(k)),v=n.useRef(!1),f=!d||Boolean(d.closest("form")),[m=!1,b]=z({prop:u,defaultProp:s,onChange:l}),E=n.useRef(m);return n.useEffect(()=>{const k=d?.form;if(k){const C=()=>b(E.current);return k.addEventListener("reset",C),()=>k.removeEventListener("reset",C)}},[d,b]),n.createElement(H,{scope:t,state:m,disabled:i},n.createElement(_.button,g({type:"button",role:"checkbox","aria-checked":N(m)?"mixed":m,"aria-required":a,"data-state":L(m),"data-disabled":i?"":void 0,disabled:i,value:c},p,{ref:y,onKeyDown:S(e.onKeyDown,k=>{k.key==="Enter"&&k.preventDefault()}),onClick:S(e.onClick,k=>{b(C=>!!N(C)||!C),f&&(v.current=k.isPropagationStopped(),v.current||k.stopPropagation())})})),f&&n.createElement(W,{control:d,bubbles:!v.current,name:r,value:c,checked:m,required:a,disabled:i,style:{transform:"translateX(-100%)"}}))}),W=e=>{const{control:o,checked:t,bubbles:r=!0,...u}=e,s=n.useRef(null),a=function(c){const l=n.useRef({value:c,previous:c});return n.useMemo(()=>(l.current.value!==c&&(l.current.previous=l.current.value,l.current.value=c),l.current.previous),[c])}(t),i=function(c){const[l,p]=n.useState(void 0);return O(()=>{if(c){p({width:c.offsetWidth,height:c.offsetHeight});const d=new ResizeObserver(h=>{if(!Array.isArray(h)||!h.length)return;const y=h[0];let v,f;if("borderBoxSize"in y){const m=y.borderBoxSize,b=Array.isArray(m)?m[0]:m;v=b.inlineSize,f=b.blockSize}else v=c.offsetWidth,f=c.offsetHeight;p({width:v,height:f})});return d.observe(c,{box:"border-box"}),()=>d.unobserve(c)}p(void 0)},[c]),l}(o);return n.useEffect(()=>{const c=s.current,l=window.HTMLInputElement.prototype,p=Object.getOwnPropertyDescriptor(l,"checked").set;if(a!==t&&p){const d=new Event("click",{bubbles:r});c.indeterminate=N(t),p.call(c,!N(t)&&t),c.dispatchEvent(d)}},[a,t,r]),n.createElement("input",g({type:"checkbox","aria-hidden":!0,defaultChecked:!N(t)&&t},u,{tabIndex:-1,ref:s,style:{...e.style,...i,position:"absolute",pointerEvents:"none",opacity:0,margin:0}}))};function N(e){return e==="indeterminate"}function L(e){return N(e)?"indeterminate":e?"checked":"unchecked"}const Z=K,X=n.forwardRef((e,o)=>{const{__scopeCheckbox:t,forceMount:r,...u}=e,s=F("CheckboxIndicator",t);return n.createElement(T,{present:r||N(s.state)||s.state===!0},n.createElement(_.span,g({"data-state":L(s.state),"data-disabled":s.disabled?"":void 0},u,{ref:o,style:{pointerEvents:"none",...e.style}})))}),G=j.cva(["peer h-sz-20 w-sz-20 rounded-sm border-md bg-transparent items-center justify-center","spark-disabled:opacity-dim-3 spark-disabled:cursor-not-allowed spark-disabled:hover:ring-0","focus-visible:outline-none focus-visible:ring-2 focus:ring-outline-high","hover:outline-none hover:ring-2 hover:border-primary-container"],{variants:{intent:{primary:["spark-state-unchecked:border-outline","spark-state-checked:border-primary spark-state-checked:bg-primary"],success:["spark-state-unchecked:border-success","spark-state-checked:border-success spark-state-checked:bg-success"],alert:["spark-state-unchecked:border-alert","spark-state-checked:border-alert spark-state-checked:bg-alert"],error:["spark-state-unchecked:border-error","spark-state-checked:border-error spark-state-checked:bg-error"]}},defaultVariants:{intent:"primary"}}),J=n.forwardRef(({intent:e,...o},t)=>n.createElement(Z,{ref:t,className:G({intent:e}),...o},n.createElement(X,{className:"flex items-center justify-center text-surface"},n.createElement(Q,null)))),Q=e=>n.createElement("svg",{width:14,height:10,fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},n.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M5.645 9.696a1.076 1.076 0 0 1-1.499 0L.288 5.956A1.023 1.023 0 0 1 .31 4.511a1.077 1.077 0 0 1 1.476-.022l3.061 2.998 7.319-7.16a1.075 1.075 0 0 1 1.037-.294c.374.094.666.38.763.747.096.367-.02.756-.301 1.015l-8.02 7.901Z",fill:"currentColor"}));exports.Checkbox=J;

package/dist/index.mjs

@@ -0,0 +1,226 @@
+import C, { useCallback as U, createContext as D, useMemo as P, createElement as y, useContext as Z, useRef as g, useEffect as O, useState as _, useLayoutEffect as V, Children as x, cloneElement as j, useReducer as X, forwardRef as T, isValidElement as M, Fragment as G } from "react";
+import { flushSync as J } from "react-dom";
+import { cva as Q } from "class-variance-authority";
+function E() {
+  return E = Object.assign ? Object.assign.bind() : function(e) {
+    for (var r = 1; r < arguments.length; r++) {
+      var t = arguments[r];
+      for (var n in t)
+        Object.prototype.hasOwnProperty.call(t, n) && (e[n] = t[n]);
+    }
+    return e;
+  }, E.apply(this, arguments);
+}
+function $(...e) {
+  return (r) => e.forEach((t) => function(n, c) {
+    typeof n == "function" ? n(c) : n != null && (n.current = c);
+  }(t, r));
+}
+function B(...e) {
+  return U($(...e), e);
+}
+function Y(...e) {
+  const r = e[0];
+  if (e.length === 1)
+    return r;
+  const t = () => {
+    const n = e.map((c) => ({ useScope: c(), scopeName: c.scopeName }));
+    return function(c) {
+      const o = n.reduce((a, { useScope: i, scopeName: s }) => ({ ...a, ...i(c)[`__scope${s}`] }), {});
+      return P(() => ({ [`__scope${r.scopeName}`]: o }), [o]);
+    };
+  };
+  return t.scopeName = r.scopeName, t;
+}
+function z(e, r, { checkForDefaultPrevented: t = !0 } = {}) {
+  return function(n) {
+    if (e?.(n), t === !1 || !n.defaultPrevented)
+      return r?.(n);
+  };
+}
+function R(e) {
+  const r = g(e);
+  return O(() => {
+    r.current = e;
+  }), P(() => (...t) => {
+    var n;
+    return (n = r.current) === null || n === void 0 ? void 0 : n.call(r, ...t);
+  }, []);
+}
+function ee({ prop: e, defaultProp: r, onChange: t = () => {
+} }) {
+  const [n, c] = function({ defaultProp: s, onChange: u }) {
+    const f = _(s), [l] = f, m = g(l), k = R(u);
+    return O(() => {
+      m.current !== l && (k(l), m.current = l);
+    }, [l, m, k]), f;
+  }({ defaultProp: r, onChange: t }), o = e !== void 0, a = o ? e : n, i = R(t);
+  return [a, U((s) => {
+    if (o) {
+      const u = typeof s == "function" ? s(e) : s;
+      u !== e && i(u);
+    } else
+      c(s);
+  }, [o, e, c, i])];
+}
+const I = Boolean(globalThis?.document) ? V : () => {
+}, q = (e) => {
+  const { present: r, children: t } = e, n = function(a) {
+    const [i, s] = _(), u = g({}), f = g(a), l = g("none"), m = a ? "mounted" : "unmounted", [k, h] = function(d, p) {
+      return X((v, N) => {
+        const b = p[v][N];
+        return b ?? v;
+      }, d);
+    }(m, { mounted: { UNMOUNT: "unmounted", ANIMATION_OUT: "unmountSuspended" }, unmountSuspended: { MOUNT: "mounted", ANIMATION_END: "unmounted" }, unmounted: { MOUNT: "mounted" } });
+    return O(() => {
+      const d = S(u.current);
+      l.current = k === "mounted" ? d : "none";
+    }, [k]), I(() => {
+      const d = u.current, p = f.current;
+      if (p !== a) {
+        const v = l.current, N = S(d);
+        a ? h("MOUNT") : N === "none" || d?.display === "none" ? h("UNMOUNT") : h(p && v !== N ? "ANIMATION_OUT" : "UNMOUNT"), f.current = a;
+      }
+    }, [a, h]), I(() => {
+      if (i) {
+        const d = (v) => {
+          const N = S(u.current).includes(v.animationName);
+          v.target === i && N && J(() => h("ANIMATION_END"));
+        }, p = (v) => {
+          v.target === i && (l.current = S(u.current));
+        };
+        return i.addEventListener("animationstart", p), i.addEventListener("animationcancel", d), i.addEventListener("animationend", d), () => {
+          i.removeEventListener("animationstart", p), i.removeEventListener("animationcancel", d), i.removeEventListener("animationend", d);
+        };
+      }
+      h("ANIMATION_END");
+    }, [i, h]), { isPresent: ["mounted", "unmountSuspended"].includes(k), ref: U((d) => {
+      d && (u.current = getComputedStyle(d)), s(d);
+    }, []) };
+  }(r), c = typeof t == "function" ? t({ present: n.isPresent }) : x.only(t), o = B(n.ref, c.ref);
+  return typeof t == "function" || n.isPresent ? j(c, { ref: o }) : null;
+};
+function S(e) {
+  return e?.animationName || "none";
+}
+q.displayName = "Presence";
+const H = T((e, r) => {
+  const { children: t, ...n } = e, c = x.toArray(t), o = c.find(ne);
+  if (o) {
+    const a = o.props.children, i = c.map((s) => s === o ? x.count(a) > 1 ? x.only(null) : M(a) ? a.props.children : null : s);
+    return y(L, E({}, n, { ref: r }), M(a) ? j(a, void 0, i) : null);
+  }
+  return y(L, E({}, n, { ref: r }), t);
+});
+H.displayName = "Slot";
+const L = T((e, r) => {
+  const { children: t, ...n } = e;
+  return M(t) ? j(t, { ...re(n, t.props), ref: $(r, t.ref) }) : x.count(t) > 1 ? x.only(null) : null;
+});
+L.displayName = "SlotClone";
+const te = ({ children: e }) => y(G, null, e);
+function ne(e) {
+  return M(e) && e.type === te;
+}
+function re(e, r) {
+  const t = { ...r };
+  for (const n in r) {
+    const c = e[n], o = r[n];
+    /^on[A-Z]/.test(n) ? c && o ? t[n] = (...a) => {
+      o(...a), c(...a);
+    } : c && (t[n] = c) : n === "style" ? t[n] = { ...c, ...o } : n === "className" && (t[n] = [c, o].filter(Boolean).join(" "));
+  }
+  return { ...e, ...t };
+}
+const F = ["a", "button", "div", "form", "h2", "h3", "img", "input", "label", "li", "nav", "ol", "p", "span", "svg", "ul"].reduce((e, r) => {
+  const t = T((n, c) => {
+    const { asChild: o, ...a } = n, i = o ? H : r;
+    return O(() => {
+      window[Symbol.for("radix-ui")] = !0;
+    }, []), y(i, E({}, a, { ref: c }));
+  });
+  return t.displayName = `Primitive.${r}`, { ...e, [r]: t };
+}, {}), K = "Checkbox", [oe, ve] = function(e, r = []) {
+  let t = [];
+  const n = () => {
+    const c = t.map((o) => D(o));
+    return function(o) {
+      const a = o?.[e] || c;
+      return P(() => ({ [`__scope${e}`]: { ...o, [e]: a } }), [o, a]);
+    };
+  };
+  return n.scopeName = e, [function(c, o) {
+    const a = D(o), i = t.length;
+    function s(u) {
+      const { scope: f, children: l, ...m } = u, k = f?.[e][i] || a, h = P(() => m, Object.values(m));
+      return y(k.Provider, { value: h }, l);
+    }
+    return t = [...t, o], s.displayName = c + "Provider", [s, function(u, f) {
+      const l = f?.[e][i] || a, m = Z(l);
+      if (m)
+        return m;
+      if (o !== void 0)
+        return o;
+      throw new Error(`\`${u}\` must be used within \`${c}\``);
+    }];
+  }, Y(n, ...r)];
+}(K), [se, ce] = oe(K), ae = T((e, r) => {
+  const { __scopeCheckbox: t, name: n, checked: c, defaultChecked: o, required: a, disabled: i, value: s = "on", onCheckedChange: u, ...f } = e, [l, m] = _(null), k = B(r, (b) => m(b)), h = g(!1), d = !l || Boolean(l.closest("form")), [p = !1, v] = ee({ prop: c, defaultProp: o, onChange: u }), N = g(p);
+  return O(() => {
+    const b = l?.form;
+    if (b) {
+      const A = () => v(N.current);
+      return b.addEventListener("reset", A), () => b.removeEventListener("reset", A);
+    }
+  }, [l, v]), y(se, { scope: t, state: p, disabled: i }, y(F.button, E({ type: "button", role: "checkbox", "aria-checked": w(p) ? "mixed" : p, "aria-required": a, "data-state": W(p), "data-disabled": i ? "" : void 0, disabled: i, value: s }, f, { ref: k, onKeyDown: z(e.onKeyDown, (b) => {
+    b.key === "Enter" && b.preventDefault();
+  }), onClick: z(e.onClick, (b) => {
+    v((A) => !!w(A) || !A), d && (h.current = b.isPropagationStopped(), h.current || b.stopPropagation());
+  }) })), d && y(ie, { control: l, bubbles: !h.current, name: n, value: s, checked: p, required: a, disabled: i, style: { transform: "translateX(-100%)" } }));
+}), ie = (e) => {
+  const { control: r, checked: t, bubbles: n = !0, ...c } = e, o = g(null), a = function(s) {
+    const u = g({ value: s, previous: s });
+    return P(() => (u.current.value !== s && (u.current.previous = u.current.value, u.current.value = s), u.current.previous), [s]);
+  }(t), i = function(s) {
+    const [u, f] = _(void 0);
+    return I(() => {
+      if (s) {
+        f({ width: s.offsetWidth, height: s.offsetHeight });
+        const l = new ResizeObserver((m) => {
+          if (!Array.isArray(m) || !m.length)
+            return;
+          const k = m[0];
+          let h, d;
+          if ("borderBoxSize" in k) {
+            const p = k.borderBoxSize, v = Array.isArray(p) ? p[0] : p;
+            h = v.inlineSize, d = v.blockSize;
+          } else
+            h = s.offsetWidth, d = s.offsetHeight;
+          f({ width: h, height: d });
+        });
+        return l.observe(s, { box: "border-box" }), () => l.unobserve(s);
+      }
+      f(void 0);
+    }, [s]), u;
+  }(r);
+  return O(() => {
+    const s = o.current, u = window.HTMLInputElement.prototype, f = Object.getOwnPropertyDescriptor(u, "checked").set;
+    if (a !== t && f) {
+      const l = new Event("click", { bubbles: n });
+      s.indeterminate = w(t), f.call(s, !w(t) && t), s.dispatchEvent(l);
+    }
+  }, [a, t, n]), y("input", E({ type: "checkbox", "aria-hidden": !0, defaultChecked: !w(t) && t }, c, { tabIndex: -1, ref: o, style: { ...e.style, ...i, position: "absolute", pointerEvents: "none", opacity: 0, margin: 0 } }));
+};
+function w(e) {
+  return e === "indeterminate";
+}
+function W(e) {
+  return w(e) ? "indeterminate" : e ? "checked" : "unchecked";
+}
+const ue = ae, le = T((e, r) => {
+  const { __scopeCheckbox: t, forceMount: n, ...c } = e, o = ce("CheckboxIndicator", t);
+  return y(q, { present: n || w(o.state) || o.state === !0 }, y(F.span, E({ "data-state": W(o.state), "data-disabled": o.disabled ? "" : void 0 }, c, { ref: r, style: { pointerEvents: "none", ...e.style } })));
+}), de = Q(["peer h-sz-20 w-sz-20 rounded-sm border-md bg-transparent items-center justify-center", "spark-disabled:opacity-dim-3 spark-disabled:cursor-not-allowed spark-disabled:hover:ring-0", "focus-visible:outline-none focus-visible:ring-2 focus:ring-outline-high", "hover:outline-none hover:ring-2 hover:border-primary-container"], { variants: { intent: { primary: ["spark-state-unchecked:border-outline", "spark-state-checked:border-primary spark-state-checked:bg-primary"], success: ["spark-state-unchecked:border-success", "spark-state-checked:border-success spark-state-checked:bg-success"], alert: ["spark-state-unchecked:border-alert", "spark-state-checked:border-alert spark-state-checked:bg-alert"], error: ["spark-state-unchecked:border-error", "spark-state-checked:border-error spark-state-checked:bg-error"] } }, defaultVariants: { intent: "primary" } }), be = C.forwardRef(({ intent: e, ...r }, t) => C.createElement(ue, { ref: t, className: de({ intent: e }), ...r }, C.createElement(le, { className: "flex items-center justify-center text-surface" }, C.createElement(fe, null)))), fe = (e) => C.createElement("svg", { width: 14, height: 10, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, C.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.645 9.696a1.076 1.076 0 0 1-1.499 0L.288 5.956A1.023 1.023 0 0 1 .31 4.511a1.077 1.077 0 0 1 1.476-.022l3.061 2.998 7.319-7.16a1.075 1.075 0 0 1 1.037-.294c.374.094.666.38.763.747.096.367-.02.756-.301 1.015l-8.02 7.901Z", fill: "currentColor" }));
+export {
+  be as Checkbox
+};

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@spark-ui/checkbox",
+  "version": "1.1.0",
+  "description": "A control that allows the user to toggle between checked and not checked.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "1.0.3",
+    "class-variance-authority": "0.4.0"
+  },
+  "gitHead": "d78bcd4a3eeff74b426fc624a085b7ba35095a08"
+}

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["src/**/*", "../../../global.d.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,6 @@
+import path from 'path'
+import { getComponentConfiguration } from '../../../config/index'
+
+const { name } = require(path.resolve(__dirname, 'package.json'))
+
+export default getComponentConfiguration(name)