@mobilestockweb/form 0.1.1 → 0.2.0

package/index.d.ts

@@ -1,12 +1,66 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { BadgeType } from '@mobilestockweb/badge';
+import { ButtonProps } from '@mobilestockweb/button';
 import * as react from 'react';
 import { InputHTMLAttributes, RefObject } from 'react';
 import { FormHandles, FormProps } from '@unform/core';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps } from '@mobilestockweb/button';
 import { ViewBaseProps } from '@mobilestockweb/container';
 import { GroupBase, Props } from 'react-select';
 import { ZodSchema } from 'zod';
 
+interface BadgeProps {
+    text: string;
+    renderInsidePill?: boolean;
+    type?: BadgeType;
+}
+declare function Badge(props: BadgeProps): react_jsx_runtime.JSX.Element;
+declare namespace Badge {
+    var displayName: string;
+}
+
+type ButtonType = 'PLUS' | 'MINUS';
+interface TypeButton extends Pick<ButtonProps, 'disabled' | 'text' | 'backgroundColor'> {
+    type: ButtonType;
+    disabled?: boolean;
+}
+
+declare function Minus(props: Partial<Omit<TypeButton, 'type'>>): react_jsx_runtime.JSX.Element;
+declare namespace Minus {
+    var displayName: string;
+}
+
+declare function Plus(props: Partial<Omit<TypeButton, 'type'>>): react_jsx_runtime.JSX.Element;
+declare namespace Plus {
+    var displayName: string;
+}
+
+declare function Display(): react_jsx_runtime.JSX.Element;
+declare namespace Display {
+    var displayName: string;
+}
+
+type CounterEventName = 'INCREMENT' | 'DECREMENT' | 'EDIT';
+
+interface CounterRootProps {
+    children?: React.ReactNode;
+    initialCount?: number;
+    maxCount?: number;
+    minCount?: number;
+    label?: string;
+    name: string;
+    editable?: boolean;
+    multiplier?: number;
+    labelPosition?: 'TOP_START' | 'LEFT' | 'TOP_CENTER';
+    buttonTransparent?: boolean;
+    groupElements?: boolean;
+    onChange?(data: {
+        value: number;
+        event: CounterEventName;
+    }): void;
+}
+
+declare function CounterRoot({ children, ...props }: CounterRootProps): react_jsx_runtime.JSX.Element;
+
 type InputType = 'text' | 'password' | 'tel' | 'email' | 'number' | 'url' | 'zipcode' | 'hidden';
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
     name: string;
@@ -72,6 +126,12 @@ declare const Form: typeof FormComponent & {
     Radio: typeof FormRadio;
     Select: typeof FormSelect;
     Button: typeof FormButton;
+    Counter: typeof CounterRoot & {
+        Display: typeof Display;
+        Plus: typeof Plus;
+        Minus: typeof Minus;
+        Badge: typeof Badge;
+    };
     Vertical: typeof FormVertical;
     Horizontal: typeof FormHorizontal;
 };

package/index.js

