@veeqo/ui 0.0.7 → 0.0.9

package/dist/types/components/DataTableExp/types.d.ts

@@ -0,0 +1,116 @@
+import { ReactNode } from 'react';
+import { Size } from '../Stack/types';
+export type BorderType = 'all' | 'vertical' | 'none';
+export type ScrollPosition = 'none' | 'start' | 'middle' | 'end';
+export type RowState = {
+    selected: boolean;
+    expanded: boolean;
+    disabled: boolean;
+};
+export type ColumnId = string | number;
+export type ColumnAlignment = 'left' | 'center' | 'right';
+export type ColumnOverflow = 'none' | 'wrap' | 'truncate';
+export type ColumnPinned = 'left' | 'right' | 'none';
+export type ColumnSpacing = Size;
+export type ColumnWidth = number | string;
+export type ColumnWidthFixed = ColumnWidth;
+export type ColumnWidthBounded = {
+    min?: ColumnWidth;
+    max?: ColumnWidth;
+};
+export type ColumnConfig = {
+    id: ColumnId;
+    align?: ColumnAlignment;
+    hidden?: boolean;
+    icon?: Omit<ReactNode, string>;
+    pinned?: ColumnPinned;
+    sortable?: boolean;
+    spacing?: ColumnSpacing;
+    span?: number;
+    title?: string;
+    tooltip?: string;
+    width?: ColumnWidthFixed | ColumnWidthBounded;
+    renderCell: CellRenderer;
+    renderFooter?: FooterRenderer;
+    renderHeader?: HeaderRenderer;
+    renderNestedCell?: NestedCellRenderer;
+};
+export type ColumnConfigs = Array<ColumnConfig>;
+export declare enum SortDirection {
+    ascending = "ascending",
+    descending = "descending"
+}
+export type SortDirectionType = keyof typeof SortDirection;
+export type SortState = {
+    columnId: ColumnId;
+    direction: SortDirection;
+};
+export type SortChangeHandler = (sortState: SortState) => void;
+export type RowId = number | string;
+export interface NestedTableRow {
+    id: RowId;
+    data: any;
+}
+export type NestedTableRows = Array<NestedTableRow>;
+export interface TableRow {
+    id: RowId;
+    data: any;
+    nestedRows?: NestedTableRows;
+    accentColor?: string;
+    e2eClassName?: string;
+}
+export type TableRows = Array<TableRow>;
+export interface HeaderProps extends React.HtmlHTMLAttributes<HTMLTableCellElement> {
+    id: string;
+    align?: ColumnAlignment;
+    spacing?: ColumnSpacing;
+    span?: number;
+}
+export interface RendererHeaderProps extends HeaderProps {
+    key: string;
+}
+export interface SelectionHeaderProps extends Omit<HeaderProps, 'onChange'> {
+    selected: boolean;
+    indeterminate: boolean;
+    onChange: (selected: boolean, value: RowId | undefined) => void;
+    selectionMode: SelectionMode;
+}
+export type HeaderRenderer = (column: ColumnConfig, headerProps: RendererHeaderProps) => ReactNode;
+export type FooterRenderer = (column: ColumnConfig, footerProps: object) => ReactNode;
+export type CellRenderer = (row: TableRow, cellProps: object, actions: TableActions, rowState: RowState) => ReactNode;
+type ParentRowState = RowState;
+export type NestedCellRenderer = (nestedRow: NestedTableRow, cellProps: object, parentRowState: ParentRowState) => ReactNode;
+export type SetSelectedAction = (selected: boolean, rowId: RowId | undefined) => void;
+export type SetExpandedAction = (expanded: boolean, rowId: RowId | undefined) => void;
+export type TableActions = {
+    setSelected: SetSelectedAction;
+    setExpanded: SetExpandedAction;
+};
+export type BorderMode = 'full' | 'vertical' | 'none';
+export type CustomState = {
+    icon: ReactNode;
+    heading: string;
+    subheading?: string;
+};
+export type SelectionMode = 'single' | 'multiple';
+export type SelectionState = [RowId[], (rowIds: RowId[]) => void];
+export type StripingMode = 'row' | 'nested';
+export interface DataTableProps {
+    ActionBarSlot?: ReactNode;
+    borderMode?: BorderMode;
+    columns: ColumnConfigs;
+    disabledRowIds?: Array<RowId>;
+    enableStickyHeader?: boolean;
+    emptyState?: CustomState;
+    expandedRowIds?: Array<RowId>;
+    loading?: boolean;
+    loadingRowCount?: number;
+    onChangeSort?: SortChangeHandler;
+    rows: TableRows;
+    selectionMode?: SelectionMode;
+    selectionState?: SelectionState;
+    setExpanded?: SetExpandedAction;
+    sortState?: SortState;
+    stripingMode?: StripingMode;
+}
+export {};

