UNPKG

@vela-ui/react

Version:

Vela UI React components

3 lines (2 loc) 2.53 kB
"use client" import{a as p}from"./chunk-K35CPLQX.mjs";import h from"react";import{Slider as f,SliderOutput as b,SliderThumb as S,SliderTrack as g,composeRenderProps as s,SliderStateContext as k}from"react-aria-components";import{tv as y}from"tailwind-variants";import{jsx as l}from"react/jsx-runtime";var P=y({slots:{root:"group relative isolate flex touch-none flex-col gap-2",track:"bg-muted relative grow cursor-pointer rounded-full",range:"bg-primary absolute rounded-full",thumb:"border-primary bg-background ring-ring/50 top-[50%] left-[50%] block shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4",output:"text-muted-foreground text-sm"},variants:{orientation:{horizontal:{root:"",track:"w-full",range:"h-full"},vertical:{root:"",track:"h-full",range:"w-full"}},size:{sm:{track:"data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5",thumb:"size-4"},md:{track:"data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2",thumb:"size-5"},lg:{track:"data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5",thumb:"size-6"}},isDisabled:{true:{track:"cursor-default",range:"bg-primary/15",thumb:"pointer-events-none opacity-50"}},isFocusable:{true:{thumb:"ring-4 outline-hidden"}}},defaultVariants:{size:"md"}}),{root:v,track:z,range:x,thumb:w,output:C}=P(),[A,m]=p({name:"SliderContext"});function D({className:r,size:e,children:o,...a}){return l(f,{"data-slot":"slider",className:s(r,(t,i)=>v({...i,className:t})),...a,children:s(o,(t,{orientation:i})=>l(A,{value:{orientation:i,size:e},children:t}))})}function M({className:r,...e}){return l(b,{"data-slot":"slider-output",className:s(r,(o,a)=>C({...a,className:o})),...e})}function F({className:r,...e}){let{orientation:o,size:a}=m();return l(g,{"data-slot":"slider-track",className:s(r,(t,i)=>z({...i,className:t,orientation:o,size:a})),...e})}function q({className:r,style:e,...o}){let a=h.useContext(k),{orientation:t,isDisabled:i,getThumbPercent:d,values:u}=a||{};return l("div",{"data-slot":"slider-range",style:{...(()=>{let n=d?d(0)*100:0,c=d?d(1)*100:0;return(u==null?void 0:u.length)===1?t==="horizontal"?{width:`${n}%`}:{height:`${n}%`}:t==="horizontal"?{left:`${n}%`,width:`${Math.abs(n-c)}%`}:{bottom:`${n}%`,height:`${Math.abs(n-c)}%`}})(),...e},className:x({orientation:t,isDisabled:i,className:r}),...o})}function B({className:r,...e}){let{size:o}=m();return l(S,{"data-slot":"slider-thumb",className:s(r,(a,t)=>w({...t,className:a,size:o})),...e})}export{D as a,M as b,F as c,q as d,B as e};