@commerce7/admin-ui 2.0.46 → 2.0.48

package/lib/types/modal/index.d.ts

@@ -0,0 +1,9 @@
+import { ModalProps } from './Modal';
+import { ModalBodyProps } from './ModalBody';
+import { ModalFooterProps } from './ModalFooter';
+declare const Modal: (({ children, className, disableBodyScroll, onClose, visible, title, dataTestId, disableFocusLock, animate, animationDuration }: ModalProps) => import("react").JSX.Element | null) & {
+    ModalBody: ({ children, className }: ModalBodyProps) => import("react").JSX.Element;
+    ModalFooter: ({ children, className }: ModalFooterProps) => import("react").JSX.Element;
+};
+export type { ModalProps, ModalBodyProps, ModalFooterProps };
+export default Modal;

package/lib/types/modal/theme.d.ts

@@ -0,0 +1,12 @@
+export namespace colors {
+    namespace light {
+        let backgroundColor: string;
+        let borderColor: string;
+    }
+    namespace dark {
+        let backgroundColor_1: string;
+        export { backgroundColor_1 as backgroundColor };
+        let borderColor_1: string;
+        export { borderColor_1 as borderColor };
+    }
+}

package/lib/types/nav/Nav.d.ts

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+export interface NavProps {
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * Add className to the outermost element
+     */
+    className?: string;
+    /**
+     * Open or close Navigation menu
+     */
+    isOpen?: boolean;
+    /**
+     * Add test attribute to the element. Used internally for testing.
+     */
+    dataTestId?: string;
+}
+declare const Nav: ({ children, dataTestId, className, isOpen }: NavProps) => React.JSX.Element;
+export default Nav;

package/lib/types/nav/Nav.styles.d.ts

@@ -0,0 +1,15 @@
+declare const NavLinkIconStyles: import("styled-components").StyledComponent<{
+    ({ className, icon, label, onClick, size, variant, dataTestId }: import("../icon").IconProps): import("react").JSX.Element | null;
+    displayName: string;
+}, any, {}, never>;
+declare const NavLinkStyles: import("styled-components").StyledComponent<"a", any, {}, never>;
+declare const SubNavLinkStyles: import("styled-components").StyledComponent<"a", any, {}, never>;
+interface SubNavStylesProps {
+    isOpen: boolean;
+}
+declare const SubNavStyles: import("styled-components").StyledComponent<"div", any, SubNavStylesProps, never>;
+interface NavStylesProps {
+    isOpen: boolean;
+}
+declare const NavStyles: import("styled-components").StyledComponent<"nav", any, NavStylesProps, never>;
+export { NavLinkStyles, NavLinkIconStyles, SubNavLinkStyles, SubNavStyles, NavStyles };

package/lib/types/nav/NavLink.d.ts

@@ -0,0 +1,41 @@
+import React, { ReactNode, ComponentType, MouseEvent } from 'react';
+export interface NavLinkProps {
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * Add className to the outermost element
+     */
+    className?: string;
+    /**
+     * Add test attribute to the element. Used internally for testing.
+     */
+    dataTestId?: string;
+    /**
+     * Icon displayed on the left side of the menu link.
+     * Valid icons include all options from the `<Icon/>` component.
+     */
+    icon?: string;
+    /**
+     * The component to render as a replacement for `<a/>`.
+     * This can be used to pass in components from client-side routing libraries like react-router.
+     * If this property is set, all other props will be passed to the component.
+     */
+    component?: ComponentType<any> | string;
+    /**
+     * Callback fired when the component is clicked.
+     */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * The url to link to.
+     */
+    href?: string;
+    /**
+     * The active className to mark the component as active. Styling targets this classname.
+     */
+    activeClassName?: string;
+    [key: string]: any;
+}
+declare const NavLink: ({ children, className, component, icon, onClick, href, dataTestId, activeClassName, ...rest }: NavLinkProps) => React.JSX.Element;
+export default NavLink;

