@latte-macchiat-io/latte-vanilla-components 0.0.276 → 0.0.277

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.276",
+  "version": "0.0.277",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Form/TextField/Input/index.tsx

@@ -1,12 +1,11 @@
 import { clsx } from 'clsx';
-import { inputRecipe, type InputVariants } from './styles.css';
+import { inputRecipe } from './styles.css';
 
 import { InputType } from './types';
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement> &
-  InputVariants & {
-    type?: InputType;
-  };
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  type?: InputType;
+};
 
 export const Input = ({ name, type = 'text', value, required, placeholder, className }: InputProps) => (
   <input id={name} name={name} type={type} value={value} required={required} placeholder={placeholder} className={clsx(inputRecipe(), className)} />

package/src/components/Form/TextField/Textarea/index.tsx

@@ -1,13 +1,11 @@
 import { clsx } from 'clsx';
 
-import { textareaRecipe, type TextareaVariants } from './styles.css';
+import { textareaRecipe } from './styles.css';
 
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &
-  TextareaVariants & {
-    name: string;
-    hasError?: boolean;
-  };
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  name: string;
+};
 
-export const Textarea = ({ name, size, variant, resize, rows, className }: TextareaProps) => (
-  <textarea id={name} rows={rows} name={name} className={clsx(textareaRecipe({ size, variant, resize }), className)} />
+export const Textarea = ({ name, rows, className }: TextareaProps) => (
+  <textarea id={name} rows={rows} name={name} className={clsx(textareaRecipe(), className)} />
 );

package/src/components/Form/TextField/index.tsx

@@ -7,43 +7,46 @@ import { InputType } from './Input/types';
 import { errorMessage, messageContainer, textFieldRecipe } from './styles.css';
 import { Textarea } from './Textarea';
 
-export type TextFieldProps = React.HTMLAttributes<HTMLDivElement> & {
+type CommonProps = {
   name: string;
   label?: string;
-  value?: string;
-  rows?: number;
-  required?: boolean;
-  placeholder?: string;
   errors?: string | string[];
   type?: InputType | 'textarea';
-  onChange?: (e: { target: { value: string | undefined } }) => void | undefined;
 };
 
+export type TextFieldProps =
+  | (React.InputHTMLAttributes<HTMLInputElement> & CommonProps)
+  | (React.TextareaHTMLAttributes<HTMLTextAreaElement> & CommonProps);
+
 export const TextField = (props: TextFieldProps) => {
+  const { label, name, errors, type, className, ...rest } = props;
   const hasErrors = useMemo(() => {
-    if (!props.errors) return false;
-    if (Array.isArray(props.errors)) return props.errors.length > 0;
-    return Boolean(props.errors);
-  }, [props.errors]);
+    if (!errors) return false;
+    if (Array.isArray(errors)) return errors.length > 0;
+    return Boolean(errors);
+  }, [errors]);
 
-  const isTextarea = props.type === 'textarea';
+  const isTextarea = type === 'textarea';
 
   return (
-    <div className={clsx(textFieldRecipe(), props.className)}>
-      {props.label && <label htmlFor={props.name}>{props.label}</label>}
-
-      {isTextarea ? <Textarea {...props} /> : <Input {...props} />}
+    <div className={clsx(textFieldRecipe(), className)}>
+      {label && <label htmlFor={name}>{label}</label>}
 
+      {isTextarea ? (
+        <Textarea {...(rest as React.TextareaHTMLAttributes<HTMLTextAreaElement>)} name={name} />
+      ) : (
+        <Input {...(rest as React.InputHTMLAttributes<HTMLInputElement>)} name={name} type={type as InputType} />
+      )}
       {hasErrors && (
         <div className={messageContainer}>
-          {Array.isArray(props.errors) ? (
-            props.errors.map((error, index) => (
+          {Array.isArray(errors) ? (
+            errors.map((error, index) => (
               <span key={index} className={errorMessage}>
                 {error}
               </span>
             ))
           ) : (
-            <span className={errorMessage}>{props.errors}</span>
+            <span className={errorMessage}>{errors}</span>
           )}
         </div>
       )}