@jengaui/slider/dist/Slide.js

Jenga UI Slider component in React

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var react = require('react');
var tastycss = require('tastycss');
var jsxRuntime = require('react/jsx-runtime');

tastycss.tasty({styles:{top:"2x",width:"2x",height:"2x",fill:{"":"#purple",hovered:"#purple-text",dragged:"#purple",disabled:"#dark-04"},cursor:"pointer",shadow:{"":"0px 2px 4px #dark.2",dragged:"inset 0 0 0 2px #purple-text, 0px 2px 4px #dark.2"},radius:"50%",border:{"":null,focused:"3px solid #purple-04"},transition:"theme"}});var r=tastycss.tasty({styles:{top:"1.875x",position:"absolute",fill:{"":"#dark-05"},height:"2px",width:"100%",radius:!0}}),d=tastycss.tasty({styles:{position:"absolute","@start-range":{"":"@thumb-0-value",single:"0"},"@end-range":{"":"(1 - @thumb-1-value)",single:"(1 - @thumb-0-value)"},left:"(@start-range * 100%)",right:"(@end-range * 100%)",height:"2px",fill:{"":"#purple",disabled:"#dark-04"},radius:!0}});tastycss.tasty({styles:{}});tastycss.tasty({styles:{}});tastycss.tasty({styles:{position:"relative",width:"100% - 2x",height:"4x"}});tastycss.tasty({as:"section",styles:{position:"relative",display:"flex",gap:{"":"0",inputs:"1x"},flexDirection:{"":"column",inputs:"row"},alignItems:"center",width:"100%",padding:{"":"0",sideLabel:"0.75x top"}}});tastycss.tasty({styles:{display:"flex",alignItems:"center",flexDirection:"column",width:"100%"}});function w(p){let{ranges:a,state:u,isDisabled:t,isSingle:l}=p,s={},i=react.useMemo(()=>({single:l,disabled:t}),[t,l]);return a.forEach(o=>{s[`--thumb-${o}-value`]=u.getThumbPercent(o);}),jsxRuntime.jsx(r,{mods:i,children:jsxRuntime.jsx(d,{style:s,mods:i})})}

exports.Slide = w;