package/lib/types/nav/SubNav.d.ts

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+export interface SubNavProps {
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * Add className to the outermost element
+     */
+    className?: string;
+    /**
+     * Open or close Sub Navigation menu
+     */
+    isOpen?: boolean;
+    /**
+     * Add test attribute to the element. Used internally for testing.
+     */
+    dataTestId?: string;
+}
+declare const SubNav: (props: SubNavProps) => React.JSX.Element;
+export default SubNav;

package/lib/types/nav/SubNavLink.d.ts

@@ -0,0 +1,36 @@
+import React, { ReactNode, ComponentType, MouseEvent } from 'react';
+export interface SubNavLinkProps {
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * Add className to the outermost element
+     */
+    className?: string;
+    /**
+     * The component to render as a replacement for `<a/>`.
+     * This can be used to pass in components from client-side routing libraries like react-router.
+     * If this property is set, all other props will be passed to the component.
+     */
+    component?: ComponentType<any> | string;
+    /**
+     * Add test attribute to the element. Used internally for testing.
+     */
+    dataTestId?: string;
+    /**
+     * Callback fired when the component is clicked.
+     */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * The url to link to.
+     */
+    href?: string;
+    /**
+     * The active className to mark the component as active. Styling targets this classname.
+     */
+    activeClassName?: string;
+    [key: string]: any;
+}
+declare const SubNavLink: (props: SubNavLinkProps) => React.JSX.Element;
+export default SubNavLink;

package/lib/types/nav/index.d.ts

@@ -0,0 +1,11 @@
+import { NavProps } from './Nav';
+import { NavLinkProps } from './NavLink';
+import { SubNavProps } from './SubNav';
+import { SubNavLinkProps } from './SubNavLink';
+declare const Nav: (({ children, dataTestId, className, isOpen }: NavProps) => import("react").JSX.Element) & {
+    NavLink: ({ children, className, component, icon, onClick, href, dataTestId, activeClassName, ...rest }: NavLinkProps) => import("react").JSX.Element;
+    SubNav: (props: SubNavProps) => import("react").JSX.Element;
+    SubNavLink: (props: SubNavLinkProps) => import("react").JSX.Element;
+};
+export type { NavLinkProps, NavProps, SubNavLinkProps, SubNavProps };
+export default Nav;

package/lib/types/nav/theme.d.ts

@@ -0,0 +1,108 @@
+export namespace colors {
+    namespace light {
+        let backgroundColor: string;
+        let borderColor: string;
+        namespace primaryLink {
+            export namespace fontColor {
+                let _default: string;
+                export { _default as default };
+                export let active: string;
+                export let hover: string;
+            }
+            export namespace backgroundColor_1 {
+                let _default_1: string;
+                export { _default_1 as default };
+                let active_1: string;
+                export { active_1 as active };
+                let hover_1: string;
+                export { hover_1 as hover };
+            }
+            export { backgroundColor_1 as backgroundColor };
+            export namespace svgColor {
+                let _default_2: string;
+                export { _default_2 as default };
+                let active_2: string;
+                export { active_2 as active };
+                let hover_2: string;
+                export { hover_2 as hover };
+            }
+        }
+        namespace secondaryLink {
+            export namespace fontColor_1 {
+                let _default_3: string;
+                export { _default_3 as default };
+                let active_3: string;
+                export { active_3 as active };
+                let hover_3: string;
+                export { hover_3 as hover };
+            }
+            export { fontColor_1 as fontColor };
+            export namespace backgroundColor_2 {
+                let _default_4: string;
+                export { _default_4 as default };
+                let active_4: string;
+                export { active_4 as active };
+                let hover_4: string;
+                export { hover_4 as hover };
+            }
+            export { backgroundColor_2 as backgroundColor };
+        }
+    }
+    namespace dark {
+        let backgroundColor_3: string;
+        export { backgroundColor_3 as backgroundColor };
+        let borderColor_1: string;
+        export { borderColor_1 as borderColor };
+        export namespace primaryLink_1 {
+            export namespace fontColor_2 {
+                let _default_5: string;
+                export { _default_5 as default };
+                let active_5: string;
+                export { active_5 as active };
+                let hover_5: string;
+                export { hover_5 as hover };
+            }
+            export { fontColor_2 as fontColor };
+            export namespace backgroundColor_4 {
+                let _default_6: string;
+                export { _default_6 as default };
+                let active_6: string;
+                export { active_6 as active };
+                let hover_6: string;
+                export { hover_6 as hover };
+            }
+            export { backgroundColor_4 as backgroundColor };
+            export namespace svgColor_1 {
+                let _default_7: string;
+                export { _default_7 as default };
+                let active_7: string;
+                export { active_7 as active };
+                let hover_7: string;
+                export { hover_7 as hover };
+            }
+            export { svgColor_1 as svgColor };
+        }
+        export { primaryLink_1 as primaryLink };
+        export namespace secondaryLink_1 {
+            export namespace fontColor_3 {
+                let _default_8: string;
+                export { _default_8 as default };
+                let active_8: string;
+                export { active_8 as active };
+                let hover_8: string;
+                export { hover_8 as hover };
+            }
+            export { fontColor_3 as fontColor };
+            export namespace backgroundColor_5 {
+                let _default_9: string;
+                export { _default_9 as default };
+                let active_9: string;
+                export { active_9 as active };
+                let hover_9: string;
+                export { hover_9 as hover };
+            }
+            export { backgroundColor_5 as backgroundColor };
+        }
+        export { secondaryLink_1 as secondaryLink };
+    }
+}

