@trafilea/afrodita-components 3.0.5-beta.0 → 4.0.1-beta.0

package/build/index.d.ts

@@ -1,8 +1,111 @@
 /// <reference types="react" />
-import React, { ReactNode, FC, AriaAttributes, CSSProperties, AnchorHTMLAttributes, LabelHTMLAttributes, RefObject } from 'react';
+import React, { ReactNode, FC, AriaAttributes, CSSProperties, AnchorHTMLAttributes, LabelHTMLAttributes, ElementType, RefObject } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
-import { SearchBarOptionItem as SearchBarOptionItem$1, Breakpoints as Breakpoints$1 } from 'src/types/types';
+import { SearchBarOptionItem as SearchBarOptionItem$1 } from 'src/types/types';
+import { ThemeBreakpoints as ThemeBreakpoints$1 } from 'src/core/theme/Theme';
+
+declare enum CardSectionType {
+    Header = 0,
+    Footer = 1
+}
+declare enum ComponentSize {
+    Large = "large",
+    Medium = "medium",
+    Small = "small",
+    XSmall = "xsmall"
+}
+declare enum ComponentPosition {
+    Top = 0,
+    Bottom = 1,
+    Left = 2,
+    Right = 3
+}
+declare enum InputValidationType {
+    Error = 0,
+    Valid = 1,
+    Empty = 2
+}
+
+interface IconProps {
+    width?: number;
+    height?: number;
+    fill?: string;
+    title?: string;
+}
+declare type ButtonType = 'button' | 'submit' | 'reset';
+interface CTAProps {
+    onClick: () => void;
+    disabled?: boolean;
+    wide?: boolean | false;
+    size?: ComponentSize;
+    text: string;
+    type?: ButtonType;
+    className?: string;
+}
+declare type DropdownOption<T> = {
+    key: string;
+    label: string;
+    value: T;
+    disabled: boolean;
+};
+declare type SizeOption = {
+    label: string;
+    description: string;
+    disabled?: boolean;
+};
+declare type Color = {
+    primaryColor: string;
+    secondaryColor?: string;
+    tertiaryColor?: string;
+};
+declare type Pattern = {
+    url: string;
+};
+declare type ColorPickerOption = {
+    label: string;
+    color?: Color;
+    pattern?: Pattern;
+};
+declare type RadioGroupOption = {
+    value: string;
+    label: string;
+};
+declare type ImageType = {
+    key: string;
+    imageUrl: string;
+    alt: string;
+};
+interface IconWithOpacityProps extends IconProps {
+    opacity?: number;
+}
+interface WithTestId {
+    dataTestId?: string;
+}
+declare type DropdownListIconsItem = {
+    Icon: IconType;
+    items: DropdownListIconsSubItem[];
+};
+declare type DropdownListIconsSubItem = {
+    description: string;
+    callback: () => void;
+};
+declare type Filter = {
+    title: string;
+    columns: number;
+    isOpenByDefault?: boolean;
+    items: string[];
+};
+declare type FilterChange = {
+    sectionIndex: number;
+    itemIndex: number;
+    checked?: boolean;
+};
+interface SearchBarOptionItem {
+    src: string;
+    price: string;
+    title: string;
+}
 
 declare const SixtyDaysGuarantee: ({ height, width, fill, title }: IconProps) => JSX.Element;
 
@@ -295,435 +398,6 @@ declare const Icon: {
     SlideDots: typeof SlideDots;
 };
 
