@infinityfx/fluid/dist/components/input/number-field.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsx as t}from"react/jsx-runtime";import{useState as e,useRef as r,useCallback as n}from"react";import o from"./field.js";import i from"./button.js";import{combineClasses as a,toNumber as u,round as l,combineRefs as c,changeInputValue as m}from"../../core/utils.js";import{createStyles as d}from"../../core/style.js";import{Icon as p}from"../../core/icons.js";const f=d("number-field",{".field .button__start":{marginLeft:".25em",background:"var(--f-clr-bg-100)",color:"var(--f-clr-text-100)"},".field .button__end":{marginRight:".25em",background:"var(--f-clr-bg-100)",color:"var(--f-clr-text-100)"},".input":{MozAppearance:"textfield"},".input::-webkit-outer-spin-button, .input::-webkit-inner-spin-button":{WebkitAppearance:"none",margin:0}});function s({cc:d={},precision:s=3,controls:b=!0,defaultValue:g,...v}){const _=a(f,d),[h,k]=void 0!==v.value?[v.value]:e(g||""),x=r(null),j=u(v.step,1),A=u(v.min,-Number.MAX_VALUE),C=u(v.max,Number.MAX_VALUE),M=n(((t,e)=>{let r=t?parseFloat(t.toString()):void 0;return void 0!==e&&(r=(r||0)+e),void 0!==r&&(r=Math.max(r,A),r=Math.min(r,C)),void 0===r?"":l(r,s).toString()}),[s,A,C]);function y(t){x.current&&m(x.current,M(h,t))}const z={compact:!0,size:v.size,disabled:v.disabled,round:v.round};return t(o,{...v,inputRef:c(x,v.inputRef),type:"number",value:h,onChange:t=>{k?.(t.target.value),v.onChange?.(t)},onBlur:t=>{t.target.value=M(t.target.value),k?.(t.target.value),v.onChange?.(t),v.onBlur?.(t)},cc:{field:_.field,input:_.input,...d},left:b?t(i,{...z,cc:{button:_.button__start},"aria-label":`-${j}`,onClick:()=>y(-j),children:t(p,{type:"remove"})}):null,right:b?t(i,{...z,cc:{button:_.button__end},"aria-label":`+${j}`,onClick:()=>y(j),children:t(p,{type:"add"})}):null})}export{s as default};
//# sourceMappingURL=number-field.js.map