package/lib/types/noRecords/NoRecords.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+type IconVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+export interface NoRecordsProps {
+    /**
+     * The title for the component.
+     */
+    title?: string;
+    /**
+     * The description for below the title.
+     */
+    description?: string;
+    /**
+     * The icon displayed.
+     */
+    icon?: string;
+    /**
+     * Add className to the outermost element.
+     */
+    className?: string;
+    /**
+     * Add test attribute to the element. Used internally for testing.
+     */
+    dataTestId?: string;
+    /**
+     * Set the visual property of the component.
+     */
+    iconVariant?: IconVariant;
+}
+declare const NoRecords: ({ className, dataTestId, title, description, icon, iconVariant }: NoRecordsProps) => React.JSX.Element;
+export default NoRecords;

package/lib/types/noRecords/NoRecords.styles.d.ts

@@ -0,0 +1,6 @@
+declare const StyledEmptyMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledHeading: import("styled-components").StyledComponent<{
+    ({ children, level, marginBottom, className, dataTestId }: import("../heading").HeadingProps): import("react").JSX.Element;
+    displayName: string;
+}, any, {}, never>;
+export { StyledEmptyMessage, StyledHeading };

package/lib/types/noRecords/index.d.ts

@@ -0,0 +1,3 @@
+import NoRecords, { NoRecordsProps } from './NoRecords';
+export type { NoRecordsProps };
+export default NoRecords;

package/lib/types/picture/Picture.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+interface PictureSource {
+    src?: string;
+    webp?: string;
+    avif?: string;
+}
+export interface PictureProps {
+    /**
+     * Add className to the outermost element.
+     */
+    className?: string;
+    /**
+     * Add test attribute to the element. Used internally for testing.
+     */
+    dataTestId?: string;
+    /**
+     * If supplied image wrapper will have this height (width stretches to 100% of container).
+     */
+    height?: number;
+    /**
+     * Image src path OR object for modern image formats
+     */
+    src?: string | PictureSource;
+    /**
+     * Alt text for the image
+     */
+    alt: string;
+}
+declare const Picture: (props: PictureProps) => React.JSX.Element;
+export default Picture;

package/lib/types/picture/Picture.styles.d.ts

@@ -0,0 +1,9 @@
+interface StyledPictureWrapperProps {
+    height?: number | null;
+}
+declare const StyledPictureWrapper: import("styled-components").StyledComponent<"div", any, StyledPictureWrapperProps, never>;
+interface StyledPictureProps {
+    height?: number | null;
+}
+declare const StyledPicture: import("styled-components").StyledComponent<"picture", any, StyledPictureProps, never>;
+export { StyledPicture, StyledPictureWrapper };

