import * as React from 'react';
import React__default from 'react';
import * as recoil from 'recoil';
import { DefaultTheme } from '@mui/private-theming';

declare type TBorderOneSide = {
    width?: string;
    style?: "solid" | "dashed" | "dotted";
    color?: string;
};
declare type TBorder = TBorderOneSide;
declare type TSide = {
    Top?: string;
    Right?: string;
    Bottom?: string;
    Left?: string;
};
declare type TRadius = {
    TopLeft?: string;
    TopRight?: string;
    BottomLeft?: string;
    BottomRight?: string;
};

declare type TBreakpointLabels = "mobile" | "tablet" | "desktop" | "all";

interface XGUIProps {
}

/**
 * @new V2
 * This the version 2 of XORAIA-ESHOP-UI types
 */
declare type TTextDecoration = "none" | "underline" | "line-through";
declare type TImageObjectFit = "fill" | "contain" | "cover";
declare type TFontStyle = "italic" | "normal";
declare type TBackgroundSize = "cover" | "contain" | "fill";
declare type TBackgroundAttachment = "scroll" | "fixed";
declare type TBackgroundPosition = "top" | "top left" | "top right" | "center" | "bottom" | "bottom left" | "bottom right" | "left" | "right";

interface IXImageProps extends IXElementBaseProps {
    src?: string;
    alt?: string;
    /**
     * @todo implement or remove
     */
    href?: string;
    objectFit?: TImageObjectFit;
}
declare type TXImageProps = {
    [breakpoint in TBreakpointLabels]?: IXImageProps;
};
interface XImageProps {
    config?: IXElementBase;
    props?: TXImageProps;
}
interface XImageElement extends XImageProps {
    name: "XImage";
}

declare type TIconPack = "ai" | "bs" | "bi" | "ci" | "di" | "fi" | "fc" | "fa" | "gi" | "go" | "gr" | "hi" | "hi2" | "im" | "io" | "io5" | "md" | "ri" | "si" | "sl" | "tb" | "tfi" | "ti" | "vsc" | "wi" | "cg";

declare type TUrlPath = "NONE" | "/" | "/shop" | "/about-us" | "/contact-us" | "/products/[slug]";
declare type TFontWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
declare type TTextAlign = "left" | "center" | "right" | "justify";
declare type TTextTransform = "normal" | "capitalize" | "uppercase" | "lowercase";

interface IXIconProps extends IXElementBaseProps {
    icon?: string;
    /**
     * @todo implement
     */
    pack?: TIconPack;
    /**
     * @todo implement
     */
    baseClassName?: string;
    color?: string;
    fontSize?: string;
    fontWeight?: TFontWeight;
    hoverColor?: string;
    hoverFontSize?: string;
}
declare type TXIconProps = {
    [breakpoint in TBreakpointLabels]?: IXIconProps;
};
interface XIconProps {
    config?: IXElementBase;
    props?: TXIconProps;
}
interface XIconElement extends XIconProps {
    name: "XIcon";
}

interface IAuthUserFormInput {
    fullname?: string;
    phone?: string;
    email: string;
    password: string;
    confirm?: string;
}

