@myelmut/design-system 0.1.47 → 0.1.49

package/src/components/Cards/UpCard/UpCard.stories.tsx

@@ -0,0 +1,94 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { UpCard } from './UpCard';
+
+const meta = {
+    title: 'Components/Cards/UpCard',
+    component: UpCard,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        title1: {
+            control: 'text',
+        },
+        description1: {
+            control: 'text',
+        },
+        title2: {
+            control: 'text',
+        },
+        description2: {
+            control: 'text',
+        },
+        step: {
+            control: 'text',
+            description: 'Step on first card',
+        },
+        illustration: {
+            control: 'text',
+            description: 'Illustration on second card. Name of the illustration asset',
+        },
+        align: {
+            control: 'select',
+            options: ['top', 'bottom'],
+            description: 'Align the component',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional classes to apply to the component',
+        },
+        illustrationClassName: {
+            control: 'text',
+            description: 'Additional classes to apply to the illustration',
+        },
+    },
+    args: {
+        title1: 'L’étiquette : plus c’est long, moins c’est bon.',
+        description1: 'Butylhydroxyanisole, éthoxyquine, tartrazine E102 et autres termes barbares qui vous assureront une victoire au Scrabble contre votre grand-mère mais qui n’ont rien à faire dans la gamelle de nos poilus.',
+        title2: 'Pour quoi faire alors ?',
+        description2: 'Tous ces conservateurs, colorants et texturants ont pour but de flatter nos yeux de parents de chiens et de prolonger l’espérance de vie du paquet de croquettes… au détriment de celle du poilu.',
+        step: '01',
+        illustration: '/illustrations/warning.webp',
+        align: 'bottom',
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof UpCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Large: Story = {
+    args: {
+        title1: 'Rien ne se perd, tout s’ultra-transforme.',
+        description1:
+            'La petfood industrielle utilise pour ses produits ce que l’on appelle des sous-produits de catégorie 3, dont la qualité est très… variable. \n \n Pour masquer leurs faiblesses nutritionnelles et les risques bactériologiques, on les passe à la moulinette d’un traitement thermique extrême à plus de 120°.',
+        title2: 'Résultat ?',
+        description2: 'Des croquettes uniformes, mais aussi l’apparition de composés indésirables comme l’acrylamide, suspecté d’être cancérigène.',
+        step: '02',
+        illustration: '/illustrations/molecule.webp',
+        illustrationClassName: 'md:!w-26',
+    },
+};
+
+export const AlignTop: Story = {
+    args: {
+        title1: 'Du saumon sur l’emballage mais pas dans le paquet.',
+        description1: 'Fun fact pas si fun : la réglementation n’impose pas que l’ingrédient mis en avant sur l’emballage soit le plus présent dans la composition. ',
+        title2: 'Autrement dit ?',
+        description2:
+            'Une croquette qui contient 4 % de saumon et 25 % de porc a le droit de dire qu’elle est au saumon et d’arborer sur son emballage un ours qui dévore un saumon norvégien à même la rivière. Le tout, sans mentionner sur l’emballage que ce saumon a quand même vachement le goût de porc.',
+        step: '3',
+        illustration: '/illustrations/skeleton.webp',
+        align: 'top',
+        illustrationClassName: '-rotate-12 md:!w-38',
+    },
+};

package/src/components/Cards/UpCard/UpCard.tsx

@@ -0,0 +1,50 @@
+import clsx from 'clsx';
+
+import { ParagraphTitle, Text } from '../../../components';
+
+export interface UpCardProps {
+    title1: string;
+    description1: string;
+    title2: string;
+    description2: string;
+    step: string;
+    illustration: string;
+    align?: 'top' | 'bottom';
+    className?: string;
+    illustrationClassName?: string;
+}
+
+export const UpCard = ({ title1, description1, title2, description2, step, illustration, className, illustrationClassName, align = 'bottom' }: UpCardProps) => {
+    return (
+        <div className={clsx('flex max-md:flex-col max-md:gap-4', align === 'top' ? 'items-start' : 'md:items-end', className)}>
+            <div className="bg-lavender-blue-light text-claret-violet-dark flex w-63 -rotate-2 flex-col gap-4 p-4 max-md:-translate-x-10 md:w-87.5 md:px-11 md:py-8">
+                <ParagraphTitle size="heading-xl" className="hidden md:block">
+                    {step}
+                </ParagraphTitle>
+                <ParagraphTitle size="heading-md" className="hidden md:block">
+                    {title1}
+                </ParagraphTitle>
+                <ParagraphTitle size="heading-lg" className="block max-md:not-italic md:hidden">
+                    {step}.&nbsp;{title1}
+                </ParagraphTitle>
+                <Text size="md" className="whitespace-pre-line max-md:not-italic">
+                    {description1}
+                </Text>
+            </div>
+            <div className={clsx('bg-pink-oyster-light text-claret-violet-dark relative flex w-63.5 -rotate-2 flex-col gap-2 p-6 md:z-1 md:w-85.5 md:-translate-x-8 md:rotate-2 md:px-11 md:py-8', align === 'top' ? 'md:translate-y-26' : 'md:translate-y-18')}>
+                <div className={clsx('relative w-11.5 shrink-0 md:w-18', illustrationClassName)}>
+                    <img src={illustration} alt={title2} className="w-full" />
+                </div>
+                <ParagraphTitle size="heading-md" className="hidden md:block">
+                    {title2}
+                </ParagraphTitle>
+                <ParagraphTitle size="heading-lg" className="block max-md:not-italic md:hidden">
+                    {step}.&nbsp;{title2}
+                </ParagraphTitle>
+                <Text size="md" className="whitespace-pre-line max-md:not-italic">
+                    {description2}
+                </Text>
+            </div>
+        </div>
+    );
+};

package/src/components/Cards/WizardTips/WizardTips.stories.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { WizardTips } from './WizardTips';
+
+const meta = {
+    title: 'Components/Cards/WizardTips',
+    component: WizardTips,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        content: { control: 'text', description: 'Content of the wizard tips' },
+        className: { control: 'text', description: 'Additional classes' },
+        checkbox: { control: 'boolean', description: 'Wether the wizard tips is a checkbox input.' },
+    },
+    args: {
+        content: 'C’est vrai qu’ils sont beaux. Pas plus que le caniche toy marron, mais beau quand même.',
+        className: 'w-full',
+    },
+    globals: {
+        backgrounds: {
+            value: 'dark',
+        },
+    },
+} satisfies Meta<typeof WizardTips>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Checkbox: Story = {
+    args: {
+        content:
+            'Vous le savez, nous nous devons de préciser que vous pouvez refuser de recevoir les magnifiques mails que je vous écris où je vous parle nutrition, actualités Elmut et le plus important : de moi. \n\n Je le sais, il est proprement inimaginable de refuser la présence de ma jolie bouille dans vos e-mails. Mais sachez que vous pouvez le faire en cochant la case.',
+        checkbox: true,
+        className: 'w-80 md:w-166',
+    },
+    render: (arg) => {
+        const [checked, setChecked] = useState(false);
+
+        return <WizardTips {...arg} checked={checked} onChange={(value) => setChecked(value)} />;
+    },
+};

