@myelmut/design-system 0.1.2

package/dist/types/index.d.ts

@@ -0,0 +1,671 @@
+import { ReactComponent as ArrowIcon } from './arrow.svg';
+import { ReactComponent as ArrowPlainIcon } from './arrow-plain.svg';
+import { ReactComponent as CalendarIcon } from './calendar.svg';
+import { ReactComponent as CheckIcon } from './check.svg';
+import { ReactComponent as CrossIcon } from './cross.svg';
+import { ReactComponent as CrossRoundedIcon } from './cross-rounded.svg';
+import { default as default_2 } from 'react';
+import { ReactComponent as FacebookIcon } from './Facebook.svg';
+import { ReactComponent as FiltersIcon } from './filters.svg';
+import { ReactComponent as HatCookIcon } from './hat-cook.svg';
+import { ReactComponent as HomeHeroShape } from './home-hero-shape.svg';
+import { ReactComponent as HomeHeroShapeMobile } from './home-hero-shape-mobile.svg';
+import { ReactComponent as HomeHeroShapeSmall } from './home-hero-shape-small.svg';
+import { ReactComponent as InfoIcon } from './info.svg';
+import { ReactComponent as InstagramIcon } from './Instagram.svg';
+import { JSX } from 'react/jsx-runtime';
+import { ReactComponent as LinkedinIcon } from './Linkedin.svg';
+import { ReactComponent as MagicWandIcon } from './magic-wand.svg';
+import { MemoExoticComponent } from 'react';
+import { ReactComponent as MenuIcon } from './menu.svg';
+import { ReactComponent as MinusIcon } from './minus.svg';
+import { ReactComponent as PlusIcon } from './plus.svg';
+import { ReactComponent as PolaroidThreadIcon } from './polaroid-thread.svg';
+import { ReactComponent as ProfilIcon } from './profil.svg';
+import { ReactComponent as QuoteIcon } from './quote.svg';
+import { ReactComponent as SubtractIcon } from './subtract.svg';
+import { ReactComponent as TiktokIcon } from './Tiktok.svg';
+import { ReactComponent as TrustpilotIcon } from './trustpilot.svg';
+
+export { ArrowIcon }
+
+export { ArrowPlainIcon }
+
+export declare const Banner: ({ content, className }: BannerProps) => JSX.Element;
+
+declare type BannerProps = {
+    content: string;
+    className?: string;
+};
+
+export declare const Button: MemoExoticComponent<({ as, variant, color, children, disabled, className, size, ...props }: ButtonProps) => JSX.Element>;
+
+declare type ButtonAsButtonProps = CommonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    as?: 'button';
+};
+
+declare type ButtonAsLinkProps = CommonProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    as: 'a';
+    href: string;
+};
+
+declare type ButtonProps = ButtonAsButtonProps | ButtonAsLinkProps;
+
+export declare const ButtonSelect: ({ label, id, options, value, onChange, required, hasError, error }: ButtonSelectProps) => JSX.Element;
+
+declare interface ButtonSelectProps {
+    label: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    value: string;
+    required?: boolean;
+    onChange: (value: string) => void;
+    hasError?: boolean;
+    error?: string;
+    id: string;
+}
+
+export { CalendarIcon }
+
+export declare const CardButton: ({ label, description, disabled, className, ...props }: CardButtonProps) => JSX.Element;
+
+declare type CardButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    label: string;
+    description: string;
+    className?: string;
+};
+
+export declare const Checkbox: ({ children, checked, name, onChange, className }: CheckboxProps) => JSX.Element;
+
+declare interface CheckboxProps {
+    children?: React.ReactNode;
+    checked: boolean;
+    name: string;
+    onChange: (value: boolean) => void;
+    className?: string;
+}
+
+export { CheckIcon }
+
+export declare const ClearButton: MemoExoticComponent<({ className, onClick, ...props }: ClearButtonProps) => JSX.Element>;
+
+declare interface ClearButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    className?: string;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+declare type CommonProps = {
+    variant?: 'primary' | 'secondary' | 'terciary';
+    color?: 'light' | 'dark';
+    size?: 'sm' | 'md';
+    children: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+};
+
+declare type CommonProps_2 = {
+    isOpen: boolean;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    name: string;
+    value?: string;
+    values?: string[];
+    disabled?: boolean;
+    className?: string;
+};
+
+export { CrossIcon }
+
+export { CrossRoundedIcon }
+
+export declare const Dropdown: ({ label, id, options, placeholder, name, className, error, hasError, disabled, onChange, value, required }: DropdownProps) => JSX.Element;
+
+export declare const DropdownMenu: ({ name, options, value, values, disabled, className, onChange, onChangeMultiple, isOpen, multiple }: DropdownMenuProps) => JSX.Element;
+
+declare type DropdownMenuProps = SingleDropdownMenuProps | MultipleDropdownMenuProps;
+
+declare interface DropdownOption {
+    value: string;
+    label: string;
+}
+
+declare 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;
+}
+
+export declare const Emblem: ({ variant, className }: EmblemProps) => JSX.Element;
+
+declare interface EmblemProps {
+    variant?: 'primary' | 'secondary';
+    className?: string;
+}
+
+export declare const ErrorMessage: ({ message, hasError, className, id }: ErrorMessageProps) => JSX.Element;
+
+declare interface ErrorMessageProps {
+    hasError: boolean;
+    message: string;
+    id?: string;
+    className?: string;
+}
+
+export { FacebookIcon }
+
+export declare const FAQButton: ({ variant, disabled, className, ...props }: FAQButtonProps) => JSX.Element;
+
+declare interface FAQButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant: 'plus' | 'minus';
+    disabled?: boolean;
+    className?: string;
+}
+
+export declare const FaqItem: ({ question, answer, className }: FaqItemProps) => JSX.Element;
+
+declare type FaqItemProps = {
+    question: string;
+    answer: string;
+    className?: string;
+};
+
+export declare const Filters: ({ placeholder, label, options, values, onChange, disabled, name, className }: FiltersProps) => JSX.Element;
+
+export { FiltersIcon }
+
+declare interface FiltersProps {
+    placeholder: string;
+    label: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    values: string[];
+    onChange: (values: string[]) => void;
+    disabled: boolean;
+    name: string;
+    className?: string;
+}
+
+export declare const FoodCard: ({ title, description, illustration, className }: FoodCardProps) => JSX.Element;
+
+declare interface FoodCardProps {
+    title: string;
+    description: string;
+    illustration: string;
+    className?: string;
+}
+
+export declare const Footer: ({ className }: FooterProps) => JSX.Element;
+
+declare type FooterProps = {
+    className?: string;
+};
+
+export declare const FooterTips: ({ className }: {
+    className?: string;
+}) => JSX.Element;
+
+export declare const frDesign: {
+    "navigation": {
+        "home": "Accueil",
+        "recipes": "Recettes",
+        "history": "Histoire",
+        "blog": "Blog",
+        "sponsorship": "Parrainage",
+        "signIn": "Se connecter",
+        "tryTwoWeeks": "Essayer 2 semaines",
+        "contact": "Contact",
+        "help": "Aide",
+        "dog": "Chien",
+        "cat": "Chat",
+        "homemadeRation": "Ration ménagère",
+        "ourStory": "Notre histoire",
+        "whyElmut": "Pourquoi Elmut",
+        "faq": "FAQ",
+        "legal": "Mentions légales",
+        "terms": "CGV",
+        "sitemap": "Plan du site",
+        "back": "Retour"
+    },
+    "footer": {
+        "copyright": "Tous droits réservés · Elmut"
+    },
+    "newsletter": {
+        "emailPlaceholder": "Email",
+        "subscribeLabel": "S'abonner"
+    },
+    "wizard": {
+        "myPet": "Mon poilu",
+        "promotionBanner": "30% de réduction sur votre commande d'essai"
+    },
+    "tips": {
+        "claudineAlt": "Claudine",
+        "footerMessage": "Recevez régulièrement de mes nouvelles ! Et un peu d'Elmut aussi !"
+    }
+};
+
+export declare const H1: (props: Omit<TitleProps, "variant">) => JSX.Element;
+
+export declare const H2: (props: Omit<TitleProps, "variant">) => JSX.Element;
+
+export declare const H3: (props: Omit<TitleProps, "variant">) => JSX.Element;
+
+export declare const H4: (props: Omit<TitleProps, "variant">) => JSX.Element;
+
+export declare const H5: (props: Omit<TitleProps, "variant">) => JSX.Element;
+
+export declare const H6: (props: Omit<TitleProps, "variant">) => JSX.Element;
+
+export { HatCookIcon }
+
+export { HomeHeroShape }
+
+export { HomeHeroShapeMobile }
+
+export { HomeHeroShapeSmall }
+
+export declare const IllustratedCard: ({ variant, title, description, illustration, className, illustrationClassName }: IllustratedCardProps) => JSX.Element;
+
+export declare const IllustratedCardButton: ({ label, layout, description, illustration, disabled, className, ...props }: IllustratedCardButtonProps) => JSX.Element;
+
+declare type IllustratedCardButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    label: string;
+    illustration: string;
+    description: string;
+    layout?: 'vertical' | 'horizontal';
+    className?: string;
+};
+
+declare interface IllustratedCardProps {
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    title: string;
+    description: string;
+    illustration: string;
+    className?: string;
+    illustrationClassName?: string;
+}
+
+export { InfoIcon }
+
+export declare const Ingredient: ({ label, description, name, variant, className }: IngredientProps) => JSX.Element;
+
+declare interface IngredientProps {
+    label?: string;
+    description?: string;
+    name?: string;
+    variant?: 'carrot' | 'quinoa' | 'potatoe' | 'dry-potatoe' | 'dry-apple' | 'dry-carrot' | 'beef' | 'chicken' | 'courgette' | 'duck' | 'fish' | 'lactoserum' | 'oil' | 'pork' | 'turkey' | 'vitamines' | 'vegetal-oil';
+    className?: string;
+}
+
+export { InstagramIcon }
+
+export declare const Label: ({ label, id, className, required, ...props }: LabelProps) => JSX.Element;
+
+declare interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    label: string;
+    required?: boolean;
+    className?: string;
+}
+
+export { LinkedinIcon }
+
+export declare const Logo: React.FC<LogoProps>;
+
+declare interface LogoProps {
+    variant?: 'primary' | 'secondary';
+    className?: string;
+}
+
+export { MagicWandIcon }
+
+export { MenuIcon }
+
+export { MinusIcon }
+
+export declare const MobileMenu: ({ variant, className }: MobileMenuProps) => JSX.Element;
+
+declare type MobileMenuProps = {
+    variant: 'dark' | 'light';
+    className?: string;
+};
+
+declare type MultipleDropdownMenuProps = CommonProps_2 & {
+    multiple: true;
+    onChange?: (value: string) => void;
+    onChangeMultiple: (values: string[]) => void;
+};
+
+export declare const Navbar: (props: NavbarProps) => JSX.Element;
+
+export declare const NavbarDesktop: ({ variant, className }: NavbarProps) => JSX.Element;
+
+export declare const NavbarMobile: ({ variant, className }: NavbarProps) => JSX.Element;
+
+declare type NavbarProps = {
+    variant: 'light' | 'dark';
+    connected?: boolean;
+    className?: string;
+};
+
+export declare const Newsletter: ({ variant, className, placeholder, label, disabled, onSubscribe, hasError, error }: NewsletterProps) => JSX.Element;
+
+declare interface NewsletterProps {
+    placeholder?: string;
+    label?: string;
+    variant?: 'light' | 'dark' | 'footer';
+    disabled?: boolean;
+    className?: string;
+    onSubscribe: (email: string) => void;
+    hasError?: boolean;
+    error?: string;
+}
+
+export declare const ParagraphTitle: (props: Omit<TitleProps, "variant">) => JSX.Element;
+
+export declare const PaymentCard: ({ content, className }: PaymentCardProps) => JSX.Element;
+
+declare interface PaymentCardProps {
+    content: string;
+    className?: string;
+}
+
+export { PlusIcon }
+
+export declare const Polaroid: ({ size, overflow, variant, title, mobileImage, desktopImage, mobileImage2x, desktopImage2x, showThread, className, imageClassName }: PolaroidProps) => JSX.Element;
+
+declare interface PolaroidProps {
+    size: 'sm' | 'md' | 'lg';
+    variant?: 'neutral' | 'primary' | 'secondary' | 'tertiary';
+    title: string;
+    mobileImage: string;
+    desktopImage: string;
+    mobileImage2x?: string;
+    desktopImage2x?: string;
+    overflow?: 'hidden' | 'visible';
+    className?: string;
+    showThread?: boolean;
+    imageClassName?: string;
+}
+
+export { PolaroidThreadIcon }
+
+export { ProfilIcon }
+
+export declare const QuantityInput: ({ label, id, value, onChange, required, metric, min, max, hasError, error, disabled }: QuantityInputProps) => JSX.Element;
+
+declare interface QuantityInputProps {
+    label: string;
+    id: string;
+    value: number;
+    onChange: (value: number) => void;
+    required: boolean;
+    metric: string;
+    min?: number;
+    max?: number;
+    hasError?: boolean;
+    error?: string;
+    disabled?: boolean;
+}
+
+export { QuoteIcon }
+
+export declare const RecetteCard: ({ className, variant, title, description, imageMobile, imageDesktop, imageMobile2x, imageDesktop2x, href }: RecetteCardProps) => JSX.Element;
+
+declare interface RecetteCardProps {
+    variant?: 'violet' | 'pink' | 'beige' | 'lavender';
+    title: string;
+    description: string;
+    imageMobile: string;
+    imageDesktop: string;
+    imageMobile2x?: string;
+    imageDesktop2x?: string;
+    className?: string;
+    href: string;
+}
+
+export declare const ResponsiveImage: ({ mobile, desktop, mobile2x, desktop2x, type, loading, decoding, alt, className }: ResponsiveImageProps) => JSX.Element;
+
+declare interface ResponsiveImageProps {
+    alt: string;
+    className?: string;
+    mobile: string;
+    desktop: string;
+    mobile2x?: string;
+    desktop2x?: string;
+    type?: 'image/webp' | 'image/jpeg' | 'image/png' | 'image/svg+xml';
+    loading?: 'lazy' | 'eager';
+    decoding?: 'async' | 'auto' | 'sync';
+}
+
+export declare const SimpleIllustratedCardButton: ({ label, layout, illustration, disabled, className, illustrationClassName, ...props }: SimpleIllustratedCardButtonProps) => JSX.Element;
+
+declare type SimpleIllustratedCardButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    label: string;
+    illustration: string;
+    layout?: 'vertical' | 'horizontal';
+    className?: string;
+    illustrationClassName?: string;
+};
+
+declare type SingleDropdownMenuProps = CommonProps_2 & {
+    multiple?: false;
+    onChange: (value: string) => void;
+    onChangeMultiple?: (values: string[]) => void;
+};
+
+export declare const SocialButton: ({ variant, labelVisible, className }: SocialButtonProps) => JSX.Element;
+
+declare type SocialButtonProps = {
+    variant: 'Facebook' | 'Instagram' | 'LinkedIn' | 'Tiktok';
+    labelVisible?: boolean;
+    className?: string;
+};
+
+export declare const SpanTitle: (props: Omit<TitleProps, "variant">) => JSX.Element;
+
+export declare const StatCard: ({ variant, size, value, metric, description, className }: StatCardProps) => JSX.Element;
+
+declare interface StatCardProps {
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    size?: 'small' | 'large';
+    value: string;
+    metric: string;
+    description: string;
+    className?: string;
+}
+
+export declare const Stepper: ({ totalSteps, currentStep, className }: StepperProps) => JSX.Element;
+
+declare type StepperProps = {
+    totalSteps: number;
+    currentStep: number;
+    className?: string;
+};
+
+export { SubtractIcon }
+
+export declare const Tag: ({ label, value, onRemove, className }: TagProps) => JSX.Element;
+
+declare interface TagProps {
+    label: string;
+    value: string;
+    onRemove: (value: string) => void;
+    className?: string;
+}
+
+export declare const TagSelect: ({ label, id, options, onChange, values, required, placeholder, className }: TagSelectProps) => JSX.Element;
+
+declare interface TagSelectProps {
+    label: string;
+    id: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    onChange: (values: string[]) => void;
+    values: string[];
+    required: boolean;
+    placeholder: string;
+    className?: string;
+}
+
+export declare const Testimonial: ({ variant, quote, author, role, imageMobile, imageDesktop, imageMobile2x, imageDesktop2x, className }: TestimonialProps) => JSX.Element;
+
+declare interface TestimonialProps {
+    variant: 'primary' | 'secondary';
+    quote: string;
+    author: string;
+    role: string;
+    imageMobile: string;
+    imageDesktop: string;
+    imageMobile2x?: string;
+    imageDesktop2x?: string;
+    className?: string;
+}
+
+declare const Text_2: ({ variant, size, children, className, ...props }: TextProps) => JSX.Element | undefined;
+export { Text_2 as Text }
+
+export declare const TextInput: ({ label, placeholder, id, name, type, className, disabled, error, required, hasError, ...props }: TextInputProps) => JSX.Element;
+
+declare interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    placeholder: string;
+    id: string;
+    name: string;
+    type?: string;
+    disabled?: boolean;
+    hasError?: boolean;
+    error?: string;
+    required?: boolean;
+    className?: string;
+}
+
+declare interface TextProps extends React.HTMLAttributes<HTMLParagraphElement | HTMLSpanElement> {
+    size?: 'button' | 'legend' | 'sm' | 'md' | 'lg' | 'xl';
+    variant?: 'p' | 'span';
+    children: React.ReactNode;
+    className?: string;
+}
+
+export { TiktokIcon }
+
+export declare const Tips: ({ content, className }: TipsProps) => JSX.Element;
+
+declare interface TipsProps {
+    content: string;
+    className?: string;
+}
+
+export declare const Title: ({ variant, size, italic, children, className }: TitleProps) => JSX.Element;
+
+declare type TitleProps = {
+    variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+    size?: 'display-md' | 'display-lg' | 'display-xl' | 'heading-md' | 'heading-lg' | 'heading-xl';
+    italic?: boolean;
+    children: default_2.ReactNode;
+    className?: string;
+};
+
+export declare const Toggle: ({ data, onChange, value, disabled, className, "aria-label": ariaLabel }: ToggleProps) => JSX.Element | null;
+
+declare interface ToggleData {
+    label: string;
+    labelMobile?: string;
+    value: string;
+    image?: string;
+}
+
+declare interface ToggleProps {
+    data: ToggleData[];
+    onChange: (value: string) => void;
+    value: string;
+    disabled?: boolean;
+    className?: string;
+    'aria-label'?: string;
+}
+
+export declare const TransitionCard: ({ variant, disabled, className }: TransitionCardProps) => JSX.Element;
+
+declare interface TransitionCardProps {
+    variant: '25%' | '50%' | '75%' | '100%';
+    disabled?: boolean;
+    className?: string;
+}
+
+export { TrustpilotIcon }
+
+export declare const UpCard: ({ title1, description1, title2, description2, step, illustration, className, illustrationClassName, align }: UpCardProps) => JSX.Element;
+
+declare interface UpCardProps {
+    title1: string;
+    description1: string;
+    title2: string;
+    description2: string;
+    step: string;
+    illustration: string;
+    align?: 'top' | 'bottom';
+    className?: string;
+    illustrationClassName?: string;
+}
+
+export declare const WizardDropdown: ({ placeholder, options, value, onChange, name, disabled, className }: WizardDropdownProps) => JSX.Element;
+
+declare interface WizardDropdownProps {
+    placeholder?: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    value: string;
+    name: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    className?: string;
+}
+
+export declare const WizardNavbar: ({ variant, totalSteps, currentStep, className }: WizardNavbarProps) => JSX.Element;
+
+declare type WizardNavbarProps = {
+    variant: 'default' | 'form' | 'payment';
+    totalSteps?: number;
+    currentStep?: number;
+    className?: string;
+};
+
+export declare const WizardTextInput: ({ placeholder, name, disabled, className, hasError, error, ...props }: WizardTextInputProps) => JSX.Element;
+
+declare interface WizardTextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    placeholder: string;
+    name: string;
+    disabled: boolean;
+    error: string;
+    hasError: boolean;
+    className?: string;
+}
+
+export declare const WizardTips: ({ content, className, checkbox, onChange, checked }: WizardTipsProps) => JSX.Element;
+
+declare interface WizardTipsProps {
+    content: string;
+    checkbox?: boolean;
+    onChange?: (value: boolean) => void;
+    checked?: boolean;
+    className?: string;
+}
+
+export { }