declare type TApiFetcherArticlesArgs = {
    businessId?: string;
    id?: string;
    articleName?: string;
    categoryId?: string;
    badgeId?: string;
    /**
     * order by NAME | PRICE | QUANTITY (For limited edition) | RATING | CREATED_AT
     */
    order?: "name" | "price" | "rating" | "qty" | "createdAt";
    /**
     * DIRECTION
     * @default desc
     */
    sort?: "asc" | "desc";
    /**
     * LIMIT IS USED INTERNALY
     * IT IS ASSIGNED BU PAGE LIMIT
     */
    limit?: number;
};
interface IDataFetching extends TApiFetcherArticlesArgs {
    /**
     * LIST OF CATEGORY IDs
     * ONE FETCH FROM ONE CATEGORIES
     * 2+ CREATE A TABS GRID WITH CATEGORY NAME AS LABEL
     * TODO : TAB STYLE NEED TO BE ADDED
     */
    categories?: string[];
    /**
     * LIST OF BADGES IDs
     */
    badges?: string[];
    enabled?: boolean;
}
declare type TImageComponent = (props: IXImageProps, env: "dev" | "prod" | "preview", devProps: any, index: string) => React__default.ReactElement | null;
declare type TIconComponent = (props?: IXIconProps) => React__default.ReactNode | null;
declare type TAPIHandler = (query?: IDataFetching) => Promise<any> | any;
interface IXoraiaConfig {
    /**
     * the environment mode
     * "dev" for the dashboard (edtition mode)
     * "prod" for the websote (preview and production mode)
     */
    env?: "prod" | "dev" | "preview";
    /**
     * Pop Up editor (dev mode)
     */
    XGUI?: React__default.FC<XGUIProps>;
    /**
     * @todo implement the material theming
     */
    theme?: Partial<DefaultTheme>;
    /**
     * next js component implementation
     */
    imageComponent?: TImageComponent;
    /**
     * @todo global icon implementation
     */
    iconComponent?: TIconComponent;
    /**
     * FUNCTION TO UPLOAD FILE
     */
    uploadFile?: (file: File, type: "image" | "video") => Promise<string>;
    /**
     * domain to show in the browser url
     */
    domain?: string;
    /**
     * connected user token
     */
    userId?: string;
    /**
     * xoraia orgs id or slug
     */
    businessId: string;
    /**
     * THIS IS USED FOR THE QUERY FILTER ON PAGES
     */
    setUrlParams?: TSetUrlParams;
    /**
     * FECTH DATA FROM API ENDPOINT
     */
    apiFetcher?: TApiFetcher;
    /**
     * THE LINK COMPONENT EITHER A | NEXT/LINK
     */
    Link: React__default.FC<{
        href?: string;
        children?: React__default.ReactNode;
        target?: "_blank";
        as?: string;
    }>;
    /**
     * ARTICLE DATA TO USE PRODUCT DETAILS
     */
    article?: IArticleData;
}
interface ICategoryData {
    name: string;
    id: string;
}
interface IBadgeData {
    name: string;
    id: string;
}
interface IOptionData {
    name: string;
    id: string;
    values: string[];
    type: "SELECT" | "COLOR" | "CHOICE";
}
declare type TApiFetcher = {
    articles?: (args?: TApiFetcherArticlesArgs) => Promise<IArticleData[]>;
    categories?: (args?: any) => Promise<ICategoryData[]>;
    badges?: (args?: any) => Promise<IBadgeData[]>;
    options?: (args?: any) => Promise<IOptionData[]>;
    /**
     * use null as args to logout user
     */
    setAuthUser?: (args?: IAuthUserFormInput | null) => Promise<any>;
};
declare type TSetUrlParamsArgs = {
    /**
     * search query
     */
    q?: string;
    /**
     * min price
     */
    mn?: number;
    /**
     * max price
     */
    mx?: number;
    /**
     * category slug | id
     */
    c?: string;
    /**
     * tags id | slug
     */
    t?: string[];
    /**
     * sort createdAt | name | price | rating
     */
    s?: "createdAt" | "name" | "price" | "rating";
    /**
     * order asc | desc
     */
    o?: "asc" | "desc";
    /**
     * Current Page
     */
    p?: number;
    /**
     * article slug | id
     */
    a?: string;
    /**
     * article quantity used on product details
     */
    qty?: number;
    /**
     * any dynamic options
     */
    [key: string]: any;
};
declare type TSetUrlParams = (args: TSetUrlParamsArgs) => Promise<{
    articles: IArticleData[];
    config: TSetUrlParams;
    count?: number;
}>;
declare const useXoraia: () => [IXoraiaConfig, recoil.SetterOrUpdater<IXoraiaConfig>];
declare const useXoraiaValue: () => IXoraiaConfig;
declare const useXoraiaUpdater: () => recoil.SetterOrUpdater<IXoraiaConfig>;

interface XElementConfig {
    index: string;
    hierachy?: string;
    childOf?: string;
    position?: number;
    dataFetching?: IDataFetching;
}