package/src/components/Cards/WizardTips/WizardTips.tsx

@@ -0,0 +1,33 @@
+import clsx from 'clsx';
+
+import ClaudineHeadImage from '../../../assets/images/tips/claudine-head.webp';
+import { Checkbox, Text } from '../../../components';
+
+export interface WizardTipsProps {
+    content: string;
+    checkbox?: boolean;
+    onChange?: (value: boolean) => void;
+    checked?: boolean;
+    className?: string;
+}
+
+export const WizardTips = ({ content, className, checkbox = false, onChange = () => {}, checked = false }: WizardTipsProps) => {
+    return (
+        <div className={clsx('flex items-start', className)}>
+            <div className="border-beige-light bg-pink-oyster-light z-1 -me-3 h-17 w-17 shrink-0 overflow-hidden rounded-full border-5">
+                <img src={ClaudineHeadImage} alt="Claudine" loading="lazy" decoding="async" className="h-full w-full object-cover" />
+            </div>
+            <div className={clsx('bg-lavender-blue-light rounded-input text-claret-violet-dark p-5', checkbox && 'w-full', !checkbox && 'w-75')}>
+                {checkbox ? (
+                    <Checkbox checked={checked} name="wizard-tips" onChange={onChange} className="items-start gap-3">
+                        <Text size="legend" variant="span" className="whitespace-pre-line">
+                            {content}
+                        </Text>
+                    </Checkbox>
+                ) : (
+                    <Text size="button">“&nbsp;{content}&nbsp;“</Text>
+                )}
+            </div>
+        </div>
+    );
+};

package/src/components/Cards/index.ts

