@latte-macchiat-io/latte-vanilla-components 0.0.268 → 0.0.270

package/package.json

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

package/src/components/Actions/styles.css.ts

@@ -14,7 +14,7 @@ export const actionsRecipe = recipe(
         '@media': {
           ...generateResponsiveMedia({
             gap: themeContract.actions.gap,
-            paddingTop: themeContract.actions.paddingBottom,
+            paddingTop: themeContract.actions.paddingTop,
             paddingBottom: themeContract.actions.paddingBottom,
           }),
         },

package/src/components/Form/Row/styles.css.ts

@@ -12,7 +12,7 @@ export const rowRecipe = recipe(
 
       '@media': {
         ...generateResponsiveMedia({
-          gap: themeContract.form.row.gap,
+          gap: themeContract.formRow.gap,
         }),
       },
     },

package/src/components/Form/Row/theme.tsx

@@ -1,30 +1,24 @@
 const themeFormRowBase = {
-  form: {
-    row: {
-      gap: {
-        mobile: '15px',
-        sm: '15px',
-        md: '30px',
-        lg: '30px',
-        xl: '50px',
-        '2xl': '50px',
-      },
+  row: {
+    gap: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
     },
   },
 };
 
 export const themeFormRowLight = {
-  form: {
-    row: {
-      ...themeFormRowBase.form.row,
-    },
+  row: {
+    ...themeFormRowBase.row,
   },
 };
 
 export const themeFormRowDark = {
-  form: {
-    row: {
-      ...themeFormRowBase.form.row,
-    },
+  row: {
+    ...themeFormRowBase.row,
   },
 };

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

@@ -1,6 +1,3 @@
-// export { TextFieldInput } from '.';
-// export type { TextFieldInputProps } from '.';
-
-// export { Type as InputType } from './types';
-
-// export { styles as InputStyles } from './styles.css';
+export { Input, type InputProps } from './';
+export { type InputVariants } from './styles.css';
+export { type InputType as InputFieldType } from './types';

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

@@ -0,0 +1,13 @@
+import { clsx } from 'clsx';
+import { inputRecipe, type InputVariants } from './styles.css';
+
+import { InputType } from './types';
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> &
+  InputVariants & {
+    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/Input/{Input.css.ts → styles.css.ts}

@@ -1,19 +1,27 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { themeContract } from '../../../../theme/contract.css';
+import { generateResponsiveMedia } from '../../../../utils/generateResponsiveMedia';
 
 const inputBase = style({
+  width: '100%',
   appearance: 'none',
-  backgroundColor: themeContract.colors.background,
-  border: `1px solid ${themeContract.colors.border}`,
-  borderRadius: themeContract.radii.md,
-  color: themeContract.colors.text,
+  transition: 'all 0.2s ease-in-out',
+
   fontFamily: themeContract.fonts.body,
-  fontSize: themeContract.fontSizes.sm,
-  lineHeight: themeContract.lineHeights.normal,
+  color: themeContract.form.textField.color,
+  border: themeContract.form.textField.border,
+  borderRadius: themeContract.form.textField.borderRadius,
+  backgroundColor: themeContract.form.textField.backgroundColor,
+
   padding: `${themeContract.space.sm} ${themeContract.space.md}`,
-  transition: 'all 0.2s ease-in-out',
-  width: '100%',
+
+  '@media': {
+    ...generateResponsiveMedia({
+      paddingTop: themeContract.form.textField.paddingTop,
+      paddingBottom: themeContract.form.textField.paddingBottom,
+    }),
+  },
 
   // '::placeholder': {
   //   color: themeContract.colors.textSecondary,
@@ -56,52 +64,6 @@ const inputBase = style({
 export const inputRecipe = recipe(
   {
     base: inputBase,
-
-    variants: {
-      size: {
-        sm: {
-          fontSize: themeContract.fontSizes.xs,
-          padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
-        },
-        md: {},
-        lg: {
-          fontSize: themeContract.fontSizes.md,
-          padding: `${themeContract.space.md} ${themeContract.space.lg}`,
-        },
-      },
-      variant: {
-        default: {},
-        filled: {
-          backgroundColor: themeContract.colors.surface,
-          border: 'none',
-
-          // ':focus': {
-          //   backgroundColor: themeContract.colors.background,
-          //   border: `1px solid ${themeContract.colors.primary}`,
-          // },
-        },
-        outlined: {
-          backgroundColor: 'transparent',
-        },
-        underlined: {
-          backgroundColor: 'transparent',
-          border: 'none',
-          borderBottom: `1px solid ${themeContract.colors.border}`,
-          borderRadius: 0,
-          padding: `${themeContract.space.sm} 0`,
-
-          // ':focus': {
-          //   borderBottom: `2px solid ${themeContract.colors.primary}`,
-          //   outline: 'none',
-          // },
-        },
-      },
-    },
-
-    defaultVariants: {
-      size: 'md',
-      variant: 'default',
-    },
   },
   'input'
 );

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

@@ -0,0 +1,57 @@
+const themeFormTextFieldInputBase = {
+  form: {
+    textField: {
+      borderRadius: '30px',
+      paddingTop: {
+        mobile: '15px',
+        sm: '15px',
+        md: '30px',
+        lg: '30px',
+        xl: '50px',
+        '2xl': '50px',
+      },
+      paddingBottom: {
+        mobile: '15px',
+        sm: '15px',
+        md: '30px',
+        lg: '30px',
+        xl: '50px',
+        '2xl': '50px',
+      },
+      paddingRight: {
+        mobile: '15px',
+        sm: '15px',
+        md: '30px',
+        lg: '30px',
+        xl: '50px',
+        '2xl': '50px',
+      },
+      paddingLeft: {
+        mobile: '15px',
+        sm: '15px',
+        md: '30px',
+        lg: '30px',
+        xl: '50px',
+        '2xl': '50px',
+      },
+    },
+  },
+};
+
+export const themeFormTextFieldInputLight = {
+  form: {
+    textField: {
+      ...themeFormTextFieldInputBase.form,
+      backgroundColor: '#000000',
+    },
+  },
+};
+
+export const themeFormTextFieldInputDark = {
+  form: {
+    textField: {
+      ...themeFormTextFieldInputBase.form,
+      backgroundColor: '#000000',
+    },
+  },
+};

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

@@ -0,0 +1 @@
+export type InputType = 'text' | 'email' | 'search' | 'number' | 'hidden' | 'password' | 'tel' | 'url' | 'date' | 'time' | 'datetime-local' | 'color';

package/src/components/Form/TextField/Label/export.tsx

@@ -1,4 +1,2 @@
-// export { TextFieldLabel } from '.';
-// export type { TextFieldLabelProps } from '.';
-//
-// export { styles as TextFieldLabelStyles } from './styles.css';
+export { Label, type LabelProps } from './index';
+export { type LabelVariants } from './styles.css';

package/src/components/Form/TextField/Label/{Label.tsx → index.tsx}

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
-import { labelRecipe, type LabelVariants } from './Label.css';
+import { labelRecipe, type LabelVariants } from './styles.css';
 import { sprinkles, type Sprinkles } from '../../../../styles/sprinkles.css';
 
 export interface LabelProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'color'>, Sprinkles, NonNullable<LabelVariants> {

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

@@ -1,6 +1,2 @@
-// export { TextFieldTextarea } from '.';
-// export type { TextFieldTextareaProps } from '.';
-
-// export { Type as TextareaType } from './types';
-
-// export { styles as TextareaStyles } from './styles.css';
+export { Textarea, type TextareaProps } from './';
+export { type TextareaVariants } from './styles.css';

package/src/components/Form/TextField/Textarea/{Textarea.tsx → index.tsx}

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
-import { textareaRecipe, type TextareaVariants } from './Textarea.css';
+import { textareaRecipe, type TextareaVariants } from './styles.css';
 import { sprinkles, type Sprinkles } from '../../../../styles/sprinkles.css';
 
 export interface TextareaProps

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

@@ -1,4 +1,6 @@
-// export { TextField } from '.';
-// export type { TextFieldProps } from '.';
+export { TextField, type TextFieldProps, type InputType } from './';
+export { type TextFieldVariants } from './styles.css';
 
-// export { styles as TextFieldStyles } from './styles.css';
+export * from './Input/export';
+export * from './Label/export';
+export * from './Textarea/export';

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

@@ -0,0 +1,51 @@
+import { clsx } from 'clsx';
+import { useMemo } from 'react';
+import { Input } from './Input';
+import { InputType } from './Input/types';
+import { errorMessage, messageContainer, textFieldRecipe } from './styles.css';
+
+export type TextFieldProps = React.HTMLAttributes<HTMLDivElement> & {
+  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 const TextField = (props: TextFieldProps) => {
+  const hasErrors = useMemo(() => {
+    if (!props.errors) return false;
+    if (Array.isArray(props.errors)) return props.errors.length > 0;
+    return Boolean(props.errors);
+  }, [props.errors]);
+
+  const isTextarea = props.type === 'textarea';
+
+  return (
+    <div className={clsx(textFieldRecipe(), props.className)}>
+      {props.label && <label htmlFor={props.name}>{props.label}</label>}
+
+      {isTextarea ? <textarea /> : <Input {...props} />}
+
+      {hasErrors && (
+        <div className={messageContainer}>
+          {Array.isArray(props.errors) ? (
+            props.errors.map((error, index) => (
+              <span key={index} className={errorMessage}>
+                {error}
+              </span>
+            ))
+          ) : (
+            <span className={errorMessage}>{props.errors}</span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+TextField.displayName = 'TextField';

package/src/components/Form/TextField/styles.css.ts

@@ -0,0 +1,32 @@
+import { style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { themeContract } from '../../../theme/contract.css';
+
+const textFieldBase = style({
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const messageContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: themeContract.space.xs,
+});
+
+const errorMessage = style({
+  color: themeContract.colors.error,
+  fontSize: themeContract.fontSizes.xs,
+  lineHeight: themeContract.lineHeights.tight,
+  fontFamily: themeContract.fonts.body,
+});
+
+export const textFieldRecipe = recipe(
+  {
+    base: textFieldBase,
+  },
+  'text-field'
+);
+
+export { messageContainer, errorMessage };
+export type TextFieldVariants = RecipeVariants<typeof textFieldRecipe>;

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

@@ -0,0 +1,54 @@
+const themeFormTextFieldBase = {
+  textField: {
+    border: '1px solid red',
+    borderRadius: '30px',
+    paddingTop: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+    paddingBottom: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+    paddingRight: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+    paddingLeft: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+  },
+};
+
+export const themeFormTextFieldLight = {
+  textField: {
+    ...themeFormTextFieldBase.textField,
+    color: '#000000',
+    backgroundColor: '#000000',
+  },
+};
+
+export const themeFormTextFieldDark = {
+  textField: {
+    ...themeFormTextFieldBase.textField,
+    color: '#000000',
+    backgroundColor: '#000000',
+  },
+};

package/src/components/Form/export.tsx

@@ -1,16 +1,4 @@
 export { Form, type FormProps } from '.';
 
 export * from './Row/export';
-
-export { TextField, type TextFieldProps, type InputType } from '../Form/TextField/TextField';
-export { type TextFieldVariants } from '../Form/TextField/TextField.css';
-
-// Form TextField Subcomponents
-export { Label, type LabelProps } from '../Form/TextField/Label/Label';
-export { type LabelVariants } from '../Form/TextField/Label/Label.css';
-
-export { Input, type InputProps, type InputType as InputFieldType } from '../Form/TextField/Input/Input';
-export { type InputVariants } from '../Form/TextField/Input/Input.css';
-
-export { Textarea, type TextareaProps } from '../Form/TextField/Textarea/Textarea';
-export { type TextareaVariants } from '../Form/TextField/Textarea/Textarea.css';
+export * from './TextField/export';

package/src/components/Form/theme.tsx

@@ -1,5 +1,3 @@
-import { themeFormRowDark, themeFormRowLight } from './Row/theme';
-
 const themeFormBase = {
   form: {
     borderRadius: '30px',
@@ -57,7 +55,6 @@ const themeFormBase = {
 export const themeFormLight = {
   form: {
     ...themeFormBase.form,
-    ...themeFormRowLight.form,
     backgroundColor: '#000000',
   },
 };
@@ -65,7 +62,6 @@ export const themeFormLight = {
 export const themeFormDark = {
   form: {
     ...themeFormBase.form,
-    ...themeFormRowDark.form,
     backgroundColor: '#000000',
   },
 };

package/src/theme/baseThemeValues.ts

@@ -3,6 +3,8 @@ import { themeButtonDark, themeButtonLight } from '../components/Button/theme';
 import { themeCarouselDark, themeCarouselLight } from '../components/Carousel/theme';
 import { themeColumnsDark, themeColumnsLight } from '../components/Columns/theme';
 import { themeFooterDark, themeFooterLight } from '../components/Footer/theme';
+import { themeFormRowDark, themeFormRowLight } from '../components/Form/Row/theme';
+import { themeFormTextFieldDark, themeFormTextFieldLight } from '../components/Form/TextField/theme';
 import { themeFormDark, themeFormLight } from '../components/Form/theme';
 import { themeHeaderDark, themeHeaderLight } from '../components/Header/theme';
 import { themeHeadingDark, themeHeadingLight } from '../components/Heading/theme';
@@ -140,7 +142,12 @@ export const baseLightTheme = {
   ...themeNavSocialLight,
 
   ...themeVideoLight,
-  ...themeFormLight,
+
+  form: {
+    ...themeFormLight.form,
+    ...themeFormRowLight,
+    ...themeFormTextFieldLight,
+  },
 };
 
 export const baseDarkTheme = {
@@ -269,5 +276,9 @@ export const baseDarkTheme = {
 
   ...themeVideoDark,
 
-  ...themeFormDark,
+  form: {
+    ...themeFormDark.form,
+    ...themeFormRowDark,
+    ...themeFormTextFieldDark,
+  },
 };

package/src/theme/contract.css.ts

@@ -906,14 +906,54 @@ export const themeContract = createGlobalThemeContract({
       xl: 'latte-form-paddingLeft-xl',
       '2xl': 'latte-form-paddingLeft-2xl',
     },
+
     row: {
       gap: {
-        mobile: 'latte-form-row-gap-mobile',
-        sm: 'latte-form-row-gap-sm',
-        md: 'latte-form-row-gap-md',
-        lg: 'latte-form-row-gap-lg',
-        xl: 'latte-form-row-gap-xl',
-        '2xl': 'latte-form-row-gap-2xl',
+        mobile: 'latte-formRow-gap-mobile',
+        sm: 'latte-formRow-gap-sm',
+        md: 'latte-formRow-gap-md',
+        lg: 'latte-formRow-gap-lg',
+        xl: 'latte-formRow-gap-xl',
+        '2xl': 'latte-formRow-gap-2xl',
+      },
+    },
+
+    textField: {
+      color: 'latte-textField-color',
+      border: 'latte-textField-border',
+      borderRadius: 'latte-textField-borderRadius',
+      backgroundColor: 'latte-textField-backgroundColor',
+      paddingTop: {
+        mobile: 'latte-textField-input-paddingTop-mobile',
+        sm: 'latte-textField-input-paddingTop-sm',
+        md: 'latte-textField-input-paddingTop-md',
+        lg: 'latte-textField-input-paddingTop-lg',
+        xl: 'latte-textField-input-paddingTop-xl',
+        '2xl': 'latte-textField-input-paddingTop-2xl',
+      },
+      paddingBottom: {
+        mobile: 'latte-textField-input-paddingBottom-mobile',
+        sm: 'latte-textField-input-paddingBottom-sm',
+        md: 'latte-textField-input-paddingBottom-md',
+        lg: 'latte-textField-input-paddingBottom-lg',
+        xl: 'latte-textField-input-paddingBottom-xl',
+        '2xl': 'latte-textField-input-paddingBottom-2xl',
+      },
+      paddingRight: {
+        mobile: 'latte-textField-input-paddingRight-mobile',
+        sm: 'latte-textField-input-paddingRight-sm',
+        md: 'latte-textField-input-paddingRight-md',
+        lg: 'latte-textField-input-paddingRight-lg',
+        xl: 'latte-textField-input-paddingRight-xl',
+        '2xl': 'latte-textField-input-paddingRight-2xl',
+      },
+      paddingLeft: {
+        mobile: 'latte-textField-input-paddingLeft-mobile',
+        sm: 'latte-textField-input-paddingLeft-sm',
+        md: 'latte-textField-input-paddingLeft-md',
+        lg: 'latte-textField-input-paddingLeft-lg',
+        xl: 'latte-textField-input-paddingLeft-xl',
+        '2xl': 'latte-textField-input-paddingLeft-2xl',
       },
     },
   },

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

@@ -1,134 +0,0 @@
-import { clsx } from 'clsx';
-import { forwardRef } from 'react';
-import { inputRecipe, type InputVariants } from './Input.css';
-import { sprinkles, type Sprinkles } from '../../../../styles/sprinkles.css';
-
-export type InputType = 'text' | 'email' | 'search' | 'number' | 'hidden' | 'password' | 'tel' | 'url' | 'date' | 'time' | 'datetime-local' | 'color';
-
-export interface InputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'size' | 'height' | 'width'>,
-    Sprinkles,
-    NonNullable<InputVariants> {
-  name: string;
-  type?: InputType;
-  hasError?: boolean;
-}
-
-export const Input = forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      name,
-      type = 'text',
-      hasError = false,
-      size,
-      variant,
-      className,
-      // Extract sprinkles props
-      margin,
-      marginTop,
-      marginBottom,
-      marginLeft,
-      marginRight,
-      padding,
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight,
-      gap,
-      display,
-      flexDirection,
-      justifyContent,
-      flexWrap,
-      flex,
-      width,
-      height,
-      minWidth,
-      maxWidth,
-      minHeight,
-      position,
-      top,
-      bottom,
-      left,
-      right,
-      zIndex,
-      fontSize,
-      fontFamily,
-      lineHeight,
-      textAlign,
-      fontWeight,
-      color,
-      backgroundColor,
-      borderRadius,
-      borderWidth,
-      borderStyle,
-      borderColor,
-      boxShadow,
-      opacity,
-      overflow,
-      overflowX,
-      overflowY,
-      ...htmlProps
-    },
-    ref
-  ) => {
-    return (
-      <input
-        ref={ref}
-        id={name}
-        name={name}
-        type={type}
-        className={clsx(
-          inputRecipe({ size, variant }),
-          sprinkles({
-            margin,
-            marginTop,
-            marginBottom,
-            marginLeft,
-            marginRight,
-            padding,
-            paddingTop,
-            paddingBottom,
-            paddingLeft,
-            paddingRight,
-            gap,
-            display,
-            flexDirection,
-            justifyContent,
-            flexWrap,
-            flex,
-            width,
-            height,
-            minWidth,
-            maxWidth,
-            minHeight,
-            position,
-            top,
-            bottom,
-            left,
-            right,
-            zIndex,
-            fontSize,
-            fontFamily,
-            lineHeight,
-            textAlign,
-            fontWeight,
-            color,
-            backgroundColor,
-            borderRadius,
-            borderWidth,
-            borderStyle,
-            borderColor,
-            boxShadow,
-            opacity,
-            overflow,
-            overflowX,
-            overflowY,
-          }),
-          className
-        )}
-        data-error={hasError}
-        {...htmlProps}
-      />
-    );
-  }
-);

package/src/components/Form/TextField/TextField.css.ts

@@ -1,142 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../../theme/contract.css';
-
-const textFieldBase = style({
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
-  gap: themeContract.space.xs,
-});
-
-const labelBase = style({
-  fontFamily: themeContract.fonts.body,
-  fontSize: themeContract.fontSizes.sm,
-  fontWeight: themeContract.fontWeights.medium,
-  color: themeContract.colors.text,
-  lineHeight: themeContract.lineHeights.tight,
-
-  // selectors: {
-  //   '&[data-required="true"]': {
-  //     selectors: {
-  //       '&::after': {
-  //         content: ' *',
-  //         color: themeContract.colors.error,
-  //       },
-  //     },
-  //   },
-  // },
-});
-
-const inputBase = style({
-  appearance: 'none',
-  backgroundColor: themeContract.colors.background,
-  border: `1px solid ${themeContract.colors.border}`,
-  borderRadius: themeContract.radii.md,
-  color: themeContract.colors.text,
-  fontFamily: themeContract.fonts.body,
-  fontSize: themeContract.fontSizes.sm,
-  lineHeight: themeContract.lineHeights.normal,
-  padding: `${themeContract.space.sm} ${themeContract.space.md}`,
-  transition: 'all 0.2s ease-in-out',
-  width: '100%',
-
-  '::placeholder': {
-    color: themeContract.colors.textSecondary,
-  },
-
-  ':hover': {
-    borderColor: themeContract.colors.primary,
-  },
-
-  ':focus': {
-    outline: '2px solid',
-    outlineColor: themeContract.colors.primary,
-    outlineOffset: '2px',
-    borderColor: themeContract.colors.primary,
-  },
-
-  ':disabled': {
-    backgroundColor: themeContract.colors.surface,
-    color: themeContract.colors.textSecondary,
-    cursor: 'not-allowed',
-    opacity: '0.6',
-  },
-
-  // selectors: {
-  //   '&[data-error="true"]': {
-  //     borderColor: themeContract.colors.error,
-  //   },
-  //   '&[data-error="true"]:focus': {
-  //     outlineColor: themeContract.colors.error,
-  //     borderColor: themeContract.colors.error,
-  //   },
-  // },
-});
-
-const textareaBase = style([
-  inputBase,
-  {
-    resize: 'vertical',
-    minHeight: '80px',
-  },
-]);
-
-const messageContainer = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: themeContract.space.xs,
-});
-
-const errorMessage = style({
-  color: themeContract.colors.error,
-  fontSize: themeContract.fontSizes.xs,
-  lineHeight: themeContract.lineHeights.tight,
-  fontFamily: themeContract.fonts.body,
-});
-
-export const textFieldRecipe = recipe(
-  {
-    base: textFieldBase,
-
-    variants: {
-      size: {
-        sm: {
-          gap: themeContract.space.xs,
-
-          // selectors: {
-          //   [`& .${labelBase}`]: {
-          //     fontSize: themeContract.fontSizes.xs,
-          //   },
-          //   [`& .${inputBase}`]: {
-          //     fontSize: themeContract.fontSizes.xs,
-          //     padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
-          //   },
-          // },
-        },
-        md: {},
-        lg: {
-          gap: themeContract.space.sm,
-
-          // selectors: {
-          //   [`& .${labelBase}`]: {
-          //     fontSize: themeContract.fontSizes.md,
-          //   },
-          //   [`& .${inputBase}`]: {
-          //     fontSize: themeContract.fontSizes.md,
-          //     padding: `${themeContract.space.md} ${themeContract.space.lg}`,
-          //   },
-          // },
-        },
-      },
-    },
-
-    defaultVariants: {
-      size: 'md',
-    },
-  },
-  'text-field'
-);
-
-export { labelBase, inputBase, textareaBase, messageContainer, errorMessage };
-export type TextFieldVariants = RecipeVariants<typeof textFieldRecipe>;

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

@@ -1,197 +0,0 @@
-import { clsx } from 'clsx';
-import { forwardRef, useMemo } from 'react';
-import { errorMessage, inputBase, labelBase, messageContainer, textareaBase, textFieldRecipe, type TextFieldVariants } from './TextField.css';
-import { sprinkles, type Sprinkles } from '../../../styles/sprinkles.css';
-
-export type InputType = 'text' | 'email' | 'search' | 'number' | 'hidden' | 'password' | 'textarea';
-
-export interface TextFieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'onChange'>, Sprinkles, NonNullable<TextFieldVariants> {
-  name: string;
-  label?: string;
-  value?: string;
-  rows?: number;
-  disabled?: boolean;
-  required?: boolean;
-  placeholder?: string;
-  errors?: string | string[];
-  type?: InputType;
-  onChange?: (e: { target: { value: string | undefined } }) => void | undefined;
-}
-
-export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
-  (
-    {
-      name,
-      label,
-      value = '',
-      rows = 3,
-      disabled = false,
-      required = false,
-      placeholder = '',
-      errors,
-      type = 'text',
-      onChange,
-      size,
-      className,
-      // Extract sprinkles props
-      margin,
-      marginTop,
-      marginBottom,
-      marginLeft,
-      marginRight,
-      padding,
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight,
-      gap,
-      display,
-      flexDirection,
-      justifyContent,
-      flexWrap,
-      flex,
-      width,
-      height,
-      minWidth,
-      maxWidth,
-      minHeight,
-      position,
-      top,
-      bottom,
-      left,
-      right,
-      zIndex,
-      fontSize,
-      fontFamily,
-      lineHeight,
-      textAlign,
-      fontWeight,
-      color,
-      backgroundColor,
-      borderRadius,
-      borderWidth,
-      borderStyle,
-      borderColor,
-      boxShadow,
-      opacity,
-      overflow,
-      overflowX,
-      overflowY,
-      ...htmlProps
-    },
-    ref
-  ) => {
-    const hasErrors = useMemo(() => {
-      if (!errors) return false;
-      if (Array.isArray(errors)) return errors.length > 0;
-      return Boolean(errors);
-    }, [errors]);
-
-    const isTextarea = type === 'textarea';
-
-    return (
-      <div
-        ref={ref}
-        className={clsx(
-          textFieldRecipe({ size }),
-          sprinkles({
-            margin,
-            marginTop,
-            marginBottom,
-            marginLeft,
-            marginRight,
-            padding,
-            paddingTop,
-            paddingBottom,
-            paddingLeft,
-            paddingRight,
-            gap,
-            display,
-            flexDirection,
-            justifyContent,
-            flexWrap,
-            flex,
-            width,
-            height,
-            minWidth,
-            maxWidth,
-            minHeight,
-            position,
-            top,
-            bottom,
-            left,
-            right,
-            zIndex,
-            fontSize,
-            fontFamily,
-            lineHeight,
-            textAlign,
-            fontWeight,
-            color,
-            backgroundColor,
-            borderRadius,
-            borderWidth,
-            borderStyle,
-            borderColor,
-            boxShadow,
-            opacity,
-            overflow,
-            overflowX,
-            overflowY,
-          }),
-          className
-        )}
-        {...htmlProps}>
-        {label && (
-          <label htmlFor={name} className={labelBase} data-required={required}>
-            {label}
-          </label>
-        )}
-
-        {isTextarea ? (
-          <textarea
-            id={name}
-            name={name}
-            rows={rows}
-            value={value}
-            disabled={disabled}
-            placeholder={placeholder}
-            className={textareaBase}
-            onChange={onChange}
-            data-error={hasErrors}
-            required={required}
-          />
-        ) : (
-          <input
-            id={name}
-            name={name}
-            type={type}
-            value={value}
-            disabled={disabled}
-            placeholder={placeholder}
-            className={inputBase}
-            onChange={onChange}
-            data-error={hasErrors}
-            required={required}
-          />
-        )}
-
-        {hasErrors && (
-          <div className={messageContainer}>
-            {Array.isArray(errors) ? (
-              errors.map((error, index) => (
-                <span key={index} className={errorMessage}>
-                  {error}
-                </span>
-              ))
-            ) : (
-              <span className={errorMessage}>{errors}</span>
-            )}
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-
-TextField.displayName = 'TextField';