interface IXElementBase extends XElementConfig {
}
interface IXElementBaseProps {
    bgColor?: string;
    width?: string;
    height?: string;
    margin?: TSide;
    padding?: TSide;
    borderRadius?: TRadius;
    border?: TBorder;
}

interface IXCommonBase extends XElementConfig {
    SEE_USE_CASE?: "HERE";
}

declare type TContainerMode = "NONE" | "CENTER" | "FILL";
declare type TContainerName = "XPage" | "XHeader" | "XFooter" | "XArticle" | "XStack" | "XGrid" | "XCarousel";
declare type TJustifyContent = "flex-start" | "center" | "space-between" | "space-around" | "space-evenly" | "flex-end";
declare type TAlignItems = "flex-start" | "center" | "flex-end" | "stretch" | "baseline";
declare type TDirection = "row" | "column" | "row-reverse" | "column-reverse";
declare type THeaderMode = "static" | "sticky" | "fixed";

interface IXFooterProps {
    bgColor?: string;
    padding?: TSide;
    margin?: TSide;
}
declare type TXFooterProps = {
    [breakpoint in TBreakpointLabels]?: IXFooterProps;
};
interface XFooterProps {
    config?: IXCommonBase;
    props?: TXFooterProps;
    initData?: TXFooterProps;
}
interface XFooterElement extends XFooterProps {
    name: "XFooter";
}

interface IXHeaderProps {
    containerMode?: TContainerMode;
    backgroundMode?: "CONTAINED" | "FILL";
    collapseAt?: "sm" | "md";
    menuPosition?: "flex-start" | "center" | "flex-end";
    menuAnimation?: string;
    headerMode?: THeaderMode;
    position?: TSide;
    height?: string;
    bgColor?: string;
    boxShadow?: string;
    blur?: number;
    logo?: string;
    logoHeight?: string;
    LogoText?: string;
    logoTextFontFamily?: string;
    logoTextFontSize?: string;
    logoTextColor?: string;
    logoTextFontWeight?: TFontWeight;
    contentColor?: string;
    contentFontWeight?: TFontWeight;
    contentTextTransform?: TTextTransform;
    contentLetterSpacing?: string;
    contentFontSize?: string;
    contentHoverColor?: string;
    iconColor?: string;
    iconBgColor?: string;
    iconRadius?: TRadius;
    iconBorder?: TBorder;
    iconHoverColor?: string;
    iconHoverBgColor?: string;
    iconHoverBorder?: TBorder;
    badgeColor?: string;
    badgeTextColor?: string;
    avatarBgColor?: string;
    avatarTextColor?: string;
}
declare type TXHeaderProps = {
    [breakpoint in TBreakpointLabels]?: IXHeaderProps;
};
interface XHeaderProps {
    config?: IXCommonBase;
    props?: TXHeaderProps;
    initData?: TXHeaderProps;
}
interface XHeaderElement extends XHeaderProps {
    name: "XHeader";
}

interface IXStackProps extends IXSectionBaseProps {
    direction?: TDirection;
    boxShadow?: string;
    backgroundImage?: string;
    backgroundMode?: "CONTAINED" | "FILL";
    backgroundSize?: TBackgroundSize;
    backgroundAttachment?: TBackgroundAttachment;
    backgroundPosition?: TBackgroundPosition;
    hoverBgColor?: string;
    hoverBorder?: TBorder;
}
declare type TXStackProps = {
    [breakpoint in TBreakpointLabels]?: IXStackProps;
};
interface XStackProps {
    config?: IXSectionBase;
    props?: TXStackProps;
    children?: React.ReactNode;
}
interface XStackSection extends XStackProps {
    name: "XStack";
}

declare type TColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;

interface IXSectionBase extends XElementConfig {
    SEE_USE_CASE?: "HERE";
}
interface IXSectionBaseProps extends IXElementBaseProps {
    containerMode?: TContainerMode;
    /**
     * @deprecated
     * SPACE BETWEEN ELEMENTS
     * use "gap" instead
     */
    gutter?: string;
    /**
     * SPACING BETWEEN ELEMENTS
     */
    gap?: string;
    alignItems?: TAlignItems;
    justifyContent?: TJustifyContent;
    rowSpan?: number;
    colSpan?: TColumns;
}

