@vela-ui/react
Version:
Vela UI React components
3 lines (2 loc) • 1.64 kB
JavaScript
"use client"
import{Switch as u,composeRenderProps as a}from"react-aria-components";import{tv as l}from"tailwind-variants";import{Fragment as b,jsx as i,jsxs as f}from"react/jsx-runtime";var m=l({slots:{root:"group relative inline-flex touch-none items-center justify-start gap-2 text-sm",indicator:"inline-flex shrink-0 cursor-pointer rounded-full shadow-xs transition-all outline-none",thumb:"bg-background pointer-events-none block scale-75 rounded-full ring-0 transition-transform"},variants:{size:{sm:{indicator:"h-4 w-8",thumb:"size-4 group-data-[selected=true]:translate-x-4"},md:{indicator:"h-5 w-10",thumb:"size-5 group-data-[selected=true]:translate-x-5"},lg:{indicator:"h-6 w-12",thumb:"size-6 group-data-[selected=true]:translate-x-6"},xl:{indicator:"h-7 w-14",thumb:"size-7 group-data-[selected=true]:translate-x-7"}},isFocusVisible:{true:{indicator:"ring-ring/50 ring-[3px]"}},isInvalid:{true:{indicator:"ring-destructive/20 dark:ring-destructive/40"}},isDisabled:{true:{root:"text-foreground/50 cursor-not-allowed",indicator:"cursor-not-allowed opacity-50"}},isSelected:{true:{indicator:"bg-primary text-primary-foreground",thumb:"dark:bg-primary-foreground translate-x-5"},false:{indicator:"bg-input dark:bg-input/80",thumb:"dark:bg-foreground"}}},defaultVariants:{size:"md"}}),{root:p,indicator:g,thumb:h}=m();function S({className:o,thumbClassName:s,indicatorClassName:n,size:e,children:c,...d}){return i(u,{className:a(o,(r,t)=>p({...t,className:r})),...d,children:a(c,(r,t)=>f(b,{children:[i("div",{className:g({...t,size:e,className:n}),children:i("div",{className:h({...t,size:e,className:s})})}),r]}))})}export{S as a};