koval-ui/dist/src/lib/InputRange/InputRange.cjs

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),D=require("classnames"),H=require("css-vars-hook"),z=require("../../internal/inputs/ValidationProps.cjs"),G=require("../../internal/inputs/useValidation.cjs"),J=require("../../internal/inputs/useRevalidateOnFormChange.cjs"),K=require("../../internal/inputs/useExternalValidation.cjs"),P=require("../../internal/inputs/useValidationIcon.cjs"),Q=require("../../internal/hooks/useControllableState.cjs"),W=require("../../internal/hooks/useInternalId.cjs"),X=require("../../internal/hooks/useInternalRef.cjs"),t=require("./InputRange.module.css.cjs"),Y=({min:a,max:c,bars:n,scaleUnit:d})=>{const l=(c-a)/n;return new Array(n+1).fill("").map((q,o)=>{const r=Math.floor(a+l*o);return e.jsx("option",{value:r,label:`- ${r}${d}`,className:t.default.mark},o)})},S=i.forwardRef(({prefix:a,id:c,className:n,disabled:d,value:p,onChange:l=()=>{},onFocus:g=()=>{},onBlur:q=()=>{},onKeyDown:o=()=>{},onKeyUp:r=()=>{},defaultValue:V,min:N=0,max:s=100,bars:k=5,scaleUnit:u="",revalidateOnFormChange:w,validation:m,errorMessage:O,displayScale:B,displayIcon:R=!0,...j},F)=>{const M=!!m||!!j.required,{validateTextual:x,validity:b,setValidity:h}=G.useValidation({validation:m,hasValidators:M}),f=X.useInternalRef(F);J.useRevalidateOnFormChange(f,x,w),K.useExternalValidation({errorMessage:O,inputRef:f,setValidity:h,validation:m});const T=P.useValidationIcon(b),[$,y]=Q.useControllableState({value:p,defaultValue:V}),E=i.useCallback(C=>{y(C.target.value),l(C)},[l,y]),L=i.useCallback(()=>{h(z.ValidationState.error)},[h]),I=W.useInternalId(c),v=`${I}-scale`,{LocalRoot:_}=H.useLocalTheme(),A=i.useMemo(()=>({"output-length":s.toString().length+u.length}),[s,u]);return e.jsxs("div",{className:D(t.default["input-range"],{[t.default.withValidationIcon]:R},n),children:[a&&e.jsx("label",{className:t.default.prefix,htmlFor:I,children:e.jsx(a,{})}),e.jsxs("div",{className:t.default["scale-wrapper"],children:[e.jsx("input",{...j,id:I,type:"range",className:t.default.input,ref:f,disabled:d,value:p,defaultValue:V,onChange:E,onBlur:q,onFocus:g,onKeyUp:r,onKeyDown:o,onInvalid:L,onInput:x,list:v,min:N,max:s}),B&&e.jsx("datalist",{id:v,className:t.default.scale,children:Y({min:Number(N),max:Number(s),bars:k,scaleUnit:u})})]}),e.jsxs(_,{as:"output",theme:A,className:t.default.output,children:[$||Number(s)/2," ",u]}),R&&b&&e.jsx(T,{className:t.default.validation})]})});S.displayName="InputRange";exports.InputRange=S;
//# sourceMappingURL=InputRange.cjs.map