interface IXGridProps extends IXSectionBaseProps {
    /**
     * NUMBER OF COLUMN (USING FLEXGRID ALGORYTHM)
     */
    columns?: TColumns;
    /**
     * NUMBER OF ELEMENTS ON A SINGLE PAGE
     */
    pageLimit?: number;
}
declare type TXGridProps = {
    [breakpoint in TBreakpointLabels]?: IXGridProps;
};
interface XGridProps {
    config?: IXSectionBase;
    props?: TXGridProps;
    dataFetching?: IDataFetching;
}
interface XGridSection extends XGridProps {
    name: "XGrid";
}

interface IXCarouselProps extends IXGridProps {
    /**
     * ANIMATION MODE
     * @default 'slide'
     **/
    effect?: "slide" | "fade" | "parallax";
    direction?: "horizontal" | "vertical";
    align?: "prev" | "center" | "next";
    loop?: boolean;
    /**
     * @deprecated replace by align
     */
    centered?: boolean;
    autoPlay?: boolean;
    dotMode?: "bullet" | "fraction" | "scroll" | "none";
    dotColor?: string;
    dotWidth?: string;
    dotHeight?: string;
    dotBorder?: TBorder;
    dotActivedColor?: string;
    dotActivedWidth?: string;
    dotActivedHeight?: string;
    dotActivedBorder?: TBorder;
    dotRadius?: TRadius;
    arrowVisibility?: "always" | "hover" | "none";
    arrowPosition?: "in" | "out";
    arrowWeight?: "thin" | "bold";
    arrowColor?: string;
    arrowFontSize?: string;
    arrowWidth?: string;
    arrowHeight?: string;
    arrowBgColor?: string;
    arrowBorder?: TBorder;
    arrowRadius?: TRadius;
    arrowHoverColor?: string;
    arrowHoverFontSize?: string;
    arrowHoverWidth?: string;
    arrowHoverHeight?: string;
    arrowHoverBgColor?: string;
    arrowHoverBorder?: TBorder;
    arrowHoverRadius?: TRadius;
}
declare type TXCarouselProps = {
    [breakpoint in TBreakpointLabels]?: IXCarouselProps;
};
interface XCarouselProps {
    config?: IXSectionBase;
    props?: TXCarouselProps;
    dataFetching?: IDataFetching;
}
interface XCarouselSection extends XCarouselProps {
    name: "XCarousel";
}

/**
 * THIS IS FOR SELECT OPTIONS
 */
interface CheckboxFilterProps {
    checkboxTextColor?: string;
    checkboxSize?: string;
    checkboxColor?: string;
    checkboxActiveColor?: string;
    values?: string[];
}

interface ColorPickerProps {
    colorPickerBorder?: TBorder;
    colorPickerSize?: string;
    /** THE LIST OF COLOR TO DISPLAY IN THE COLOR PICKER
     * @todo should be {label, value, name} in the future
     */
    colorPickerColors?: string[];
}

interface PricingFilterProps {
    onChange?: (args: TSetUrlParamsArgs) => Promise<void>;
    urlParams?: TSetUrlParamsArgs;
    pricingMode?: "auto" | "row" | "column";
    pricingHandlerBorder?: TBorder;
    pricingHandlerWidth?: string;
    pricingHandlerHeight?: string;
    pricingHandlerRadius?: TRadius;
    pricingHandlerColor?: string;
    pricingLineHeight?: string;
    pricingLineColor?: string;
    pricingHoverHandlerBorder?: TBorder;
    pricingHoverHandlerColor?: string;
    pricingActiveLineHeight?: string;
    pricingActiveLineColor?: string;
    pricingBtnColor?: string;
    pricingBtnTextColor?: string;
    pricingBtnHoverColor?: string;
    pricingBtnHoverTextColor?: string;
}