package/dist/types/components/DataTableExp/utils/GetSortIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ColumnId, SortState } from '../types';
+type GetSortIconPropsParameters = {
+    sortState?: SortState;
+    columnId: ColumnId;
+    size: string;
+};
+export declare const GetSortIcon: ({ sortState, columnId, size }: GetSortIconPropsParameters) => React.JSX.Element;
+export {};

package/dist/types/components/DataTableExp/utils/alignmentToFlex.d.ts

@@ -0,0 +1,2 @@
+import { ColumnAlignment } from '../types';
+export declare function alignmentToFlex(align: ColumnAlignment): "center" | "flex-end" | "flex-start";

package/dist/types/components/DataTableExp/utils/generateTableCss.d.ts

@@ -0,0 +1,10 @@
+import { ColumnConfigs, ScrollPosition, StripingMode } from '../types';
+export type GenerateTableCssArgs = {
+    pinnedLeft: ColumnConfigs;
+    pinnedRight: ColumnConfigs;
+    cellWidths: Array<number>;
+    scrollPosition: ScrollPosition;
+    visible: ColumnConfigs;
+    stripingMode?: StripingMode;
+};
+export declare function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, visible, stripingMode, }: GenerateTableCssArgs): string;

package/dist/types/components/DataTableExp/utils/getNextSortState.d.ts

@@ -0,0 +1,7 @@
+import { ColumnId, SortState } from '../types';
+type GetNewSortValuesParameters = {
+    sortState: SortState;
+    columnId: ColumnId;
+};
+export declare function getNextSortState({ sortState, columnId }: GetNewSortValuesParameters): SortState;
+export {};

package/dist/types/components/DataTableExp/utils/getRowState.d.ts

@@ -0,0 +1,10 @@
+import type { RowId } from '../types';
+export declare const getRowState: (rowId: RowId, { selectedRowIds, expandedRowIds, disabledRowIds, }: Partial<{
+    selectedRowIds: RowId[];
+    expandedRowIds: RowId[];
+    disabledRowIds: RowId[];
+}>) => {
+    selected: boolean;
+    expanded: boolean;
+    disabled: boolean;
+};

package/dist/types/components/DataTableExp/utils/getRowState.test.d.ts

@@ -0,0 +1,10 @@
+import type { RowId } from '../types';
+export declare const getRowState: (rowId: RowId, { selectedRowIds, expandedRowIds, disabledRowIds, }: Partial<{
+    selectedRowIds: RowId[];
+    expandedRowIds: RowId[];
+    disabledRowIds: RowId[];
+}>) => {
+    selected: boolean;
+    expanded: boolean;
+    disabled: boolean;
+};

package/dist/types/components/DataTableExp/utils/index.d.ts

@@ -0,0 +1,6 @@
+export * from './alignmentToFlex';
+export * from './generateTableCss';
+export * from './getNextSortState';
+export * from './GetSortIcon';
+export * from './parseWidth';
+export * from './sumAll';

package/dist/types/components/DataTableExp/utils/parseWidth.d.ts

@@ -0,0 +1 @@
+export declare function parseWidth(width: any, fallback?: string): string;

package/dist/types/components/DataTableExp/utils/sumAll.d.ts

@@ -0,0 +1,2 @@
+export declare function sumAllBeforeIndex(array: Array<any>, index: number): any;
+export declare function sumAllAfterIndex(array: Array<any>, index: number): any;

package/dist/types/components/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type DescriptionListItem = {
+    term: string;
+    description: string | string[];
+};
+export interface DescriptionListProps {
+    items: DescriptionListItem[];
+    horizontal?: boolean;
+}
+export declare const DescriptionList: ({ items, horizontal }: DescriptionListProps) => React.JSX.Element;
+export {};

package/dist/types/components/DescriptionList/DescriptionList.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/DescriptionList/index.d.ts

@@ -0,0 +1 @@
+export { DescriptionList } from './DescriptionList';

package/dist/types/components/DetailPage/DetailPage.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from 'react';
+export interface PageHeaderProps {
+    renderHeader: (toggleSidebar: () => void, shouldShowSidebar?: boolean) => ReactNode;
+    children: ReactNode;
+}
+export declare const DetailPage: ({ renderHeader, children }: PageHeaderProps) => React.JSX.Element;