@@ -1,29 +1,73 @@
-"use strict";var ye=Object.create;var L=Object.defineProperty,He=Object.defineProperties,we=Object.getOwnPropertyDescriptor,Ve=Object.getOwnPropertyDescriptors,Oe=Object.getOwnPropertyNames,k=Object.getOwnPropertySymbols,Be=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty,re=Object.prototype.propertyIsEnumerable;var ee=(e,r,t)=>r in e?L(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,F=(e,r)=>{for(var t in r||(r={}))U.call(r,t)&&ee(e,t,r[t]);if(k)for(var t of k(r))re.call(r,t)&&ee(e,t,r[t]);return e},E=(e,r)=>He(e,Ve(r));var I=(e,r)=>{var t={};for(var o in e)U.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(e!=null&&k)for(var o of k(e))r.indexOf(o)<0&&re.call(e,o)&&(t[o]=e[o]);return t};var Le=(e,r)=>{for(var t in r)L(e,t,{get:r[t],enumerable:!0})},te=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of Oe(r))!U.call(e,n)&&n!==t&&L(e,n,{get:()=>r[n],enumerable:!(o=we(r,n))||o.enumerable});return e};var A=(e,r,t)=>(t=e!=null?ye(Be(e)):{},te(r||!e||!e.__esModule?L(t,"default",{value:e,enumerable:!0}):t,e)),Ae=e=>te(L({},"__esModule",{value:!0}),e);var oe=(e,r,t)=>new Promise((o,n)=>{var c=i=>{try{g(t.next(i))}catch(m){n(m)}},l=i=>{try{g(t.throw(i))}catch(m){n(m)}},g=i=>i.done?o(i.value):Promise.resolve(i.value).then(c,l);g((t=t.apply(e,r)).next())});var Xe={};Le(Xe,{Form:()=>je,useForm:()=>T});module.exports=Ae(Xe);var ce=require("@mobilestockweb/button");var ne=require("@unform/web"),se=require("notistack"),M=require("react"),ie=require("zod"),ae=require("@mobilestockweb/container");var G=require("react/jsx-runtime"),le=(0,M.createContext)({});function T(){return(0,M.useContext)(le)}function ue(n){var c=n,{children:e,onSubmit:r,schema:t}=c,o=I(c,["children","onSubmit","schema"]);let l=(0,M.useRef)(null),[g,i]=(0,M.useState)(!1);function m(){var u;(u=l.current)==null||u.submitForm()}function R(){var u,f;(u=l.current)==null||u.setErrors({}),(f=l.current)==null||f.reset()}function x(u){let f={};for(let a of u){let d=a.path.filter(S=>typeof S=="string"||typeof S=="number").join(".");d&&(f[String(d)]=a.message)}return f}function D(u){if(u instanceof ie.ZodError)return x(u.issues);if(typeof u=="object"&&u!==null&&"errors"in u){let f=u.errors;if(Array.isArray(f)&&f.length>0&&"message"in f[0]&&"path"in f[0])return x(f)}return null}function Y(a,d){return oe(this,arguments,function*(u,{reset:f}){var S,z,w,v,V;if((S=l.current)==null||S.setErrors({}),t){let h=t.safeParse(u);if(!h.success){(z=l.current)==null||z.setErrors(x(h.error.issues));return}}try{i(!0),yield r({data:u,ref:l,reset:f})}catch(h){let O=D(h);if(O)(w=l.current)==null||w.setErrors(O);else{let y="Erro ao realizar opera\xE7\xE3o",N=500;if(typeof h=="object"&&h!==null&&"isAxiosError"in h&&h.isAxiosError){let p=h;N=((v=p.response)==null?void 0:v.status)||500;let s=(V=p.response)==null?void 0:V.data;s!=null&&s.message&&(y=s.message)}else h instanceof Error&&(y=h.message||y);(0,se.enqueueSnackbar)(y,{variant:N>=500?"error":"warning"})}}finally{i(!1)}})}return(0,G.jsx)(le.Provider,{value:{formRef:l,submitForm:m,clearForm:R,loading:g},children:(0,G.jsx)(ne.Form,E(F({},o),{ref:l,onSubmit:Y,children:(0,G.jsx)(ae.Container.Vertical,{gap:"2XS",children:e})}))})}var fe=require("react/jsx-runtime");function me(c){var l=c,{type:e="SUBMIT",disabled:r,isLoading:t,onClick:o}=l,n=I(l,["type","disabled","isLoading","onClick"]);let{submitForm:g,clearForm:i,loading:m}=T();function R(x){switch(x.preventDefault(),e){case"SUBMIT":g();break;case"RESET":i();break;default:o==null||o(x)}}return(0,fe.jsx)(ce.Button,E(F({},n),{onClick:R,isLoading:e==="SUBMIT"&&m||t,disabled:m||t||r,type:e.toLowerCase()}))}var de=require("@mobilestockweb/container");var be=require("react/jsx-runtime");function pe(t){var o=t,{children:e}=o,r=I(o,["children"]);return(0,be.jsx)(de.Container.Horizontal,E(F({gap:"SM"},r),{children:e}))}var ge=require("@unform/core"),b=require("react"),$=A(require("styled-components")),Fe=require("@mobilestockweb/button"),X=require("@mobilestockweb/container"),j=A(require("@mobilestockweb/tools")),W=require("@mobilestockweb/typography");var P=require("react/jsx-runtime"),Ee=(0,b.forwardRef)(function(Y,D){var u=Y,{name:r,label:t,defaultValue:o,type:n,autoSubmit:c,full:l,error:g,format:i,onChange:m,maxLength:R}=u,x=I(u,["name","label","defaultValue","type","autoSubmit","full","error","format","onChange","maxLength"]);let{loading:f}=T(),a=(0,ge.useField)(r),d=(0,b.useRef)(null),[S,z]=(0,b.useState)(!1),[w,v]=(0,b.useState)(""),V=n==="password",h=n==="tel"?15:n==="zipcode"?9:R,O=r+"-input"+(0,b.useId)();(0,b.useEffect)(()=>{let p=w||o||(a==null?void 0:a.defaultValue)||"";d.current.value=p,v(p),a.registerField({name:a.fieldName,ref:d,getValue:s=>{var B;return((B=s.current)==null?void 0:B.value)||""},setValue:(s,B)=>{s.current&&(s.current.value=B,v(B))},clearValue:s=>{s.current&&(s.current.value="",v(""))}})},[a==null?void 0:a.fieldName,a==null?void 0:a.registerField]),(0,b.useImperativeHandle)(D,()=>({focus(){var p;(p=d.current)==null||p.focus()},blur(){var p;(p=d.current)==null||p.blur()}}));let y=(0,b.useCallback)(p=>{let s=p.target.value;switch(n){case"tel":s=j.default.phoneNumberFormatter(s);break;case"email":case"url":s=s.trim();break;case"zipcode":s=j.default.formatZipcode(s);break}i&&(s=i(s)),v(s),p.target.value=s,d.current.value=s,m==null||m(p),n==="tel"&&c&&s.length===15&&d.current.form&&(d.current.form.requestSubmit(),d.current.blur()),n==="zipcode"&&c&&s.length===9&&d.current.form&&(d.current.form.requestSubmit(),d.current.blur())},[n,i,c,m,a]);function N(){return n==="password"?S?"text":"password":n}return(0,P.jsxs)($e,{full:l,$show:n!=="hidden",children:[t&&(0,P.jsx)(ze,{htmlFor:O,size:"SM",children:t}),(0,P.jsxs)(Ne,{align:"CENTER",padding:"XS_NONE",gap:"SM",$isError:!!(a!=null&&a.error),$isPassword:V,children:[(0,P.jsx)(ke,E(F({},x),{ref:d,id:O,value:w,onChange:y,maxLength:h,type:N(),disabled:f||x.disabled})),V&&(0,P.jsx)(Fe.Button,{size:"SM",onClick:()=>z(!S),icon:S?"EyeOutline":"EyeOff",variant:"TRANSPARENT",type:"button"})]}),(a==null?void 0:a.error)&&(0,P.jsx)(W.Typography,{color:"DANGER",size:"SM",children:a==null?void 0:a.error})]})}),$e=(0,$.default)(X.Container.Vertical)`
+"use strict";var It=Object.create;var j=Object.defineProperty,vt=Object.defineProperties,wt=Object.getOwnPropertyDescriptor,Bt=Object.getOwnPropertyDescriptors,Mt=Object.getOwnPropertyNames,ae=Object.getOwnPropertySymbols,Lt=Object.getPrototypeOf,ce=Object.prototype.hasOwnProperty,Fe=Object.prototype.propertyIsEnumerable;var he=(e,t,o)=>t in e?j(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,d=(e,t)=>{for(var o in t||(t={}))ce.call(t,o)&&he(e,o,t[o]);if(ae)for(var o of ae(t))Fe.call(t,o)&&he(e,o,t[o]);return e},f=(e,t)=>vt(e,Bt(t));var N=(e,t)=>{var o={};for(var r in e)ce.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&ae)for(var r of ae(e))t.indexOf(r)<0&&Fe.call(e,r)&&(o[r]=e[r]);return o};var _t=(e,t)=>{for(var o in t)j(e,o,{get:t[o],enumerable:!0})},Ve=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of Mt(t))!ce.call(e,i)&&i!==o&&j(e,i,{get:()=>t[i],enumerable:!(r=wt(t,i))||r.enumerable});return e};var h=(e,t,o)=>(o=e!=null?It(Lt(e)):{},Ve(t||!e||!e.__esModule?j(o,"default",{value:e,enumerable:!0}):o,e)),Ht=e=>Ve(j({},"__esModule",{value:!0}),e);var Oe=(e,t,o)=>new Promise((r,i)=>{var l=a=>{try{s(o.next(a))}catch(b){i(b)}},n=a=>{try{s(o.throw(a))}catch(b){i(b)}},s=a=>a.done?r(a.value):Promise.resolve(a.value).then(l,n);s((o=o.apply(e,t)).next())});var jt={};_t(jt,{Form:()=>Yt,useForm:()=>F});module.exports=Ht(jt);var _e=require("@mobilestockweb/button");var Ie=require("@unform/web"),ve=require("notistack"),H=require("react"),we=require("zod"),Be=require("@mobilestockweb/container");var le=require("react/jsx-runtime"),Me=(0,H.createContext)({});function F(){return(0,H.useContext)(Me)}function Le(i){var l=i,{children:e,onSubmit:t,schema:o}=l,r=N(l,["children","onSubmit","schema"]);let n=(0,H.useRef)(null),[s,a]=(0,H.useState)(!1);function b(){var m;(m=n.current)==null||m.submitForm()}function C(){var m,y;(m=n.current)==null||m.setErrors({}),(y=n.current)==null||y.reset()}function u(m){let y={};for(let p of m){let P=p.path.filter(w=>typeof w=="string"||typeof w=="number").join(".");P&&(y[String(P)]=p.message)}return y}function T(m){if(m instanceof we.ZodError)return u(m.issues);if(typeof m=="object"&&m!==null&&"errors"in m){let y=m.errors;if(Array.isArray(y)&&y.length>0&&"message"in y[0]&&"path"in y[0])return u(y)}return null}function v(p,P){return Oe(this,arguments,function*(m,{reset:y}){var w,ne,q,k,J;if((w=n.current)==null||w.setErrors({}),o){let x=o.safeParse(m);if(!x.success){(ne=n.current)==null||ne.setErrors(u(x.error.issues));return}}try{a(!0),yield t({data:m,ref:n,reset:y})}catch(x){let Q=T(x);if(Q)(q=n.current)==null||q.setErrors(Q);else{let X="Erro ao realizar opera\xE7\xE3o",ie=500;if(typeof x=="object"&&x!==null&&"isAxiosError"in x&&x.isAxiosError){let R=x;ie=((k=R.response)==null?void 0:k.status)||500;let c=(J=R.response)==null?void 0:J.data;c!=null&&c.message&&(X=c.message)}else x instanceof Error&&(X=x.message||X);(0,ve.enqueueSnackbar)(X,{variant:ie>=500?"error":"warning"})}}finally{a(!1)}})}return(0,le.jsx)(Me.Provider,{value:{formRef:n,submitForm:b,clearForm:C,loading:s},children:(0,le.jsx)(Ie.Form,f(d({},r),{ref:n,onSubmit:v,children:(0,le.jsx)(Be.Container.Vertical,{gap:"2XS",children:e})}))})}var ze=require("react/jsx-runtime");function He(l){var n=l,{type:e="SUBMIT",disabled:t,isLoading:o,onClick:r}=n,i=N(n,["type","disabled","isLoading","onClick"]);let{submitForm:s,clearForm:a,loading:b}=F();function C(u){switch(u.preventDefault(),e){case"SUBMIT":s();break;case"RESET":a();break;default:r==null||r(u)}}return(0,ze.jsx)(_e.Button,f(d({},i),{onClick:C,isLoading:e==="SUBMIT"&&b||o,disabled:b||o||t,type:e.toLowerCase()}))}var de=h(require("styled-components")),Ke=require("@mobilestockweb/badge"),We=require("@mobilestockweb/container"),Ze=h(require("@mobilestockweb/tools")),qe=require("@mobilestockweb/typography");var Ae=require("@unform/core"),V=require("react"),De=require("react/jsx-runtime"),$e=(0,V.createContext)(void 0);function ke(e){let{fieldName:t,registerField:o,error:r,defaultValue:i}=(0,Ae.useField)(e.name),[l,n]=(0,V.useState)(0),s=(0,V.useCallback)(u=>{let T=u;return e.maxCount!==void 0&&T>e.maxCount&&(T=e.maxCount),e.minCount!==void 0&&T<e.minCount&&(T=e.minCount),T},[e.maxCount,e.minCount]),a=(0,V.useCallback)(u=>{var v;let T=s(u);n(T),(v=e.onChange)==null||v.call(e,{value:T,event:"EDIT"})},[s]);(0,V.useEffect)(()=>{o({name:t,getValue:()=>l,setValue:(u,T)=>a(T),clearValue:()=>a(0)})},[t,l,o,a]),(0,V.useEffect)(()=>{a(Number(e.initialCount)||Number(i)||0)},[e.initialCount,a,i]);function b(u=1){n(T=>{var m;let v=s(T+1*u);return(m=e.onChange)==null||m.call(e,{value:v,event:"INCREMENT"}),v})}function C(u=1){n(T=>{var m;let v=s(T-1*u);return(m=e.onChange)==null||m.call(e,{value:v,event:"DECREMENT"}),v})}return(0,De.jsx)($e.Provider,{value:{count:l,increment:b,decrement:C,configureCount:a,multiplier:e.multiplier,maxCount:e.maxCount,minCount:e.minCount,editable:e.editable,label:e.label,labelPosition:e.labelPosition,buttonTransparent:e.buttonTransparent,groupElements:e.groupElements,error:r},children:e.children})}function O(){let e=(0,V.useContext)($e);if(!e)throw new Error("useCounter must be used within a CounterProvider");return e}var Ue=h(require("styled-components")),Ge=require("@mobilestockweb/container");var Xe=require("react/jsx-runtime");function D(e){return(0,Xe.jsx)(zt,d({align:"CENTER"},e))}var zt=(0,Ue.default)(Ge.Container.Vertical)`
+  min-width: 40px;
+  height: 34px;
+  user-select: none;
+`;var ee=require("react/jsx-runtime");function te(e){let{groupElements:t}=O();return(0,ee.jsx)(D,{children:t&&e.renderInsidePill?(0,ee.jsx)(At,{$type:e.type,full:!0,align:"CENTER",children:(0,ee.jsx)($t,{$type:e.type,children:e.text})}):(0,ee.jsx)(Ke.Badge,{text:e.text,type:e.type,size:"XS"})})}function Je(e,t){return Object.keys(t.colors.badge).find(o=>o.toLowerCase()===(e==null?void 0:e.toLowerCase()))||"default"}var At=(0,de.default)(We.Container.Vertical)`
+  background-color: ${({$type:e,theme:t})=>{let o=Je(e,t);return t.colors.badge[o]}};
+  width: 100%;
+`,$t=(0,de.default)(qe.Typography)`
+  color: ${({$type:e,theme:t})=>{let o=Je(e,t);return Ze.default.defineTextColor(t.colors.badge[o])}};
+`;te.displayName="Form.FormCounter.Badge";var M=require("react"),I=require("@mobilestockweb/container"),rt=h(require("@mobilestockweb/tools"));var oe=h(require("styled-components")),Qe=require("@mobilestockweb/container");var Ye=require("react/jsx-runtime");function K(o){var r=o,{children:e}=r,t=N(r,["children"]);let{groupElements:i,error:l}=O();return(0,Ye.jsx)(kt,f(d({align:"CENTER",$groupElements:i,$error:!!l},t),{children:e}))}var kt=(0,oe.default)(Qe.Container.Horizontal)`
+  border-radius: ${({theme:e})=>e.borderRadius.default};
+  overflow: hidden;
+  background-color: transparent;
+  border: none;
+  ${({$groupElements:e,theme:t})=>e&&oe.css`
+      background-color: ${t.colors.input.default};
+
+      border: 1px solid ${t.colors.input.border};
+    `}
+  ${({$error:e,theme:t})=>e&&oe.css`
+      background-color: ${t.colors.input.error};
+      border: 1px solid ${t.colors.alert.urgent};
+    `}
+`;var je=require("@mobilestockweb/typography"),et=require("react/jsx-runtime");function B({children:e}){return(0,et.jsx)(je.Typography,{color:"DANGER_600",size:"SM",weight:"MEDIUM",children:e})}var tt=require("@mobilestockweb/typography"),ot=require("react/jsx-runtime");function z({children:e}){return(0,ot.jsx)(tt.Typography,{weight:"REGULAR",children:e})}var E=require("react/jsx-runtime");function nt({children:e}){let{label:t,error:o,labelPosition:r}=O(),i=[],l=[],n=(0,M.useCallback)(a=>(0,M.isValidElement)(a)&&a.type===M.Fragment?n(a.props.children):a,[]),s=n(e);return M.Children.toArray(s).forEach(a=>{(0,M.isValidElement)(a)&&rt.default.isComponentWithDisplayName(a.type)&&a.type.displayName===te.displayName&&!a.props.renderInsidePill?i.push(a):l.push(a)}),(0,E.jsxs)(I.Container.Vertical,{align:"CENTER_START",children:[r==="TOP_START"&&t&&(0,E.jsxs)(I.Container.Horizontal,{padding:"NONE_NONE_2XS_NONE",gap:"2XS",children:[(0,E.jsx)(z,{children:t}),o&&!i.length&&(0,E.jsx)(B,{children:o})]}),r!=="LEFT"&&(0,E.jsxs)(I.Container.Vertical,{align:"CENTER",children:[(r!=="TOP_START"&&t||r!=="TOP_START"&&o&&!i.length)&&(0,E.jsxs)(I.Container.Vertical,{align:"CENTER",padding:"NONE_NONE_2XS_NONE",children:[t&&(0,E.jsx)(z,{children:t}),o&&!i.length&&(0,E.jsx)(B,{children:o})]}),(0,E.jsxs)(I.Container.Horizontal,{align:"CENTER_START",children:[i.length>0&&(0,E.jsx)(I.Container.Horizontal,{padding:"NONE_2XS_NONE_NONE",children:i}),(0,E.jsxs)(I.Container.Vertical,{children:[(0,E.jsx)(K,{children:l}),o&&!!i.length&&(0,E.jsx)(B,{children:o})]})]})]}),r==="LEFT"&&(0,E.jsx)(I.Container.Vertical,{children:(0,E.jsxs)(I.Container.Horizontal,{align:"CENTER",children:[(0,E.jsxs)(I.Container.Vertical,{padding:"NONE_2XS_NONE_NONE",children:[t&&(0,E.jsx)(z,{children:t}),o&&!i.length&&(0,E.jsx)(B,{children:o})]}),i.length>0&&(0,E.jsx)(I.Container.Horizontal,{padding:"NONE_2XS_NONE_NONE",children:i}),(0,E.jsx)(K,{children:l})]})})]})}var A=require("@mobilestockweb/container");var ue=require("react"),it=h(require("styled-components")),at=require("@mobilestockweb/button");var pe=require("react/jsx-runtime");function L(r){var i=r,{type:e,disabled:t}=i,o=N(i,["type","disabled"]);let{loading:l}=F(),n=O(),s=(0,ue.useRef)(null),a=(0,ue.useMemo)(()=>e==="PLUS"&&n.maxCount!==void 0?n.count>=n.maxCount:e==="MINUS"&&n.minCount!==void 0?n.count<=n.minCount:!1,[e,n.count,n.maxCount,n.minCount]);function b(){e==="PLUS"?n.increment():n.decrement()}function C(){s.current=setTimeout(()=>{"vibrate"in navigator&&navigator.vibrate(500),e==="PLUS"?n.increment(n.multiplier):n.decrement(n.multiplier)},500)}function u(){s.current&&(clearTimeout(s.current),s.current=null)}return(0,pe.jsx)(D,{children:(0,pe.jsx)(Dt,f(d({type:"button",icon:e==="PLUS"?"Plus":"Minus",backgroundColor:e==="PLUS"?"DEFAULT_DARK":"CANCEL_DARK"},o),{size:"SM",variant:n.buttonTransparent?"TRANSPARENT":"DEFAULT",$grouped:n.groupElements,disabled:a||t||l,onClick:b,onMouseDown:C,onMouseUp:u,onMouseLeave:u,onTouchStart:C,onTouchEnd:u}))})}var Dt=(0,it.default)(at.Button)`
+  border-radius: ${({$grouped:e,theme:t})=>e?t.borderRadius.none:t.borderRadius.default};
+`;var U=require("react"),lt=h(require("styled-components")),ut=require("@mobilestockweb/clickable"),fe=require("@mobilestockweb/container"),ge=require("@mobilestockweb/typography");var _=require("react/jsx-runtime");function W(){let{count:e,editable:t,configureCount:o}=O(),r=(0,U.useRef)(null),[i,l]=(0,U.useState)(!1),[n,s]=(0,U.useState)(e.toString());(0,U.useEffect)(()=>{s(e.toString())},[e]);function a(C){let u=Number(C.target.value);o(Number.isNaN(u)?0:u),l(!1)}function b(C){var u;C.key==="Enter"&&(C.preventDefault(),(u=r.current)==null||u.blur())}return t?(0,_.jsx)(ut.Clickable,{onClick:()=>l(!0),type:"button",children:(0,_.jsx)(fe.Container.Horizontal,{padding:"NONE_2XS",children:(0,_.jsx)(D,{children:i?(0,_.jsx)(Ut,{"data-testid":"counter-input",ref:r,value:n,autoFocus:!0,onKeyDown:b,type:"text",inputMode:"numeric",onChange:C=>s(C.target.value),onFocus:C=>C.target.select(),onBlur:a}):(0,_.jsx)(ge.Typography,{weight:"BOLD",size:"LG",children:e})})})}):(0,_.jsx)(fe.Container.Horizontal,{padding:"NONE_2XS",children:(0,_.jsx)(D,{children:(0,_.jsx)(ge.Typography,{weight:"BOLD",size:"LG",children:e})})})}var Ut=lt.default.input`
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+  border: none;
+  background-color: transparent;
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  appearance: textfield;
+  -moz-appearance: textfield;
+  font-weight: bold;
+  font-size: ${({theme:e})=>{var t,o;return((o=(t=e==null?void 0:e.font)==null?void 0:t.size)==null?void 0:o.lg)||16}}px;
+  text-align: center;
+  width: 40px;
+  height: 34px;
+`;W.displayName="Form.FormCounter.Display";var g=require("react/jsx-runtime");function st(){let{label:e,labelPosition:t,error:o}=O();return(0,g.jsxs)(A.Container.Vertical,{align:"CENTER_START",children:[t==="TOP_START"&&e&&(0,g.jsxs)(A.Container.Horizontal,{padding:"NONE_NONE_2XS_NONE",gap:"2XS",children:[(0,g.jsx)(z,{children:e}),o&&(0,g.jsx)(B,{children:o})]}),t!=="LEFT"&&(0,g.jsxs)(A.Container.Vertical,{align:"CENTER",children:[t!=="TOP_START"&&(e||o)&&(0,g.jsxs)(A.Container.Vertical,{align:"CENTER",padding:"NONE_NONE_2XS_NONE",children:[e&&(0,g.jsx)(z,{children:e}),o&&(0,g.jsx)(B,{children:o})]}),(0,g.jsxs)(K,{children:[(0,g.jsx)(L,{type:"MINUS"}),(0,g.jsx)(W,{}),(0,g.jsx)(L,{type:"PLUS"})]})]}),t==="LEFT"&&(0,g.jsx)(A.Container.Vertical,{children:(0,g.jsxs)(A.Container.Horizontal,{align:"CENTER",children:[(e||o)&&(0,g.jsxs)(A.Container.Vertical,{padding:"NONE_2XS_NONE_NONE",children:[e&&(0,g.jsx)(z,{children:e}),o&&(0,g.jsx)(B,{children:o})]}),(0,g.jsxs)(K,{children:[(0,g.jsx)(L,{type:"MINUS"}),(0,g.jsx)(W,{}),(0,g.jsx)(L,{type:"PLUS"})]})]})})]})}var se=require("react/jsx-runtime");function mt(o){var r=o,{children:e}=r,t=N(r,["children"]);return(0,se.jsx)(ke,f(d({buttonTransparent:!1,labelPosition:"TOP_START",multiplier:1},t),{children:e?(0,se.jsx)(nt,{children:e}):(0,se.jsx)(st,{})}))}var ct=require("react/jsx-runtime");function be(e){return(0,ct.jsx)(L,f(d({},e),{type:"MINUS"}))}be.displayName="Form.FormCounter.Minus";var dt=require("react/jsx-runtime");function Ce(e){return(0,dt.jsx)(L,f(d({},e),{type:"PLUS"}))}Ce.displayName="Form.FormCounter.Plus";var pt=Object.assign(mt,{Display:W,Plus:Ce,Minus:be,Badge:te});var ft=require("@mobilestockweb/container");var bt=require("react/jsx-runtime");function gt(o){var r=o,{children:e}=r,t=N(r,["children"]);return(0,bt.jsx)(ft.Container.Horizontal,f(d({gap:"SM"},t),{children:e}))}var Ct=require("@unform/core"),S=require("react"),re=h(require("styled-components")),Et=require("@mobilestockweb/button"),Te=require("@mobilestockweb/container"),Ee=h(require("@mobilestockweb/tools")),Ne=require("@mobilestockweb/typography");var $=require("react/jsx-runtime"),Tt=(0,S.forwardRef)(function(v,T){var m=v,{name:t,label:o,defaultValue:r,type:i,autoSubmit:l,full:n,error:s,format:a,onChange:b,maxLength:C}=m,u=N(m,["name","label","defaultValue","type","autoSubmit","full","error","format","onChange","maxLength"]);let{loading:y}=F(),p=(0,Ct.useField)(t),P=(0,S.useRef)(null),[w,ne]=(0,S.useState)(!1),[q,k]=(0,S.useState)(""),J=i==="password",x=i==="tel"?15:i==="zipcode"?9:C,Q=t+"-input"+(0,S.useId)();(0,S.useEffect)(()=>{let R=q||r||(p==null?void 0:p.defaultValue)||"";P.current.value=R,k(R),p.registerField({name:p.fieldName,ref:P,getValue:c=>{var Y;return((Y=c.current)==null?void 0:Y.value)||""},setValue:(c,Y)=>{c.current&&(c.current.value=Y,k(Y))},clearValue:c=>{c.current&&(c.current.value="",k(""))}})},[p==null?void 0:p.fieldName,p==null?void 0:p.registerField]),(0,S.useImperativeHandle)(T,()=>({focus(){var R;(R=P.current)==null||R.focus()},blur(){var R;(R=P.current)==null||R.blur()}}));let X=(0,S.useCallback)(R=>{let c=R.target.value;switch(i){case"tel":c=Ee.default.phoneNumberFormatter(c);break;case"email":case"url":c=c.trim();break;case"zipcode":c=Ee.default.formatZipcode(c);break}a&&(c=a(c)),k(c),R.target.value=c,P.current.value=c,b==null||b(R),i==="tel"&&l&&c.length===15&&P.current.form&&(P.current.form.requestSubmit(),P.current.blur()),i==="zipcode"&&l&&c.length===9&&P.current.form&&(P.current.form.requestSubmit(),P.current.blur())},[i,a,l,b,p]);function ie(){return i==="password"?w?"text":"password":i}return(0,$.jsxs)(Gt,{full:n,$show:i!=="hidden",children:[o&&(0,$.jsx)(Xt,{htmlFor:Q,size:"SM",children:o}),(0,$.jsxs)(Kt,{align:"CENTER",padding:"XS_NONE",gap:"SM",$isError:!!(p!=null&&p.error),$isPassword:J,children:[(0,$.jsx)(Wt,f(d({},u),{ref:P,id:Q,value:q,onChange:X,maxLength:x,type:ie(),disabled:y||u.disabled})),J&&(0,$.jsx)(Et.Button,{size:"SM",onClick:()=>ne(!w),icon:w?"EyeOutline":"EyeOff",variant:"TRANSPARENT",type:"button"})]}),(p==null?void 0:p.error)&&(0,$.jsx)(Ne.Typography,{color:"DANGER",size:"SM",children:p==null?void 0:p.error})]})}),Gt=(0,re.default)(Te.Container.Vertical)`
   display: ${({$show:e})=>e?"flex":"none"};
