@spark-ui/checkbox 1.1.1 → 1.2.0
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 +10 -0
- package/dist/Checkbox.d.ts +5 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +38 -38
- package/package.json +3 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,16 @@
|
|
|
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.0](https://github.com/adevinta/spark/compare/@spark-ui/checkbox@1.1.2...@spark-ui/checkbox@1.2.0) (2023-03-27)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- **checkbox:** remove hardcoded check icon ([811e47f](https://github.com/adevinta/spark/commit/811e47fcacacfcdb0c521cdbfe59ffb5f7fca6dd))
|
|
11
|
+
|
|
12
|
+
## [1.1.2](https://github.com/adevinta/spark/compare/@spark-ui/checkbox@1.1.1...@spark-ui/checkbox@1.1.2) (2023-03-22)
|
|
13
|
+
|
|
14
|
+
**Note:** Version bump only for package @spark-ui/checkbox
|
|
15
|
+
|
|
6
16
|
## [1.1.1](https://github.com/adevinta/spark/compare/@spark-ui/checkbox@1.1.0...@spark-ui/checkbox@1.1.1) (2023-03-21)
|
|
7
17
|
|
|
8
18
|
**Note:** Version bump only for package @spark-ui/checkbox
|
package/dist/Checkbox.d.ts
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
2
|
import { type StylesProps } from './Checkbox.variants';
|
|
3
3
|
interface CheckboxRadixProps {
|
|
4
|
+
/**
|
|
5
|
+
* The checked icon to use
|
|
6
|
+
*/
|
|
7
|
+
icon?: ReactNode;
|
|
4
8
|
/**
|
|
5
9
|
* The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
|
|
6
10
|
*/
|
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
|
|
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(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
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import
|
|
1
|
+
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";
|
|
2
2
|
import { flushSync as J } from "react-dom";
|
|
3
3
|
import { cva as Q } from "class-variance-authority";
|
|
4
|
-
function
|
|
5
|
-
return
|
|
4
|
+
function C() {
|
|
5
|
+
return C = Object.assign ? Object.assign.bind() : function(e) {
|
|
6
6
|
for (var r = 1; r < arguments.length; r++) {
|
|
7
7
|
var t = arguments[r];
|
|
8
8
|
for (var n in t)
|
|
9
9
|
Object.prototype.hasOwnProperty.call(t, n) && (e[n] = t[n]);
|
|
10
10
|
}
|
|
11
11
|
return e;
|
|
12
|
-
},
|
|
12
|
+
}, C.apply(this, arguments);
|
|
13
13
|
}
|
|
14
|
-
function
|
|
14
|
+
function B(...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
|
-
function
|
|
20
|
-
return U(
|
|
19
|
+
function R(...e) {
|
|
20
|
+
return U(B(...e), e);
|
|
21
21
|
}
|
|
22
22
|
function Y(...e) {
|
|
23
23
|
const r = e[0];
|
|
@@ -27,7 +27,7 @@ function Y(...e) {
|
|
|
27
27
|
const n = e.map((c) => ({ useScope: c(), scopeName: c.scopeName }));
|
|
28
28
|
return function(c) {
|
|
29
29
|
const o = n.reduce((a, { useScope: i, scopeName: s }) => ({ ...a, ...i(c)[`__scope${s}`] }), {});
|
|
30
|
-
return
|
|
30
|
+
return T(() => ({ [`__scope${r.scopeName}`]: o }), [o]);
|
|
31
31
|
};
|
|
32
32
|
};
|
|
33
33
|
return t.scopeName = r.scopeName, t;
|
|
@@ -38,11 +38,11 @@ function z(e, r, { checkForDefaultPrevented: t = !0 } = {}) {
|
|
|
38
38
|
return r?.(n);
|
|
39
39
|
};
|
|
40
40
|
}
|
|
41
|
-
function
|
|
41
|
+
function $(e) {
|
|
42
42
|
const r = g(e);
|
|
43
43
|
return O(() => {
|
|
44
44
|
r.current = e;
|
|
45
|
-
}),
|
|
45
|
+
}), T(() => (...t) => {
|
|
46
46
|
var n;
|
|
47
47
|
return (n = r.current) === null || n === void 0 ? void 0 : n.call(r, ...t);
|
|
48
48
|
}, []);
|
|
@@ -50,11 +50,11 @@ function R(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 = $(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 = $(t);
|
|
58
58
|
return [a, U((s) => {
|
|
59
59
|
if (o) {
|
|
60
60
|
const u = typeof s == "function" ? s(e) : s;
|
|
@@ -63,7 +63,7 @@ function ee({ prop: e, defaultProp: r, onChange: t = () => {
|
|
|
63
63
|
c(s);
|
|
64
64
|
}, [o, e, c, i])];
|
|
65
65
|
}
|
|
66
|
-
const
|
|
66
|
+
const L = Boolean(globalThis?.document) ? V : () => {
|
|
67
67
|
}, q = (e) => {
|
|
68
68
|
const { present: r, children: t } = e, n = function(a) {
|
|
69
69
|
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 : () => {
|
|
|
75
75
|
return O(() => {
|
|
76
76
|
const d = S(u.current);
|
|
77
77
|
l.current = k === "mounted" ? d : "none";
|
|
78
|
-
}, [k]),
|
|
78
|
+
}, [k]), L(() => {
|
|
79
79
|
const d = u.current, p = f.current;
|
|
80
80
|
if (p !== a) {
|
|
81
81
|
const v = l.current, N = S(d);
|
|
82
82
|
a ? h("MOUNT") : N === "none" || d?.display === "none" ? h("UNMOUNT") : h(p && v !== N ? "ANIMATION_OUT" : "UNMOUNT"), f.current = a;
|
|
83
83
|
}
|
|
84
|
-
}, [a, h]),
|
|
84
|
+
}, [a, h]), L(() => {
|
|
85
85
|
if (i) {
|
|
86
86
|
const d = (v) => {
|
|
87
87
|
const N = S(u.current).includes(v.animationName);
|
|
@@ -97,27 +97,27 @@ const I = Boolean(globalThis?.document) ? V : () => {
|
|
|
97
97
|
}, [i, h]), { isPresent: ["mounted", "unmountSuspended"].includes(k), ref: U((d) => {
|
|
98
98
|
d && (u.current = getComputedStyle(d)), s(d);
|
|
99
99
|
}, []) };
|
|
100
|
-
}(r), c = typeof t == "function" ? t({ present: n.isPresent }) : x.only(t), o =
|
|
100
|
+
}(r), c = typeof t == "function" ? t({ present: n.isPresent }) : x.only(t), o = R(n.ref, c.ref);
|
|
101
101
|
return typeof t == "function" || n.isPresent ? j(c, { ref: o }) : null;
|
|
102
102
|
};
|
|
103
103
|
function S(e) {
|
|
104
104
|
return e?.animationName || "none";
|
|
105
105
|
}
|
|
106
106
|
q.displayName = "Presence";
|
|
107
|
-
const H =
|
|
107
|
+
const H = A((e, r) => {
|
|
108
108
|
const { children: t, ...n } = e, c = x.toArray(t), o = c.find(ne);
|
|
109
109
|
if (o) {
|
|
110
110
|
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);
|
|
111
|
-
return y(
|
|
111
|
+
return y(I, C({}, n, { ref: r }), M(a) ? j(a, void 0, i) : null);
|
|
112
112
|
}
|
|
113
|
-
return y(
|
|
113
|
+
return y(I, C({}, n, { ref: r }), t);
|
|
114
114
|
});
|
|
115
115
|
H.displayName = "Slot";
|
|
116
|
-
const
|
|
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: B(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);
|
|
122
122
|
function ne(e) {
|
|
123
123
|
return M(e) && e.type === te;
|
|
@@ -133,11 +133,11 @@ function re(e, r) {
|
|
|
133
133
|
return { ...e, ...t };
|
|
134
134
|
}
|
|
135
135
|
const F = ["a", "button", "div", "form", "h2", "h3", "img", "input", "label", "li", "nav", "ol", "p", "span", "svg", "ul"].reduce((e, r) => {
|
|
136
|
-
const t =
|
|
136
|
+
const t = A((n, c) => {
|
|
137
137
|
const { asChild: o, ...a } = n, i = o ? H : r;
|
|
138
138
|
return O(() => {
|
|
139
139
|
window[Symbol.for("radix-ui")] = !0;
|
|
140
|
-
}, []), y(i,
|
|
140
|
+
}, []), y(i, C({}, a, { ref: c }));
|
|
141
141
|
});
|
|
142
142
|
return t.displayName = `Primitive.${r}`, { ...e, [r]: t };
|
|
143
143
|
}, {}), K = "Checkbox", [oe, ve] = function(e, r = []) {
|
|
@@ -146,13 +146,13 @@ const F = ["a", "button", "div", "form", "h2", "h3", "img", "input", "label", "l
|
|
|
146
146
|
const c = t.map((o) => D(o));
|
|
147
147
|
return function(o) {
|
|
148
148
|
const a = o?.[e] || c;
|
|
149
|
-
return
|
|
149
|
+
return T(() => ({ [`__scope${e}`]: { ...o, [e]: a } }), [o, a]);
|
|
150
150
|
};
|
|
151
151
|
};
|
|
152
152
|
return n.scopeName = e, [function(c, o) {
|
|
153
153
|
const a = D(o), i = t.length;
|
|
154
154
|
function s(u) {
|
|
155
|
-
const { scope: f, children: l, ...m } = u, k = f?.[e][i] || a, h =
|
|
155
|
+
const { scope: f, children: l, ...m } = u, k = f?.[e][i] || a, h = T(() => m, Object.values(m));
|
|
156
156
|
return y(k.Provider, { value: h }, l);
|
|
157
157
|
}
|
|
158
158
|
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
|
|
|
164
164
|
throw new Error(`\`${u}\` must be used within \`${c}\``);
|
|
165
165
|
}];
|
|
166
166
|
}, Y(n, ...r)];
|
|
167
|
-
}(K), [se, ce] = oe(K), ae =
|
|
168
|
-
const { __scopeCheckbox: t, name: n, checked: c, defaultChecked: o, required: a, disabled: i, value: s = "on", onCheckedChange: u, ...f } = e, [l, m] = _(null), k =
|
|
167
|
+
}(K), [se, ce] = oe(K), ae = A((e, r) => {
|
|
168
|
+
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);
|
|
169
169
|
return O(() => {
|
|
170
170
|
const b = l?.form;
|
|
171
171
|
if (b) {
|
|
172
|
-
const
|
|
173
|
-
return b.addEventListener("reset",
|
|
172
|
+
const P = () => v(N.current);
|
|
173
|
+
return b.addEventListener("reset", P), () => b.removeEventListener("reset", P);
|
|
174
174
|
}
|
|
175
|
-
}, [l, v]), y(se, { scope: t, state: p, disabled: i }, y(F.button,
|
|
175
|
+
}, [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) => {
|
|
176
176
|
b.key === "Enter" && b.preventDefault();
|
|
177
177
|
}), onClick: z(e.onClick, (b) => {
|
|
178
|
-
v((
|
|
178
|
+
v((P) => !!w(P) || !P), d && (h.current = b.isPropagationStopped(), h.current || b.stopPropagation());
|
|
179
179
|
}) })), d && y(ie, { control: l, bubbles: !h.current, name: n, value: s, checked: p, required: a, disabled: i, style: { transform: "translateX(-100%)" } }));
|
|
180
180
|
}), ie = (e) => {
|
|
181
181
|
const { control: r, checked: t, bubbles: n = !0, ...c } = e, o = g(null), a = function(s) {
|
|
182
182
|
const u = g({ value: s, previous: s });
|
|
183
|
-
return
|
|
183
|
+
return T(() => (u.current.value !== s && (u.current.previous = u.current.value, u.current.value = s), u.current.previous), [s]);
|
|
184
184
|
}(t), i = function(s) {
|
|
185
185
|
const [u, f] = _(void 0);
|
|
186
|
-
return
|
|
186
|
+
return L(() => {
|
|
187
187
|
if (s) {
|
|
188
188
|
f({ width: s.offsetWidth, height: s.offsetHeight });
|
|
189
189
|
const l = new ResizeObserver((m) => {
|
|
@@ -209,7 +209,7 @@ const F = ["a", "button", "div", "form", "h2", "h3", "img", "input", "label", "l
|
|
|
209
209
|
const l = new Event("click", { bubbles: n });
|
|
210
210
|
s.indeterminate = w(t), f.call(s, !w(t) && t), s.dispatchEvent(l);
|
|
211
211
|
}
|
|
212
|
-
}, [a, t, n]), y("input",
|
|
212
|
+
}, [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 } }));
|
|
213
213
|
};
|
|
214
214
|
function w(e) {
|
|
215
215
|
return e === "indeterminate";
|
|
@@ -217,10 +217,10 @@ function w(e) {
|
|
|
217
217
|
function W(e) {
|
|
218
218
|
return w(e) ? "indeterminate" : e ? "checked" : "unchecked";
|
|
219
219
|
}
|
|
220
|
-
const ue = ae, le =
|
|
220
|
+
const ue = ae, le = A((e, r) => {
|
|
221
221
|
const { __scopeCheckbox: t, forceMount: n, ...c } = e, o = ce("CheckboxIndicator", t);
|
|
222
|
-
return y(q, { present: n || w(o.state) || o.state === !0 }, y(F.span,
|
|
223
|
-
}), 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 =
|
|
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 }, "$", 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.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "A control that allows the user to toggle between checked and not checked.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -13,7 +13,8 @@
|
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@radix-ui/react-checkbox": "1.0.3",
|
|
16
|
+
"@spark-ui/icons": "1",
|
|
16
17
|
"class-variance-authority": "0.4.0"
|
|
17
18
|
},
|
|
18
|
-
"gitHead": "
|
|
19
|
+
"gitHead": "97f0ec478a0de57338304981aa75ec1dafed8b10"
|
|
19
20
|
}
|