package/lib/types/picture/index.d.ts

@@ -0,0 +1,3 @@
+import Picture, { PictureProps } from './Picture';
+export type { PictureProps };
+export default Picture;

package/lib/types/pieChart/Label.d.ts

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+export interface LabelProps {
+    /**
+     * X-coordinate of the center
+     */
+    cx?: number;
+    /**
+     * Y-coordinate of the center
+     */
+    cy?: number;
+    /**
+     * Middle angle of the sector in degrees
+     */
+    midAngle?: number;
+    /**
+     * Inner radius of the pie chart
+     */
+    innerRadius?: number;
+    /**
+     * Outer radius of the pie chart
+     */
+    outerRadius?: number;
+    /**
+     * Percentage value represented by this sector
+     */
+    percent?: number;
+}
+/**
+ * Custom label component for pie chart sectors
+ * Displays the percentage value in the middle of each sector
+ */
+declare const Label: FC<LabelProps>;
+export default Label;

package/lib/types/pieChart/PieChart.d.ts

@@ -0,0 +1,76 @@
+import React, { FC, ReactElement } from 'react';
+import { PieLabel } from 'recharts';
+import { ContentType } from 'recharts/types/component/DefaultLegendContent';
+export interface PieChartProps {
+    /**
+     *  The source data array to render pie chart
+     */
+    data: {
+        name: string;
+        value: string | number;
+    }[];
+    /**
+     *  Set color code for each cell in the pie. Ex: ['#42ACF0', '#DF5F5F', '#BF9D36'];
+     */
+    colors: string[];
+    /**
+     * The percentage value of the chart's width or a fixed width.
+     */
+    width?: string | number;
+    /**
+     * The percentage value of the chart's height or a fixed height.
+     */
+    height?: string | number;
+    /**
+     * The inner radius of the pie's shape
+     */
+    innerRadius?: string | number;
+    /**
+     * The outer radius of the pie's shape
+     */
+    outerRadius?: string | number;
+    /**
+     * The prop to add positioning to PieChart. Refer: https://recharts.org/en-US/api/PieChart#margin
+     */
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    /**
+     * A component to render custom label in the pie chart
+     */
+    label?: PieLabel<any> | undefined;
+    /**
+     * The prop to add positioning to legend component. Refer: https://recharts.org/en-US/api/Legend#wrapperStyle
+     */
+    legendWrapperStyle?: React.CSSProperties | null;
+    /**
+     * A component to render custom legend in the pie chart
+     */
+    legend?: ContentType | undefined;
+    /**
+     * The prop to align legend items. Refer: https://recharts.org/en-US/api/Legend#verticalAlign
+     */
+    legendProps?: {
+        width?: number;
+        verticalAlign?: 'top' | 'middle' | 'bottom';
+        align?: 'left' | 'center' | 'right';
+        layout?: 'horizontal' | 'vertical';
+    } | null;
+    /**
+     * A component to render custom tooltip component. Refer: https://recharts.org/en-US/api/Tooltip#content
+     */
+    tooltip?: ReactElement;
+    /**
+     * Indicates whether the legend component is hidden
+     */
+    hideLegend?: boolean;
+    /**
+     * Indicates whether the tooltip component is hidden
+     */
+    hideTooltip?: boolean;
+}
+declare const PieChart: FC<PieChartProps>;
+export default PieChart;

package/lib/types/pieChart/Tooltip.d.ts

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+interface PayloadItem {
+    name: string;
+    value: string | number;
+    payload?: Record<string, any>;
+    dataKey?: string;
+    fill?: string;
+    [key: string]: any;
+}
+interface ToolTipProps {
+    /**
+     * Whether the tooltip is currently active (visible)
+     */
+    active?: boolean;
+    /**
+     * The data payload of the tooltip
+     */
+    payload?: PayloadItem[];
+}
+/**
+ * Custom tooltip component for pie charts
+ * Displays the name and value of the hovered segment
+ */
+declare const ToolTip: FC<ToolTipProps>;
+export type { ToolTipProps, PayloadItem };
+export default ToolTip;

