@latte-macchiat-io/latte-vanilla-components 0.0.273 → 0.0.275

package/package.json

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

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

@@ -1,128 +1,16 @@
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
+
 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> {
-  label: string;
-  name: string;
-  required?: boolean;
-}
+export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> &
+  LabelVariants & {
+    name: string;
+    label: string;
+    required: boolean;
+  };
 
-export const Label = forwardRef<HTMLLabelElement, LabelProps>(
-  (
-    {
-      label,
-      name,
-      required = 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 (
-      <label
-        ref={ref}
-        htmlFor={name}
-        className={clsx(
-          labelRecipe({ 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-required={required}
-        {...htmlProps}>
-        {label}
-      </label>
-    );
-  }
+export const Label = ({ label, name, required, className }: LabelProps) => (
+  <label htmlFor={name} className={clsx(labelRecipe(), className)}>
+    {label} {required && '*'}
+  </label>
 );

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

@@ -1,61 +1,10 @@
-import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../../../theme/contract.css';
-
-const labelBase = style(
-  {
-    fontFamily: themeContract.fonts.body,
-    fontSize: themeContract.fontSizes.sm,
-    fontWeight: themeContract.fontWeights.medium,
-    color: themeContract.colors.text,
-    lineHeight: themeContract.lineHeights.tight,
-    width: '100%',
-    textAlign: 'left',
-    paddingBottom: themeContract.space.xs,
-
-    // selectors: {
-    //   '&[data-required="true"]': {
-    //     selectors: {
-    //       '&::after': {
-    //         content: ' *',
-    //         color: themeContract.colors.error,
-    //       },
-    //     },
-    //   },
-    // },
-  },
-  'text-field-label-base'
-);
 
 export const labelRecipe = recipe(
   {
-    base: labelBase,
-
-    variants: {
-      size: {
-        sm: {
-          fontSize: themeContract.fontSizes.xs,
-          paddingBottom: themeContract.space.xs,
-        },
-        md: {},
-        lg: {
-          fontSize: themeContract.fontSizes.md,
-          paddingBottom: themeContract.space.sm,
-        },
-      },
-      variant: {
-        default: {},
-        inline: {
-          display: 'inline-block',
-          marginRight: themeContract.space.sm,
-          paddingBottom: 0,
-        },
-      },
-    },
-
-    defaultVariants: {
-      size: 'md',
-      variant: 'default',
+    base: {
+      width: '100%',
+      textAlign: 'left',
     },
   },
   'text-field-label'

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

@@ -8,6 +8,6 @@ export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &
     hasError?: boolean;
   };
 
-export const Textarea = ({ name, size, variant, resize, className }: TextareaProps) => (
-  <textarea id={name} name={name} className={clsx(textareaRecipe({ size, variant, resize }), className)} />
+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

@@ -7,6 +7,8 @@ export const textareaRecipe = recipe(
   {
     base: {
       width: '100%',
+      maxWidth: '100%',
+      minWidth: '100%',
       appearance: 'none',
       transition: 'all 0.2s ease-in-out',