package/dist/types/components/DetailPage/DetailPage.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/DetailPage/index.d.ts

@@ -0,0 +1 @@
+export { DetailPage } from './DetailPage';

package/dist/types/components/DetailPage/styled.d.ts

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

package/dist/types/components/DimensionsInput/DimensionsInput.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { DimensionsProps } from './types';
+export declare const DimensionsInput: FC<DimensionsProps>;

package/dist/types/components/DimensionsInput/DimensionsInput.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/components/DimensionsInput/index.d.ts

@@ -0,0 +1 @@
+export { DimensionsInput } from './DimensionsInput';

package/dist/types/components/DimensionsInput/styled.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const Row: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledTextField: import("styled-components").StyledComponent<import("react").FC<Omit<import("../types").EventHandlerProps, "onChange" | "onKeyDown"> & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "onKeyDown" | "autoComplete"> & {
+    className?: string | undefined;
+    type?: import("../TextField/types").TextFieldType | undefined;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string | undefined;
+    step?: string | undefined;
+    name?: string | undefined;
+    min?: string | undefined;
+    max?: string | undefined;
+    pattern?: string | undefined;
+    hasError?: boolean | undefined;
+    size?: import("../types").ComponentSize | undefined;
+    multiline?: boolean | undefined;
+    rows?: string | undefined;
+    invalid?: boolean | undefined;
+    disabled?: boolean | undefined;
+    spellCheck?: boolean | undefined;
+} & import("../../hoc/withLabels/withLabels").WithLabelsProps>, any, {}, never>;
+declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    children?: import("react").ReactNode;
+    variant?: import("../Button/types").ButtonVariant | undefined;
+    size?: "base" | "sm" | undefined;
+    icon?: import("react").ReactNode;
+    dropdown?: boolean | undefined;
+    loading?: boolean | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+declare const Label: import("styled-components").StyledComponent<"span", any, {} & import("../Text/types").TextProps, never>;
+declare const Error: import("styled-components").StyledComponent<"span", any, {}, never>;
+declare const Hint: import("styled-components").StyledComponent<"span", any, {}, never>;
+export { Container, Row, Error, Hint, StyledTextField as TextField, StyledButton as Button, Label };

package/dist/types/components/DimensionsInput/types.d.ts

@@ -0,0 +1,15 @@
+import { ComponentSize } from '../types';
+export interface DimensionsProps {
+    size?: ComponentSize;
+    handleChangeHeight: (value: string) => void;
+    handleChangeWidth: (value: string) => void;
+    handleChangeLength: (value: string) => void;
+    label?: string;
+    hint?: string;
+    error?: string;
+    height: string;
+    width: string;
+    length: string;
+    unit?: string;
+    className?: string;
+}

package/dist/types/components/FilterTag/FilterTag.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FilterTagProps } from './types';
+export interface ClassNamesReturnPayload {
+    filterTagDropdown?: string;
+    container?: string;
+    cross?: string;
+}
+export declare const FilterTag: ({ className, e2eClassName, label, text, iconSlot, fill, content, footer, onClickAway, onClick, shouldCloseOnClickAway, }: FilterTagProps) => React.JSX.Element;

package/dist/types/components/FilterTag/FilterTag.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/FilterTag/index.d.ts

@@ -0,0 +1 @@
+export { FilterTag } from './FilterTag';

package/dist/types/components/FilterTag/styled.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Text } from '../Text';
+import { AnimatedDropdown } from '../AnimatedDropdown';
+declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const GroupLabel: import("styled-components").StyledComponent<"span", any, {} & import("../Text/types").TextProps, never>;
+declare const MainIcon: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {
+    shouldShow?: boolean | undefined;
+}, never>;
+declare const StyledCrossIcon: import("styled-components").StyledComponent<(props: any) => import("react").JSX.Element, any, {}, never>;
+declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const Header: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { Container, Text, AnimatedDropdown as Dropdown, GroupLabel, Content, Header, MainIcon, StyledCrossIcon as CrossIcon, };

package/dist/types/components/FilterTag/types.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface FilterTagProps {
+    className?: string;
+    e2eClassName?: string;
+    iconSlot?: Omit<ReactNode, string>;
+    label?: string;
+    text: string;
+    fill?: string;
+    content?: ReactNode;
+    footer?: ReactNode;
+    onClickAway?: (event: Event, closeDropdown?: () => void) => void;
+    onClick?: () => void;
+    shouldCloseOnClickAway?: boolean;
+}

package/dist/types/components/Grid/Grid.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/Grid/index.d.ts

