@spark-ui/checkbox 1.1.2 → 1.2.1

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.1](https://github.com/adevinta/spark/compare/@spark-ui/checkbox@1.2.0...@spark-ui/checkbox@1.2.1) (2023-03-28)
+
+**Note:** Version bump only for package @spark-ui/checkbox
+
+# [1.2.0](https://github.com/adevinta/spark/compare/@spark-ui/checkbox@1.1.2...@spark-ui/checkbox@1.2.0) (2023-03-27)
+
+### Features
+
+- **checkbox:** remove hardcoded check icon ([811e47f](https://github.com/adevinta/spark/commit/811e47fcacacfcdb0c521cdbfe59ffb5f7fca6dd))
+
 ## [1.1.2](https://github.com/adevinta/spark/compare/@spark-ui/checkbox@1.1.1...@spark-ui/checkbox@1.1.2) (2023-03-22)
 
 **Note:** Version bump only for package @spark-ui/checkbox

package/dist/Checkbox.d.ts

@@ -1,6 +1,10 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { type StylesProps } from './Checkbox.variants';
 interface CheckboxRadixProps {
+    /**
+     * The checked icon to use
+     */
+    icon?: ReactNode;
     /**
      * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
      */

package/dist/index.js

@@ -1 +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-visible: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;
+"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 P(...e){return o=>e.forEach(t=>function(r,u){typeof r=="function"?r(u):r!=null&&(r.current=u)}(t,o))}function T(...e){return n.useCallback(P(...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((i,{useScope:a,scopeName:c})=>({...i,...a(u)[`__scope${c}`]}),{});return n.useMemo(()=>({[`__scope${o.scopeName}`]:s}),[s])}};return t.scopeName=o.scopeName,t}function M(e,o,{checkForDefaultPrevented:t=!0}={}){return function(r){if(e?.(r),t===!1||!r.defaultPrevented)return o?.(r)}}function S(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 m=n.useState(c),[d]=m,h=n.useRef(d),y=S(l);return n.useEffect(()=>{h.current!==d&&(y(d),h.current=d)},[d,h,y]),m}({defaultProp:o,onChange:t}),s=e!==void 0,i=s?e:r,a=S(t);return[i,n.useCallback(c=>{if(s){const l=typeof c=="function"?c(e):c;l!==e&&a(l)}else u(c)},[s,e,u,a])]}const O=Boolean(globalThis?.document)?n.useLayoutEffect:()=>{},R=e=>{const{present:o,children:t}=e,r=function(i){const[a,c]=n.useState(),l=n.useRef({}),m=n.useRef(i),d=n.useRef("none"),h=i?"mounted":"unmounted",[y,v]=function(f,p){return n.useReducer((b,E)=>{const k=p[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,p=m.current;if(p!==i){const b=d.current,E=w(f);i?v("MOUNT"):E==="none"||f?.display==="none"?v("UNMOUNT"):v(p&&b!==E?"ANIMATION_OUT":"UNMOUNT"),m.current=i}},[i,v]),O(()=>{if(a){const f=b=>{const E=w(l.current).includes(b.animationName);b.target===a&&E&&U.flushSync(()=>v("ANIMATION_END"))},p=b=>{b.target===a&&(d.current=w(l.current))};return a.addEventListener("animationstart",p),a.addEventListener("animationcancel",f),a.addEventListener("animationend",f),()=>{a.removeEventListener("animationstart",p),a.removeEventListener("animationcancel",f),a.removeEventListener("animationend",f)}}v("ANIMATION_END")},[a,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=T(r.ref,u.ref);return typeof t=="function"||r.isPresent?n.cloneElement(u,{ref:s}):null};function w(e){return e?.animationName||"none"}R.displayName="Presence";const A=n.forwardRef((e,o)=>{const{children:t,...r}=e,u=n.Children.toArray(t),s=u.find(q);if(s){const i=s.props.children,a=u.map(c=>c===s?n.Children.count(i)>1?n.Children.only(null):n.isValidElement(i)?i.props.children:null:c);return n.createElement(x,g({},r,{ref:o}),n.isValidElement(i)?n.cloneElement(i,void 0,a):null)}return n.createElement(x,g({},r,{ref:o}),t)});A.displayName="Slot";const x=n.forwardRef((e,o)=>{const{children:t,...r}=e;return n.isValidElement(t)?n.cloneElement(t,{...B(r,t.props),ref:P(o,t.ref)}):n.Children.count(t)>1?n.Children.only(null):null});x.displayName="SlotClone";const $=({children:e})=>n.createElement(n.Fragment,null,e);function q(e){return n.isValidElement(e)&&e.type===$}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]=(...i)=>{s(...i),u(...i)}: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,...i}=r,a=s?A:o;return n.useEffect(()=>{window[Symbol.for("radix-ui")]=!0},[]),n.createElement(a,g({},i,{ref:u}))});return t.displayName=`Primitive.${o}`,{...e,[o]:t}},{}),L="Checkbox",[V,Y]=function(e,o=[]){let t=[];const r=()=>{const u=t.map(s=>n.createContext(s));return function(s){const i=s?.[e]||u;return n.useMemo(()=>({[`__scope${e}`]:{...s,[e]:i}}),[s,i])}};return r.scopeName=e,[function(u,s){const i=n.createContext(s),a=t.length;function c(l){const{scope:m,children:d,...h}=l,y=m?.[e][a]||i,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,m){const d=m?.[e][a]||i,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)]}(L),[H,F]=V(L),K=n.forwardRef((e,o)=>{const{__scopeCheckbox:t,name:r,checked:u,defaultChecked:s,required:i,disabled:a,value:c="on",onCheckedChange:l,...m}=e,[d,h]=n.useState(null),y=T(o,k=>h(k)),v=n.useRef(!1),f=!d||Boolean(d.closest("form")),[p=!1,b]=z({prop:u,defaultProp:s,onChange:l}),E=n.useRef(p);return n.useEffect(()=>{const k=d?.form;if(k){const N=()=>b(E.current);return k.addEventListener("reset",N),()=>k.removeEventListener("reset",N)}},[d,b]),n.createElement(H,{scope:t,state:p,disabled:a},n.createElement(_.button,g({type:"button",role:"checkbox","aria-checked":C(p)?"mixed":p,"aria-required":i,"data-state":I(p),"data-disabled":a?"":void 0,disabled:a,value:c},m,{ref:y,onKeyDown:M(e.onKeyDown,k=>{k.key==="Enter"&&k.preventDefault()}),onClick:M(e.onClick,k=>{b(N=>!!C(N)||!N),f&&(v.current=k.isPropagationStopped(),v.current||k.stopPropagation())})})),f&&n.createElement(W,{control:d,bubbles:!v.current,name:r,value:c,checked:p,required:i,disabled:a,style:{transform:"translateX(-100%)"}}))}),W=e=>{const{control:o,checked:t,bubbles:r=!0,...u}=e,s=n.useRef(null),i=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),a=function(c){const[l,m]=n.useState(void 0);return O(()=>{if(c){m({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 p=y.borderBoxSize,b=Array.isArray(p)?p[0]:p;v=b.inlineSize,f=b.blockSize}else v=c.offsetWidth,f=c.offsetHeight;m({width:v,height:f})});return d.observe(c,{box:"border-box"}),()=>d.unobserve(c)}m(void 0)},[c]),l}(o);return n.useEffect(()=>{const c=s.current,l=window.HTMLInputElement.prototype,m=Object.getOwnPropertyDescriptor(l,"checked").set;if(i!==t&&m){const d=new Event("click",{bubbles:r});c.indeterminate=C(t),m.call(c,!C(t)&&t),c.dispatchEvent(d)}},[i,t,r]),n.createElement("input",g({type:"checkbox","aria-hidden":!0,defaultChecked:!C(t)&&t},u,{tabIndex:-1,ref:s,style:{...e.style,...a,position:"absolute",pointerEvents:"none",opacity:0,margin:0}}))};function C(e){return e==="indeterminate"}function I(e){return C(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(R,{present:r||C(s.state)||s.state===!0},n.createElement(_.span,g({"data-state":I(s.state),"data-disabled":s.disabled?"":void 0},u,{ref:o,style:{pointerEvents:"none",...e.style}})))}),G=({title:e,fill:o="currentColor",stroke:t="currentColor",...r})=>n.createElement("svg",{viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...e&&{"data-title":e},fill:o,stroke:t,...r},"$",e===void 0?void 0:n.createElement("title",null,e),n.createElement("path",{d:"M8.91958 20.1667C8.73748 20.1667 8.56045 20.1323 8.38847 20.0635C8.21649 19.9947 8.05969 19.8915 7.91806 19.7539L2.42489 14.4176C2.14163 14.1425 2 13.8083 2 13.4152C2 13.0222 2.14163 12.688 2.42489 12.4129C2.70814 12.1377 3.04704 12.0001 3.44158 12.0001C3.83612 12.0001 4.18513 12.1377 4.48862 12.4129L8.91958 16.7173L19.5417 6.42797C19.825 6.1528 20.1639 6.0103 20.5584 6.00048C20.953 5.99065 21.2919 6.13315 21.5751 6.42797C21.8584 6.70313 22 7.03727 22 7.43036C22 7.82346 21.8584 8.15759 21.5751 8.43276L9.92109 19.7539C9.77946 19.8915 9.62266 19.9947 9.45068 20.0635C9.27871 20.1323 9.10167 20.1667 8.91958 20.1667Z"})),J=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-visible: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"}}),Q=n.forwardRef(({intent:e,icon:o=n.createElement(G,null),...t},r)=>n.createElement(Z,{ref:r,className:J({intent:e}),...t},n.createElement(X,{className:"flex items-center justify-center text-surface"},o)));exports.Checkbox=Q;

package/dist/index.mjs

@@ -1,23 +1,23 @@
-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 E, { useCallback as U, createContext as D, useMemo as T, 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 A, 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) {
+function C() {
+  return C = 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);
+  }, C.apply(this, arguments);
 }