interface TagsFilterProps {
    onChange?: (args: TSetUrlParamsArgs) => Promise<void>;
    urlParams?: TSetUrlParamsArgs;
    tagHeight?: string;
    tagPadding?: TSide;
    tagRadius?: TRadius;
    tagBorder?: TBorder;
    tagFontSize?: string;
    tagBgColor?: string;
    tagTextColor?: string;
    tagActiveBorder?: TBorder;
    tagActiveBgColor?: string;
    tagActiveTextColor?: string;
}

interface GridSorterProps {
    gridSorterBgColor?: string;
    gridSorterFontSize?: string;
    gridSorterRadius?: TRadius;
    gridSorterPadding?: TSide;
    gridSorterMargin?: TSide;
    gridSorterColor?: string;
    gridSorterPrimaryColor?: string;
    gridSorterPrimaryFontSize?: string;
    gridSorterSelectBgColor?: string;
    gridSorterSelectColor?: string;
    gridSorterSelectBorder?: TBorder;
    gridSorterSelectRadius?: TRadius;
}

interface IXCategoryFilterProps extends IXGridProps, ColorPickerProps, PricingFilterProps, CheckboxFilterProps, TagsFilterProps, GridSorterProps {
    filterPosition?: "left" | "right";
    filterPadding?: TSide;
    fontFamily?: string;
    fontSize?: string;
    textColor?: string;
    primaryColor?: string;
    divider?: number;
    sectionGap?: string;
    filterBgColor?: string;
    filterWidth?: string;
    showCount?: boolean;
    titleFontSize?: string;
    titleFontWeight?: TFontWeight;
    titleFontStyle?: TFontStyle;
    titleColor?: string;
    titleBgColor?: string;
    titleHeight?: string;
}
declare type TXCategoryFilterProps = {
    [breakpoint in TBreakpointLabels]?: IXCategoryFilterProps;
};
interface XCategoryFilterProps {
    config?: IXSectionBase;
    props?: TXCategoryFilterProps;
    dataFetching?: IDataFetching;
}
interface XCategoryFilterSection extends XCategoryFilterProps {
    name: "XCategoryFilter";
}

declare type TReviewMode = "none" | "number" | "full";

interface IXProductDetailsProps extends IXGridProps {
    previewPosition?: "left" | "right" | "top";
    previewMode?: "carousel-left" | "carousel-bottom" | "carousel-right" | "grid" | "list";
    detailsGap?: string;
    detailsGroupMode?: "column" | "row";
    textColor?: string;
    textFontSize?: string;
    titleColor?: string;
    titleFontSize?: string;
    titleFontWeight?: TFontWeight;
    titleLetterSpacing?: string;
    nameFontSize?: string;
    nameColor?: string;
    nameFontFamily?: string;
    nameFontStyle?: TFontStyle;
    nameFontWeight?: TFontWeight;
    priceFontSize?: string;
    priceColor?: string;
    priceFontFamily?: string;
    priceFontStyle?: TFontStyle;
    priceFontWeight?: TFontWeight;
    discountFontSize?: string;
    discountColor?: string;
    discountFontFamily?: string;
    discountFontStyle?: TFontStyle;
    discountTextDecoration?: TTextDecoration;
    discountFontWeight?: TFontWeight;
    showReviews?: boolean;
    starIconColor?: string;
    starIconSize?: string;
    starCountMode?: TReviewMode;
    btnFontFamily?: string;
    btnFontSize?: string;
    btnBgColor?: string;
    btnTextColor?: string;
    btnHeight?: string;
    btnWidth?: string;
    btnRadius?: TRadius;
    btnBorder?: TBorder;
    btnHoverBgColor?: string;
    btnHoverTextColor?: string;
    colorPickerBorder?: TBorder;
    colorPickerSize?: string;
    toggleFontFamily?: string;
    toggleFontSize?: string;
    toggleRadius?: TRadius;
    toggleWidth?: string;
    toggleHeight?: string;
    toggleSpacing?: string;
    toggleBorder?: TBorder;
    toggleBgColor?: string;
    toggleTextColor?: string;
    toggleActiveBorder?: TBorder;
    toggleActiveBgColor?: string;
    toggleActiveTextColor?: string;
    selectFontFamily?: string;
    selectFontSize?: string;
    selectHeight?: string;
    selectWidth?: string;
    selectBorder?: TBorder;
    selectTextColor?: string;
    inputContainerBgColor?: string;
    inputContainerBorder?: TBorder;
    inputContainerRadius?: TRadius;
    inputMode?: "arrow" | "minus_plus";
    inputFontFamily?: string;
    inputFontSize?: string;
    inputHeight?: string;
    inputWidth?: string;
    inputBorder?: TBorder;
    inputTextColor?: string;
    inputBtnSize?: string;
    inputBtnRadius?: TRadius;
    inputBtnBgColor?: string;
    inputBtnTextColor?: string;
    inputBtnHoverBgColor?: string;
    inputBtnHoverTextColor?: string;
}
declare type TXProductDetailsProps = {
    [breakpoint in TBreakpointLabels]?: IXProductDetailsProps;
};
interface XProductDetailsProps {
    config?: IXSectionBase;
    props?: TXProductDetailsProps;
    dataFetching?: IDataFetching;
}
interface XProductDetailsSection extends XProductDetailsProps {
    name: "XProductDetails";
}

