@snowball-tech/fractal
Version:
Fractal's (Snowball's design system) React component library based on RadixUI and PandaCSS
3 lines • 2.85 kB
JavaScript
'use client';
import{a as t}from"./chunk-KDHHAASG.js";import{a as m}from"./chunk-UC7BXZ7T.js";import{b as e}from"./chunk-CMFNILWJ.js";import{a as l,b as $}from"./chunk-KHPUS472.js";import{Label as _}from"@radix-ui/react-label";import*as n from"@radix-ui/react-switch";import{forwardRef as P,useId as E}from"react";import h from"lodash/fp/isEmpty";import T from"lodash/fp/isFunction";import C from"lodash/fp/omit";import{jsx as o,jsxs as I}from"react/jsx-runtime";var y=P(({checked:c,children:f,defaultChecked:u,disabled:a=!1,id:R,label:d,labelAsDiv:v=!1,labels:r=[],name:S,onToggle:p,required:s=!1,switchPosition:N="left",value:k="on",...w},q)=>{let L=!!f;!h(r)&&r.length!==2&&console.warn("You must provide exactly two value when using `labels` in the `Switch` component");let x=E(),i=(R??x)||x,g=!h(r)&&r.length===2,b=!h(r)&&r.length===2?"center":N;return I("div",{className:$(`${e}-${t}`,`${e}-${t}--${b}`,"flex items-center gap-1",b==="right"?"flex-row-reverse":"",a?`${e}-${t}--disabled`:"",w.className),children:[g&&o(_,{asChild:!0,className:l(`${e}-${t}__label`,`${e}-${t}__label--left`,"h-full max-h-full w-fit max-w-full overflow-hidden text-ellipsis whitespace-nowrap align-middle",a?"cursor-not-allowed text-disabled":"cursor-pointer text-dark",s?`${e}-${t}__label--required ${e}-${t}__label--left--required after:text-feedback-danger-50 after:content-required`:""),htmlFor:i,children:o(m,{element:"label",variant:"body-2",children:r[0]})}),o(n.Root,{id:i,ref:q,"aria-label":d,...c===void 0?{}:{checked:c},className:l(`${e}-${t}__toggle`,"relative h-1 max-h-1 w-5 max-w-4 rounded-full border-1 border-normal bg-body-light px-unset py-unset text-left text-color-unset [display:unset]","",a?`${e}-${t}__toggle--disabled cursor-not-allowed !border-disabled`:"cursor-pointer data-state-checked:bg-highlight"),...u===void 0?{}:{defaultChecked:u},disabled:a,name:S||i,required:s,title:d,value:k,...T(p)?{onCheckedChange:F=>p(F)}:{},...C(["className"],w),children:o(n.Thumb,{className:l(`${e}-${t}__toggle__thumb`,"block h-2 w-2 -translate-x-quarter translate-y-[-5.5px] rounded-full border-1 border-normal bg-white transition-transform duration-100","data-state-checked:translate-x-[15px]",a?"!border-disabled data-state-checked:bg-highlight":"border-normal data-state-checked:bg-primary")})}),o(_,{asChild:!0,className:l(`${e}-${t}__label`,`${e}-${t}__label--right`,"h-full max-h-full w-fit max-w-full overflow-hidden text-ellipsis whitespace-nowrap align-middle",a?"cursor-not-allowed text-disabled":"cursor-pointer text-dark",s?`${e}-${t}__label--required ${e}-${t}__label--right--required after:text-feedback-danger-50 after:content-required`:""),htmlFor:i,children:o(m,{element:v?"div":"label",variant:"body-2",children:L&&!g?f:r?.[1]??d})})]})});y.displayName="Switch";var j=y;export{y as a,j as b};
//# sourceMappingURL=chunk-TLUOUESN.js.map