@@ -0,0 +1,2 @@
+import { GridProps } from './types';
+export declare const Grid: import("styled-components").StyledComponent<"div", any, GridProps, never>;

package/dist/types/components/Grid/types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { Size } from '../Stack/types';
+export type GridProps = {
+    children: ReactNode;
+    className?: string;
+    columns: number;
+    spacing?: Size;
+};

package/dist/types/components/Image/Image.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Placement } from '@popperjs/core';
+type ImageProps = {
+    src: string;
+    alt?: string;
+    className?: string;
+    e2eClassName?: string;
+    width?: string;
+    height?: string;
+    previewWidth?: string;
+    previewHeight?: string;
+    previewPlacement?: Placement;
+    previewEnabled?: boolean;
+    placeholder?: React.ReactNode;
+    placeholderWidth?: string;
+    placeholderHeight?: string;
+    disablePlaceholder?: boolean;
+};
+export declare const Image: ({ src, alt, className, e2eClassName, width, height, previewWidth, previewHeight, previewPlacement, previewEnabled, placeholder, placeholderWidth, placeholderHeight, disablePlaceholder, }: ImageProps) => React.JSX.Element;
+export {};

package/dist/types/components/Image/Image.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/Image/components/PlaceholderImage.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const PlaceholderImage: (props: any) => React.JSX.Element;

package/dist/types/components/Image/components/styled.d.ts

@@ -0,0 +1,6 @@
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CommonImage: import("styled-components").StyledComponent<"img", any, {
+    previewEnabled?: boolean | undefined;
+}, never>;
+export declare const PreviewImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PreviewImage: import("styled-components").StyledComponent<"img", any, {}, never>;

package/dist/types/components/Image/index.d.ts

@@ -0,0 +1 @@
+export { Image } from './Image';

package/dist/types/components/Image/types.d.ts

@@ -0,0 +1,6 @@
+export type ClassNamesReturnPayload = {
+    container?: string;
+    image?: string;
+    placeholder?: string;
+    previewImageContainer?: string;
+};

package/dist/types/components/Image/utils.d.ts

@@ -0,0 +1,2 @@
+import { ClassNamesReturnPayload } from './types';
+export declare const generateClassNames: (prefix?: string) => ClassNamesReturnPayload;

package/dist/types/components/InputGroup/InputGroup.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/InputGroup/index.d.ts

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

package/dist/types/components/Loader/Grid.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface GridProps {
+    width?: number;
+    height?: number;
+    className?: string;
+    color?: string;
+    label?: string;
+}
+export declare const Grid: ({ width, height, className, color, label }: GridProps) => React.JSX.Element;

package/dist/types/components/Loader/Loader.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { LoaderProps } from './loaderTypes';
+export declare const Loader: ({ className, height, width, color, type, }: LoaderProps) => React.JSX.Element;

package/dist/types/components/Loader/Loader.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/Loader/TailSpin.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface TailSpinProps {
+    width?: number;
+    height?: number;
+    className?: string;
+    color?: string;
+    label?: string;
+}
+export declare const TailSpin: ({ width, height, className, color, label }: TailSpinProps) => React.JSX.Element;

package/dist/types/components/Loader/ThreeDots.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface ThreeDotsProps {
+    width?: number;
+    height?: number;
+    className?: string;
+    color?: string;
+    label?: string;
+}
+export declare const ThreeDots: ({ width, height, className, color, label }: ThreeDotsProps) => React.JSX.Element;

package/dist/types/components/Loader/index.d.ts

@@ -0,0 +1 @@
+export { Loader } from './Loader';

package/dist/types/components/Loader/loaderTypes.d.ts

@@ -0,0 +1,8 @@
+export type LoaderType = 'Grid' | 'TailSpin' | 'ThreeDots';
+export interface LoaderProps {
+    className?: string;
+    height?: number;
+    width?: number;
+    color?: string;
+    type?: LoaderType;
+}

package/dist/types/components/LoginWithAmazonButton/LoginWithAmazonButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const buttonDescription = "Log in with Amazon";
+/**
+ * Image used in this button is to comply with official
+ * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).
+ */
+export declare const LoginWithAmazonButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>>;

package/dist/types/components/LoginWithAmazonButton/LoginWithAmazonButton.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/dist/types/components/LoginWithAmazonButton/index.d.ts

@@ -0,0 +1 @@
+export { LoginWithAmazonButton } from './LoginWithAmazonButton';

package/dist/types/components/LoginWithAmazonButton/styled.d.ts

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

package/dist/types/components/Modal/Modal.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ModalProps } from './types';
+export declare const Modal: (props: ModalProps) => React.JSX.Element;

