{"version":3,"file":"QuantityInput.DsZPyIPf.mjs","names":["React.useState","React.useRef","React.useCallback"],"sources":["https:/framerusercontent.com/modules/SM8ND2vQHUyKQ9KPZnOA/dg43bElvCgDiAJE69002/QuantityInput.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";function clamp(n,min,max){if(Number.isFinite(min)&&n<min)return min;if(Number.isFinite(max)&&n>max)return max;return n;}function toIntSafe(v){const digits=(v||\"\").replace(/['\"`]|[^\\d]/g,\"\");if(!digits)return 0;const n=Number.parseInt(digits,10);return Number.isFinite(n)?n:0;}export default function QuantityInput(props){const{fieldName=props.fieldName,step=props.step,min=props.min,max=props.max,backgroundColor=props.backgroundColor,padding=props.padding,borderRadius=props.borderRadius,border=props.border,borderErrorColor=props.borderErrorColor,buttonColor=props.buttonColor,buttonSize=props.buttonSize,font=props.font,height=props.height,autofocus=props.autofocus}=props;const stepSafe=Number.isFinite(step)&&step>0?step:1;const minSafe=Number.isFinite(min)?min:1;const maxSafe=Number.isFinite(max)?max:1e3;const[value,setValue]=React.useState(0);// Only show red border after a submit attempt triggers native \"invalid\"\nconst[showErrors,setShowErrors]=React.useState(false);const[isInvalid,setIsInvalid]=React.useState(false);const inputRef=React.useRef(null);React.useEffect(()=>{setValue(v=>{if(v===0)return 0;return clamp(v,minSafe,maxSafe);});},[minSafe,maxSafe]);const applyValue=React.useCallback(next=>{setValue(next===0?0:clamp(next,minSafe,maxSafe));},[minSafe,maxSafe]);const validate=React.useCallback(()=>{const input=inputRef.current;if(!input)return;const raw=input.value;let ok=true;// allow empty while typing (required will catch on submit)\nif(!raw.trim()){input.setCustomValidity(\"\");ok=true;}else{const n=toIntSafe(raw);if(n===0){input.setCustomValidity(\"Please ensure you have a value greater than 0\");ok=false;}else if(n<minSafe){input.setCustomValidity(`Please enter a value of at least ${minSafe}`);ok=false;}else if(n>maxSafe){input.setCustomValidity(`Please enter a value of at most ${maxSafe}`);ok=false;}else{input.setCustomValidity(\"\");ok=true;}}// Visual state: only after submit attempt\nif(!showErrors){setIsInvalid(false);}else{setIsInvalid(!ok);}},[minSafe,maxSafe,showErrors]);React.useEffect(()=>{const input=inputRef.current;if(!input)return;const onInput=()=>validate();const onBlur=()=>validate();const onInvalid=e=>{// User attempted submit\nsetShowErrors(true);// Ensure our custom message is used\ne.preventDefault();validate();// input.reportValidity()\n};input.addEventListener(\"input\",onInput);input.addEventListener(\"blur\",onBlur);input.addEventListener(\"invalid\",onInvalid);// Keep validity messages in sync, but don't show red until submit\nvalidate();return()=>{input.removeEventListener(\"input\",onInput);input.removeEventListener(\"blur\",onBlur);input.removeEventListener(\"invalid\",onInvalid);};},[validate]);const onMinus=React.useCallback(()=>{if(value===0)return;const next=value-stepSafe;applyValue(next<minSafe?0:next);requestAnimationFrame(validate);},[value,stepSafe,minSafe,applyValue,validate]);const onPlus=React.useCallback(()=>{if(value===0)applyValue(minSafe);else applyValue(value+stepSafe);requestAnimationFrame(validate);},[value,stepSafe,minSafe,applyValue,validate]);const onChange=React.useCallback(e=>{const raw=e.target.value;if(raw===\"\"){applyValue(0);requestAnimationFrame(validate);return;}applyValue(toIntSafe(raw));requestAnimationFrame(validate);},[applyValue,validate]);const displayValue=String(value);return /*#__PURE__*/_jsxs(\"div\",{className:\"quantity-input\",style:{display:\"flex\",alignItems:\"center\",gap:8,background:backgroundColor,padding:padding,borderRadius:borderRadius,height:height,// Red border only after submit attempt AND still invalid\nborder:isInvalid?`1px solid ${borderErrorColor}`:undefined,...isInvalid?{}:border},children:[/*#__PURE__*/_jsx(\"button\",{type:\"button\",onClick:onMinus,disabled:value===0,style:{appearance:\"none\",border:\"none\",background:\"transparent\",padding:0,margin:0,cursor:value===0?\"default\":\"pointer\",opacity:value===0?.5:1,lineHeight:1,fontSize:buttonSize,color:buttonColor},children:\"−\"}),/*#__PURE__*/_jsx(\"input\",{autoFocus:autofocus,ref:inputRef,required:true,name:fieldName,inputMode:\"numeric\",pattern:\"[0-9]*\",value:displayValue,onChange:onChange,\"aria-invalid\":showErrors&&isInvalid,min:minSafe,max:maxSafe,style:{width:\"4em\",textAlign:\"center\",border:\"none\",outline:\"none\",background:\"transparent\",...font}}),/*#__PURE__*/_jsx(\"button\",{type:\"button\",onClick:onPlus,disabled:value!==0&&value>=maxSafe,style:{appearance:\"none\",border:\"none\",background:\"transparent\",padding:0,margin:0,cursor:value!==0&&value>=maxSafe?\"default\":\"pointer\",opacity:value!==0&&value>=maxSafe?.5:1,lineHeight:1,fontSize:buttonSize,color:buttonColor},children:\"+\"})]});}addPropertyControls(QuantityInput,{autofocus:{type:ControlType.Boolean,title:\"Autofocus\",defaultValue:true},fieldName:{type:ControlType.String,title:\"Field Name\",defaultValue:\"Quantity\"},step:{type:ControlType.Number,title:\"Step\",defaultValue:1,min:1,displayStepper:true},min:{type:ControlType.Number,title:\"Min\",defaultValue:1,min:1,displayStepper:true},max:{type:ControlType.Number,title:\"Max\",defaultValue:1e3,min:0,displayStepper:true},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\"},height:{type:ControlType.Number,title:\"Height\",defaultValue:40,min:0,displayStepper:true},padding:{type:ControlType.Padding,title:\"Padding\",defaultValue:\"8px 16px 8px 16px\"},backgroundColor:{type:ControlType.Color,title:\"Background Color\",defaultValue:\"#F8F8F8\"},border:{type:ControlType.Border,defaultValue:{borderWidth:1,borderStyle:\"solid\",borderColor:\"#EBEBEB\"}},borderErrorColor:{type:ControlType.Color,title:\"Border Error Color\",defaultValue:\"#FF5A6F\"},borderRadius:{type:ControlType.BorderRadius,title:\"Border Radius\",defaultValue:\"10px\"},buttonColor:{type:ControlType.Color,title:\"Button Color\",defaultValue:\"#1788D4\"},buttonSize:{type:ControlType.Number,title:\"Button Size\",defaultValue:20}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"QuantityInput\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./QuantityInput.map"],"mappings":"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"}