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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.266",
+  "version": "0.0.268",
   "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/index.tsx

@@ -0,0 +1,14 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+
+import { rowRecipe, type RowVariants } from './styles.css';
+
+export type RowProps = React.HTMLAttributes<HTMLDivElement> & RowVariants;
+
+export const Row = forwardRef<HTMLDivElement, RowProps>(({ children, align, className }, ref) => {
+  return (
+    <div ref={ref} className={clsx(rowRecipe({ align }), className)}>
+      {children}
+    </div>
+  );
+});

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

@@ -0,0 +1,44 @@
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { themeContract } from '../../../theme/contract.css';
+import { generateResponsiveMedia } from '../../../utils/generateResponsiveMedia';
+
+export const rowRecipe = recipe(
+  {
+    base: {
+      width: '100%',
+      display: 'flex',
+      flexDirection: 'row',
+
+      '@media': {
+        ...generateResponsiveMedia({
+          gap: themeContract.form.row.gap,
+        }),
+      },
+    },
+
+    variants: {
+      align: {
+        left: {
+          textAlign: 'left',
+          justifyContent: 'flex-start',
+        },
+        center: {
+          textAlign: 'center',
+          justifyContent: 'center',
+        },
+        right: {
+          textAlign: 'right',
+          justifyContent: 'flex-end',
+        },
+      },
+    },
+
+    defaultVariants: {
+      align: 'left',
+    },
+  },
+  'row'
+);
+
+export type RowVariants = RecipeVariants<typeof rowRecipe>;

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

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

package/src/components/Form/export.tsx

@@ -1,7 +1,6 @@
 export { Form, type FormProps } from '.';
 
-export { Row, type RowProps } from '../Form/Row/Row';
-export { type RowVariants } from '../Form/Row/Row.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',
@@ -55,6 +57,7 @@ const themeFormBase = {
 export const themeFormLight = {
   form: {
     ...themeFormBase.form,
+    ...themeFormRowLight.form,
     backgroundColor: '#000000',
   },
 };
@@ -62,6 +65,7 @@ export const themeFormLight = {
 export const themeFormDark = {
   form: {
     ...themeFormBase.form,
+    ...themeFormRowDark.form,
     backgroundColor: '#000000',
   },
 };

package/src/theme/contract.css.ts

@@ -906,5 +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',
+      },
+    },
   },
 });

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

@@ -1,73 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../../theme/contract.css';
-
-const rowBase = style({
-  display: 'flex',
-  width: '100%',
-});
-
-export const rowRecipe = recipe(
-  {
-    base: rowBase,
-
-    variants: {
-      align: {
-        left: {
-          justifyContent: 'flex-start',
-          textAlign: 'left',
-        },
-        center: {
-          justifyContent: 'center',
-          textAlign: 'center',
-        },
-        right: {
-          justifyContent: 'flex-end',
-          textAlign: 'right',
-        },
-      },
-      variant: {
-        default: {
-          flexDirection: 'column',
-          gap: themeContract.space.sm,
-        },
-        actions: {
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: themeContract.space.md,
-          marginTop: themeContract.space.lg,
-        },
-        message: {
-          flexDirection: 'column',
-          padding: themeContract.space.md,
-          backgroundColor: themeContract.colors.surface,
-          borderRadius: themeContract.radii.md,
-          border: `1px solid ${themeContract.colors.border}`,
-        },
-      },
-      spacing: {
-        none: {
-          gap: 0,
-        },
-        sm: {
-          gap: themeContract.space.sm,
-        },
-        md: {
-          gap: themeContract.space.md,
-        },
-        lg: {
-          gap: themeContract.space.lg,
-        },
-      },
-    },
-
-    defaultVariants: {
-      align: 'left',
-      variant: 'default',
-      spacing: 'sm',
-    },
-  },
-  'row'
-);
-
-export type RowVariants = RecipeVariants<typeof rowRecipe>;

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

@@ -1,132 +0,0 @@
-import { clsx } from 'clsx';
-import { forwardRef } from 'react';
-import { rowRecipe, type RowVariants } from './Row.css';
-import { sprinkles, type Sprinkles } from '../../../styles/sprinkles.css';
-
-export interface RowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<RowVariants> {
-  children: React.ReactNode;
-  isActions?: boolean;
-  isMessage?: boolean;
-}
-
-export const Row = forwardRef<HTMLDivElement, RowProps>(
-  (
-    {
-      children,
-      align,
-      variant,
-      spacing,
-      isActions = false,
-      isMessage = false,
-      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
-  ) => {
-    // Determine the variant based on the props
-    let computedVariant = variant;
-    if (isActions) computedVariant = 'actions';
-    if (isMessage) computedVariant = 'message';
-
-    return (
-      <div
-        ref={ref}
-        className={clsx(
-          rowRecipe({ align, variant: computedVariant, spacing }),
-          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}
-      </div>
-    );
-  }
-);