@snowball-tech/fractal/dist/Switch/Switch.js

Fractal's (Snowball's design system) React component library based on RadixUI and TailwindCSS

"use client";import{a as e}from"../constants-CW2-utNH.js";import{n as t,r as n}from"../helpers-DBEwVIlX.js";import{Typography as r}from"../Typography/Typography.js";import{r as i}from"../utils-K22C_6qC.js";import{GROUP_NAME as a}from"./Switch.constants.js";import{forwardRef as o,useId as s}from"react";import c from"lodash/fp/isEmpty.js";import l from"lodash/fp/isFunction.js";import u from"lodash/fp/isString.js";import d from"lodash/fp/omit.js";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{Label as m}from"@radix-ui/react-label";import*as h from"@radix-ui/react-switch";const g=o(({checked:o,children:g,defaultChecked:_,disabled:v=!1,id:y,label:b,labelElement:x,labels:S=[],name:C,onToggle:w,required:T=!1,switchPosition:E=`left`,value:D=`on`,...O},k)=>{let A=!!g;!c(S)&&S.length!==2&&console.warn("You must provide exactly two value when using `labels` in the `Switch` component");let j=s(),M=(y??j)||j,N=!c(S)&&S.length===2,P=!c(S)&&S.length===2?`center`:E,F=u(b)?b:c(b)?i(g):i(b);return p(`div`,{className:n(`${e}-${a}`,`${e}-${a}--${P}`,`flex items-center gap-1`,P===`right`?`flex-row-reverse`:``,v?`${e}-${a}--disabled`:``,O.className),children:[N&&f(m,{asChild:!0,className:t(`fractal-switch__label`,`fractal-switch__label--left`,`h-full max-h-full w-fit max-w-full overflow-hidden text-ellipsis whitespace-nowrap align-middle`,v?`cursor-not-allowed text-disabled`:`cursor-pointer text-dark`,T?`fractal-switch__label--required fractal-switch__label--left--required after:text-feedback-danger-50 after:content-required`:``),htmlFor:M,children:f(r,{element:x||(u(S[0])?`label`:`div`),variant:`body-2`,children:S[0]})}),f(h.Root,{id:M,ref:k,"aria-label":F,...o===void 0?{}:{checked:o},className:t(`${e}-${a}__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]`,``,v?`${e}-${a}__toggle--disabled cursor-not-allowed !border-disabled`:`cursor-pointer data-state-checked:bg-highlight`),..._===void 0?{}:{defaultChecked:_},disabled:v,name:C||M,required:T,title:F,value:D,...l(w)?{onCheckedChange:e=>w(e)}:{},...d([`className`],O),children:f(h.Thumb,{className:t(`${e}-${a}__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]`,v?`!border-disabled data-state-checked:bg-highlight`:`border-normal data-state-checked:bg-primary`)})}),f(m,{asChild:!0,className:t(`${e}-${a}__label`,`${e}-${a}__label--right`,`h-full max-h-full w-fit max-w-full overflow-hidden text-ellipsis whitespace-nowrap align-middle`,v?`cursor-not-allowed text-disabled`:`cursor-pointer text-dark`,T?`${e}-${a}__label--required ${e}-${a}__label--right--required after:text-feedback-danger-50 after:content-required`:``),htmlFor:M,children:f(r,{element:x||(u(A&&!N?g:S?.[1]||b)?`label`:`div`),variant:`body-2`,children:A&&!N?g:S?.[1]||b})})]})});g.displayName=`Switch`;export{g as Switch,g as default};
//# sourceMappingURL=Switch.js.map