@spark-ui/checkbox 1.2.2 → 1.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/dist/index.js +1 -1
- package/dist/index.mjs +7 -7
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
@@ -3,6 +3,10 @@
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
5
|
|
6
|
+
## [1.2.3](https://github.com/adevinta/spark/compare/@spark-ui/checkbox@1.2.2...@spark-ui/checkbox@1.2.3) (2023-03-29)
|
7
|
+
|
8
|
+
**Note:** Version bump only for package @spark-ui/checkbox
|
9
|
+
|
6
10
|
## [1.2.2](https://github.com/adevinta/spark/compare/@spark-ui/checkbox@1.2.1...@spark-ui/checkbox@1.2.2) (2023-03-28)
|
7
11
|
|
8
12
|
**Note:** Version bump only for package @spark-ui/checkbox
|
package/dist/index.js
CHANGED
@@ -1 +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 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(
|
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 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(B);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,{...$(r,t.props),ref:P(o,t.ref)}):n.Children.count(t)>1?n.Children.only(null):null});x.displayName="SlotClone";const q=({children:e})=>n.createElement(n.Fragment,null,e);function B(e){return n.isValidElement(e)&&e.type===q}function $(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
CHANGED
@@ -11,13 +11,13 @@ function C() {
|
|
11
11
|
return e;
|
12
12
|
}, C.apply(this, arguments);
|
13
13
|
}
|
14
|
-
function
|
14
|
+
function $(...e) {
|
15
15
|
return (r) => e.forEach((t) => function(n, c) {
|
16
16
|
typeof n == "function" ? n(c) : n != null && (n.current = c);
|
17
17
|
}(t, r));
|
18
18
|
}
|
19
19
|
function R(...e) {
|
20
|
-
return U(
|
20
|
+
return U($(...e), e);
|
21
21
|
}
|
22
22
|
function Y(...e) {
|
23
23
|
const r = e[0];
|
@@ -38,7 +38,7 @@ function z(e, r, { checkForDefaultPrevented: t = !0 } = {}) {
|
|
38
38
|
return r?.(n);
|
39
39
|
};
|
40
40
|
}
|
41
|
-
function
|
41
|
+
function B(e) {
|
42
42
|
const r = g(e);
|
43
43
|
return O(() => {
|
44
44
|
r.current = e;
|
@@ -50,11 +50,11 @@ function $(e) {
|
|
50
50
|
function ee({ prop: e, defaultProp: r, onChange: t = () => {
|
51
51
|
} }) {
|
52
52
|
const [n, c] = function({ defaultProp: s, onChange: u }) {
|
53
|
-
const f = _(s), [l] = f, m = g(l), k =
|
53
|
+
const f = _(s), [l] = f, m = g(l), k = B(u);
|
54
54
|
return O(() => {
|
55
55
|
m.current !== l && (k(l), m.current = l);
|
56
56
|
}, [l, m, k]), f;
|
57
|
-
}({ defaultProp: r, onChange: t }), o = e !== void 0, a = o ? e : n, i =
|
57
|
+
}({ defaultProp: r, onChange: t }), o = e !== void 0, a = o ? e : n, i = B(t);
|
58
58
|
return [a, U((s) => {
|
59
59
|
if (o) {
|
60
60
|
const u = typeof s == "function" ? s(e) : s;
|
@@ -115,7 +115,7 @@ const H = A((e, r) => {
|
|
115
115
|
H.displayName = "Slot";
|
116
116
|
const I = A((e, r) => {
|
117
117
|
const { children: t, ...n } = e;
|
118
|
-
return M(t) ? j(t, { ...re(n, t.props), ref:
|
118
|
+
return M(t) ? j(t, { ...re(n, t.props), ref: $(r, t.ref) }) : x.count(t) > 1 ? x.only(null) : null;
|
119
119
|
});
|
120
120
|
I.displayName = "SlotClone";
|
121
121
|
const te = ({ children: e }) => y(G, null, e);
|
@@ -220,7 +220,7 @@ function W(e) {
|
|
220
220
|
const ue = ae, le = A((e, r) => {
|
221
221
|
const { __scopeCheckbox: t, forceMount: n, ...c } = e, o = ce("CheckboxIndicator", t);
|
222
222
|
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 } })));
|
223
|
-
}), 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 },
|
223
|
+
}), 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)));
|
224
224
|
export {
|
225
225
|
be as Checkbox
|
226
226
|
};
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@spark-ui/checkbox",
|
3
|
-
"version": "1.2.
|
3
|
+
"version": "1.2.3",
|
4
4
|
"description": "A control that allows the user to toggle between checked and not checked.",
|
5
5
|
"publishConfig": {
|
6
6
|
"access": "public"
|
@@ -13,8 +13,8 @@
|
|
13
13
|
},
|
14
14
|
"dependencies": {
|
15
15
|
"@radix-ui/react-checkbox": "1.0.3",
|
16
|
-
"@spark-ui/icons": "^1.1.
|
16
|
+
"@spark-ui/icons": "^1.1.5",
|
17
17
|
"class-variance-authority": "0.4.0"
|
18
18
|
},
|
19
|
-
"gitHead": "
|
19
|
+
"gitHead": "ec760a618f6c557088a9818ea578163f7356831c"
|
20
20
|
}
|