@accelint/design-toolkit/dist/components/slider/index.js

An open-source component library to serve as part of the entire ecosystem of UX for Accelint.

'use client';

import {jsx,jsxs,Fragment}from'react/jsx-runtime';import'client-only';import {Fragment as Fragment$1}from'react';import {Slider,composeRenderProps,Label,Input,SliderTrack,SliderThumb,Text}from'react-aria-components';import {Tooltip}from'../tooltip/index.js';import {TooltipTrigger}from'../tooltip/trigger.js';import {SliderStyles}from'./styles.js';const{slider:A,label:D,inputs:F,input:B,thumb:P,track:$,trackBackground:z,trackValue:C,minValue:L,maxValue:R}=SliderStyles();function K({classNames:e,label:d,layout:b="grid",maxValue:o=100,minValue:n=0,orientation:g="horizontal",showInput:s,showLabel:c=true,...T}){return jsx(Slider,{...T,className:composeRenderProps(e?.slider,a=>A({className:a})),maxValue:o,minValue:n,orientation:g,"aria-label":c?void 0:d,"data-layout":b,children:({state:a})=>jsxs(Fragment,{children:[c&&jsx(Label,{className:D({className:e?.label}),children:d}),s&&jsx("div",{className:F({className:e?.inputs}),children:a.values.map((m,r)=>jsx(Input,{className:composeRenderProps(e?.input,i=>B({className:i})),value:m,disabled:a.isDisabled,"data-disabled":a.isDisabled||void 0,onChange:i=>a.setThumbValue(r,Number.parseFloat(i.target.value))},`number-field-${r===0?"min":"max"}`))}),jsxs(SliderTrack,{className:composeRenderProps(e?.track,m=>$({className:m})),children:[jsx("div",{className:z({className:e?.trackBackground})}),a.values.map((m,r)=>jsxs(Fragment$1,{children:[jsx("div",{className:C({className:e?.trackValue}),"data-start":a.values.length===1?0:a.getThumbPercent(0),"data-end":a.getThumbPercent(a.values.length===1?0:1)}),jsxs(TooltipTrigger,{isDisabled:!s||a.isThumbDragging(r),children:[jsx(SliderThumb,{index:r,className:composeRenderProps(e?.thumb,i=>P({className:i}))}),jsx(Tooltip,{placement:"top",children:a.getThumbValue(r)})]})]},`slider-${r===0?"min":"max"}`))]}),jsx(Text,{slot:"min",className:L({className:e?.minValue}),children:n}),jsx(Text,{slot:"max",className:R({className:e?.maxValue}),children:o})]})})}export{K as Slider};//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map