@jengaui/slider/dist/Thumb.js

Jenga UI Slider component in React

'use strict';

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

var react = require('react');
var slider = require('@react-aria/slider');
var interactions = require('@react-aria/interactions');
var visuallyHidden = require('@react-aria/visually-hidden');
var focus = require('@react-aria/focus');
var utils = require('@jengaui/utils');
var tastycss = require('tastycss');
var jsxRuntime = require('react/jsx-runtime');

var l=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"}});tastycss.tasty({styles:{top:"1.875x",position:"absolute",fill:{"":"#dark-05"},height:"2px",width:"100%",radius:!0}});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 O(r){let{state:d,isDisabled:i}=r,o=react.useRef(null),{thumbProps:n,inputProps:p,isDragging:s,isFocused:a}=slider.useSliderThumb({...r,inputRef:o},d),{hoverProps:u,isHovered:m}=interactions.useHover({isDisabled:i});return jsxRuntime.jsx(focus.FocusRing,{within:!0,children:jsxRuntime.jsx(l,{mods:{hovered:m,dragged:s,focused:!s&&a,disabled:i},...utils.mergeProps(n,u),role:"presentation",children:jsxRuntime.jsx(visuallyHidden.VisuallyHidden,{children:jsxRuntime.jsx("input",{ref:o,...p})})})})}

exports.Thumb = O;