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

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

import{a as e}from"../constants-CW2-utNH.js";import{n as t,r as n}from"../helpers-DBEwVIlX.js";import{GROUP_NAME as r}from"./Slider.constants.js";import{useId as i}from"react";import a from"lodash/fp/isFunction.js";import o from"lodash/fp/omit.js";import{jsx as s,jsxs as c}from"react/jsx-runtime";import l from"lodash/fp/isNumber.js";import u from"lodash/fp/range.js";import*as d from"@radix-ui/react-slider";const f=({defaultValue:f,disabled:p=!1,id:m,inverted:h=!1,label:g,max:_=100,min:v=0,minStepsBetweenThumbs:y=0,name:b,onValueChange:x,onValueCommit:S,orientation:C=`horizontal`,step:w=1,value:T,...E})=>{let D=i(),O=(m??D)||D,k=T||f,A=l(k)?1:k?.length??1,j=u(0)(A);return c(d.Root,{id:O,"aria-label":g,className:n(`${e}-${r}`,`relative box-border flex rounded-full border-1 border-normal`,C===`vertical`?`h-full max-h-full w-1 flex-col justify-center`:`h-1 w-full max-w-full items-center`,E.className),defaultValue:l(f)?[f]:f,disabled:p,inverted:h,max:_,min:v,minStepsBetweenThumbs:y,name:b||O,orientation:C,step:w,value:l(T)?[T]:T,onValueChange:e=>{a(x)&&x(A===1?e[0]:e)},onValueCommit:e=>{a(S)&&S(A===1?e[0]:e)},...o([`className`,`dir`],E),children:[s(d.Track,{className:t(`${e}-${r}__track`,`relative h-full w-full flex-1 rounded-full`,p?`bg-disabled`:`bg-highlight`,C===`vertical`?`w-1`:``),children:s(d.Range,{className:t(`${e}-${r}__range`,`absolute rounded-full bg-secondary transition-transform delay-100 duration-600 [transition-property:cubic-bezier(0.65,0,0.35,1)]`,C===`vertical`?`w-full`:`h-full`)})}),j.map((n,i)=>s(d.Thumb,{"aria-label":g,className:t(`${e}-${r}__thumb`,`${e}-${r}__thumb--${i}`,`block size-2 rounded-full bg-secondary`),title:l(T)?String(T):void 0},`thumbs-${i}`))]})};f.displayName=`Slider`;export{f as Slider,f as default};
//# sourceMappingURL=Slider.js.map