interface IXBreadcrumbProps extends IXElementBaseProps {
    /**
     * MAKE THIS AUTOMATIQUE
     */
    path?: TUrlPath;
    /** THIS IS DYNAMIC */
    query?: {
        [field: string]: any;
    };
    showHomeIcon?: boolean;
    showHomeLabel?: boolean;
    separator?: "›" | "/";
    fontFamily?: string;
    fontSize?: string;
    fontWeight?: TFontWeight;
    textColor?: string;
    linkColor?: string;
    linkDecoration?: TTextDecoration;
    linkHoverColor?: string;
    linkHoverDecoration?: TTextDecoration;
}
declare type TXBreadcrumbProps = {
    [breakpoint in TBreakpointLabels]?: IXBreadcrumbProps;
};
interface XBreadcrumbProps {
    config?: IXElementBase;
    props?: TXBreadcrumbProps;
}
interface XBreadcrumbElement extends XBreadcrumbProps {
    name: "XBreadcrumb";
}

interface IXTextProps extends IXElementBaseProps {
    text?: string;
    tag?: "body1" | "body2" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "caption" | "overline";
    fontFamily?: string;
    fontWeight?: TFontWeight;
    fontStyle?: TFontStyle;
    color?: string;
    lineHeight?: string;
    letterSpacing?: string;
    fontSize?: string;
    textAlign?: TTextAlign;
    textDecoration?: TTextDecoration;
}
declare type TXTextProps = {
    [breakpoint in TBreakpointLabels]?: IXTextProps;
};
interface XTextProps {
    config?: IXElementBase;
    props?: TXTextProps;
}
interface XTextElement extends XTextProps {
    name: "XText";
}

interface IXButtonProps extends IXTextProps {
    href?: TUrlPath;
    badgeMode?: "none" | "text" | "bubble" | "dot";
    badgeDataType?: "CART" | "FAVORITE";
    badgeColor?: string;
    badgeTextColor?: string;
    alignItems?: TAlignItems;
    justifyContent?: TJustifyContent;
    boxShadow?: string;
    hoverBorder?: TBorder;
    hoverRadius?: TRadius;
    hoverBgColor?: string;
    hoverColor?: string;
    hoverFontSize?: string;
    hoverTextDecoration?: TTextDecoration;
    icon?: string;
    iconPosition?: "left" | "right";
    /**
     * @todo to select in build icon pack
     */
    iconPack?: string;
    /**
     * @todo implement dynamic icon import
     */
    iconClassName?: string;
    iconColor?: string;
    iconFontSize?: string;
}
declare type TXButtonProps = {
    [breakpoint in TBreakpointLabels]?: IXButtonProps;
};
interface XButtonProps {
    config?: IXElementBase;
    props?: TXButtonProps;
}
interface XButtonElement extends XButtonProps {
    name: "XButton";
}

