@latte-macchiat-io/latte-vanilla-components 0.0.272 → 0.0.274

package/package.json

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

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

@@ -1,71 +1,36 @@
-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',
-  transition: 'all 0.2s ease-in-out',
-
-  fontFamily: themeContract.fonts.body,
-  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}`,
-
-  '@media': {
-    ...generateResponsiveMedia({
-      paddingTop: themeContract.form.textField.paddingTop,
-      paddingLeft: themeContract.form.textField.paddingLeft,
-      paddingRight: themeContract.form.textField.paddingRight,
-      paddingBottom: themeContract.form.textField.paddingBottom,
-    }),
-  },
-
-  '::placeholder': {
-    color: themeContract.form.textField.placeholderColor,
-  },
-
-  // ':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,
-  //   },
-  //   // WebKit autofill styles
-  //   '&:-webkit-autofill': {
-  //     WebkitTextFillColor: themeContract.colors.text,
-  //     WebkitBoxShadow: `0 0 0px 1000px ${themeContract.colors.background} inset`,
-  //   },
-  // },
-});
-
 export const inputRecipe = recipe(
   {
-    base: inputBase,
+    base: {
+      width: '100%',
+      appearance: 'none',
+      transition: 'all 0.2s ease-in-out',
+
+      fontFamily: themeContract.fonts.body,
+      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}`,
+
+      '@media': {
+        ...generateResponsiveMedia({
+          paddingTop: themeContract.form.textField.paddingTop,
+          paddingLeft: themeContract.form.textField.paddingLeft,
+          paddingRight: themeContract.form.textField.paddingRight,
+          paddingBottom: themeContract.form.textField.paddingBottom,
+        }),
+      },
+
+      '::placeholder': {
+        color: themeContract.form.textField.placeholderColor,
+      },
+    },
   },
   'input'
 );

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

@@ -1,130 +1,13 @@
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
+
 import { textareaRecipe, type TextareaVariants } from './styles.css';
-import { sprinkles, type Sprinkles } from '../../../../styles/sprinkles.css';
 
-export interface TextareaProps
-  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'color' | 'size'>,
-    Sprinkles,
-    NonNullable<TextareaVariants> {
-  name: string;
-  hasError?: boolean;
-}
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &
+  TextareaVariants & {
+    name: string;
+    hasError?: boolean;
+  };
 
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  (
-    {
-      name,
-      hasError = false,
-      size,
-      variant,
-      resize,
-      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 (
-      <textarea
-        ref={ref}
-        id={name}
-        name={name}
-        className={clsx(
-          textareaRecipe({ size, variant, resize }),
-          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}
-      />
-    );
-  }
+export const Textarea = ({ name, size, variant, resize, rows, className }: TextareaProps) => (
+  <textarea id={name} rows={rows} name={name} className={clsx(textareaRecipe({ size, variant, resize }), className)} />
 );

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

@@ -1,125 +1,36 @@
-import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../../../theme/contract.css';
-
-const textareaBase = 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%',
-    resize: 'vertical',
-    minHeight: '80px',
-
-    '::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',
-      resize: 'none',
-    },
 
-    selectors: {
-      '&[data-error="true"]': {
-        borderColor: themeContract.colors.error,
-      },
-      '&[data-error="true"]:focus': {
-        outlineColor: themeContract.colors.error,
-        borderColor: themeContract.colors.error,
-      },
-    },
-  },
-  'text-area-base'
-);
+import { themeContract } from '../../../../theme/contract.css';
+import { generateResponsiveMedia } from '../../../../utils/generateResponsiveMedia';
 
 export const textareaRecipe = recipe(
   {
-    base: textareaBase,
-
-    variants: {
-      size: {
-        sm: {
-          fontSize: themeContract.fontSizes.xs,
-          padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
-          minHeight: '60px',
-        },
-        md: {},
-        lg: {
-          fontSize: themeContract.fontSizes.md,
-          padding: `${themeContract.space.md} ${themeContract.space.lg}`,
-          minHeight: '100px',
-        },
+    base: {
+      width: '100%',
+      appearance: 'none',
+      transition: 'all 0.2s ease-in-out',
+
+      fontFamily: themeContract.fonts.body,
+      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}`,
+
+      '@media': {
+        ...generateResponsiveMedia({
+          paddingTop: themeContract.form.textField.paddingTop,
+          paddingLeft: themeContract.form.textField.paddingLeft,
+          paddingRight: themeContract.form.textField.paddingRight,
+          paddingBottom: themeContract.form.textField.paddingBottom,
+        }),
       },
-      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',
-          },
-        },
-      },
-      resize: {
-        vertical: {
-          resize: 'vertical',
-        },
-        horizontal: {
-          resize: 'horizontal',
-        },
-        both: {
-          resize: 'both',
-        },
-        none: {
-          resize: 'none',
-        },
+      '::placeholder': {
+        color: themeContract.form.textField.placeholderColor,
       },
     },
-
-    defaultVariants: {
-      size: 'md',
-      variant: 'default',
-      resize: 'vertical',
-    },
   },
   'text-area'
 );

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

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { Input } from './Input';
 import { InputType } from './Input/types';
 import { errorMessage, messageContainer, textFieldRecipe } from './styles.css';
+import { Textarea } from './Textarea';
 
 export type TextFieldProps = React.HTMLAttributes<HTMLDivElement> & {
   name: string;
@@ -29,7 +30,7 @@ export const TextField = (props: TextFieldProps) => {
     <div className={clsx(textFieldRecipe(), props.className)}>
       {props.label && <label htmlFor={props.name}>{props.label}</label>}
 
-      {isTextarea ? <textarea /> : <Input {...props} />}
+      {isTextarea ? <Textarea {...props} /> : <Input {...props} />}
 
       {hasErrors && (
         <div className={messageContainer}>

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

@@ -1,57 +0,0 @@
-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',
-    },
-  },
-};