-function $(...e) {
+function B(...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 R(...e) {
+  return U(B(...e), e);
 }
 function Y(...e) {
   const r = e[0];
@@ -27,7 +27,7 @@ function Y(...e) {
     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(() => ({ [`__scope${r.scopeName}`]: o }), [o]);
     };
   };
   return t.scopeName = r.scopeName, t;
@@ -38,11 +38,11 @@ function z(e, r, { checkForDefaultPrevented: t = !0 } = {}) {
       return r?.(n);
   };
 }
-function R(e) {
+function $(e) {
   const r = g(e);
   return O(() => {
     r.current = e;
-  }), P(() => (...t) => {
+  }), T(() => (...t) => {
     var n;
     return (n = r.current) === null || n === void 0 ? void 0 : n.call(r, ...t);
   }, []);
@@ -50,11 +50,11 @@ function R(e) {
 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);
+    const f = _(s), [l] = f, m = g(l), k = $(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);
+  }({ defaultProp: r, onChange: t }), o = e !== void 0, a = o ? e : n, i = $(t);
   return [a, U((s) => {
     if (o) {
       const u = typeof s == "function" ? s(e) : s;
@@ -63,7 +63,7 @@ function ee({ prop: e, defaultProp: r, onChange: t = () => {
       c(s);
   }, [o, e, c, i])];
 }
-const I = Boolean(globalThis?.document) ? V : () => {
+const L = 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) {
@@ -75,13 +75,13 @@ const I = Boolean(globalThis?.document) ? V : () => {
     return O(() => {
       const d = S(u.current);
       l.current = k === "mounted" ? d : "none";
-    }, [k]), I(() => {
+    }, [k]), L(() => {
       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(() => {
+    }, [a, h]), L(() => {
       if (i) {
         const d = (v) => {
           const N = S(u.current).includes(v.animationName);
@@ -97,27 +97,27 @@ const I = Boolean(globalThis?.document) ? V : () => {
     }, [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);
+  }(r), c = typeof t == "function" ? t({ present: n.isPresent }) : x.only(t), o = R(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 H = A((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(I, C({}, n, { ref: r }), M(a) ? j(a, void 0, i) : null);
   }
-  return y(L, E({}, n, { ref: r }), t);
+  return y(I, C({}, n, { ref: r }), t);
 });
 H.displayName = "Slot";
-const L = T((e, r) => {
+const I = A((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;
+  return M(t) ? j(t, { ...re(n, t.props), ref: B(r, t.ref) }) : x.count(t) > 1 ? x.only(null) : null;
 });
-L.displayName = "SlotClone";
+I.displayName = "SlotClone";
 const te = ({ children: e }) => y(G, null, e);
 function ne(e) {
   return M(e) && e.type === te;
@@ -133,11 +133,11 @@ function re(e, r) {
   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 t = A((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 }));
+    }, []), y(i, C({}, a, { ref: c }));
   });
   return t.displayName = `Primitive.${r}`, { ...e, [r]: t };
 }, {}), K = "Checkbox", [oe, ve] = function(e, r = []) {
@@ -146,13 +146,13 @@ const F = ["a", "button", "div", "form", "h2", "h3", "img", "input", "label", "l
     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 T(() => ({ [`__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));
+      const { scope: f, children: l, ...m } = u, k = f?.[e][i] || a, h = T(() => m, Object.values(m));
       return y(k.Provider, { value: h }, l);
     }
     return t = [...t, o], s.displayName = c + "Provider", [s, function(u, f) {
@@ -164,26 +164,26 @@ const F = ["a", "button", "div", "form", "h2", "h3", "img", "input", "label", "l
       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);
+}(K), [se, ce] = oe(K), ae = A((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 = R(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);
+      const P = () => v(N.current);
+      return b.addEventListener("reset", P), () => b.removeEventListener("reset", P);
     }
-  }, [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) => {
+  }, [l, v]), y(se, { scope: t, state: p, disabled: i }, y(F.button, C({ 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());
+    v((P) => !!w(P) || !P), 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]);
+    return T(() => (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(() => {
+    return L(() => {
       if (s) {
         f({ width: s.offsetWidth, height: s.offsetHeight });
         const l = new ResizeObserver((m) => {
@@ -209,7 +209,7 @@ const F = ["a", "button", "div", "form", "h2", "h3", "img", "input", "label", "l
       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 } }));
+  }, [a, t, n]), y("input", C({ 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";
@@ -217,10 +217,10 @@ function w(e) {
 function W(e) {
   return w(e) ? "indeterminate" : e ? "checked" : "unchecked";
 }
-const ue = ae, le = T((e, r) => {
+const ue = ae, le = A((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-visible: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" }));
+  return y(q, { present: n || w(o.state) || o.state === !0 }, y(F.span, C({ "data-state": W(o.state), "data-disabled": o.disabled ? "" : void 0 }, c, { ref: r, style: { pointerEvents: "none", ...e.style } })));
+}), de = ({ title: e, fill: r = "currentColor", stroke: t = "currentColor", ...n }) => E.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...e && { "data-title": e }, fill: r, stroke: t, ...n }, "$", e === void 0 ? void 0 : E.createElement("title", null, e), E.createElement("path", { d: "M8.91958 20.1667C8.73748 20.1667 8.56045 20.1323 8.38847 20.0635C8.21649 19.9947 8.05969 19.8915 7.91806 19.7539L2.42489 14.4176C2.14163 14.1425 2 13.8083 2 13.4152C2 13.0222 2.14163 12.688 2.42489 12.4129C2.70814 12.1377 3.04704 12.0001 3.44158 12.0001C3.83612 12.0001 4.18513 12.1377 4.48862 12.4129L8.91958 16.7173L19.5417 6.42797C19.825 6.1528 20.1639 6.0103 20.5584 6.00048C20.953 5.99065 21.2919 6.13315 21.5751 6.42797C21.8584 6.70313 22 7.03727 22 7.43036C22 7.82346 21.8584 8.15759 21.5751 8.43276L9.92109 19.7539C9.77946 19.8915 9.62266 19.9947 9.45068 20.0635C9.27871 20.1323 9.10167 20.1667 8.91958 20.1667Z" })), fe = 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-visible: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 = E.forwardRef(({ intent: e, icon: r = E.createElement(de, null), ...t }, n) => E.createElement(ue, { ref: n, className: fe({ intent: e }), ...t }, E.createElement(le, { className: "flex items-center justify-center text-surface" }, r)));
 export {
   be as Checkbox
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/checkbox",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "description": "A control that allows the user to toggle between checked and not checked.",
   "publishConfig": {
     "access": "public"
@@ -13,7 +13,8 @@
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "1.0.3",
+    "@spark-ui/icons": "^1.1.3",
     "class-variance-authority": "0.4.0"
   },
-  "gitHead": "8d5929fd944837fe356de0a553b2db7577fa83d2"
+  "gitHead": "9d15131c6bef2a8ca394c3ea2a6706bf6d8976ac"
 }