@latte-macchiat-io/latte-vanilla-components 0.0.522 → 0.0.523

package/package.json

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

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

@@ -1,19 +1,20 @@
 import { useMemo } from 'react';
 
-import { errorMessage, messageContainer, selectLabel, selectRecipe, selectWrapper, selectWrapperSelect } from './styles.css';
+import { errorMessage, messageContainer, selectLabel, selectRecipe, SelectVariants, selectWrapper, selectWrapperSelect } from './styles.css';
 
 import { cn } from '../../../utils/styleOverride';
 
-export type SelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
-  name: string;
-  label?: string;
-  icon?: React.ReactNode;
-  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
-  errors?: string | string[];
-  options: { disabled: boolean; value: string; label: string }[];
-};
+export type SelectProps = React.SelectHTMLAttributes<HTMLSelectElement> &
+  SelectVariants & {
+    name: string;
+    label?: string;
+    icon?: React.ReactNode;
+    onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    errors?: string | string[];
+    options: { disabled: boolean; value: string; label: string }[];
+  };
 
-export const Select = ({ options, className, errors, label, name, required, onChange, icon }: SelectProps) => {
+export const Select = ({ options, className, errors, label, labelPosition, name, required, onChange, icon }: SelectProps) => {
   const hasErrors = useMemo(() => {
     if (!errors) return false;
     if (Array.isArray(errors)) return errors.length > 0;
@@ -21,7 +22,7 @@ export const Select = ({ options, className, errors, label, name, required, onCh
   }, [errors]);
 
   return (
-    <div className={cn(selectRecipe(), className)}>
+    <div className={cn(selectRecipe({ labelPosition }), className)}>
       {label && (
         <label htmlFor={name} className={selectLabel}>
           {label}

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

@@ -10,6 +10,27 @@ export const selectRecipe = recipe(
       width: '100%',
       transition: 'all 0.2s ease-in-out',
     },
+
+    variants: {
+      labelPosition: {
+        top: {
+          flexDirection: 'column',
+          alignItems: 'stretch',
+        },
+        side: {
+          flexDirection: 'row',
+          alignItems: 'center',
+
+          '@media': generateResponsiveMedia({
+            gap: themeContract.form.row.gap,
+          }),
+        },
+      },
+    },
+
+    defaultVariants: {
+      labelPosition: 'top',
+    },
   },
   'select'
 );