@latte-macchiat-io/latte-vanilla-components 0.0.267 → 0.0.269

package/package.json

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

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

@@ -0,0 +1,2 @@
+export { Row, type RowProps } from './';
+export { type RowVariants } from './styles.css';

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

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

package/src/components/Form/export.tsx

@@ -1,7 +1,6 @@
 export { Form, type FormProps } from '.';
 
-export { Row, type RowProps } from './Row';
-export { type RowVariants } from './Row/styles.css';
+export * from './Row/export';
 
 export { TextField, type TextFieldProps, type InputType } from '../Form/TextField/TextField';
 export { type TextFieldVariants } from '../Form/TextField/TextField.css';

package/src/components/Form/theme.tsx

@@ -1,3 +1,5 @@
+import { themeFormRowDark, themeFormRowLight } from './Row/theme';
+
 const themeFormBase = {
   form: {
     borderRadius: '30px',

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 { themeFormRowDark, themeFormRowLight } from '../components/Form/Row/theme';
 import { themeFormDark, themeFormLight } from '../components/Form/theme';
 import { themeHeaderDark, themeHeaderLight } from '../components/Header/theme';
 import { themeHeadingDark, themeHeadingLight } from '../components/Heading/theme';
@@ -141,6 +142,7 @@ export const baseLightTheme = {
 
   ...themeVideoLight,
   ...themeFormLight,
+  ...themeFormRowLight,
 };
 
 export const baseDarkTheme = {
@@ -270,4 +272,5 @@ export const baseDarkTheme = {
   ...themeVideoDark,
 
   ...themeFormDark,
+  ...themeFormRowDark,
 };

package/src/theme/contract.css.ts

@@ -906,15 +906,15 @@ 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',
-      },
+  },
+  formRow: {
+    gap: {
+      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',
     },
   },
 });

package/src/theme/createTheme.ts

@@ -31,6 +31,7 @@ export type ThemeOverrides = {
   video?: Partial<typeof baseLightTheme.video>;
   carousel?: Partial<typeof baseLightTheme.carousel>;
   form?: Partial<typeof baseLightTheme.form>;
+  formRow?: Partial<typeof baseLightTheme.formRow>;
 };
 
 // Utility to create a theme with partial overrides over light theme base
@@ -63,6 +64,7 @@ const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
     video: { ...baseLightTheme.video, ...overrides.video },
     carousel: { ...baseLightTheme.carousel, ...overrides.carousel },
     form: { ...baseLightTheme.form, ...overrides.form },
+    formRow: { ...baseLightTheme.formRow, ...overrides.formRow },
   });
 };
 
@@ -96,6 +98,7 @@ const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) =>
     video: { ...baseDarkTheme.video, ...overrides.video },
     carousel: { ...baseDarkTheme.carousel, ...overrides.carousel },
     form: { ...baseDarkTheme.form, ...overrides.form },
+    formRow: { ...baseDarkTheme.formRow, ...overrides.formRow },
   });
 };