@undp/design-system-react
Version:
React based design system for UNDP
2 lines • 6.27 kB
JavaScript
const e=require("./rolldown-runtime-mLOUI7ql.cjs"),t=require("./utils-Dd9-5CFr.cjs"),n=require("./dist-BZMXZCSu.cjs"),r=require("./check-Dar4Dnvz.cjs"),i=require("./x-bed1YSbv.cjs"),a=require("./dist--OhUIyHO.cjs"),o=require("./dist-VI-VV5wq.cjs"),s=require("./dist-DluBSGxD.cjs"),c=require("./dist-CTSEb5uk.cjs"),l=require("./dist-BMAVZmE9.cjs"),u=require("./Typography.cjs");let d=require("react");d=e.r(d,1);let f=require("react/jsx-runtime");var p=Object.defineProperty,m=(e,t)=>p(e,`name`,{value:t,configurable:!0}),h=`Switch`,[g,_]=s.n(h),[v,y]=g(h);function b(e){let{__scopeSwitch:t,checked:n,children:r,defaultChecked:i,disabled:a,form:o,name:s,onCheckedChange:l,required:u,value:p=`on`,internal_do_not_use_render:m}=e,[g,_]=c.t({prop:n,defaultProp:i??!1,onChange:l,caller:h}),[y,b]=d.useState(null),[x,S]=d.useState(null),C=d.useRef(!1),[w,T]=d.useReducer(e=>e+1,0),E={checked:g,setChecked:_,disabled:a,control:y,setControl:b,name:s,form:o,value:p,hasConsumerStoppedPropagationRef:C,userInteractionCount:w,onUserInteraction:T,required:u,defaultChecked:i,isFormControl:!y||!!o||!!y.closest(`form`),bubbleInput:x,setBubbleInput:S};return(0,f.jsx)(v,{scope:t,...E,children:O(m)?m(E):r})}m(b,`SwitchProvider`);var x=`SwitchTrigger`,S=d.forwardRef(m(function({__scopeSwitch:e,onClick:t,...n},r){let{control:i,form:s,value:l,disabled:u,checked:p,required:h,setControl:g,setChecked:_,hasConsumerStoppedPropagationRef:v,onUserInteraction:b,isFormControl:S,bubbleInput:C}=y(x,e),w=a.i(r,g),T=d.useRef(p);return d.useEffect(()=>{let e=s?i?.ownerDocument.getElementById(s):i?.form;if(e instanceof HTMLFormElement){let t=m(()=>_(T.current),`reset`);return e.addEventListener(`reset`,t),()=>e.removeEventListener(`reset`,t)}},[i,s,_]),(0,f.jsx)(o.t.button,{type:`button`,role:`switch`,"aria-checked":p,"aria-required":h,"data-state":k(p),"data-disabled":u?``:void 0,disabled:u,value:l,...n,ref:w,onClick:c.n(t,e=>{b(),_(e=>!e),C&&S&&(v.current=e.isPropagationStopped(),v.current||e.stopPropagation())})})},`SwitchTrigger`)),C=d.forwardRef(m(function(e,t){let{__scopeSwitch:n,name:r,checked:i,defaultChecked:a,required:o,disabled:s,value:c,onCheckedChange:l,form:u,...d}=e;return(0,f.jsx)(b,{__scopeSwitch:n,checked:i,defaultChecked:a,disabled:s,required:o,onCheckedChange:l,name:r,form:u,value:c,internal_do_not_use_render:({isFormControl:e})=>(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(S,{...d,ref:t,__scopeSwitch:n}),e&&(0,f.jsx)(D,{__scopeSwitch:n})]})})},`Switch`)),w=`SwitchThumb`,T=d.forwardRef(m(function(e,t){let{__scopeSwitch:n,...r}=e,i=y(w,n);return(0,f.jsx)(o.t.span,{"data-state":k(i.checked),"data-disabled":i.disabled?``:void 0,...r,ref:t})},`SwitchThumb`)),E=`SwitchBubbleInput`,D=d.forwardRef(m(function({__scopeSwitch:e,onClick:t,...n},r){let{control:i,hasConsumerStoppedPropagationRef:s,userInteractionCount:u,checked:p,defaultChecked:m,required:h,disabled:g,name:_,value:v,form:b,bubbleInput:x,setBubbleInput:S}=y(E,e),C=a.i(r,S),w=l.t(i),T=d.useRef(!1),D=d.useRef(p),O=d.useRef(u);d.useEffect(()=>{let e=x;if(!e)return;let t=window.HTMLInputElement.prototype,n=Object.getOwnPropertyDescriptor(t,`checked`).set,r=u!==O.current;O.current=u;let i=D.current!==p;D.current=p;let a=!(r&&s.current);if(i&&n){T.current=!r;let t=new Event(`click`,{bubbles:a});n.call(e,p),e.dispatchEvent(t),T.current=!1}},[x,p,s,u]);let k=d.useRef(p);return(0,f.jsx)(o.t.input,{type:`checkbox`,"aria-hidden":!0,defaultChecked:m??k.current,required:h,disabled:g,name:_,value:v,form:b,...n,tabIndex:-1,ref:C,onClick:c.n(t,e=>{T.current&&e.stopPropagation()}),style:{...n.style,...w,position:`absolute`,pointerEvents:`none`,opacity:0,margin:0,transform:`translateX(-100%)`}})},`SwitchBubbleInput`));function O(e){return typeof e==`function`}m(O,`isFunction`);function k(e){return e?`checked`:`unchecked`}m(k,`getState`);var A=n.t(`peer inline-flex h-[30px] w-[60px] shrink-0 cursor-pointer items-center rounded-full transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-ring disabled:cursor-not-allowed disabled:opacity-disabled`,{variants:{color:{primary:`bg-surface-hard data-[state=checked]:bg-primary`,secondary:`bg-surface-hard data-[state=checked]:bg-secondary`,tertiary:`bg-surface-hard data-[state=checked]:bg-tertiary`,quaternary:`bg-surface-hard data-[state=checked]:bg-quaternary`,foreground:`bg-surface-hard data-[state=checked]:bg-foreground`},size:{small:`h-[20px] w-[40px]`,normal:`h-[30px] w-[60px]`}},defaultVariants:{color:`primary`,size:`normal`}}),j=n.t(`bg-background pointer-events-none block rounded-full shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-[4px] data-[state=unchecked]:rtl:translate-x-[-2px]`,{variants:{size:{small:`h-[14px] w-[14px] `,normal:`h-[22px] w-[22px] `},showIconWithSize:{yes_with_small:`data-[state=checked]:translate-x-[8px] data-[state=checked]:rtl:translate-x-[-8px]`,no_with_small:`data-[state=checked]:translate-x-[22px] data-[state=checked]:rtl:translate-x-[-22px]`,yes_with_normal:`data-[state=checked]:translate-x-[12px] data-[state=checked]:rtl:translate-x-[-12px]`,no_with_normal:`data-[state=checked]:translate-x-[32px] data-[state=checked]:rtl:translate-x-[-32px]`}},defaultVariants:{size:`normal`,showIconWithSize:`no_with_normal`}}),M=d.default.forwardRef(({className:e,showValue:n=!1,showIcon:a=!0,values:o=[`On`,`Off`],onCheckedChange:s,color:c,size:l=`normal`,...p},m)=>{let[h,g]=(0,d.useState)(p.defaultChecked||!1);return(0,f.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,f.jsxs)(C,{...p,className:t.t(A({color:c,size:l}),e),ref:m,onCheckedChange:e=>{g(e),s?.(e)},children:[a&&h?(0,f.jsx)(r.t,{size:l===`normal`?14:10,className:l===`normal`?`ml-2 text-content-reverse rtl:mr-2 rtl:ml-0`:`ml-1 text-content-reverse rtl:mr-1 rtl:ml-0`}):null,(0,f.jsx)(T,{className:t.t(j({size:l,showIconWithSize:a?`yes_with_${l}`:`no_with_${l}`}))}),a&&!h?(0,f.jsx)(i.t,{size:l===`normal`?14:10,className:l===`normal`?`ml-3 rtl:mr-3 rtl:ml-0`:`ml-2 rtl:mr-2 rtl:ml-0`}):null]}),n?(0,f.jsx)(u.P,{size:`base`,marginBottom:`none`,leading:`none`,children:h?o[0]:o[1]}):null]})});M.displayName=C.displayName,Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return M}});
//# sourceMappingURL=switch-Ye5_hj0W.cjs.map