declare type TXFormMode = "contact-us" | "newsletter";
declare type TXFormInputType = "material-standard" | "material-outlined" | "material-filled" | "inline" | "block" | "no-label";
interface IFormInput {
    /**
     * INPUT PROPS
     */
    inputDesign?: TXFormInputType;
    inputHeight?: string;
    inputTextFontSize?: string;
    inputTextColor?: string;
    inputTextFontWeight?: TFontWeight;
    inputBgColor?: string;
    inputRadius?: TRadius;
    inputBorder?: TBorder;
    inputFocusBgColor?: string;
    inputFocusBorder?: TBorder;
    /**
     * LABEL OPTIONS
     */
    shrinkLabel?: boolean;
    labelFontSize?: string;
    labelColor?: string;
    labelFontWeight?: TFontWeight;
    labelWidth?: string;
    labelTextAlign?: TTextAlign;
    labelVerticalAlign?: TAlignItems;
}
interface IXFormProps extends IXElementBaseProps, IFormInput {
    type?: TXFormMode;
    gap?: string;
    /**
     * BUTTON PROPS
     */
    btnText?: string;
    btnTextFontSize?: string;
    btnTextColor?: string;
    btnTextFontWeight?: TFontWeight;
    btnWidth?: string;
    btnHeight?: string;
    btnMargin?: TSide;
    btnRadius?: TRadius;
    btnBorder?: TBorder;
    btnBgColor?: string;
    btnHoverTextColor?: string;
    btnHoverBgColor?: string;
    btnHoverBorder?: TBorder;
}
declare type TXFormProps = {
    [breakpoint in TBreakpointLabels]?: IXFormProps;
};
interface XFormProps {
    config?: IXElementBase;
    props?: TXFormProps;
}
interface XFormElement extends XFormProps {
    name: "XForm";
}

interface IXMapProps extends IXElementBaseProps {
    src?: string;
}
declare type TXMapProps = {
    [breakpoint in TBreakpointLabels]?: IXMapProps;
};
interface XMapProps {
    config?: IXElementBase;
    props?: TXMapProps;
}
interface XMapElement extends XMapProps {
    name: "XMap";
}

interface IXRatingProps extends IXElementBaseProps {
    editable?: boolean;
    reviewCountMode?: TReviewMode;
    /**
     * REMOVE THIS FROM THE COMPONENT
     * AND ADD THIS DYNAMICALLY
     */
    initialRate?: number;
    /**
     * REMOVE THIS FROM THE COMPONENT
     * AND ADD THIS DYNAMICALLY
     */
    reviewCount?: number;
    color?: string;
    fontFamily?: string;
    fontWeight?: TFontWeight;
    textAlign?: TTextAlign;
    fontSize?: string;
}
declare type TXRatingProps = {
    [breakpoint in TBreakpointLabels]?: IXRatingProps;
};
interface XRatingProps {
    config?: IXElementBase;
    props?: TXRatingProps;
}
interface XRatingElement extends XRatingProps {
    name: "XRating";
}

declare type TElementName = "XText" | "XButton" | "XLink" | "XImage" | "XBreadcrumb" | "XColorPicker" | "XRating" | "XForm" | "XPricing" | "XCategoryList" | "XOptionChoice" | "XIcon" | "XMap" | "XSearch" | "XProductDetails" | "XCategoryFilter";

declare type TComponentType = XTextElement | XButtonElement | XRatingElement | XStackSection | XGridSection | XCarouselSection | XCategoryFilterSection | XProductDetailsSection | XHeaderElement | XFooterElement | XArticleElement | XFormElement | XMapElement | XImageElement | XIconElement | XBreadcrumbElement;
declare type TComponentName = TElementName | TContainerName;