@@ -0,0 +1,19 @@
+import { CTACard } from './CTACard/CTACard';
+import { FeatureCard } from './FeatureCard/FeatureCard';
+import { FeatureIllustration } from './FeatureIllustration/FeatureIllustration';
+import { FoodCard } from './FoodCard/FoodCard';
+import { FrequencySelectorCard } from './FrequencySelectorCard/FrequencySelectorCard';
+import { IllustratedCard } from './IllustratedCard/IllustratedCard';
+import { PaymentCard } from './PaymentCard/PaymentCard';
+import { PlanCard } from './PlanCard/PlanCard';
+import { Polaroid } from './Polaroid/Polaroid';
+import { RecetteCard } from './RecetteCard/RecetteCard';
+import { StatCard } from './StatCard/StatCard';
+import { Testimonial } from './Testimonial/Testimonial';
+import { TestimonialSliderCard } from './TestimonialSlider/TestimonialSlider';
+import { Tips } from './Tips/Tips';
+import { TransitionCard } from './TransitionCard/TransitionCard';
+import { UpCard } from './UpCard/UpCard';
+import { WizardTips } from './WizardTips/WizardTips';
+
+export { Tips, WizardTips, Testimonial, StatCard, IllustratedCard, RecetteCard, TransitionCard, PaymentCard, FoodCard, UpCard, Polaroid, TestimonialSliderCard, PlanCard, FeatureCard, FrequencySelectorCard, FeatureIllustration, CTACard };

package/src/components/Inputs/ButtonSelect/ButtonSelect.stories.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ButtonSelect } from './ButtonSelect';
+
+const meta = {
+    title: 'Components/Inputs/ButtonSelect',
+    component: ButtonSelect,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        id: { control: 'text', description: 'The id of the button select' },
+        hasError: { control: 'boolean', description: 'Whether the button select has an error' },
+        error: { control: 'text', description: 'The error message of the button select' },
+        options: { control: 'object', description: 'The options of the button select' },
+        value: { control: 'text', description: 'The value of the button select' },
+        onChange: { action: 'onChange' },
+        required: { control: 'boolean', description: 'Whether the button select is required' },
+        className: { control: 'text', description: 'Additional class names for the button select' },
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof ButtonSelect>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Jack la Fripouille est stérilisée ?',
+        options: [
+            { label: 'oui', value: 'oui' },
+            { label: 'non', value: 'non' },
+        ],
+        value: '',
+        onChange: () => {},
+        id: 'button-select',
+    },
+    render: (arg) => {
+        const [value, setValue] = useState('');
+
+        return <ButtonSelect {...arg} value={value} onChange={(value) => setValue(value)} />;
+    },
+};

package/src/components/Inputs/ButtonSelect/ButtonSelect.tsx

@@ -0,0 +1,34 @@
+import { Button, ErrorMessage, Label } from '../../../components';
+
+export interface ButtonSelectProps {
+    label?: string;
+    options: { label: string; value: string }[];
+    value: string;
+    required?: boolean;
+    onChange: (value: string) => void;
+    hasError?: boolean;
+    error?: string;
+    id: string;
+    className?: string;
+}
+
+export const ButtonSelect = ({ label = '', id, options, value, onChange, required, hasError = false, error = '', className = '' }: ButtonSelectProps) => {
+    const handleChange = (e: React.MouseEvent<HTMLButtonElement>, value: string) => {
+        e.preventDefault();
+        onChange(value);
+    };
+
+    return (
+        <div className={className}>
+            {label.length > 0 && <Label label={label} required={required} className="mb-6" id={id} />}
+            <div className="flex flex-wrap justify-center gap-4 md:gap-3 lg:justify-start">
+                {options.map((option) => (
+                    <Button type="button" variant={value === option.value ? 'primary' : 'secondary'} size="sm" color="dark" key={option.value} onClick={(e) => handleChange(e, option.value)}>
+                        {option.label}
+                    </Button>
+                ))}
+            </div>
+            <ErrorMessage id={`${id}-error`} hasError={hasError} message={error} />
+        </div>
+    );
+};

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

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import React from 'react';
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Checkbox } from './Checkbox';
+
+const meta = {
+    title: 'Components/Inputs/Checkbox',
+    component: Checkbox,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        children: { control: 'text', description: 'The label of the checkbox. It is a React node.' },
+        checked: { control: 'boolean' },
+        onChange: { action: 'onChange' },
+        name: { control: 'text', description: 'The name of the checkbox field' },
+        className: { control: 'text', description: 'Additional classes to apply to the checkbox' },
+    },
+    args: {
+        name: 'checkbox',
+        onChange: () => {},
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        checked: false,
+        onChange: () => {},
+    },
+    render: (arg) => {
+        const [checked, setChecked] = useState(false);
+
+        return <Checkbox {...arg} checked={checked} onChange={(value) => setChecked(value)} />;
+    },
+};

