Merge branch 'release/1.18.0'

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@marceloglacial/brinca-ui",
-    "version": "1.17.0",
+    "version": "1.18.0",
     "author": "Marcelo Glacial",
     "type": "module",
     "repository": {

src/components/Form/Form.stories.tsx

@@ -146,3 +146,11 @@ export const Select = (props) => {
 export const Textarea = (props) => {
     return <Form.Textarea {...props} defaultValue={'Textarea'}></Form.Textarea>
 }
+
+export const Submit = (props) => {
+    return <Form.Input {...props} type='submit' defaultValue={'Sumit'} />
+}
+
+export const SubmitDisabled = (props) => {
+    return <Form.Input {...props} type='submit' defaultValue={'Sumit'} />
+}

src/components/Form/FormInput.tsx

@@ -6,14 +6,11 @@ export interface FormInputProps {
 }
 
 const FormInput: FC<FormInputProps & JSX.IntrinsicElements['input']> = (props): JSX.Element => {
-    const { full, type = 'text', ...inputProps } = props
+    const { full, type = 'text', disabled, ...inputProps } = props
     const fullClassName = full ? styles.inputFull : ''
-    return (
-        <input
-            {...inputProps}
-            type={type}
-            className={`${styles[type] || styles.text} ${fullClassName} `}
-        />
-    )
+    const allStyles = disabled
+        ? styles.disabled
+        : `${styles[type] || styles.text} ${fullClassName} `
+    return <input {...inputProps} type={type} className={allStyles} />
 }
 export default FormInput

src/components/Form/FormStyles.ts

@@ -18,6 +18,7 @@ const styles: stylesType = {
     select: `form__select appearance-none relative rounded-2xl border-2 border-green-600 py-4 pl-4 pr-10 bg-transparent z-10`,
     button: formButtonClass,
     submit: formButtonClass,
+    disabled: `form__button ${buttonClass.button} ${buttonClass.disabled} ${buttonClass.size.md}`,
     checkbox: `form__checkbox appearance-none  relative hover:cursor-pointer after:block after:w-6 after:h-6 after:checked:bg-green-600 after:rounded-lg after:border-2 after:border-green-600 focus:ring-green-500 focus:ring-2 before:absolute before:top-[4px] before:left-[3px] before:z-10 before:checked:block before:w-4 before:h-4 before:checked:bg-[url('https://res.cloudinary.com/brinca/image/upload/v1671588190/brinca-ui/checkbox-white_dqjam0.svg')] before:bg-no-repeat before:bg-cover`,
     radio: `form__radio appearance-none  relative hover:cursor-pointer after:block after:w-6 after:h-6 after:checked:bg-green-600 after:rounded-full after:border-2 after:border-green-600 focus:ring-green-500 focus:ring-2 before:absolute before:top-[7px] before:left-[7px] before:z-10 before:rounded-full before:checked:block before:w-[10px] before:h-[10px] before:bg-white`,
 }