tsm-ui
Version:
### Welcome to TSM-UI: Your Design System for Modern Web Development
2 lines (1 loc) • 8.62 kB
JavaScript
import{_ as M}from"./extends.bd401154.js";import{r}from"./index.d591fb27.js";import{b as w,c as E,d as L,$ as F,a as T}from"./index.7baf0a55.js";import{r as Y}from"./index.237cf077.js";import{s as z,k as U}from"./index.f31275f4.js";import{j as l,F as C,a as K}from"./jsx-runtime.e41c3930.js";import{I as G,r as X}from"./IconBase.esm.b270398d.js";import{B as H}from"./index.bf78a962.js";import{T as V}from"./index.655ecc4d.js";import"./_commonjsHelpers.712cc82f.js";import"./index.8dde8ec8.js";var b=new Map;b.set("bold",function(e){return l(C,{children:l("polyline",{points:"216 72 104 184 48 128",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"24"})})});b.set("duotone",function(e){return l(C,{children:l("polyline",{points:"216 72 104 184 48 128",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"})})});b.set("fill",function(){return l(C,{children:l("path",{d:"M104,192a8.5,8.5,0,0,1-5.7-2.3l-56-56a8.1,8.1,0,0,1,11.4-11.4L104,172.7,210.3,66.3a8.1,8.1,0,0,1,11.4,11.4l-112,112A8.5,8.5,0,0,1,104,192Z"})})});b.set("light",function(e){return l(C,{children:l("polyline",{points:"216 72 104 184 48 128",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"12"})})});b.set("thin",function(e){return l(C,{children:l("polyline",{points:"216 72 104 184 48 128",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"8"})})});b.set("regular",function(e){return l(C,{children:l("polyline",{points:"216 72 104 184 48 128",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"})})});var Z=function(t,n){return X(t,n,b)},B=r.exports.forwardRef(function(e,t){return l(G,{...Object.assign({ref:t},e,{renderPath:Z})})});B.displayName="Check";const J=B;function _(e,t,{checkForDefaultPrevented:n=!0}={}){return function(s){if(e==null||e(s),n===!1||!s.defaultPrevented)return t==null?void 0:t(s)}}function Q({prop:e,defaultProp:t,onChange:n=()=>{}}){const[o,s]=ee({defaultProp:t,onChange:n}),a=e!==void 0,f=a?e:o,u=w(n),i=r.exports.useCallback(c=>{if(a){const d=typeof c=="function"?c(e):c;d!==e&&u(d)}else s(c)},[a,e,s,u]);return[f,i]}function ee({defaultProp:e,onChange:t}){const n=r.exports.useState(e),[o]=n,s=r.exports.useRef(o),a=w(t);return r.exports.useEffect(()=>{s.current!==o&&(a(o),s.current=o)},[o,s,a]),n}function te(e){const t=r.exports.useRef({value:e,previous:e});return r.exports.useMemo(()=>(t.current.value!==e&&(t.current.previous=t.current.value,t.current.value=e),t.current.previous),[e])}function ne(e){const[t,n]=r.exports.useState(void 0);return E(()=>{if(e){n({width:e.offsetWidth,height:e.offsetHeight});const o=new ResizeObserver(s=>{if(!Array.isArray(s)||!s.length)return;const a=s[0];let f,u;if("borderBoxSize"in a){const i=a.borderBoxSize,c=Array.isArray(i)?i[0]:i;f=c.inlineSize,u=c.blockSize}else f=e.offsetWidth,u=e.offsetHeight;n({width:f,height:u})});return o.observe(e,{box:"border-box"}),()=>o.unobserve(e)}else n(void 0)},[e]),t}function re(e,t){return r.exports.useReducer((n,o)=>{const s=t[n][o];return s!=null?s:n},e)}const W=e=>{const{present:t,children:n}=e,o=oe(t),s=typeof n=="function"?n({present:o.isPresent}):r.exports.Children.only(n),a=L(o.ref,s.ref);return typeof n=="function"||o.isPresent?r.exports.cloneElement(s,{ref:a}):null};W.displayName="Presence";function oe(e){const[t,n]=r.exports.useState(),o=r.exports.useRef({}),s=r.exports.useRef(e),a=r.exports.useRef("none"),f=e?"mounted":"unmounted",[u,i]=re(f,{mounted:{UNMOUNT:"unmounted",ANIMATION_OUT:"unmountSuspended"},unmountSuspended:{MOUNT:"mounted",ANIMATION_END:"unmounted"},unmounted:{MOUNT:"mounted"}});return r.exports.useEffect(()=>{const c=y(o.current);a.current=u==="mounted"?c:"none"},[u]),E(()=>{const c=o.current,h=s.current;if(h!==e){const $=a.current,x=y(c);e?i("MOUNT"):x==="none"||(c==null?void 0:c.display)==="none"?i("UNMOUNT"):i(h&&$!==x?"ANIMATION_OUT":"UNMOUNT"),s.current=e}},[e,i]),E(()=>{if(t){const c=d=>{const x=y(o.current).includes(d.animationName);d.target===t&&x&&Y.exports.flushSync(()=>i("ANIMATION_END"))},h=d=>{d.target===t&&(a.current=y(o.current))};return t.addEventListener("animationstart",h),t.addEventListener("animationcancel",c),t.addEventListener("animationend",c),()=>{t.removeEventListener("animationstart",h),t.removeEventListener("animationcancel",c),t.removeEventListener("animationend",c)}}else i("ANIMATION_END")},[t,i]),{isPresent:["mounted","unmountSuspended"].includes(u),ref:r.exports.useCallback(c=>{c&&(o.current=getComputedStyle(c)),n(c)},[])}}function y(e){return(e==null?void 0:e.animationName)||"none"}const j="Checkbox",[se,Se]=F(j),[ce,ae]=se(j),ie=r.exports.forwardRef((e,t)=>{const{__scopeCheckbox:n,name:o,checked:s,defaultChecked:a,required:f,disabled:u,value:i="on",onCheckedChange:c,...h}=e,[d,$]=r.exports.useState(null),x=L(t,p=>$(p)),g=r.exports.useRef(!1),S=d?Boolean(d.closest("form")):!0,[k=!1,A]=Q({prop:s,defaultProp:a,onChange:c}),q=r.exports.useRef(k);return r.exports.useEffect(()=>{const p=d==null?void 0:d.form;if(p){const v=()=>A(q.current);return p.addEventListener("reset",v),()=>p.removeEventListener("reset",v)}},[d,A]),r.exports.createElement(ce,{scope:n,state:k,disabled:u},r.exports.createElement(T.button,M({type:"button",role:"checkbox","aria-checked":m(k)?"mixed":k,"aria-required":f,"data-state":D(k),"data-disabled":u?"":void 0,disabled:u,value:i},h,{ref:x,onKeyDown:_(e.onKeyDown,p=>{p.key==="Enter"&&p.preventDefault()}),onClick:_(e.onClick,p=>{A(v=>m(v)?!0:!v),S&&(g.current=p.isPropagationStopped(),g.current||p.stopPropagation())})})),S&&r.exports.createElement(le,{control:d,bubbles:!g.current,name:o,value:i,checked:k,required:f,disabled:u,style:{transform:"translateX(-100%)"}}))}),de="CheckboxIndicator",ue=r.exports.forwardRef((e,t)=>{const{__scopeCheckbox:n,forceMount:o,...s}=e,a=ae(de,n);return r.exports.createElement(W,{present:o||m(a.state)||a.state===!0},r.exports.createElement(T.span,M({"data-state":D(a.state),"data-disabled":a.disabled?"":void 0},s,{ref:t,style:{pointerEvents:"none",...e.style}})))}),le=e=>{const{control:t,checked:n,bubbles:o=!0,...s}=e,a=r.exports.useRef(null),f=te(n),u=ne(t);return r.exports.useEffect(()=>{const i=a.current,c=window.HTMLInputElement.prototype,d=Object.getOwnPropertyDescriptor(c,"checked").set;if(f!==n&&d){const $=new Event("click",{bubbles:o});i.indeterminate=m(n),d.call(i,m(n)?!1:n),i.dispatchEvent($)}},[f,n,o]),r.exports.createElement("input",M({type:"checkbox","aria-hidden":!0,defaultChecked:m(n)?!1:n},s,{tabIndex:-1,ref:a,style:{...e.style,...u,position:"absolute",pointerEvents:"none",opacity:0,margin:0}}))};function m(e){return e==="indeterminate"}function D(e){return m(e)?"indeterminate":e?"checked":"unchecked"}const fe=ie,pe=ue,he=z(fe,{all:"unset",width:"$6",height:"$6",backgroundColor:"$colorMainWhite",borderRadius:"$xs",lineHeight:0,cursor:"pointer",overflow:"hidden",boxSizing:"border-box",display:"flex",justifyContent:"center",alignItems:"center",border:"2px solid $colorRed010",'&[data-state="checked"]':{backgroundColor:"$colorMainWhite"},'&:focus, &[data-state="checked"]':{border:"2px solid $colorBlue010"}}),me=U({from:{transform:"translateY(-100%)"},to:{transform:"translateY(0)"}}),be=U({from:{transform:"translateY(0)"},to:{transform:"translateY(-100%)"}}),$e=z(pe,{color:"$colorGreatAreaGo",width:"$4",height:"$4",'&[data-state="checked"]':{animation:`${me} 200ms ease-out`},'&[data-state="unchecked"]':{animation:`${be} 200ms ease-out`}});function P(e){return l(he,{...e,children:l($e,{asChild:!0,children:l(J,{weight:"bold"})})})}P.displayName="Checkbox";try{P.displayName="Checkbox",P.__docgenInfo={description:"",displayName:"Checkbox",props:{asChild:{defaultValue:null,description:"",name:"asChild",required:!1,type:{name:"boolean"}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:"CSS<{}, { colors: { colorMainBlack: string; colorMain090: string; colorMain070: string; colorMain050: string; colorMain030: string; colorMain020: string; colorMain010: string; colorMainWhite: string; ... 48 more ...; colorPurple010: string; }; ... 5 more ...; space: { ...; }; }, { ...; }, {}>"}}}}}catch{}const _e={title:"Components/Checkbox",component:P,args:{},decorators:[e=>K(H,{as:"label",css:{display:"flex",flexDirection:"row",gap:"$2"},children:[e(),l(V,{size:"sm",children:"Accept terms of use"})]})]},N={};var I,R,O;N.parameters={...N.parameters,docs:{...(I=N.parameters)==null?void 0:I.docs,source:{originalSource:"{}",...(O=(R=N.parameters)==null?void 0:R.docs)==null?void 0:O.source}}};const Ie=["Primary"];export{N as Primary,Ie as __namedExportsOrder,_e as default};