koval-ui/dist/src/lib/InputNumber/InputNumber.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 a=require("react/jsx-runtime"),n=require("react"),B=require("classnames"),F=require("css-vars-hook"),M=require("../../internal/Icons/IconArrowUp.cjs"),H=require("../../internal/Icons/IconArrowDown.cjs"),I=require("../../internal/inputs/ValidationProps.cjs"),Y=require("../../internal/inputs/useValidation.cjs"),G=require("../../internal/inputs/useRevalidateOnFormChange.cjs"),J=require("../../internal/inputs/useExternalValidation.cjs"),K=require("../../internal/inputs/useValidationIcon.cjs"),Q=require("../../internal/hooks/useInternalRef.cjs"),s=require("./InputNumber.module.css.cjs"),b="change_spinner",c=new Event(b,{bubbles:!0}),f=n.forwardRef(({className:h,placeholder:V="",disabled:q,value:x,onChange:o=()=>{},onFocus:N=()=>{},onBlur:E=()=>{},onKeyDown:w=()=>{},onKeyUp:R=()=>{},defaultValue:y,size:i=10,step:j,revalidateOnFormChange:C,errorMessage:g=I.ValidationState.error,validation:l,displayIcon:m=!0,...t},k)=>{const v=!!l||!!t.required||typeof t.min=="number"||typeof t.min=="string"||typeof t.max=="number"||typeof t.max=="string",{validateTextual:r,validity:p,setValidity:d}=Y.useValidation({validation:l,hasValidators:v}),e=Q.useInternalRef(k);G.useRevalidateOnFormChange(e,r,C),J.useExternalValidation({errorMessage:g,inputRef:e,setValidity:d,validation:l});const S=K.useValidationIcon(p),T=n.useCallback(u=>{o(u)},[o]);n.useEffect(()=>{var u;(u=e.current)==null||u.addEventListener(b,U=>{o(U)})},[e,o]);const A=n.useCallback(()=>{d(I.ValidationState.error)},[d]),D=n.useCallback(()=>{e.current.stepDown(),e.current.dispatchEvent(c),r(c)},[e,r]),_=n.useCallback(()=>{e.current.stepUp(),e.current.dispatchEvent(c),r(c)},[e,r]),{LocalRoot:L}=F.useLocalTheme(),O=n.useMemo(()=>({size:i}),[i]);return a.jsxs(L,{className:B(s.default.wrapper,{[s.default.withValidationIcon]:m},h),theme:O,children:[a.jsxs("div",{className:s.default.spinner,children:[a.jsx(M.IconArrowUp,{tabIndex:-1,onClick:_}),a.jsx(H.IconArrowDown,{tabIndex:-1,onClick:D})]}),a.jsx("input",{...t,step:j,size:i,type:"number",placeholder:V,className:s.default.input,ref:e,disabled:q,value:x,defaultValue:y,onChange:T,onBlur:E,onFocus:N,onKeyUp:R,onKeyDown:w,onInvalid:A,onInput:r}),m&&p&&a.jsx(S,{className:s.default.validation})]})});f.displayName="InputNumber";exports.InputNumber=f;
//# sourceMappingURL=InputNumber.cjs.map