-declare enum CardSectionType {
-    Header = 0,
-    Footer = 1
-}
-declare enum ComponentSize {
-    Large = "large",
-    Medium = "medium",
-    Small = "small",
-    XSmall = "xsmall"
-}
-declare enum ComponentPosition {
-    Top = 0,
-    Bottom = 1,
-    Left = 2,
-    Right = 3
-}
-declare enum InputValidationType {
-    Error = 0,
-    Valid = 1,
-    Empty = 2
-}
-
-interface Breakpoints {
-    mobile: number;
-    desktop: number;
-}
-interface Theme {
-    name: string;
-    fontSizes: number[];
-    fontWeights: number[];
-    lineHeights: number[];
-    mediaQueries: Breakpoints;
-    colors: {
-        primary: string;
-        secondary: string;
-        black: string;
-        white: string;
-        neutral10: string;
-        neutral50: string;
-        neutral100: string;
-        neutral150: string;
-        neutral200: string;
-        neutral250: string;
-        neutral300: string;
-        neutral350: string;
-        neutral400: string;
-        neutral450: string;
-        neutral500: string;
-        neutral550: string;
-        neutral600: string;
-        neutral650: string;
-        neutral700: string;
-        neutral750: string;
-        neutral800: string;
-        neutral850: string;
-        neutral900: string;
-        neutral950: string;
-        neutral990: string;
-        semantic: {
-            error: string;
-            success: string;
-        };
-        border: {
-            disabled: string;
-            highlight: string;
-        };
-        background: {
-            disabled: string;
-        };
-        text: {
-            body: string;
-            disabled: string;
-        };
-    };
-    text: {
-        weight: {
-            heavy: number;
-            bold: number;
-            demi: number;
-            medium: number;
-            regular: number;
-        };
-    };
-    component: {
-        button: {
-            border: string;
-            borderRadius: string;
-            fontWeight: number;
-            size: {
-                small: {
-                    fontSize: string;
-                    padding: string;
-                };
-                medium: {
-                    fontSize: string;
-                    padding: string;
-                };
-                large: {
-                    fontSize: string;
-                    padding: string;
-                };
-            };
-            primary: {
-                active: {
-                    backgroundColor: string;
-                    color: string;
-                };
-                hover: {
-                    backgroundColor: string;
-                    color: string;
-                };
-            };
-            secondary: {
-                active: {
-                    backgroundColor: string;
-                    color: string;
-                };
-                hover: {
-                    backgroundColor: string;
-                    color: string;
-                };
-            };
-        };
-        input: {
-            background: string;
-            color: string;
-            placeholderColor: string;
-            borderRadius: string;
-            fontSize: string;
-            fontWeight: number;
-            padding: string;
-            lineHeight: string;
-            border: string;
-            boxShadow: string;
-        };
-        inputCustom: {
-            button: {
-                borderRadius: string;
-            };
-            input: {
-                borderRadius: string;
-            };
-        };
-        selector: {
-            size: {
-                small: {
-                    padding: string;
-                    borderRadius: string;
-                };
-                medium: {
-                    padding: string;
-                    borderRadius: string;
-                };
-            };
-            default: {
-                fontWeight: number;
-                border: string;
-                background: string;
-                color: string;
-            };
-            hover: {
-                fontWeight: number;
-                background: string;
-                border: string;
-                color: string;
-            };
-            disabled: {
-                border: string;
-            };
-            fontSize: string;
-        };
-        rating: {
-            fontWeight: number;
-            size: {
-                xsmall: {
-                    fontSize: string;
-                    lineHeight: string;
-                };
-                small: {
-                    fontSize: string;
-                    lineHeight: string;
-                };
-                medium: {
-                    fontSize: string;
-                    lineHeight: string;
-                };
-                large: {
-                    fontSize: string;
-                    lineHeight: string;
-                };
-            };
-        };
-        card: {
-            borderRadius: string;
-        };
-        radio: {
-            borderColor: string;
-            background: string;
-            size: {
-                small: {
-                    borderWidth: string;
-                    margin: string;
-                    height: string;
-                    active: {
-                        borderWidth: string;
-                    };
-                };
-                medium: {
-                    borderWidth: string;
-                    margin: string;
-                    height: string;
-                    active: {
-                        borderWidth: string;
-                    };
-                };
-                large: {
-                    borderWidth: string;
-                    margin: string;
-                    height: string;
-                    active: {
-                        borderWidth: string;
-                    };
-                };
-            };
-        };
-        label: {
-            fontSize: {
-                small: string;
-                medium: string;
-                large: string;
-            };
-            lineHeight: {
-                small: string;
-                medium: string;
-                large: string;
-            };
-        };
-        checkbox: {
-            background: string;
-            borderColor: string;
-            active: {
-                background: string;
-            };
-            size: {
-                large: {
-                    width: string;
-                    height: string;
-                    borderRadius: string;
-                    borderWidth: string;
-                    margin: string;
-                    icon: {
-                        width: string;
-                        height: string;
-                    };
-                };
-                medium: {
-                    width: string;
-                    height: string;
-                    borderRadius: string;
-                    borderWidth: string;
-                    margin: string;
-                    icon: {
-                        width: string;
-                        height: string;
-                    };
-                };
-                small: {
-                    width: string;
-                    height: string;
-                    borderRadius: string;
-                    borderWidth: string;
-                    margin: string;
-                    icon: {
-                        width: string;
-                        height: string;
-                    };
-                };
-            };
-        };
-        accordion: {
-            variant: {
-                box: {
-                    container: {
-                        border: string;
-                        borderColor: string;
-                        borderRadius: string;
-                        padding: string;
-                    };
-                    summary: {
-                        fontWeight: number;
-                        fontSize: string;
-                        lineHeight: string;
-                        color: string;
-                    };
-                    details: {
-                        margin: string;
-                    };
-                    icon: {
-                        width: number;
-                        height: number;
-                        color: string;
-                    };
-                };
-                simple: {
-                    container: {
-                        borderTop: string;
-                        borderBottom: string;
-                        borderColor: string;
-                        borderRadius: string;
-                        padding: string;
-                    };
-                    summary: {
-                        fontWeight: number;
-                        fontSize: string;
-                        lineHeight: string;
-                        color: string;
-                    };
-                    details: {
-                        margin: string;
-                    };
-                    icon: {
-                        width: number;
-                        height: number;
-                        color: string;
-                    };
-                };
-            };
-        };
-        dropdown: {
-            borderRadius: string;
-            fontSize: string;
-            fontWeight: number;
-            lineHeight: string;
-            padding: string;
-            color: string;
-            fill: string;
-            options: {
-                borderColor: string;
-                color: string;
-            };
-        };
-    };
-}
-interface IconProps {
-    width?: number;
-    height?: number;
-    fill?: string;
-    title?: string;
-}
-declare type ButtonType = 'button' | 'submit' | 'reset';
-interface CTAProps {
-    onClick: () => void;
-    disabled?: boolean;
-    wide?: boolean | false;
-    size?: ComponentSize;
-    text: string;
-    type?: ButtonType;
-    className?: string;
-}
-declare type DropdownOption<T> = {
-    key: string;
-    label: string;
-    value: T;
-    disabled: boolean;
-};
-declare type SizeOption = {
-    label: string;
-    description: string;
-    disabled?: boolean;
-};
-declare type Color = {
-    primaryColor: string;
-    secondaryColor?: string;
-    tertiaryColor?: string;
-};
-declare type Pattern = {
-    url: string;
-};
-declare type ColorPickerOption = {
-    label: string;
-    color?: Color;
-    pattern?: Pattern;
-};
-declare type RadioGroupOption = {
-    value: string;
-    label: string;
-};
-declare type ImageType = {
-    key: string;
-    imageUrl: string;
-    alt: string;
-};
-interface IconWithOpacityProps extends IconProps {
-    opacity?: number;
-}
-interface WithTestId {
-    dataTestId?: string;
-}
-declare type DropdownListIconsItem = {
-    Icon: IconType;
-    items: DropdownListIconsSubItem[];
-};
-declare type DropdownListIconsSubItem = {
-    description: string;
-    callback: () => void;
-};
-declare type Filter = {
-    title: string;
-    columns: number;
-    isOpenByDefault?: boolean;
-    items: string[];
-};
-declare type FilterChange = {
-    sectionIndex: number;
-    itemIndex: number;
-    checked?: boolean;
-};
-interface SearchBarOptionItem {
-    src: string;
-    price: string;
-    title: string;
-}
-
-interface ThemeProviderProps {
-    theme: Theme;
-    children: ReactNode;
-}
-declare const ThemeProvider: ({ theme, children }: ThemeProviderProps) => JSX.Element;
-
 interface CardBodyProps {
     children: ReactNode;
 }
