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

package/package.json

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

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/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,
-  },
-};