@s_mart/form 1.4.2

package/dist/index.d.ts

@@ -0,0 +1,244 @@
+import { PropsWithChildren } from 'react';
+import { UseFormProps, ControllerProps } from 'react-hook-form';
+import { TextFieldProps as TextFieldProps$1, SelectProps as SelectProps$1, AutocompleteProps, CheckboxProps as CheckboxProps$1, SwitchProps as SwitchProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SliderProps as SliderProps$1 } from '@mui/material';
+
+interface IFormProps<T> extends PropsWithChildren, UseFormProps {
+    onSubmit: (data: T) => void;
+}
+declare function Form({ children, onSubmit, ...rest }: IFormProps<any>): JSX.Element;
+
+declare type ControllerTextField = Omit<ControllerProps, 'render' | 'control'>;
+declare type Masks = 'cpf' | 'cnpj' | 'cpfCnpj' | 'cep' | 'telefone' | 'decimal' | 'porcentagem' | 'numero' | 'placa' | 'valor';
+declare type TextFieldProps = TextFieldProps$1 & ControllerTextField & {
+    mask?: Masks;
+};
+
+declare const TextField: ({ name, rules, defaultValue, shouldUnregister, label, required, mask, ...rest }: TextFieldProps) => JSX.Element;
+
+declare type ControllerSelect = Omit<ControllerProps, 'render' | 'control'>;
+declare type SelectOption = {
+    label: string;
+    value: string | number | readonly string[] | undefined;
+};
+declare type SelectProps = SelectProps$1 & ControllerSelect & {
+    options: SelectOption[];
+};
+
+declare const Select: ({ name, rules, defaultValue, shouldUnregister, label, required, options, ...rest }: SelectProps) => JSX.Element;
+
+declare type ControllerSearchable = Omit<ControllerProps, 'render' | 'control'>;
+declare type SearchableOption = {
+    label: string;
+    value: string | number | readonly string[] | undefined;
+} | string;
+declare type SearchableProps = Omit<AutocompleteProps<SearchableOption, true, true, true>, 'renderInput'> & ControllerSearchable & {
+    /**
+     * Opções do autocomplete
+     * @default []
+     *
+     * @example
+     * [
+     * { label: 'Opção 1', value: '1' },
+     * ]
+     *
+     * @type {SearchableOption[]}
+     * @memberof SearchableProps
+     */
+    options: SearchableOption[];
+    /**
+     * Props do textField que é renderizado dentro do autocomplete
+     * @default {}
+     * @type {TextFieldProps}
+     * @memberof SearchableProps
+     */
+    textFieldProps?: TextFieldProps$1;
+    label?: React.ReactNode;
+    required?: boolean;
+};
+
+declare const Searchable: ({ name, rules, defaultValue, shouldUnregister, label, required, options, textFieldProps, ...rest }: SearchableProps) => JSX.Element;
+
+declare type ControllerCreatable = Omit<ControllerProps, 'render' | 'control'>;
+declare type CreatableOption = {
+    label: string;
+    value?: string | number | readonly string[] | undefined;
+} | string;
+declare type CreatableProps = Omit<AutocompleteProps<CreatableOption, true, true, true>, 'renderInput'> & ControllerCreatable & {
+    /**
+     * Opções do autocomplete
+     * @default []
+     *
+     * @example
+     * [
+     * { label: 'Opção 1', value: '1' },
+     * ]
+     *
+     * @type {CreatableOption[]}
+     * @memberof CreatableProps
+     */
+    options: CreatableOption[];
+    /**
+     * Props do textField que é renderizado dentro do autocomplete
+     * @default {}
+     * @type {TextFieldProps}
+     * @memberof CreatableProps
+     */
+    textFieldProps?: TextFieldProps$1;
+    /**
+     * Label do autocomplete
+     * @default ''
+     * @type {string}
+     * @memberof CreatableProps
+     */
+    label?: React.ReactNode;
+    /**
+     * Adiciona um * ao label do autocomplete para indicar que o campo é obrigatório
+     * @default false
+     * @type {boolean}
+     * @memberof CreatableProps
+     */
+    required?: boolean;
+    /**
+     * Função que será executada quando o usuário clicar no botão de criar uma nova opção
+     * @default () => {}
+     * @type {(value: string) => void}
+     * @memberof CreatableProps
+     */
+    onCreateOption?: (value: string) => void;
+    /**
+     * Quando true, o botão de criar uma nova opção externo não será renderizado
+     * @default false
+     * @type {boolean}
+     * @memberof CreatableProps
+     */
+    hideAddButton?: boolean;
+};
+
+declare const Creatable: ({ name, rules, defaultValue, shouldUnregister, label, required, options, onCreateOption, textFieldProps, hideAddButton, ...rest }: CreatableProps) => JSX.Element;
+
+declare type ControllerCheckbox = Omit<ControllerProps, 'render' | 'control'>;
+declare type CheckboxProps = CheckboxProps$1 & ControllerCheckbox & {
+    /**
+     * O nome do checkbox que será renderizado na tela
+     * @default ''
+     * @example 'Nome do checkbox'
+     * @type string
+     * @memberof CheckboxProps
+     */
+    label?: string;
+    /**
+     * Posição do label em relação ao checkbox
+     * @default 'end'
+     * @type 'start' | 'end' | 'top' | 'bottom'
+     * @example
+     * <Checkbox label="Checkbox" labelPlacement="start" />
+     */
+    labelPlacement?: 'start' | 'end' | 'top' | 'bottom';
+};
+
+declare const Checkbox: ({ name, rules, defaultValue, shouldUnregister, label, labelPlacement, required, ...rest }: CheckboxProps) => JSX.Element;
+
+declare type ControllerSwitch = Omit<ControllerProps, 'render' | 'control'>;
+declare type SwitchProps = SwitchProps$1 & ControllerSwitch & {
+    /**
+     * O nome do switch que será renderizado na tela
+     * @default ''
+     * @example 'Nome do switch'
+     * @type string
+     * @memberof SwitchProps
+     */
+    label?: string;
+    /**
+     * Posição do label em relação ao switch
+     * @default 'end'
+     * @type 'start' | 'end' | 'top' | 'bottom'
+     * @example
+     * <Switch label="Switch" labelPlacement="start" />
+     */
+    labelPlacement?: 'start' | 'end' | 'top' | 'bottom';
+};
+
+declare const Switch: ({ name, rules, defaultValue, shouldUnregister, label, labelPlacement, required, ...rest }: SwitchProps) => JSX.Element;
+
+declare type RadioProps = RadioProps$1 & {
+    /**
+     * O nome do checkbox que será renderizado na tela
+     * @default ''
+     * @example 'Nome do checkbox'
+     * @type string
+     * @memberof RadioProps
+     */
+    label?: string;
+    /**
+     * Posição do label em relação ao checkbox
+     * @default 'end'
+     * @type 'start' | 'end' | 'top' | 'bottom'
+     * @example
+     * <Radio label="Radio" labelPlacement="start" />
+     */
+    labelPlacement?: 'start' | 'end' | 'top' | 'bottom';
+};
+
+declare const RadioButton: ({ label, labelPlacement, ...rest }: RadioProps) => JSX.Element;
+
+declare type ControllerRadioGroup = Omit<ControllerProps, 'render' | 'control'>;
+declare type RadioGroupProps = RadioGroupProps$1 & ControllerRadioGroup & {
+    /**
+     * O nome do checkbox que será renderizado na tela
+     * @default ''
+     * @example 'Nome do checkbox'
+     * @type string
+     * @memberof RadioGroupProps
+     */
+    label?: string;
+    /**
+     * Adiciona um asterisco ao label do radioGroup
+     * @default false
+     * @type boolean
+     * @memberof RadioGroupProps
+     */
+    required?: boolean;
+    /**
+     * Parte interna do componente para renderizar os RadiosButtons
+     * @default []
+     * @type ReactNode
+     * @memberof RadioGroupProps
+     * @example
+     * <Radio value="1" label="Radio 1" />
+     * <Radio value="2" label="Radio 2" />
+     */
+    children: React.ReactNode;
+    /**
+     * Define a orientação dos radios buttons dentro do radioGroup
+     * @default 'row'
+     * @type 'row' | 'column'
+     * @memberof RadioGroupProps
+     */
+    orientation?: 'row' | 'column';
+};
+
+declare const RadioGroup: ({ name, rules, defaultValue, shouldUnregister, label, required, children, orientation, ...rest }: RadioGroupProps) => JSX.Element;
+
+declare type ControllerSlider = Omit<ControllerProps, 'render' | 'control'>;
+declare type SliderProps = SliderProps$1 & ControllerSlider & {
+    /**
+     * O nome do switch que será renderizado na tela
+     * @default ''
+     * @example 'Nome do switch'
+     * @type string
+     * @memberof SliderProps
+     */
+    label?: string;
+    /**
+     * Posição do label em relação ao switch
+     * @default 'end'
+     * @type 'start' | 'end' | 'top' | 'bottom'
+     * @example
+     * <Slider label="Slider" labelPlacement="start" />
+     */
+    labelPlacement?: 'start' | 'end' | 'top' | 'bottom';
+};
+
+declare const Slider: ({ name, rules, defaultValue, shouldUnregister, label, labelPlacement, ...rest }: SliderProps) => JSX.Element;
+
+export { Checkbox, CheckboxProps, Creatable, CreatableOption, CreatableProps, Form, RadioButton, RadioGroup, RadioGroupProps, RadioProps, Searchable, SearchableOption, SearchableProps, Select, SelectOption, SelectProps, Slider, SliderProps, Switch, SwitchProps, TextField };