@@ -775,7 +449,7 @@ declare function SimpleDropdown<T>({ options, disabled, initialValue, placeHolde
 
 interface SizeSelectorProps {
     sizes: SizeOption[];
-    selectedValue?: SizeOption;
+    selectedValue: SizeOption;
     onChange: (size: SizeOption) => void;
 }
 declare const SizeSelector: ({ sizes, selectedValue, onChange }: SizeSelectorProps) => _emotion_react_jsx_runtime.JSX.Element;
@@ -820,8 +494,8 @@ interface DiscountTagProps {
 declare const DiscountTag: ({ discount, offText, disabled, backgroundColor, borderColor, textColor, size, }: DiscountTagProps) => JSX.Element;
 
 interface PriceLabelProps {
-    finalPrice: string;
-    originalPrice?: string;
+    finalPrice: string | number;
+    originalPrice?: string | number;
     color?: string;
     size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
     discount?: DiscountTagProps;
@@ -1408,9 +1082,390 @@ interface ProductGalleryMobileProps {
 }
 declare const ProductGalleryMobile: ({ images, selectedValue, DiscountTagElement, BestSellerTagElement, productImageDataTestId, slideDotsDataTestId, }: ProductGalleryMobileProps) => JSX.Element;
 
+declare const ThemeProvider: FC<{
+    theme: Theme;
+    children: ReactNode;
+}>;
+declare const useTheme: () => Theme;
+declare const ThemeVariables: FC<{
+    theme: any;
+    Container?: ElementType;
+}>;
+declare const AssetsProvider: FC<{
+    assets: ThemeAssets;
+}>;
+declare const useThemeAssets: () => ThemeAssets;
+declare type Theme = {
+    name: string;
+    fontSizes: number[];
+    fontWeights: number[];
+    lineHeights: number[];
+    mediaQueries: ThemeBreakpoints;
+    colors: ThemeColors;
+    component: ThemeComponent;
+    typography: ThemeTypography;
+    fonts: ThemeFonts;
+    assets: ThemeAssets;
+};
+declare type ThemeBreakpoints = {
+    mobile: number;
+    desktop: number;
+};
+declare type ThemeBasicPallete = {
+    color: string;
+    contrast: string;
+};
+declare type ThemeColorPallete = ThemeBasicPallete & {
+    soft: ThemeBasicPallete;
+};
+declare type ThemeColorPrimaryPallete = ThemeColorPallete & {
+    20: ThemeColorPallete;
+    40: ThemeColorPallete;
+    60: ThemeColorPallete;
+    80: ThemeColorPallete;
+};
+declare type ThemeColors = {
+    pallete: {
+        primary: ThemeColorPrimaryPallete;
+        secondary: ThemeColorPrimaryPallete;
+    } & Partial<Record<string, ThemeColorPallete>>;
+    shades: {
+        black: ThemeBasicPallete;
+        white: ThemeBasicPallete;
+        5: ThemeBasicPallete;
+        10: ThemeBasicPallete;
+        50: ThemeBasicPallete;
+        100: ThemeBasicPallete;
+        150: ThemeBasicPallete;
+        200: ThemeBasicPallete;
+        250: ThemeBasicPallete;
+        300: ThemeBasicPallete;
+        350: ThemeBasicPallete;
+        400: ThemeBasicPallete;
+        450: ThemeBasicPallete;
+        500: ThemeBasicPallete;
+        550: ThemeBasicPallete;
+        600: ThemeBasicPallete;
+        650: ThemeBasicPallete;
+        700: ThemeBasicPallete;
+        750: ThemeBasicPallete;
+        800: ThemeBasicPallete;
+        850: ThemeBasicPallete;
+        900: ThemeBasicPallete;
+        950: ThemeBasicPallete;
+        990: ThemeBasicPallete;
+    };
+    semantic: {
+        positive: ThemeBasicPallete;
+        urgent: ThemeBasicPallete;
+        attention: ThemeBasicPallete;
+        informative: ThemeBasicPallete;
+    };
+    border: {
+        color: string;
+        disabled: string;
+        highlight: string;
+    };
+    background: {
+        color: string;
+        disabled: string;
+    };
+    text: {
+        color: string;
+        disabled: string;
+    };
+};
+declare type ThemeComponent = {
+    button: {
+        border: string;
+        borderRadius: string;
+        fontWeight: number;
+        size: {
+            small: {
+                fontSize: string;
+                padding: string;
+            };
+            medium: {
+                fontSize: string;
+                padding: string;
+            };
+            large: {
+                fontSize: string;
+                padding: string;
+            };
+        };
+        primary: {
+            active: {
+                backgroundColor: string;
+                color: string;
+            };
+            hover: {
+                backgroundColor: string;
+                color: string;
+            };
+        };
+        secondary: {
+            active: {
+                backgroundColor: string;
+                color: string;
+            };
+            hover: {
+                backgroundColor: string;
+                color: string;
+            };
+        };
+    };
+    input: {
+        background: string;
+        color: string;
+        placeholderColor: string;
+        borderRadius: string;
+        fontSize: string;
+        fontWeight: number;
+        padding: string;
+        lineHeight: string;
+        border: string;
+        boxShadow: string;
+    };
+    inputCustom: {
+        button: {
+            borderRadius: string;
+        };
+        input: {
+            borderRadius: string;
+        };
+    };
+    selector: {
+        size: {
+            small: {
+                padding: string;
+                borderRadius: string;
+            };
+            medium: {
+                padding: string;
+                borderRadius: string;
+            };
+        };
+        default: {
+            fontWeight: number;
+            border: string;
+            background: string;
+            color: string;
+        };
+        hover: {
+            fontWeight: number;
+            background: string;
+            border: string;
+            color: string;
+        };
+        disabled: {
+            border: string;
+        };
+        fontSize: string;
+    };
+    rating: {
+        fontWeight: number;
+        size: {
+            xsmall: {
+                fontSize: string;
+                lineHeight: string;
+            };
+            small: {
+                fontSize: string;
+                lineHeight: string;
+            };
+            medium: {
+                fontSize: string;
+                lineHeight: string;
+            };
+            large: {
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+    };
+    card: {
+        borderRadius: string;
+    };
+    radio: {
+        borderColor: string;
+        background: string;
+        size: {
+            small: {
+                borderWidth: string;
+                margin: string;
+                height: string;
+                active: {
+                    borderWidth: string;
+                };
+            };
+            medium: {
+                borderWidth: string;
+                margin: string;
+                height: string;
+                active: {
+                    borderWidth: string;
+                };
+            };
+            large: {
+                borderWidth: string;
+                margin: string;
+                height: string;
+                active: {
+                    borderWidth: string;
+                };
+            };
+        };
+    };
+    label: {
+        fontSize: {
+            small: string;
+            medium: string;
+            large: string;
+        };
+        lineHeight: {
+            small: string;
+            medium: string;
+            large: string;
+        };
+    };
+    checkbox: {
+        background: string;
+        borderColor: string;
+        active: {
+            background: string;
+        };
+        size: {
+            large: {
+                width: string;
+                height: string;
+                borderRadius: string;
+                borderWidth: string;
+                margin: string;
+                icon: {
+                    width: string;
+                    height: string;
+                };
+            };
+            medium: {
+                width: string;
+                height: string;
+                borderRadius: string;
+                borderWidth: string;
+                margin: string;
+                icon: {
+                    width: string;
+                    height: string;
+                };
+            };
+            small: {
+                width: string;
+                height: string;
+                borderRadius: string;
+                borderWidth: string;
+                margin: string;
+                icon: {
+                    width: string;
+                    height: string;
+                };
+            };
+        };
+    };
+    accordion: {
+        variant: {
+            box: {
+                container: {
+                    border: string;
+                    borderColor: string;
+                    borderRadius: string;
+                    padding: string;
+                };
+                summary: {
+                    fontWeight: number;
+                    fontSize: string;
+                    lineHeight: string;
+                    color: string;
+                };
+                details: {
+                    margin: string;
+                };
+                icon: {
+                    width: number;
+                    height: number;
+                    color: string;
+                };
+            };
+            simple: {
+                container: {
+                    borderTop: string;
+                    borderBottom: string;
+                    borderColor: string;
+                    borderRadius: string;
+                    padding: string;
+                };
+                summary: {
+                    fontWeight: number;
+                    fontSize: string;
+                    lineHeight: string;
+                    color: string;
+                };
+                details: {
+                    margin: string;
+                };
+                icon: {
+                    width: number;
+                    height: number;
+                    color: string;
+                };
+            };
+        };
+    };
+    dropdown: {
+        borderRadius: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        padding: string;
+        color: string;
+        fill: string;
+        options: {
+            borderColor: string;
+            color: string;
+        };
+    };
+};
+declare type ThemeTypography = {
+    config: {
+        weight: {
+            heavy: number;
+            bold: number;
+            demi: number;
+            regular: number;
+        };
+    };
+    variants: Record<string, CSSProperties>;
+};
+declare type ThemeFonts = {
+    url: string;
+    config: Array<{
+        src: string;
+        family: string;
+        weight?: number | string;
+        style?: string;
+        stretch?: string;
+    }>;
+};
+declare type ThemeAssets = {
+    images: {
+        favicon: string;
+        logo: string;
+    };
+    [key: string]: any;
+};
+
 declare const useOnClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: Event) => void) => void;
 
-declare const useWindowDimensions: (breakpoints: Breakpoints$1) => {
+declare const useWindowDimensions: (breakpoints: ThemeBreakpoints$1) => {
     isMobile: boolean;
     windowDimensions: {
         width: number;
@@ -1418,4 +1473,4 @@ declare const useWindowDimensions: (breakpoints: Breakpoints$1) => {
     };
 };
 
-export { Accordion, AmazonButton, Breakpoints, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CategoryTag, Checkbox, Collection, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, Pagination, Pattern, PaymentMethod, PaypalButton, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, RadioGroupInput, RadioGroupOption, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, Text, TextButton, Theme, ThemeProvider, Timer, Tooltip, Totals, WithTestId, useOnClickOutside, useWindowDimensions };
+export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CategoryTag, Checkbox, Collection, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, Pagination, Pattern, PaymentMethod, PaypalButton, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, RadioGroupInput, RadioGroupOption, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, Text, TextButton, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };