@start-base/react-form-elements/NumberInput/index.mjs

Simplify form elements and form management. Selection of user friendly inputs and wide customization abilities to match your design and functionality.

import e,{forwardRef as l,useCallback as a,useMemo as t}from"react";import n from"clsx";var r=Object.defineProperty,o=Object.defineProperties,u=Object.getOwnPropertyDescriptors,p=Object.getOwnPropertySymbols,s=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable,d=(e,l,a)=>l in e?r(e,l,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[l]=a,c=(e,l)=>{for(var a in l||(l={}))s.call(l,a)&&d(e,a,l[a]);if(p)for(var a of p(l))m.call(l,a)&&d(e,a,l[a]);return e},i=(e,l)=>o(e,u(l)),b=(e,l)=>{var a={};for(var t in e)s.call(e,t)&&l.indexOf(t)<0&&(a[t]=e[t]);if(null!=e&&p)for(var t of p(e))l.indexOf(t)<0&&m.call(e,t)&&(a[t]=e[t]);return a},I="SUI-Input-module-root-Jh-4e",h="SUI-Input-module-inputRoot-Ug822",v="SUI-Input-module-label-fpxAl",S="SUI-Input-module-disableShrink-VTup6",N="SUI-Input-module-prepend-PTtkE",f="SUI-Input-module-placeholder-RxhY2",g="SUI-Input-module-labelPlaceholder-03rs3",y="SUI-Input-module-input-SMgjS",C="SUI-Input-module-disabledLabel-hKDBK",U="SUI-Input-module-append-TNa8b",E="SUI-Input-module-appendDisabledShrink-ULDV8",O="SUI-Input-module-prependDisabledShrink-5DxUo",k="SUI-Input-module-errorLabel-Qp8cB",j="SUI-Input-module-inputError-EeFMs",x="SUI-Input-module-disabled--Ng0A",P=l(((l,r)=>{var o=l,{name:u,onChange:p,error:s=null,label:m=null,placeholder:d,value:P="",inputClassName:w=null,labelClassName:D=null,errorClassName:L=null,prepend:M=null,prependClassName:A=null,append:B=null,appendClassName:T=null,disableShrink:q=!1,disabled:z=!1}=o,F=b(o,["name","onChange","error","label","placeholder","value","inputClassName","labelClassName","errorClassName","prepend","prependClassName","append","appendClassName","disableShrink","disabled"]);const K=a((e=>{p(e)}),[p]),R=t((()=>{let e=null;return s&&"string"==typeof s?e=s:s&&"object"==typeof s&&(null==s?void 0:s.message)&&(e=s.message),e}),[s]),V=t((()=>e.createElement("input",c({type:"text",className:n(y,c({[S]:q||!m,[f]:m&&d&&!q,[x]:z,[j]:"boolean"==typeof s&&s},w?{[w]:!0}:{})),name:u,value:P,ref:r,onChange:K,disabled:z,placeholder:d},F))),[q,m,d,z,s,w,u,P,r,K,F]),J=t((()=>e.createElement("label",{htmlFor:u,className:n(v,c({[C]:z,[S]:q,[g]:m&&d&&!q},D?{[D]:!0}:{})),onClick:()=>{var e;try{const l=document.querySelectorAll(`[name="${u}"]`);if(!l.length)return;let a=l[0];"hidden"===(null==a?void 0:a.type)&&(a=null==(e=null==a?void 0:a.parentNode)?void 0:e.querySelector("input")),null==a||a.focus()}catch(e){throw e}}},m)),[z,u,q,m,d,D]);return e.createElement("div",{className:n(I)},e.createElement("div",{className:n(h)},M&&e.createElement("div",{className:n(N,i(c({},A?{[A]:!0}:{}),{[O]:q}))},M),B&&e.createElement("div",{className:n(U,c({[E]:q},T?{[T]:!0}:{}))},B),m&&q?J:null,V,m&&!q?J:null),R?e.createElement("span",{className:n(k,c({},L?{[L]:!0}:{}))},R):null)}));P.displayName="Input";var w=P,D="SUI-NumberInput-module-buttons-yP71p",L="SUI-NumberInput-module-button-rBlsg",M=l(((l,a)=>{var t=l,{value:n,onChange:r,name:o}=t,u=b(t,["value","onChange","name"]);const p=e=>{r({target:{name:o,value:e}})};return e.createElement(w,i(c({ref:a},u),{type:"number",inputMode:"numeric",name:o,value:n,onChange:r,append:e.createElement("div",{className:D},e.createElement("button",{type:"button",className:L,onClick:()=>{p(parseInt(n)+1)}},e.createElement("svg",{width:20,height:20,style:{transform:"rotate(180deg)"}},e.createElement("path",{fill:"currentColor",d:"M4.516 7.548c.436-.446 1.043-.481 1.576 0L10 11.295l3.908-3.747c.533-.481 1.141-.446 1.574 0 .436.445.408 1.197 0 1.615-.406.418-4.695 4.502-4.695 4.502a1.095 1.095 0 0 1-1.576 0S4.924 9.581 4.516 9.163s-.436-1.17 0-1.615z"}))),e.createElement("button",{type:"button",className:L,onClick:()=>{p(parseInt(n)-1)}},e.createElement("svg",{width:20,height:20},e.createElement("path",{fill:"currentColor",d:"M4.516 7.548c.436-.446 1.043-.481 1.576 0L10 11.295l3.908-3.747c.533-.481 1.141-.446 1.574 0 .436.445.408 1.197 0 1.615-.406.418-4.695 4.502-4.695 4.502a1.095 1.095 0 0 1-1.576 0S4.924 9.581 4.516 9.163s-.436-1.17 0-1.615z"}))))}))}));M.displayName="NumberInput";var A=M;export{A as default};