package/dist/index.js

@@ -0,0 +1,60 @@
+"use strict";var h2=Object.create;var E=Object.defineProperty;var x2=Object.getOwnPropertyDescriptor;var b2=Object.getOwnPropertyNames;var y2=Object.getPrototypeOf,F2=Object.prototype.hasOwnProperty;var w2=(C,i)=>{for(var e in i)E(C,e,{get:i[e],enumerable:!0})},j=(C,i,e,H)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of b2(i))!F2.call(C,o)&&o!==e&&E(C,o,{get:()=>i[o],enumerable:!(H=x2(i,o))||H.enumerable});return C};var C2=(C,i,e)=>(e=C!=null?h2(y2(C)):{},j(i||!C||!C.__esModule?E(e,"default",{value:C,enumerable:!0}):e,C)),P2=C=>j(E({},"__esModule",{value:!0}),C);var U2={};w2(U2,{Checkbox:()=>a2,Creatable:()=>c2,Form:()=>i2,RadioButton:()=>m2,RadioGroup:()=>u2,Searchable:()=>L2,Select:()=>V2,Slider:()=>g2,Switch:()=>p2,TextField:()=>l2});module.exports=P2(U2);var D=require("react-hook-form"),K=require("react/jsx-runtime");function k2({children:C,onSubmit:i,...e}){let H=(0,D.useForm)(e);return(0,K.jsx)(D.FormProvider,{...H,children:(0,K.jsx)("form",{onSubmit:H.handleSubmit(i),children:C})})}var i2=k2;var I=require("react-hook-form"),G=require("@mui/material");var Q=require("@mui/material"),e2=require("@s_mart/utils"),T=require("react/jsx-runtime"),t=({label:C,required:i})=>(0,T.jsxs)("span",{style:{display:"flex",gap:(0,e2.toRem)(2)},children:[(0,T.jsx)(Q.Typography,{variant:"caption",fontWeight:900,children:C}),i&&(0,T.jsx)(Q.Typography,{variant:"caption",fontWeight:900,color:"error",children:"*"})]});var o2=require("react-hook-form"),H2=require("@s_mart/core"),r2=require("react/jsx-runtime"),Z=({name:C})=>{var e,H,o;let i=(0,o2.useFormContext)();return(H=(e=i==null?void 0:i.formState)==null?void 0:e.errors)!=null&&H[C]?(0,r2.jsx)(H2.Indicator,{severity:"error",children:(o=i.formState.errors[C])==null?void 0:o.message}):null};var n2=C2(require("@s_mart/masks")),b=require("react/jsx-runtime"),v2=({name:C,rules:i,defaultValue:e,shouldUnregister:H,label:o,required:M,mask:r,...L})=>{let V=(0,I.useFormContext)();if(!V)throw new Error("Para usar o <TextField /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let l=n=>r?n2[r].format(n):n,c=n=>r?n2[r].parse(n):n,a=n=>{if(!n||r!=="porcentagem")return;n==null||n.stopPropagation();let d=(n==null?void 0:n.target).value;if(d){let x=String(d);if(x.length>0){let S=x.indexOf("%");S>-1&&(n.currentTarget.selectionEnd=S)}}};return(0,b.jsx)(I.Controller,{control:V.control,name:C,rules:i,defaultValue:e,shouldUnregister:H,render:({field:{value:n,onChange:d}})=>(0,b.jsxs)(G.Grid,{display:"flex",flexDirection:"column",children:[o&&(0,b.jsx)(t,{label:o,required:M}),(0,b.jsx)(G.TextField,{size:"small",variant:"outlined",autoComplete:"off",defaultValue:e,value:l(n||""),onChange:x=>d(c(x.target.value)),InputProps:{onKeyDown:a},...L}),(0,b.jsx)(Z,{name:C})]})})},l2=v2;var R=require("react-hook-form"),F=require("@mui/material");var m=require("react/jsx-runtime"),S2=({name:C,rules:i,defaultValue:e,shouldUnregister:H,label:o,required:M,options:r,...L})=>{let V=(0,R.useFormContext)();if(!V)throw new Error("Para usar o <Select /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,m.jsx)(R.Controller,{control:V.control,name:C,rules:i,defaultValue:e,shouldUnregister:H,render:({field:{value:l,onChange:c}})=>(0,m.jsxs)(F.Grid,{display:"flex",flexDirection:"column",children:[o&&(0,m.jsx)(t,{label:o,required:M}),(0,m.jsx)(F.Select,{size:"small",variant:"outlined",autoComplete:"off",value:l||"",onChange:c,...L,children:r==null?void 0:r.map((a,n)=>(0,m.jsx)(F.MenuItem,{value:a.value,children:a.label},n))}),(0,m.jsx)(Z,{name:C})]})})},V2=S2;var U=require("react-hook-form"),w=require("@mui/material");var u=require("react/jsx-runtime"),B2=({name:C,rules:i,defaultValue:e,shouldUnregister:H,label:o,required:M,options:r,textFieldProps:L,...V})=>{let l=(0,U.useFormContext)();if(!l)throw new Error("Para usar o <Searchable /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,u.jsx)(U.Controller,{control:l.control,name:C,rules:i,defaultValue:e,shouldUnregister:H,render:({field:{onChange:c}})=>(0,u.jsxs)(w.Grid,{display:"flex",flexDirection:"column",children:[o&&(0,u.jsx)(t,{label:o,required:M}),(0,u.jsx)(w.Autocomplete,{size:"small",onChange:(a,n)=>c(n),options:r,noOptionsText:"Nenhuma op\xE7\xE3o encontrada",...V,renderInput:a=>(0,u.jsx)(w.TextField,{...a,...L})}),(0,u.jsx)(Z,{name:C})]})})},L2=B2;var q=require("react-hook-form"),f=require("@mui/material"),Z2=require("@s_mart/core");var d2={description:"M35.8286 21.8493H26.1506V12.1714C26.1506 11.6338 25.613 11.0961 25.0753 11.0961H22.9247C22.3198 11.0961 21.8493 11.6338 21.8493 12.1714V21.8493H12.1714C11.5666 21.8493 11.0961 22.387 11.0961 22.9247V25.0753C11.0961 25.6802 11.5666 26.1506 12.1714 26.1506H21.8493V35.8286C21.8493 36.4334 22.3198 36.9039 22.9247 36.9039H25.0753C25.613 36.9039 26.1506 36.4334 26.1506 35.8286V26.1506H35.8286C36.3662 26.1506 36.9039 25.6802 36.9039 25.0753V22.9247C36.9039 22.387 36.3662 21.8493 35.8286 21.8493Z",viewBox:"0 0 48 48",id:"line-plus-solid"};var p=require("@s_mart/utils"),Y=C2(require("@emotion/styled")),J=require("@emotion/react"),t2=J.css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`,T2=C=>J.css`
+  .MuiAutocomplete-endAdornment {
+    position: relative;
+    right: 0;
+  }
+
+  .creatable {
+    ${t2}
+
+    .divider {
+      width: 1px;
+      height: ${(0,p.toRem)(20)};
+      background-color: ${C.palette.grey[400]};
+    }
+
+    .button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: ${C.palette.grey[600]};
+      border-radius: 50%;
+
+      margin: 0 ${(0,p.toRem)(6)};
+      width: ${(0,p.toRem)(28)};
+      height: ${(0,p.toRem)(28)};
+
+      &:hover {
+        cursor: pointer;
+        background-color: ${C.palette.grey[100]};
+        transition: background-color 0.2s ease-in-out;
+      }
+    }
+  }
+`,s2=Y.default.div`
+  display: flex;
+
+  div.endAdornments {
+    position: absolute;
+    right: 0;
+
+    ${t2}
+  }
+
+  ${({hideAddButton:C,theme:i})=>!C&&T2(i)}
+`,M2=Y.default.div`
+  color: ${({theme:C})=>C.palette.text.primary};
+
+  padding: ${(0,p.toRem)(6)} ${(0,p.toRem)(16)};
+  margin: ${(0,p.toRem)(-6)} ${(0,p.toRem)(-16)};
+
+  &:hover {
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+    background-color: ${({theme:C})=>C.palette.grey[100]};
+  }
+`;var s=require("react/jsx-runtime"),A2=({name:C,rules:i,defaultValue:e,shouldUnregister:H,label:o,required:M,options:r,onCreateOption:L,textFieldProps:V,hideAddButton:l,...c})=>{let a=(0,q.useFormContext)();if(!a)throw new Error("Para usar o <Creatable /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let n=d=>{L?L(d):console.error("onCreateOption n\xE3o foi definido")};return(0,s.jsx)(q.Controller,{control:a.control,name:C,rules:i,defaultValue:e,shouldUnregister:H,render:({field:{value:d,onChange:x}})=>{let S=(d==null?void 0:d.label)||(d==null?void 0:d.value)||d;return(0,s.jsxs)(f.Grid,{display:"flex",flexDirection:"column",children:[o&&(0,s.jsx)(t,{label:o,required:M}),(0,s.jsx)(s2,{hideAddButton:l,children:(0,s.jsx)(f.Autocomplete,{size:"small",fullWidth:!0,onChange:(B,_)=>x(_),options:r,noOptionsText:(0,s.jsx)(M2,{onClick:()=>n(d),children:(0,s.jsxs)(f.Typography,{children:["Adicionar ",S&&`"${S}"`]})}),...c,renderInput:B=>{let _=l?B.InputProps:{...B.InputProps,endAdornment:(0,s.jsxs)("div",{className:"endAdornments",children:[B.InputProps.endAdornment,(0,s.jsxs)("div",{className:"creatable",children:[(0,s.jsx)("div",{className:"divider"}),(0,s.jsx)("div",{className:"button",onClick:()=>n(d),children:(0,s.jsx)(Z2.LIcon,{icon:d2,size:"24"})})]})]})};return(0,s.jsx)(f.TextField,{...B,onChange:x,InputProps:_,...V})}})}),(0,s.jsx)(Z,{name:C})]})}})},c2=A2;var $=require("react-hook-form"),P=require("@mui/material");var g=require("react/jsx-runtime"),E2=({name:C,rules:i,defaultValue:e,shouldUnregister:H,label:o,labelPlacement:M,required:r,...L})=>{let V=(0,$.useFormContext)();if(!V)throw new Error("Para usar o <Checkbox /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,g.jsx)($.Controller,{control:V.control,name:C,rules:i,defaultValue:e,shouldUnregister:H,render:({field:{value:l,onChange:c}})=>(0,g.jsxs)(P.Grid,{display:"flex",flexDirection:"column",children:[(0,g.jsx)(P.FormControlLabel,{control:(0,g.jsx)(P.Checkbox,{value:l??"",defaultValue:l,onChange:c,...L}),label:(0,g.jsx)(t,{label:o,required:r}),labelPlacement:M||"end"}),(0,g.jsx)(Z,{name:C})]})})},a2=E2;var O=require("react-hook-form"),k=require("@mui/material");var h=require("react/jsx-runtime"),D2=({name:C,rules:i,defaultValue:e,shouldUnregister:H,label:o,labelPlacement:M,required:r,...L})=>{let V=(0,O.useFormContext)();if(!V)throw new Error("Para usar o <Switch /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,h.jsx)(O.Controller,{control:V.control,name:C,rules:i,defaultValue:e,shouldUnregister:H,render:({field:{value:l,onChange:c}})=>(0,h.jsxs)(k.Grid,{display:"flex",flexDirection:"column",children:[(0,h.jsx)(k.FormControlLabel,{control:(0,h.jsx)(k.Switch,{value:l??"",defaultValue:l,onChange:c,...L}),label:(0,h.jsx)(t,{label:o}),labelPlacement:M||"end"}),(0,h.jsx)(Z,{name:C})]})})},p2=D2;var v=require("@mui/material");var A=require("react/jsx-runtime"),I2=({label:C,labelPlacement:i,...e})=>(0,A.jsx)(v.Grid,{display:"flex",flexDirection:"column",children:(0,A.jsx)(v.FormControlLabel,{control:(0,A.jsx)(v.Radio,{...e}),label:(0,A.jsx)(t,{label:C}),labelPlacement:i||"end"})}),m2=I2;var N=require("react-hook-form"),W=require("@mui/material");var y=require("react/jsx-runtime"),G2=({name:C,rules:i,defaultValue:e,shouldUnregister:H,label:o,required:M,children:r,orientation:L="row",...V})=>{let l=(0,N.useFormContext)();if(!l)throw new Error("Para usar o <RadioGroup /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,y.jsx)(N.Controller,{control:l.control,name:C,rules:i,defaultValue:e,shouldUnregister:H,render:({field:{value:c,onChange:a}})=>(0,y.jsxs)(W.Grid,{display:"flex",flexDirection:"column",children:[o&&(0,y.jsx)(t,{label:o,required:M}),(0,y.jsx)(W.RadioGroup,{value:c||"",onChange:a,name:C,...V,style:{display:"flex",flexDirection:L},children:r}),(0,y.jsx)(Z,{name:C})]})})},u2=G2;var z=require("react-hook-form"),f2=require("@mui/material"),X=require("react/jsx-runtime"),R2=({name:C,rules:i,defaultValue:e,shouldUnregister:H,label:o,labelPlacement:M,...r})=>{let L=(0,z.useFormContext)();if(!L)throw new Error("Para usar o <Slider /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,X.jsx)(z.Controller,{control:L.control,name:C,rules:i,defaultValue:e,shouldUnregister:H,render:({field:{value:V,onChange:l}})=>(0,X.jsx)(f2.Slider,{value:V||(r==null?void 0:r.min)||0,onChange:l,valueLabelDisplay:"auto",...r})})},g2=R2;0&&(module.exports={Checkbox,Creatable,Form,RadioButton,RadioGroup,Searchable,Select,Slider,Switch,TextField});

package/dist/index.mjs

@@ -0,0 +1,60 @@
+import{FormProvider as q,useForm as $}from"react-hook-form";import{jsx as v}from"react/jsx-runtime";function O({children:C,onSubmit:i,...e}){let n=$(e);return v(q,{...n,children:v("form",{onSubmit:n.handleSubmit(i),children:C})})}var N=O;import{Controller as Y,useFormContext as J}from"react-hook-form";import{Grid as X,TextField as j}from"@mui/material";import{Typography as S}from"@mui/material";import{toRem as W}from"@s_mart/utils";import{jsx as B,jsxs as z}from"react/jsx-runtime";var t=({label:C,required:i})=>z("span",{style:{display:"flex",gap:W(2)},children:[B(S,{variant:"caption",fontWeight:900,children:C}),i&&B(S,{variant:"caption",fontWeight:900,color:"error",children:"*"})]});import{useFormContext as _}from"react-hook-form";import{Indicator as K}from"@s_mart/core";import{jsx as Q}from"react/jsx-runtime";var M=({name:C})=>{var e,n,r;let i=_();return(n=(e=i==null?void 0:i.formState)==null?void 0:e.errors)!=null&&n[C]?Q(K,{severity:"error",children:(r=i.formState.errors[C])==null?void 0:r.message}):null};import*as T from"@s_mart/masks";import{jsx as y,jsxs as e2}from"react/jsx-runtime";var C2=({name:C,rules:i,defaultValue:e,shouldUnregister:n,label:r,required:s,mask:o,...L})=>{let V=J();if(!V)throw new Error("Para usar o <TextField /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let l=H=>o?T[o].format(H):H,Z=H=>o?T[o].parse(H):H,c=H=>{if(!H||o!=="porcentagem")return;H==null||H.stopPropagation();let d=(H==null?void 0:H.target).value;if(d){let m=String(d);if(m.length>0){let u=m.indexOf("%");u>-1&&(H.currentTarget.selectionEnd=u)}}};return y(Y,{control:V.control,name:C,rules:i,defaultValue:e,shouldUnregister:n,render:({field:{value:H,onChange:d}})=>e2(X,{display:"flex",flexDirection:"column",children:[r&&y(t,{label:r,required:s}),y(j,{size:"small",variant:"outlined",autoComplete:"off",defaultValue:e,value:l(H||""),onChange:m=>d(Z(m.target.value)),InputProps:{onKeyDown:c},...L}),y(M,{name:C})]})})},i2=C2;import{Controller as o2,useFormContext as H2}from"react-hook-form";import{Grid as r2,Select as n2,MenuItem as l2}from"@mui/material";import{jsx as g,jsxs as d2}from"react/jsx-runtime";var V2=({name:C,rules:i,defaultValue:e,shouldUnregister:n,label:r,required:s,options:o,...L})=>{let V=H2();if(!V)throw new Error("Para usar o <Select /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return g(o2,{control:V.control,name:C,rules:i,defaultValue:e,shouldUnregister:n,render:({field:{value:l,onChange:Z}})=>d2(r2,{display:"flex",flexDirection:"column",children:[r&&g(t,{label:r,required:s}),g(n2,{size:"small",variant:"outlined",autoComplete:"off",value:l||"",onChange:Z,...L,children:o==null?void 0:o.map((c,H)=>g(l2,{value:c.value,children:c.label},H))}),g(M,{name:C})]})})},L2=V2;import{Controller as t2,useFormContext as s2}from"react-hook-form";import{Grid as M2,Autocomplete as Z2,TextField as c2}from"@mui/material";import{jsx as h,jsxs as m2}from"react/jsx-runtime";var a2=({name:C,rules:i,defaultValue:e,shouldUnregister:n,label:r,required:s,options:o,textFieldProps:L,...V})=>{let l=s2();if(!l)throw new Error("Para usar o <Searchable /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return h(t2,{control:l.control,name:C,rules:i,defaultValue:e,shouldUnregister:n,render:({field:{onChange:Z}})=>m2(M2,{display:"flex",flexDirection:"column",children:[r&&h(t,{label:r,required:s}),h(Z2,{size:"small",onChange:(c,H)=>Z(H),options:o,noOptionsText:"Nenhuma op\xE7\xE3o encontrada",...V,renderInput:c=>h(c2,{...c,...L})}),h(M,{name:C})]})})},p2=a2;import{Controller as f2,useFormContext as g2}from"react-hook-form";import{Grid as h2,Autocomplete as x2,TextField as b2,Typography as y2}from"@mui/material";import{LIcon as F2}from"@s_mart/core";var A={description:"M35.8286 21.8493H26.1506V12.1714C26.1506 11.6338 25.613 11.0961 25.0753 11.0961H22.9247C22.3198 11.0961 21.8493 11.6338 21.8493 12.1714V21.8493H12.1714C11.5666 21.8493 11.0961 22.387 11.0961 22.9247V25.0753C11.0961 25.6802 11.5666 26.1506 12.1714 26.1506H21.8493V35.8286C21.8493 36.4334 22.3198 36.9039 22.9247 36.9039H25.0753C25.613 36.9039 26.1506 36.4334 26.1506 35.8286V26.1506H35.8286C36.3662 26.1506 36.9039 25.6802 36.9039 25.0753V22.9247C36.9039 22.387 36.3662 21.8493 35.8286 21.8493Z",viewBox:"0 0 48 48",id:"line-plus-solid"};import{toRem as p}from"@s_mart/utils";import E from"@emotion/styled";import{css as D}from"@emotion/react";var I=D`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`,u2=C=>D`
+  .MuiAutocomplete-endAdornment {
+    position: relative;
+    right: 0;
+  }
+
+  .creatable {
+    ${I}
+
+    .divider {
+      width: 1px;
+      height: ${p(20)};
+      background-color: ${C.palette.grey[400]};
+    }
+
+    .button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: ${C.palette.grey[600]};
+      border-radius: 50%;
+
+      margin: 0 ${p(6)};
+      width: ${p(28)};
+      height: ${p(28)};
+
+      &:hover {
+        cursor: pointer;
+        background-color: ${C.palette.grey[100]};
+        transition: background-color 0.2s ease-in-out;
+      }
+    }
+  }
+`,G=E.div`
+  display: flex;
+
+  div.endAdornments {
+    position: absolute;
+    right: 0;
+
+    ${I}
+  }
+
+  ${({hideAddButton:C,theme:i})=>!C&&u2(i)}
+`,R=E.div`
+  color: ${({theme:C})=>C.palette.text.primary};
+
+  padding: ${p(6)} ${p(16)};
+  margin: ${p(-6)} ${p(-16)};
+
+  &:hover {
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+    background-color: ${({theme:C})=>C.palette.grey[100]};
+  }
+`;import{jsx as a,jsxs as F}from"react/jsx-runtime";var w2=({name:C,rules:i,defaultValue:e,shouldUnregister:n,label:r,required:s,options:o,onCreateOption:L,textFieldProps:V,hideAddButton:l,...Z})=>{let c=g2();if(!c)throw new Error("Para usar o <Creatable /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let H=d=>{L?L(d):console.error("onCreateOption n\xE3o foi definido")};return a(f2,{control:c.control,name:C,rules:i,defaultValue:e,shouldUnregister:n,render:({field:{value:d,onChange:m}})=>{let u=(d==null?void 0:d.label)||(d==null?void 0:d.value)||d;return F(h2,{display:"flex",flexDirection:"column",children:[r&&a(t,{label:r,required:s}),a(G,{hideAddButton:l,children:a(x2,{size:"small",fullWidth:!0,onChange:(f,k)=>m(k),options:o,noOptionsText:a(R,{onClick:()=>H(d),children:F(y2,{children:["Adicionar ",u&&`"${u}"`]})}),...Z,renderInput:f=>{let k=l?f.InputProps:{...f.InputProps,endAdornment:F("div",{className:"endAdornments",children:[f.InputProps.endAdornment,F("div",{className:"creatable",children:[a("div",{className:"divider"}),a("div",{className:"button",onClick:()=>H(d),children:a(F2,{icon:A,size:"24"})})]})]})};return a(b2,{...f,onChange:m,InputProps:k,...V})}})}),a(M,{name:C})]})}})},P2=w2;import{Controller as k2,useFormContext as v2}from"react-hook-form";import{Grid as S2,Checkbox as B2,FormControlLabel as T2}from"@mui/material";import{jsx as x,jsxs as D2}from"react/jsx-runtime";var A2=({name:C,rules:i,defaultValue:e,shouldUnregister:n,label:r,labelPlacement:s,required:o,...L})=>{let V=v2();if(!V)throw new Error("Para usar o <Checkbox /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return x(k2,{control:V.control,name:C,rules:i,defaultValue:e,shouldUnregister:n,render:({field:{value:l,onChange:Z}})=>D2(S2,{display:"flex",flexDirection:"column",children:[x(T2,{control:x(B2,{value:l??"",defaultValue:l,onChange:Z,...L}),label:x(t,{label:r,required:o}),labelPlacement:s||"end"}),x(M,{name:C})]})})},E2=A2;import{Controller as I2,useFormContext as G2}from"react-hook-form";import{Grid as R2,Switch as U2,FormControlLabel as q2}from"@mui/material";import{jsx as b,jsxs as N2}from"react/jsx-runtime";var $2=({name:C,rules:i,defaultValue:e,shouldUnregister:n,label:r,labelPlacement:s,required:o,...L})=>{let V=G2();if(!V)throw new Error("Para usar o <Switch /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return b(I2,{control:V.control,name:C,rules:i,defaultValue:e,shouldUnregister:n,render:({field:{value:l,onChange:Z}})=>N2(R2,{display:"flex",flexDirection:"column",children:[b(q2,{control:b(U2,{value:l??"",defaultValue:l,onChange:Z,...L}),label:b(t,{label:r}),labelPlacement:s||"end"}),b(M,{name:C})]})})},O2=$2;import{Grid as W2,Radio as z2,FormControlLabel as _2}from"@mui/material";import{jsx as w}from"react/jsx-runtime";var K2=({label:C,labelPlacement:i,...e})=>w(W2,{display:"flex",flexDirection:"column",children:w(_2,{control:w(z2,{...e}),label:w(t,{label:C}),labelPlacement:i||"end"})}),Q2=K2;import{Controller as Y2,useFormContext as J2}from"react-hook-form";import{Grid as X2,RadioGroup as j2}from"@mui/material";import{jsx as P,jsxs as e3}from"react/jsx-runtime";var C3=({name:C,rules:i,defaultValue:e,shouldUnregister:n,label:r,required:s,children:o,orientation:L="row",...V})=>{let l=J2();if(!l)throw new Error("Para usar o <RadioGroup /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return P(Y2,{control:l.control,name:C,rules:i,defaultValue:e,shouldUnregister:n,render:({field:{value:Z,onChange:c}})=>e3(X2,{display:"flex",flexDirection:"column",children:[r&&P(t,{label:r,required:s}),P(j2,{value:Z||"",onChange:c,name:C,...V,style:{display:"flex",flexDirection:L},children:o}),P(M,{name:C})]})})},i3=C3;import{Controller as o3,useFormContext as H3}from"react-hook-form";import{Slider as r3}from"@mui/material";import{jsx as U}from"react/jsx-runtime";var n3=({name:C,rules:i,defaultValue:e,shouldUnregister:n,label:r,labelPlacement:s,...o})=>{let L=H3();if(!L)throw new Error("Para usar o <Slider /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return U(o3,{control:L.control,name:C,rules:i,defaultValue:e,shouldUnregister:n,render:({field:{value:V,onChange:l}})=>U(r3,{value:V||(o==null?void 0:o.min)||0,onChange:l,valueLabelDisplay:"auto",...o})})},l3=n3;export{E2 as Checkbox,P2 as Creatable,N as Form,Q2 as RadioButton,i3 as RadioGroup,p2 as Searchable,L2 as Select,l3 as Slider,O2 as Switch,i2 as TextField};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@s_mart/form",
+  "version": "1.4.2",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "license": "MIT",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup src/index.tsx --minify --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
+    "lint": "TIMING=1 eslint src/**/*.ts* --fix",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  },
+  "dependencies": {
+    "tsup": "^6.2.3",
+    "typescript": "^4.5.3",
+    "@types/react": "18.0.18",
+    "@types/react-dom": "18.0.6",
+    "@s_mart/typed": "*",
+    "@s_mart/utils": "*",
+    "@s_mart/masks": "*"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "typescript": ">=4.5.3",
+    "react-hook-form": ">=7.36.1",
+    "@mui/material": ">=5.10.6",
+    "@types/react": ">=18.0.18",
+    "@types/react-dom": ">=18.0.6",
+    "@emotion/react": ">=11.10.4",
+    "@emotion/styled": ">=11.10.4",
+    "@s_mart/core": "*"
+  },
+  "devDependencies": {
+    "@s_mart/eslint-config": "*",
+    "@s_mart/tsconfig": "*",
+    "eslint": "^8.15.0"
+  }
+}