-`,ze=(0,$.default)(W.Typography).attrs({forwardedAs:"label"})``,Ne=(0,$.default)(X.Container.Horizontal)`
+`,Xt=(0,re.default)(Ne.Typography).attrs({forwardedAs:"label"})``,Kt=(0,re.default)(Te.Container.Horizontal)`
   padding: ${({$isPassword:e})=>e?"0 0 0 10px":"0 10px"};
-  background-color: ${({$isError:e,theme:r})=>e?r.colors.input.error:r.colors.input.default};
-  border: 1px solid ${({$isError:e,theme:r})=>e?r.colors.alert.urgent:r.colors.input.border};
+  background-color: ${({$isError:e,theme:t})=>e?t.colors.input.error:t.colors.input.default};
+  border: 1px solid ${({$isError:e,theme:t})=>e?t.colors.alert.urgent:t.colors.input.border};
   border-radius: ${({theme:e})=>e.borderRadius.default};
-`,ke=$.default.input`
+`,Wt=re.default.input`
   width: 100%;
   border: none;
   height: 2.5rem;
   outline: none;
   background-color: transparent;
-`;var he=require("@unform/core"),xe=require("react"),q=A(require("styled-components")),Z=require("@mobilestockweb/container"),J=require("@mobilestockweb/typography");var C=require("react/jsx-runtime");function Ie(e){let{loading:r}=T(),{error:t,fieldName:o,registerField:n}=(0,he.useField)(e.name),c=(0,xe.useRef)(null),l=`radio_${e.name}_${e.label}`;function g(){n({name:o,ref:c,getValue:i=>i.current.value,clearValue:i=>{i.current.checked=!1}})}return(0,C.jsxs)(Z.Container.Vertical,{onClick:g,gap:"XS",padding:"2XS_NONE",children:[(0,C.jsxs)(Z.Container.Horizontal,{align:"START_CENTER",gap:"XS",children:[(0,C.jsx)(Ge,E(F({id:l,ref:c},e),{type:"radio",disabled:r})),(0,C.jsx)(_e,{htmlFor:l,size:"MD",children:e.label})]}),t&&(0,C.jsx)(J.Typography,{color:"DANGER",size:"SM",children:t})]})}var Ge=q.default.input`
+`;var Nt=require("@unform/core"),yt=require("react"),Pe=h(require("styled-components")),ye=require("@mobilestockweb/container"),Re=require("@mobilestockweb/typography");var G=require("react/jsx-runtime");function Pt(e){let{loading:t}=F(),{error:o,fieldName:r,registerField:i}=(0,Nt.useField)(e.name),l=(0,yt.useRef)(null),n=`radio_${e.name}_${e.label}`;function s(){i({name:r,ref:l,getValue:a=>a.current.value,clearValue:a=>{a.current.checked=!1}})}return(0,G.jsxs)(ye.Container.Vertical,{onClick:s,gap:"XS",padding:"2XS_NONE",children:[(0,G.jsxs)(ye.Container.Horizontal,{align:"START_CENTER",gap:"XS",children:[(0,G.jsx)(Zt,f(d({id:n,ref:l},e),{type:"radio",disabled:t})),(0,G.jsx)(qt,{htmlFor:n,size:"MD",children:e.label})]}),o&&(0,G.jsx)(Re.Typography,{color:"DANGER",size:"SM",children:o})]})}var Zt=Pe.default.input`
   width: 1rem;
   height: 1rem;
