import{useEffect as f,useState as M}from"react";import a from"@emotion/styled";import{AddIcon as A,MinusIcon as E}from"@chakra-ui/icons";import{Box as G,Button as H,Flex as V,Text as W}from"@chakra-ui/react";import w from"react";import{createMultiStyleConfigHelpers as _,defineStyle as k,FormControl as z,Input as F,InputGroup as T,Text as p}from"@chakra-ui/react";import{inputAnatomy as B}from"@chakra-ui/anatomy";import{jsx as c,jsxs as x}from"react/jsx-runtime";var C=w.forwardRef(({label:e,error:n,placeholder:l,helperText:o,isInvalid:i,as:t=F,InputLeftAddon:r,InputRightAddon:b,...u},h)=>{let{disabled:s}=u;return x(z,{isInvalid:i,opacity:s?.4:1,children:[e&&c(p,{color:i?"destructive":"foreground",fontWeight:"medium",fontSize:"sm",lineHeight:1,children:e}),x(T,{mt:"2",children:[r,c(t,{variant:"",placeholder:l,...u,ref:h}),b]}),o&&c(p,{fontSize:"xs",mt:2,color:"mutedForeground",children:o}),i&&n&&c(p,{fontSize:"xs",mt:2,color:"destructive",children:n})]})}),{definePartsStyle:y,defineMultiStyleConfig:R}=_(B.keys),$=y({field:{color:"foreground",background:"background",boxShadow:"base",borderWidth:"1px",borderStyle:"solid",borderColor:"input",borderRadius:"lg",_focusVisible:{borderColor:"ring"},_hover:{},_disabled:{opacity:1},_placeholder:{color:"mutedForeground"}}}),v=k({borderRadius:"md"}),D={sm:y({field:v})},L=R({baseStyle:$,sizes:D});import{jsx as d,jsxs as m}from"react/jsx-runtime";var j=a(G)`
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px;
  height: 40px;
  border-radius: 12px;
`,I=a(H)`
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 32px;
  width: 32px;
  //border-radius: 12px;
  //border: none;
  //border: 1px solid ${e=>e.theme.colors.border};
  pointer-events: ${e=>e.disabled?"none":"unset"};
  opacity: ${e=>e.disabled?"0.5":"1"};

  &:active {
    border: 1px solid ${e=>e.theme.colors.foreground};
  }

  svg {
    path {
      fill: ${e=>e.theme.colors.foreground};
    }
  }
`,q=a(C)`
  justify-content: center;
  font-size: 18px;
  min-width: 60px;
  user-select: none;
  border: none;
  box-shadow: none;
  max-width: 80px;
  text-align: center;
`,N=({initialState:e=1,maxState:n,onChange:l,value:o,onError:i})=>{let[t,r]=M(e);return f(()=>{l(t)},[t]),f(()=>{r(e)},[e]),f(()=>{n>0&&o>n||t<1?i(!0):i(!1)},[n,o,t]),m(V,{flexDirection:"column",alignItems:"flex-end",children:[m(j,{children:[d(I,{variant:"outline",onClick:()=>{o>e&&r(s=>o-1)},disabled:o===1,children:d(E,{})}),d(q,{value:o,onChange:s=>{let g=Number(s.target.value);r(g)}}),d(I,{variant:"outline",onClick:()=>{n?o<n&&r(s=>o+1):r(s=>o+1)},disabled:n===o||!n,children:d(A,{})})]}),(n>0&&o>n||t<1)&&m(W,{fontSize:12,mt:10,color:"#E11900",children:["Enter quantity between 1 to ",n]})]})},oe=N;export{oe as default};