interface IXArticleValue {
    name?: string;
    price?: number;
    discount?: number;
    qty?: number;
    rate?: number;
    rateCount?: number;
    images?: string[];
    badge?: string;
    categories?: {
        label?: string;
        id?: string;
    }[];
}
interface IXArticleProps extends IXElementBaseProps {
    /**
     * IMAGES
     */
    imageTransition?: "none" | "fade" | "zoom_out";
    imageHeight?: string;
    imageRadius?: TRadius;
    /**
     * FLOATING BADGES
     */
    badgePosition?: TSide;
    badgeColor?: string;
    badgeWidth?: string;
    badgeHeight?: string;
    badgeTextColor?: string;
    badgeRadius?: TRadius;
    badgeFontWeight?: TFontWeight;
    badgeFontSize?: string;
    /**
     * FLOATING BUTTON
     */
    btnGroupTransition?: string;
    btnGroupDirection?: "row" | "column";
    btnGroupPosition?: TSide;
    btnGroupColor?: string;
    btnGroupGap?: string;
    btnGroupMargin?: TSide;
    btnGroupPadding?: TSide;
    btnGroupHoverPosition?: TSide;
    btnWidth?: string;
    btnHeight?: string;
    btnColor?: string;
    btnTextColor?: string;
    btnRadius?: TRadius;
    btnBorder?: TBorder;
    btnHoverColor?: string;
    btnHoverTextColor?: string;
    btnHoverRadius?: TRadius;
    btnHoverBorder?: TBorder;
    contentPadding?: TSide;
    contentColor?: string;
    contentPosition?: TJustifyContent;
    contentGap?: string;
    categoryColor?: string;
    categoryFontFamily?: string;
    categoryFontSize?: string;
    categoryLetterSpacing?: string;
    categoryFontWeight?: TFontWeight;
    categoryHoverColor?: string;
    nameColor?: string;
    nameFontFamily?: string;
    nameFontSize?: string;
    nameLetterSpacing?: string;
    nameFontWeight?: TFontWeight;
    nameHoverColor?: string;
    priceColor?: string;
    priceFontFamily?: string;
    priceFontSize?: string;
    priceLetterSpacing?: string;
    priceFontWeight?: TFontWeight;
    discountColor?: string;
    discountFontFamily?: string;
    discountFontSize?: string;
    discountLetterSpacing?: string;
    discountFontWeight?: TFontWeight;
    discountTextDecoration?: TTextDecoration;
    ratingColor?: string;
}
declare type TXArticleProps = {
    [breakpoint in TBreakpointLabels]?: IXArticleProps;
};
interface XArticleProps extends IXCommonBase {
    /**
     * DATABASE DATA
     */
    value?: IXArticleValue;
    /**
     * CONFIGURATION OF THE GRID
     */
    props?: TXArticleProps;
    config?: IXCommonBase;
    initData?: TXArticleProps;
    elements?: TComponentType[];
}
interface XArticleElement extends XArticleProps {
    name: "XArticle";
}
interface IArticleData {
    id: string;
    name: string;
    description: string;
    qty: number;
    price: number;
    discount?: number;
    initialRate?: number;
    optionsIds?: string[];
    images: string[];
    isInfinite?: boolean;
    badgeId?: string;
    badge?: {
        name: string;
    };
    userId?: string;
    businessId?: string;
    createdAt?: Date;
    updatedAt?: Date;
    category: {
        name: string;
        id: string;
    };
    categoryId?: string;
    rate?: number;
    options?: IOptionData[];
}

interface XPageProps {
    path?: TUrlPath;
    initPage?: {
        [path in TUrlPath]?: TComponentType[];
    };
    initHeader?: TXHeaderProps;
    initFooter?: TXFooterProps;
    initCommon?: TComponentType[];
    children?: React__default.ReactNode;
}

export { IXoraiaConfig as I, TUrlPath as T, XPageProps as X, TComponentType as a, TSetUrlParamsArgs as b, IArticleData as c, XArticleProps as d, TXFooterProps as e, TXHeaderProps as f, TApiFetcherArticlesArgs as g, IDataFetching as h, TImageComponent as i, TIconComponent as j, TAPIHandler as k, ICategoryData as l, IBadgeData as m, IOptionData as n, TApiFetcher as o, TSetUrlParams as p, useXoraiaValue as q, useXoraiaUpdater as r, TComponentName as s, useXoraia as u };