@latte-macchiat-io/latte-vanilla-components 0.0.553 → 0.0.555

package/package.json

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

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

@@ -162,7 +162,5 @@ export const boxContent = recipe({
   },
 });
 
-// export type BoxVariants = NonNullable<CleanRecipeVariants<RecipeVariants<typeof box>>>;
-// export type BoxContentVariants = NonNullable<CleanRecipeVariants<RecipeVariants<typeof boxContent>>>;
 export type BoxVariants = RecipeVariants<typeof box>;
 export type BoxContentVariants = RecipeVariants<typeof boxContent>;

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

@@ -0,0 +1,2 @@
+export { Checkbox, type CheckboxProps } from './';
+export { type CheckboxVariants } from './styles.css';

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

@@ -0,0 +1,56 @@
+import { useMemo } from 'react';
+
+import { checkboxInput, checkboxLabel, checkboxRecipe, CheckboxVariants, errorMessage, messageContainer } from './styles.css';
+
+import { cn } from '../../../utils/styleOverride';
+
+export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> &
+  CheckboxVariants & {
+    name: string;
+    label?: string;
+    errors?: string | string[];
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  };
+
+export const Checkbox = ({ name, label, errors, labelPosition, required, checked, disabled, onChange, className }: CheckboxProps) => {
+  const hasErrors = useMemo(() => {
+    if (!errors) return false;
+    if (Array.isArray(errors)) return errors.length > 0;
+    return Boolean(errors);
+  }, [errors]);
+
+  return (
+    <div className={cn(checkboxRecipe({ labelPosition }), className)}>
+      <input
+        id={name}
+        name={name}
+        type="checkbox"
+        required={required}
+        checked={checked}
+        disabled={disabled}
+        onChange={onChange}
+        className={checkboxInput}
+      />
+
+      {label && (
+        <label htmlFor={name} className={checkboxLabel}>
+          {label} {required && '*'}
+        </label>
+      )}
+
+      {hasErrors && (
+        <div className={messageContainer}>
+          {Array.isArray(errors) ? (
+            errors.map((error, index) => (
+              <span key={index} className={errorMessage}>
+                {error}
+              </span>
+            ))
+          ) : (
+            <span className={errorMessage}>{errors}</span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Form/Checkbox/stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Checkbox } from '.';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Checkbox> = {
+  title: '5. Forms / Checkbox',
+  component: Checkbox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+  decorators: [
+    (Story) => (
+      <div style={{ minWidth: '320px', maxWidth: '500px', width: '100%' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {
+    name: 'agree',
+    label: 'I agree to the terms and conditions',
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    name: 'newsletter',
+    label: 'Subscribe to newsletter',
+    checked: true,
+  },
+};
+
+export const Required: Story = {
+  args: {
+    name: 'required-checkbox',
+    label: 'Accept terms',
+    required: true,
+  },
+};
+
+export const LabelLeft: Story = {
+  args: {
+    name: 'label-left',
+    label: 'Label on the left',
+    labelPosition: 'left',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    name: 'disabled-checkbox',
+    label: 'This option is disabled',
+    disabled: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    name: 'terms',
+    label: 'I accept the terms',
+    errors: 'You must accept the terms to continue',
+  },
+};
+
+export const WithMultipleErrors: Story = {
+  args: {
+    name: 'gdpr',
+    label: 'I accept the GDPR policy',
+    errors: ['This field is required', 'You must be 18 or older to accept'],
+  },
+};

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

@@ -0,0 +1,62 @@
+import { style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { themeContract } from '../../../theme/contract.css';
+
+export const checkboxRecipe = recipe(
+  {
+    base: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: themeContract.space.sm,
+      transition: 'all 0.2s ease-in-out',
+    },
+
+    variants: {
+      labelPosition: {
+        left: {
+          flexDirection: 'row-reverse',
+          justifyContent: 'flex-end',
+        },
+        right: {
+          flexDirection: 'row',
+        },
+      },
+    },
+
+    defaultVariants: {
+      labelPosition: 'right',
+    },
+  },
+  'checkbox'
+);
+
+export const checkboxInput = style({
+  appearance: 'none',
+  cursor: 'pointer',
+  flexShrink: 0,
+  width: '1.25rem',
+  height: '1.25rem',
+  border: themeContract.form.textField.border,
+  borderRadius: themeContract.form.textField.borderRadius,
+  backgroundColor: themeContract.form.textField.backgroundColor,
+  transition: 'all 0.2s ease-in-out',
+
+  selectors: {
+    '&:checked': {
+      backgroundColor: themeContract.colors.primary,
+    },
+  },
+});
+
+export const checkboxLabel = style({
+  cursor: 'pointer',
+  fontFamily: themeContract.fonts.body,
+  color: themeContract.form.textField.color,
+});
+
+export const messageContainer = style({});
+
+export const errorMessage = style({});
+
+export type CheckboxVariants = RecipeVariants<typeof checkboxRecipe>;

package/src/components/Form/TextField/Input/export.tsx

@@ -1,3 +1,2 @@
 export { Input, type InputProps } from './';
-export { type InputVariants } from './styles.css';
 export { type InputType as InputFieldType } from './types';

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

@@ -1,4 +1,4 @@
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { recipe } from '@vanilla-extract/recipes';
 
 import { generateResponsiveMedia } from '../../../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../../../theme/contract.css';
@@ -35,4 +35,3 @@ export const inputRecipe = recipe(
   'input'
 );
 
-export type InputVariants = RecipeVariants<typeof inputRecipe>;

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

@@ -1,2 +1 @@
 export { Label, type LabelProps } from './index';
-export { type LabelVariants } from './styles.css';

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

@@ -1,12 +1,12 @@
-import { labelRecipe, type LabelVariants } from './styles.css';
+import { labelRecipe } from './styles.css';
 import { cn } from '../../../../utils/styleOverride';
 
-export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> &
-  LabelVariants & {
-    name: string;
-    label: string;
-    required: boolean;
-  };
+export type LabelProps = {
+  name: string;
+  label: string;
+  required: boolean;
+  className?: string;
+};
 
 export const Label = ({ label, name, required, className }: LabelProps) => (
   <label htmlFor={name} className={cn(labelRecipe(), className)}>

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

@@ -1,4 +1,4 @@
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { recipe } from '@vanilla-extract/recipes';
 
 export const labelRecipe = recipe(
   {
@@ -9,5 +9,3 @@ export const labelRecipe = recipe(
   },
   'text-field-label'
 );
-
-export type LabelVariants = RecipeVariants<typeof labelRecipe>;

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

@@ -1,2 +1 @@
 export { Textarea, type TextareaProps } from './';
-export { type TextareaVariants } from './styles.css';

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

@@ -1,4 +1,4 @@
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { recipe } from '@vanilla-extract/recipes';
 
 import { generateResponsiveMedia } from '../../../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../../../theme/contract.css';
@@ -37,4 +37,3 @@ export const textareaRecipe = recipe(
   'text-area'
 );
 
-export type TextareaVariants = RecipeVariants<typeof textareaRecipe>;

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

@@ -1,5 +1,4 @@
 export { TextField, type TextFieldProps } from './';
-export { type TextFieldVariants } from './styles.css';
 
 export * from './Input/export';
 export * from './Label/export';

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

@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { recipe } from '@vanilla-extract/recipes';
 import { themeContract } from '../../../theme/contract.css';
 
 const textFieldBase = style({
@@ -29,4 +29,3 @@ export const textFieldRecipe = recipe(
 );
 
 export { messageContainer, errorMessage };
-export type TextFieldVariants = RecipeVariants<typeof textFieldRecipe>;

package/src/components/Form/export.tsx

@@ -4,3 +4,4 @@ export * from './Row/export';
 
 export * from './TextField/export';
 export * from './Select/export';
+export * from './Checkbox/export';

package/src/theme/contract.css.ts

@@ -1287,6 +1287,7 @@ export const themeContract = createGlobalThemeContract({
         '2xl': 'latte-textField-input-paddingLeft-2xl',
       },
     },
+
   },
 
   consentCookie: {

package/src/components/Form/Select/theme.ts

@@ -1,40 +0,0 @@
-const themeActionsBase = {
-  actions: {
-    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',
-    },
-  },
-};
-
-export const themeActionsLight = {
-  actions: {
-    ...themeActionsBase.actions,
-  },
-};
-
-export const themeActionsDark = {
-  actions: {
-    ...themeActionsBase.actions,
-  },
-};

package/src/utils/CleanRecipeVariantsType.ts

@@ -1,12 +0,0 @@
-/**
- * Utility type that normalizes Vanilla Extract's RecipeVariants by removing
- * optional keys and filtering out `undefined` from both the variant object
- * and its individual properties.
- *
- * Ensures that variants become strictly typed, fully defined, and safe to use
- * in Storybook controls and component props.
- */
-
-export type CleanRecipeVariants<T> = NonNullable<{
-  [K in keyof T]-?: Exclude<T[K], undefined>;
-}>;