-`,_e=(0,q.default)(J.Typography).attrs({forwardedAs:"label"})``;var Te=require("@unform/core"),_=require("react"),Se=A(require("react-select")),K=A(require("styled-components")),Re=require("@mobilestockweb/container"),Q=require("@mobilestockweb/typography");var H=require("react/jsx-runtime");function Me(e){let{loading:r}=T(),{fieldName:t,defaultValue:o,registerField:n,error:c}=(0,Te.useField)(e.name),l=(0,_.useRef)(null);return(0,_.useEffect)(()=>{n({name:t,ref:l.current,getValue:g=>{var m,R;let i=(m=g==null?void 0:g.state)==null?void 0:m.selectValue;return i?e!=null&&e.isMulti?i.map(x=>x.value):(R=i[0])==null?void 0:R.value:e!=null&&e.isMulti?[]:""}})},[t,n,e.isMulti]),(0,H.jsxs)(De,{$isWrong:!!c,children:[(e==null?void 0:e.label)&&(0,H.jsx)(Ue,{htmlFor:t,size:"MD",children:e.label}),(0,H.jsx)(Se.default,E(F({defaultValue:o},e),{className:"react-select",classNamePrefix:"react-select",ref:l,isDisabled:r||e.disabled})),c&&(0,H.jsx)(Q.Typography,{color:"DANGER",size:"SM",children:c})]})}var De=(0,K.default)(Re.Container.Vertical)`
+`,qt=(0,Pe.default)(Re.Typography).attrs({forwardedAs:"label"})``;var Rt=require("@unform/core"),me=require("react"),St=h(require("react-select")),Se=h(require("styled-components")),xt=require("@mobilestockweb/container"),xe=require("@mobilestockweb/typography");var Z=require("react/jsx-runtime");function ht(e){let{loading:t}=F(),{fieldName:o,defaultValue:r,registerField:i,error:l}=(0,Rt.useField)(e.name),n=(0,me.useRef)(null);return(0,me.useEffect)(()=>{i({name:o,ref:n.current,getValue:s=>{var b,C;let a=(b=s==null?void 0:s.state)==null?void 0:b.selectValue;return a?e!=null&&e.isMulti?a.map(u=>u.value):(C=a[0])==null?void 0:C.value:e!=null&&e.isMulti?[]:""}})},[o,i,e.isMulti]),(0,Z.jsxs)(Jt,{$isWrong:!!l,children:[(e==null?void 0:e.label)&&(0,Z.jsx)(Qt,{htmlFor:o,size:"MD",children:e.label}),(0,Z.jsx)(St.default,f(d({defaultValue:r},e),{className:"react-select",classNamePrefix:"react-select",ref:n,isDisabled:t||e.disabled})),l&&(0,Z.jsx)(xe.Typography,{color:"DANGER",size:"SM",children:l})]})}var Jt=(0,Se.default)(xt.Container.Vertical)`
   .react-select {
-    background-color: ${({$isWrong:e,theme:r})=>e?r.colors.input.error:r.colors.input.default};
-    border: 1px solid ${({$isWrong:e,theme:r})=>e?r.colors.alert.urgent:r.colors.input.border};
+    background-color: ${({$isWrong:e,theme:t})=>e?t.colors.input.error:t.colors.input.default};
+    border: 1px solid ${({$isWrong:e,theme:t})=>e?t.colors.alert.urgent:t.colors.input.border};
     border-radius: ${({theme:e})=>e.borderRadius.default};
     height: 2.7rem;
     width: 100%;
   }
   .react-select__control {
-    background-color: ${({$isWrong:e,theme:r})=>e?r.colors.input.error:r.colors.input.default};
+    background-color: ${({$isWrong:e,theme:t})=>e?t.colors.input.error:t.colors.input.default};
     border: none;
     height: 100%;
   }
