@latte-macchiat-io/latte-vanilla-components 0.0.258 → 0.0.259

package/package.json

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

package/src/components/Form/export.tsx

@@ -1,5 +1,4 @@
-export { Form, type FormProps } from './Form';
-export { type FormVariants } from './Form.css';
+export { Form, type FormProps } from '.';
 
 export { Row, type RowProps } from '../Form/Row/Row';
 export { type RowVariants } from '../Form/Row/Row.css';

package/src/components/Form/index.tsx

@@ -0,0 +1,11 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { formRecipe } from './styles.css';
+
+export type FormProps = React.HTMLAttributes<HTMLDivElement> & {
+  children: React.ReactNode;
+};
+
+export const Form = forwardRef<HTMLFormElement, FormProps>(({ children, className, ...rest }) => {
+  return <form className={clsx(formRecipe(), className)}>{children}</form>;
+});

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

@@ -0,0 +1,27 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { themeContract } from '../../theme/contract.css';
+import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
+
+const formBase = style({
+  backgroundColor: themeContract.form.backgroundColor,
+
+  '@media': {
+    ...generateResponsiveMedia({
+      gap: themeContract.form.gap,
+      width: themeContract.form.width,
+      paddingTop: themeContract.form.paddingBottom,
+      paddingBottom: themeContract.form.paddingBottom,
+      paddingRight: themeContract.form.paddingRight,
+      paddingLeft: themeContract.form.paddingLeft,
+    }),
+  },
+});
+
+export const formRecipe = recipe(
+  {
+    base: formBase,
+  },
+  'form'
+);

package/src/components/Form/theme.tsx

@@ -0,0 +1,66 @@
+const themeFormBase = {
+  form: {
+    width: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+    gap: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+    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 themeFormLight = {
+  form: {
+    ...themeFormBase.form,
+    backgroundColor: '#000000',
+  },
+};
+
+export const themeFormDark = {
+  form: {
+    ...themeFormBase.form,
+    backgroundColor: '#000000',
+  },
+};

package/src/theme/baseThemeValues.ts

@@ -3,6 +3,7 @@ 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 { themeFormDark, themeFormLight } from '../components/Form/theme';
 import { themeHeaderDark, themeHeaderLight } from '../components/Header/theme';
 import { themeHeadingDark, themeHeadingLight } from '../components/Heading/theme';
 import { themeIconDark, themeIconLight } from '../components/Icon/theme';
@@ -139,6 +140,7 @@ export const baseLightTheme = {
   ...themeNavSocialLight,
 
   ...themeVideoLight,
+  ...themeFormLight,
 };
 
 export const baseDarkTheme = {
@@ -266,4 +268,6 @@ export const baseDarkTheme = {
   ...themeNavSocialDark,
 
   ...themeVideoDark,
+
+  ...themeFormDark,
 };

package/src/theme/contract.css.ts

@@ -854,4 +854,56 @@ export const themeContract = createGlobalThemeContract({
       },
     },
   },
+
+  form: {
+    backgroundColor: 'latte-form-backgroundColor',
+    width: {
+      mobile: 'latte-form-width-mobile',
+      sm: 'latte-form-width-sm',
+      md: 'latte-form-width-md',
+      lg: 'latte-form-width-lg',
+      xl: 'latte-form-width-xl',
+      '2xl': 'latte-form-width-2xl',
+    },
+    gap: {
+      mobile: 'latte-form-gap-mobile',
+      sm: 'latte-form-gap-sm',
+      md: 'latte-form-gap-md',
+      lg: 'latte-form-gap-lg',
+      xl: 'latte-form-gap-xl',
+      '2xl': 'latte-form-gap-2xl',
+    },
+    paddingTop: {
+      mobile: 'latte-form-paddingTop-mobile',
+      sm: 'latte-form-paddingTop-sm',
+      md: 'latte-form-paddingTop-md',
+      lg: 'latte-form-paddingTop-lg',
+      xl: 'latte-form-paddingTop-xl',
+      '2xl': 'latte-form-paddingTop-2xl',
+    },
+    paddingBottom: {
+      mobile: 'latte-form-paddingBottom-mobile',
+      sm: 'latte-form-paddingBottom-sm',
+      md: 'latte-form-paddingBottom-md',
+      lg: 'latte-form-paddingBottom-lg',
+      xl: 'latte-form-paddingBottom-xl',
+      '2xl': 'latte-form-paddingBottom-2xl',
+    },
+    paddingRight: {
+      mobile: 'latte-form-paddingRight-mobile',
+      sm: 'latte-form-paddingRight-sm',
+      md: 'latte-form-paddingRight-md',
+      lg: 'latte-form-paddingRight-lg',
+      xl: 'latte-form-paddingRight-xl',
+      '2xl': 'latte-form-paddingRight-2xl',
+    },
+    paddingLeft: {
+      mobile: 'latte-form-paddingLeft-mobile',
+      sm: 'latte-form-paddingLeft-sm',
+      md: 'latte-form-paddingLeft-md',
+      lg: 'latte-form-paddingLeft-lg',
+      xl: 'latte-form-paddingLeft-xl',
+      '2xl': 'latte-form-paddingLeft-2xl',
+    },
+  },
 });

