@jengaui/slider/dist/RangeSlider.js

Jenga UI Slider component in React

'use strict';

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

var react = require('react');
var slider$1 = require('@react-aria/slider');
var slider = require('@react-stately/slider');
var form = require('@jengaui/form');
var tastycss = require('tastycss');
var jsxRuntime = require('react/jsx-runtime');
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 layout = require('@jengaui/layout');
var numberInput = require('@jengaui/number-input');

var G=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"}}),E=tastycss.tasty({styles:{top:"1.875x",position:"absolute",fill:{"":"#dark-05"},height:"2px",width:"100%",radius:!0}}),L=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}}),H=tastycss.tasty({styles:{}}),O=tastycss.tasty({styles:{}}),W=tastycss.tasty({styles:{position:"relative",width:"100% - 2x",height:"4x"}}),N=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 J(e){let{ranges:t,state:r,isDisabled:n,isSingle:o}=e,i={},l=react.useMemo(()=>({single:o,disabled:n}),[n,o]);return t.forEach(s=>{i[`--thumb-${s}-value`]=r.getThumbPercent(s);}),jsxRuntime.jsx(E,{mods:l,children:jsxRuntime.jsx(L,{style:i,mods:l})})}function z(e){let{state:t,ranges:r,values:n=[]}=e;if(!n.length)return null;let o=(i,l)=>{let[s,u]=r.map(p=>t.getThumbValue(p));return l>=s&&l<=u};return jsxRuntime.jsx(H,{children:n.map((i,l)=>jsxRuntime.jsx(O,{mods:{active:o(i,l)},children:i},i))})}function $(e){let{state:t,isDisabled:r}=e,n=react.useRef(null),{thumbProps:o,inputProps:i,isDragging:l,isFocused:s}=slider$1.useSliderThumb({...e,inputRef:n},t),{hoverProps:u,isHovered:p}=interactions.useHover({isDisabled:r});return jsxRuntime.jsx(focus.FocusRing,{within:!0,children:jsxRuntime.jsx(G,{mods:{hovered:p,dragged:l,focused:!l&&s,disabled:r},...utils.mergeProps(o,u),role:"presentation",children:jsxRuntime.jsx(visuallyHidden.VisuallyHidden,{children:jsxRuntime.jsx("input",{ref:n,...i})})})})}function Te(e,t){if(typeof e>"u")return;let r=String(e).length,n=r>2?1.6:1.75;return `${r*(t?n:2)}x`}function v(e){let{state:t,index:r,suffix:n,min:o,max:i,...l}=e,s=t.values[r],u=Te(i,!!n),p=react.useCallback(b=>{t.setThumbValue(r,b);},[r,t]),y=typeof i<"u"?String(i).length:void 0;return jsxRuntime.jsx(numberInput.NumberInput,{...l,hideStepper:!0,size:"small",inputStyles:{width:u},suffix:n&&jsxRuntime.jsx(layout.Flow,{padding:"1.5x right",children:n}),value:s,minValue:t.getThumbMinValue(r),maxValue:t.getThumbMaxValue(r),maxLength:y,onChange:p})}function Y(e){return Array.isArray(e)?e.length>=2?[0,1]:[0]:[0]}function S(e){return typeof e=="number"}function K(e){return Array.isArray(e)&&e.length===2&&S(e[0])&&S(e[1])}function I(e,t,r){if(K(e)){let n=Math.min(...e),o=Math.max(...e);return S(t)&&n<t&&(n=t),S(r)&&o>=r&&(o=r),[n,o]}return e}function Q(e,t,r){if(S(e)&&S(t)){if(K(r)){let n=Math.min(...r),o=Math.max(...r);return [Math.min(e,t,n),Math.max(e,t,o)]}return [Math.min(e,t),Math.max(e,t)]}return [e,t]}function Ae(e,t){let{labelPosition:r,label:n,extra:o,styles:i,isRequired:l,validationState:s,message:u,description:p,requiredMark:y,labelSuffix:b,labelStyles:j,necessityIndicator:ee,defaultValue:V,value:P,gradation:te,step:k=1,isDisabled:g,orientation:re="horizontal",showInput:R,inputStyles:ne,inputSuffix:ie,minValue:oe,maxValue:le,onChange:w,onChangeEnd:A,...ae}=e,[T,M]=Q(oe,le,P||V),h=Y(V||P||[0,1]),D=h.length<=1,C=react.useRef(null),se=react.useRef(null),de=new Intl.NumberFormat,f={step:k,orientation:re,isDisabled:g,minValue:T,maxValue:M,value:I(P,T,M),defaultValue:I(V,T,M),onChange(a){w&&w(Array.isArray(a)?a:[a]);},onChangeEnd(a){A&&A(Array.isArray(a)?a:[a]);}},c=slider.useSliderState({...e,...f,numberFormatter:de}),{groupProps:ue,trackProps:pe,labelProps:me}=slider$1.useSlider({...e,...f},c,C),F={step:k,state:c,isDisabled:g,suffix:ie,styles:ne,min:f.minValue,max:f.maxValue},fe=jsxRuntime.jsxs(N,{...ue,mods:{sideLabel:r==="side",inputs:R},children:[!D&&R&&jsxRuntime.jsx(v,{index:0,...F}),jsxRuntime.jsx(_,{children:jsxRuntime.jsxs(W,{...pe,ref:C,children:[jsxRuntime.jsx(J,{state:c,ranges:h,isSingle:D,isDisabled:g}),jsxRuntime.jsx(z,{state:c,ranges:h,values:te}),h.map(a=>jsxRuntime.jsx($,{index:a,state:c,inputRef:se,trackRef:C,isDisabled:g,defaultValue:f.defaultValue&&f.defaultValue[a]},a))]})}),R&&jsxRuntime.jsx(v,{index:1,...F})]});return i=tastycss.extractStyles(ae,tastycss.OUTER_STYLES,i),jsxRuntime.jsx(form.FieldWrapper,{labelPosition:r,label:n,extra:o,styles:i,isRequired:l,labelStyles:j,necessityIndicator:ee,labelProps:me,isDisabled:g,validationState:s,message:u,description:p,requiredMark:y,labelSuffix:b,Component:fe,ref:t})}var De=react.forwardRef(Ae),Pt=Object.assign(De,{jengaInputType:"CheckboxGroup"});

exports.RangeSlider = Pt;