package/dist/types/components/Modal/Modal.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/components/Modal/components/Dialog/Dialog.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StyledDialog } from './styled';
+import { ModalVariants } from '../../types';
+type ModifiedDialogProps = {
+    variant: ModalVariants;
+} & React.ComponentProps<typeof StyledDialog>;
+export declare const Dialog: React.ForwardRefExoticComponent<Omit<ModifiedDialogProps, "ref"> & React.RefAttributes<HTMLDialogElement>>;
+export {};

package/dist/types/components/Modal/components/Dialog/constants.d.ts

@@ -0,0 +1,44 @@
+export declare const heightMap: {
+    readonly xs: "84vh";
+    readonly sm: "72vh";
+    readonly base: "84vh";
+    readonly lg: "96vh";
+};
+export declare const widthMap: {
+    readonly "640px": {
+        readonly xs: "60vw";
+        readonly sm: "72vw";
+        readonly base: "100vw";
+        readonly lg: "100vw";
+    };
+    readonly "720px": {
+        readonly xs: "60vw";
+        readonly sm: "72vw";
+        readonly base: "100vw";
+        readonly lg: "100vw";
+    };
+    readonly "960px": {
+        readonly xs: "48vw";
+        readonly sm: "56vw";
+        readonly base: "88vw";
+        readonly lg: "100vw";
+    };
+    readonly "1280px": {
+        readonly xs: "36vw";
+        readonly sm: "44vw";
+        readonly base: "72vw";
+        readonly lg: "88vw";
+    };
+    readonly "1440px": {
+        readonly xs: "32vw";
+        readonly sm: "40vw";
+        readonly base: "52vw";
+        readonly lg: "80vw";
+    };
+};
+export declare const fullScreenBreakpointMap: {
+    readonly xs: "640px";
+    readonly sm: "640px";
+    readonly base: "720px";
+    readonly lg: "960px";
+};

package/dist/types/components/Modal/components/Dialog/styled.d.ts

@@ -0,0 +1,24 @@
+import { ModalVariants } from '../../types';
+export declare const StyledDialog: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDialogElement, import("framer-motion").HTMLMotionProps<"dialog">>, any, {
+    initial: {
+        opacity: number;
+        y: number;
+        bounce: number;
+    };
+    exit: {
+        opacity: number;
+        y: number;
+        bounce: number;
+    };
+    animate: {
+        opacity: number;
+        y: number;
+        bounce: number;
+    };
+    transition: {
+        type: "tween";
+        duration: number;
+    };
+} & {
+    variant: ModalVariants;
+}, "animate" | "initial" | "exit" | "transition">;

package/dist/types/components/Modal/components/styled.d.ts

@@ -0,0 +1,5 @@
+export declare const NonScrollableBody: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export declare const MainSection: import("styled-components").StyledComponent<"section", any, {
+    isScrollable: boolean;
+    fullBleed: boolean;
+}, never>;

package/dist/types/components/Modal/index.d.ts

@@ -0,0 +1 @@
+export { Modal } from './Modal';

package/dist/types/components/Modal/types.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import { ButtonProps } from '../Button/types';
+export type ModalVariants = 'xs' | 'sm' | 'base' | 'lg';
+type BaseModalProps = {
+    shouldShow: boolean;
+    showHeaderCloseButton?: boolean;
+    fullBleed?: boolean;
+    variant?: ModalVariants;
+    onClose: () => void;
+    children: React.ReactNode;
+};
+type WithHeaderSlot = {
+    headerSlot: React.ReactNode;
+};
+type WithFooterSlot = {
+    footerSlot: React.ReactNode;
+};
+type DefaultHeaderOptions = {
+    headerTitle: string;
+    headerSubtitle?: string;
+};
+type ModalAction = {
+    label: string;
+} & ButtonProps;
+type DefaultFooterOptions = {
+    leftActions?: ModalAction[];
+    rightActions?: ModalAction[];
+};
+type HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;
+type FooterOptions = WithFooterSlot | DefaultFooterOptions;
+export type ModalProps = BaseModalProps & HeaderOptions & FooterOptions;
+/**
+ * Type guard to check if a header slot has been passed to the component.
+ */
+export declare const hasHeaderSlot: (props: ModalProps) => props is BaseModalProps & WithHeaderSlot & FooterOptions;
+/**
+ * Type guard to check if a footer slot has been passed to the component.
+ */
+export declare const hasFooterSlot: (props: ModalProps) => props is BaseModalProps & HeaderOptions & WithFooterSlot;
+export {};