package/src/components/Inputs/Checkbox/Checkbox.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useCallback } from 'react';
+
+import clsx from 'clsx';
+
+import { CheckIcon } from '../../../components';
+import { onKeyDown } from '../../../helpers';
+
+export interface CheckboxProps {
+    children?: React.ReactNode;
+    checked: boolean;
+    name: string;
+    onChange: (value: boolean) => void;
+    className?: string;
+}
+
+export const Checkbox = ({ children, checked, name, onChange, className }: CheckboxProps) => {
+    const handleKeyDown = useCallback(
+        (e: React.KeyboardEvent<HTMLLabelElement>) => {
+            onKeyDown(e, () => onChange(!checked));
+        },
+        [onChange, checked],
+    );
+
+    return (
+        <label tabIndex={0} htmlFor={name} className={clsx('outline-claret-violet-dark flex cursor-pointer items-center gap-2.5 px-2 py-4', className)} onKeyDown={handleKeyDown}>
+            <input type="checkbox" className="peer hidden" id={name} checked={checked} onChange={() => onChange(!checked)} />
+            <span tabIndex={-1} className="peer-checked:bg-claret-violet-dark border-claret-violet-dark relative flex h-4 w-4 shrink-0 items-center justify-center overflow-hidden rounded-xs border text-white transition-colors duration-300 *:opacity-0 peer-checked:*:opacity-100">
+                <CheckIcon className="w-2 transition-opacity duration-300" />
+            </span>
+            {children}
+        </label>
+    );
+};

package/src/components/Inputs/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Dropdown } from './Dropdown';
+
+const meta = {
+    title: 'Components/Inputs/Dropdown',
+    component: Dropdown,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        label: { control: 'text' },
+        placeholder: { control: 'text' },
+        id: { control: 'text' },
+        name: { control: 'text' },
+        options: { control: 'object' },
+        onChange: { action: 'onChange' },
+        disabled: { control: 'boolean' },
+        value: { control: 'text' },
+        hasError: { control: 'boolean' },
+        error: { control: 'text' },
+        required: { control: 'boolean' },
+        searchable: { control: 'boolean' },
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof Dropdown>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Dropdown',
+        placeholder: 'Select an option',
+        id: 'dropdown',
+        name: 'dropdown',
+        options: [
+            { value: 'option1', label: 'Option 1' },
+            { value: 'option2', label: 'Option 2' },
+            { value: 'option3', label: 'Option 3' },
+        ],
+        className: 'w-80 md:w-100',
+        onChange: () => {},
+        value: '',
+        hasError: false,
+        error: '',
+    },
+    render: (arg) => {
+        const [value, setValue] = useState('');
+
+        return <Dropdown {...arg} onChange={(value) => setValue(value)} value={value} />;
+    },
+};