package/lib/types/pieChart/index.d.ts

@@ -0,0 +1,3 @@
+import PieChart, { PieChartProps } from './PieChart';
+export type { PieChartProps };
+export default PieChart;

package/lib/types/progressBar/ProgressBar.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+interface ContentShape {
+    text?: string;
+    circleColor?: string;
+    progress?: number;
+}
+export interface ProgressBarProps {
+    /**
+     * Progress count of the bar.
+     */
+    progress?: number;
+    /**
+     * Add className to the outermost element.
+     */
+    className?: string;
+    /**
+     * Content data shape.
+     */
+    content?: ContentShape;
+    /**
+     * Color of the bar
+     */
+    color?: string;
+    /**
+     * Add test attribute to the element. Used internally for testing.
+     */
+    dataTestId?: string;
+}
+declare const ProgressBar: ({ progress, content, className, color, dataTestId }: ProgressBarProps) => React.JSX.Element;
+export default ProgressBar;

package/lib/types/progressBar/ProgressBar.styles.d.ts

@@ -0,0 +1,8 @@
+declare const StyledProgressBarWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledProgressBar: import("styled-components").StyledComponent<"div", any, {
+    progress: number;
+    color: string;
+}, never>;
+declare const StyledContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledProgressBarWrapper, StyledProgressBar, StyledContentWrapper, StyledContent };

package/lib/types/progressBar/index.d.ts

@@ -0,0 +1,3 @@
+import ProgressBar, { ProgressBarProps } from './ProgressBar';
+export type { ProgressBarProps };
+export default ProgressBar;

package/lib/types/progressBar/theme.d.ts

@@ -0,0 +1,15 @@
+export namespace colors {
+    namespace light {
+        namespace backgroundColor {
+            let _default: string;
+            export { _default as default };
+        }
+    }
+    namespace dark {
+        export namespace backgroundColor_1 {
+            let _default_1: string;
+            export { _default_1 as default };
+        }
+        export { backgroundColor_1 as backgroundColor };
+    }
+}

package/lib/types/radio/Radio.d.ts

@@ -0,0 +1,73 @@
+import React, { ChangeEvent, MouseEvent, ReactNode } from 'react';
+type RadioVariant = 'button' | 'default';
+type RadioSize = 'small' | 'medium' | 'large';
+export interface RadioProps {
+    /**
+     * Set the checked value of the element.
+     */
+    checked: boolean;
+    /**
+     * Add className to the outermost element.
+     */
+    className?: string;
+    /**
+     * Help text to describe the form field
+     */
+    description?: string;
+    /**
+     * Set the element to be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Show an error message and set the component styles to visually show an error.
+     */
+    errorMessage?: string;
+    /**
+     * Set the id of the element.
+     * The label uses this id to ensure htmlFor is set correctly.
+     */
+    id?: string;
+    /**
+     * The label for the component.
+     */
+    label?: string;
+    /**
+     * Callback onChange.
+     */
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Callback onClick, only used for button variant.
+     */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Set the element to be required.
+     * This will show an asterisk in the label and add 'required' to the DOM node.
+     */
+    required?: boolean;
+    /**
+     * The value of the element.
+     */
+    value: string;
+    /**
+     * Add test attribute to the element. Used internally for testing.
+     */
+    dataTestId?: string;
+    /**
+     * Radio Variant.
+     */
+    variant?: RadioVariant;
+    /**
+     * Radio Size - only used for button variant.
+     */
+    size?: RadioSize;
+    /**
+     * Icon for button variant only.
+     */
+    icon?: string;
+    /**
+     * Children for button variant only.
+     */
+    children?: ReactNode;
+}
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export default Radio;

package/lib/types/radio/Radio.styles.d.ts

@@ -0,0 +1,2 @@
+declare const StyledRadio: import("styled-components").StyledComponent<"span", any, {}, never>;
+export { StyledRadio };

package/lib/types/radio/index.d.ts

@@ -0,0 +1,3 @@
+import Radio, { RadioProps } from './Radio';
+export type { RadioProps };
+export default Radio;