package/src/theme/createTheme.ts

@@ -30,6 +30,7 @@ export type ThemeOverrides = {
   navSocial?: Partial<typeof baseLightTheme.navSocial>;
   video?: Partial<typeof baseLightTheme.video>;
   carousel?: Partial<typeof baseLightTheme.carousel>;
+  form?: Partial<typeof baseLightTheme.form>;
 };
 
 // Utility to create a theme with partial overrides over light theme base
@@ -61,6 +62,7 @@ const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
     navSocial: { ...baseLightTheme.navSocial, ...overrides.navSocial },
     video: { ...baseLightTheme.video, ...overrides.video },
     carousel: { ...baseLightTheme.carousel, ...overrides.carousel },
+    form: { ...baseLightTheme.form, ...overrides.carousel },
   });
 };
 
@@ -93,6 +95,7 @@ const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) =>
     navSocial: { ...baseDarkTheme.navSocial, ...overrides.navSocial },
     video: { ...baseDarkTheme.video, ...overrides.video },
     carousel: { ...baseDarkTheme.carousel, ...overrides.carousel },
+    form: { ...baseDarkTheme.form, ...overrides.carousel },
   });
 };
 

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

@@ -1,67 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme/contract.css';
-
-const formBase = style({
-  width: '100%',
-  backgroundColor: 'transparent',
-});
-
-export const formRecipe = recipe(
-  {
-    base: formBase,
-
-    variants: {
-      spacing: {
-        none: {
-          gap: 0,
-        },
-        sm: {
-          display: 'flex',
-          flexDirection: 'column',
-          gap: themeContract.space.sm,
-        },
-        md: {
-          display: 'flex',
-          flexDirection: 'column',
-          gap: themeContract.space.md,
-        },
-        lg: {
-          display: 'flex',
-          flexDirection: 'column',
-          gap: themeContract.space.lg,
-        },
-        xl: {
-          display: 'flex',
-          flexDirection: 'column',
-          gap: themeContract.space.xl,
-        },
-      },
-      layout: {
-        stacked: {
-          display: 'flex',
-          flexDirection: 'column',
-        },
-        inline: {
-          display: 'flex',
-          flexDirection: 'row',
-          flexWrap: 'wrap',
-          alignItems: 'flex-end',
-        },
-        grid: {
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
-          gap: themeContract.space.md,
-        },
-      },
-    },
-
-    defaultVariants: {
-      spacing: 'md',
-      layout: 'stacked',
-    },
-  },
-  'form'
-);
-
-export type FormVariants = RecipeVariants<typeof formRecipe>;

package/src/components/Form/Form.tsx

@@ -1,122 +0,0 @@
-import { clsx } from 'clsx';
-import { forwardRef } from 'react';
-import { formRecipe, type FormVariants } from './Form.css';
-import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
-
-export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'color'>, Sprinkles, NonNullable<FormVariants> {
-  children: React.ReactNode;
-}
-
-export const Form = forwardRef<HTMLFormElement, FormProps>(
-  (
-    {
-      children,
-      spacing,
-      layout,
-      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 (
-      <form
-        ref={ref}
-        className={clsx(
-          formRecipe({ spacing, layout }),
-          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}>
-        {children}
-      </form>
-    );
-  }
-);