@@ -39,4 +83,4 @@
     color: ${({theme:e})=>e.colors.text.contrast};
     background-color: ${({theme:e})=>e.colors.select.focused};
   }
-`,Ue=(0,K.default)(Q.Typography).attrs({forwardedAs:"label"})``;var Pe=require("@mobilestockweb/container");var Ce=require("react/jsx-runtime");function ve(t){var o=t,{children:e}=o,r=I(o,["children"]);return(0,Ce.jsx)(Pe.Container.Vertical,E(F({gap:"SM"},r),{children:e}))}var je=Object.assign(ue,{Input:Ee,Radio:Ie,Select:Me,Button:me,Vertical:ve,Horizontal:pe});0&&(module.exports={Form,useForm});
+`,Qt=(0,Se.default)(xe.Typography).attrs({forwardedAs:"label"})``;var Ft=require("@mobilestockweb/container");var Ot=require("react/jsx-runtime");function Vt(o){var r=o,{children:e}=r,t=N(r,["children"]);return(0,Ot.jsx)(Ft.Container.Vertical,f(d({gap:"SM"},t),{children:e}))}var Yt=Object.assign(Le,{Input:Tt,Radio:Pt,Select:ht,Button:He,Counter:pt,Vertical:Vt,Horizontal:gt});0&&(module.exports={Form,useForm});

package/package.json

@@ -1,17 +1,19 @@
 {
   "name": "@mobilestockweb/form",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "main": "index.js",
   "dependencies": {
     "notistack": "^3.0.1",
     "@unform/core": "^2.1.6",
     "@unform/web": "^2.1.6",
     "react-select": "5.10.1",
+    "@mobilestockweb/badge": "^0.0.5",
     "@mobilestockweb/button": "^1.0.8",
     "@mobilestockweb/snackbar": "^0.0.13",
     "@mobilestockweb/tools": "^0.0.16",
     "@mobilestockweb/typography": "^0.0.6",
-    "@mobilestockweb/data-table": "^1.0.0",
+    "@mobilestockweb/clickable": "^1.0.4",
+    "@mobilestockweb/data-table": "^1.0.1",
     "@mobilestockweb/container": "^0.1.0"
   },
   "devDependencies": {