package/src/components/Inputs/Dropdown/Dropdown.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import clsx from 'clsx';
+
+import { ArrowIcon, DropdownMenu, ErrorMessage, Label } from '../../../components';
+import { useClickOutside } from '../../../helpers';
+
+interface DropdownOption {
+    value: string;
+    label: string;
+}
+
+export interface DropdownProps {
+    label?: string;
+    placeholder: string;
+    id: string;
+    name: string;
+    options: DropdownOption[];
+    className?: string;
+    disabled?: boolean;
+    onChange: (value: string) => void;
+    value: string;
+    required?: boolean;
+    hasError?: boolean;
+    error?: string;
+    searchable?: boolean;
+}
+
+export const Dropdown = ({ label = '', id, options, placeholder, name, className, error = '', hasError = false, disabled = false, onChange = () => {}, value, required, searchable = false }: DropdownProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+    const ref = useRef<HTMLDivElement>(null);
+    const selectedLabel = useMemo(() => options.find((option) => option.value === value)?.label, [options, value]);
+
+    const handleBlur = useCallback(() => {
+        setIsOpen(false);
+        if ((!value || searchValue !== selectedLabel) && searchable) {
+            setSearchValue('');
+            onChange('');
+        }
+    }, [value, onChange, selectedLabel, searchValue]);
+
+    useClickOutside(ref as React.RefObject<HTMLDivElement>, handleBlur);
+
+    const filteredOptions = useMemo(() => (searchable ? options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase())) : options), [options, searchValue, searchable]);
+
+    const handleChange = useCallback(
+        (selection: string) => {
+            onChange(selection);
+            setSearchValue(options.find((option) => option.value === selection)?.label || '');
+            setIsOpen(false);
+        },
+        [onChange, selectedLabel],
+    );
+
+    useEffect(() => {
+        if (!value && searchable) {
+            setSearchValue('');
+        }
+    }, [value, searchable]);
+
+    // prettier-ignore
+    const containerClasses = clsx(
+        'w-full', 
+        className,
+    );
+    const dropdownClasses = clsx(
+        'will-change-height hover:border-claret-violet-dark/40 bg-beige-light rounded-input text-md border-claret-violet-dark absolute relative inset-0 flex h-11 max-h-11 flex-col items-center overflow-hidden border transition-all duration-300',
+        isOpen && 'z-30 h-auto max-h-38 items-start bg-white',
+        disabled && 'border-claret-violet-dark/40',
+    );
+
+    return (
+        <div className={containerClasses}>
+            {label.length > 0 && <Label label={label} id={id} required={required} />}
+            <div className="relative h-11 w-full" ref={ref}>
+                <input type="hidden" name={name} id={id} value={value} />
+                <div className={dropdownClasses}>
+                    {searchable ? (
+                        <input type="text" name="search" disabled={disabled} onFocus={() => setIsOpen(true)} value={searchValue} placeholder={placeholder} onChange={(e) => setSearchValue(e.target.value)} className="w-full px-3 py-2.5 focus:outline-none" />
+                    ) : (
+                        !isOpen && (
+                            <button
+                                type="button"
+                                tabIndex={disabled ? -1 : 0}
+                                aria-expanded={isOpen}
+                                aria-haspopup="listbox"
+                                aria-labelledby={id}
+                                disabled={disabled}
+                                onClick={() => setIsOpen(!isOpen)}
+                                className={clsx('text-md focus-visible:ring-claret-violet-dark w-full cursor-pointer px-3 py-2.5 text-left focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset disabled:cursor-not-allowed')}
+                            >
+                                <span className={clsx(value && 'hidden', 'opacity-40')}>{disabled ? '-' : placeholder}</span>
+                                <span className={clsx(value && 'block')}>{selectedLabel}</span>
+                            </button>
+                        )
+                    )}
+                    <DropdownMenu name={name} options={filteredOptions} value={value} onChange={handleChange} disabled={disabled} isOpen={isOpen} className={clsx('border-0 pe-9.5', isOpen && 'h-full', searchable && 'pt-0')} />
+
+                    <ArrowIcon onClick={() => setIsOpen(!isOpen)} className={clsx('pointer-cursor absolute top-4.5 right-3 z-20 w-3 transition-transform duration-300', isOpen && 'rotate-180', disabled && 'opacity-40')} />
+                </div>
+            </div>
+            <ErrorMessage id={`${id}-error`} hasError={hasError} message={error} />
+        </div>
+    );
+};

package/src/components/Inputs/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { DropdownMenu } from './DropdownMenu';
+
+const meta = {
+    title: 'Components/Inputs/DropdownMenu',
+    component: DropdownMenu,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        isOpen: { control: 'boolean', description: 'Whether the dropdown menu is open' },
+        options: { control: 'object', description: 'The options to display in the dropdown menu' },
+        name: { control: 'text', description: 'The name of the dropdown menu' },
+        value: { control: 'text', description: 'The value of the dropdown menu' },
+        onChange: { action: 'onChange', description: 'The function to call when an option is selected' },
+        multiple: { control: 'boolean', description: 'Whether the dropdown menu has a multiple select' },
+        onChangeMultiple: { action: 'onChangeMultiple', description: 'The function to call when an option is selected multiple' },
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof DropdownMenu>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        isOpen: true,
+        options: [
+            { label: 'Option 1', value: 'option1' },
+            { label: 'Option 2', value: 'option2' },
+            { label: 'Option 3', value: 'option3' },
+        ],
+        name: 'menu',
+        className: '!w-80',
+        onChange: (value) => {
+            console.log('onChange', value);
+        },
+        multiple: false,
+    },
+    render: (arg) => {
+        const [value, setValue] = useState('');
+
+        return <DropdownMenu {...arg} value={value} onChange={(value) => setValue(value)} />;
+    },
+};
+
+export const Multiple: Story = {
+    args: {
+        isOpen: true,
+        options: [
+            { label: 'Option 1', value: 'option1' },
+            { label: 'Option 2', value: 'option2' },
+            { label: 'Option 3', value: 'option3' },
+        ],
+        name: 'menu',
+        className: '!w-80',
+        onChangeMultiple: () => {},
+        multiple: true,
+    },
+
+    render: (arg) => {
+        const [values, setValues] = useState<string[]>([]);
+
+        return <DropdownMenu {...arg} values={values} onChangeMultiple={(values) => setValues(values)} />;
+    },
+};