@iress-oss/ids-components 5.20.2 → 6.0.0-alpha.1

package/dist/src/components/TabSet/index.d.ts

@@ -0,0 +1,5 @@
+export * from './TabSet';
+export * from './TabSet.styles';
+export * from './Tab/Tab';
+export * from './Tab/Tab.styles';
+export type { TabSetChangedEventDetail } from './TabSetProvider';

package/dist/src/components/TabSet/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/TabSet/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

package/dist/src/components/Table/Table.d.ts

@@ -0,0 +1,67 @@
+import { TableRowsProps } from './components/TableRows';
+import { ReactNode } from 'react';
+import { TableColumn } from './helpers/composeTableColumnDefs';
+import { IressStyledProps } from '../../types';
+export type IressTableProps<TRow extends object = never, TVal = never, E extends 'table' | 'tbody' = 'table'> = Omit<IressStyledProps<E>, 'border'> & {
+    /**
+     * If set to true, the table will have alternating row colors.
+     * This is useful for improving readability in tables with many rows.
+     */
+    alternate?: boolean;
+    /**
+     * Caption that describes the data in the table, required for accessibility.
+     */
+    caption: ReactNode;
+    /**
+     * Multiple table elements can be passed as children.
+     * Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+     */
+    children?: ReactNode;
+    /**
+     * A mapping of columns to be displayed in the table.
+     * If not provided, it will be automatically regenerated from the row data.
+     */
+    columns?: TableColumn<TRow, TVal>[];
+    /**
+     * Compact view of the table, used for tables with a lot of data.
+     */
+    compact?: boolean;
+    /**
+     * Content to be show when there is no rowData (columns must also be provided).
+     */
+    empty?: ReactNode;
+    /**
+     * When set to true, the table caption will be visually hidden.
+     */
+    hiddenCaption?: boolean;
+    /**
+     * When set to true, the table header (`<thead></thead>`) will be not be rendered.
+     * Only use with very simple tables.
+     */
+    hiddenHeader?: boolean;
+    /**
+     * When set to true, hovering over a row will trigger a UI change.
+     */
+    hover?: boolean;
+    /**
+     * If set to true, the table will not have borders between rows.
+     * This is useful for simpler tables where the row borders are not needed.
+     */
+    removeRowBorders?: boolean;
+    /**
+     * Add additional props to the row element.
+     * Can be a props map or a function that returns an props map. The function is called with the row data.
+     */
+    rowProps?: TableRowsProps<TRow>['rowProps'];
+    /**
+     * Each object in the array contains the data for a row.
+     * @default []
+     */
+    rows?: TRow[];
+    /**
+     * Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+     * @default 'row'
+     */
+    scope?: 'row' | 'col';
+};
+export declare const IressTable: <TRow extends object = never, TVal = never>({ alternate, caption, children, columns, compact, className, "data-testid": dataTestId, empty, hiddenCaption, hiddenHeader, hover, removeRowBorders, rowProps, rows, scope, ...restProps }: IressTableProps<TRow, TVal>) => import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/Table/Table.styles.d.ts

@@ -0,0 +1,23 @@
+export { table } from '../../styled-system/recipes';
+export declare const tableCell: import('../../styled-system/types').RecipeRuntimeFn<{
+    format: {
+        default: {
+            textAlign: "start";
+        };
+        number: {
+            '&&': {
+                textAlign: "end";
+            };
+        };
+        currency: {
+            '&&': {
+                textAlign: "end";
+            };
+        };
+    };
+    divider: {
+        true: {
+            borderInlineEnd: "table";
+        };
+    };
+}>;

package/dist/src/components/Table/TableBody/TableBody.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { IressTableProps } from '../Table';
+export interface IressTableBodyProps<TRow extends object = never, TVal = never> extends Omit<IressTableProps<TRow, TVal, 'tbody'>, 'alternate' | 'compact' | 'hover' | 'removeRowBorders'> {
+    /**
+     * Caption that describes the data in the inner table, required for accessibility.
+     * Used to open/close the inner table.
+     *
+     * **Note:** Do not include interactive elements inside the caption.
+     */
+    caption: ReactNode;
+    /**
+     * When set to true, the table caption will be visually hidden.
+     * If set, the inner table will always be open.
+     */
+    hiddenCaption?: boolean;
+    /**
+     * Is called when table is opened.
+     */
+    onOpened?: () => void;
+    /**
+     * Is called when table is closed.
+     */
+    onClosed?: () => void;
+    /**
+     * When true, all rows will be visible, otherwise they are hidden.
+     */
+    open?: boolean;
+}
+export declare const IressTableBody: <TRow extends object = never, TVal = never>({ caption, children, columns, "data-testid": dataTestId, empty, hiddenCaption, hiddenHeader, onOpened, onClosed, open, rowProps, rows, scope, ...restProps }: IressTableBodyProps<TRow, TVal>) => import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/Table/TableFormattedValue/TableFormattedValue.d.ts

@@ -0,0 +1,25 @@
+import { CurrencyFormatterProps } from '../../../helpers/formatting/formatCurrency';
+import { ReactNode } from 'react';
+export interface IressTableFormattedValueProps<TRow extends object, TVal = unknown> {
+    /**
+     * The currency code to prefix to the value if `format` is set to currency.
+     * @default { locale: 'en-AU', currencyCode: 'AUD' }
+     */
+    currencyFormatOptions?: Omit<CurrencyFormatterProps, 'value'>;
+    /**
+     * Formats the cell content.
+     * To use the in-built formatters, set this to: string, number, date, currency, percent.
+     * Use a custom formatter by passing a function that returns a ReactNode.
+     */
+    format?: TableCellFormats | ((value: TVal, row?: TRow) => ReactNode);
+    /**
+     * The row data.
+     */
+    row?: TRow;
+    /**
+     * The value to format.
+     */
+    value: TVal;
+}
+export type TableCellFormats = 'string' | 'number' | 'date' | 'shortDate' | 'isoDateTime' | 'relativeTime' | 'currency' | 'percent';
+export declare const IressTableFormattedValue: <TRow extends object, TVal = unknown>({ currencyFormatOptions, format, row, value, }: IressTableFormattedValueProps<TRow, TVal>) => string | number | bigint | boolean | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | TVal | null | undefined;

package/dist/src/components/Table/TableProvider.d.ts

@@ -0,0 +1,14 @@
+import { Context, PropsWithChildren } from 'react';
+import { Table } from '@tanstack/react-table';
+import { TableColumn } from './helpers/composeTableColumnDefs';
+export interface TableProviderProps<TRow extends object, TVal = unknown> extends PropsWithChildren {
+    columns?: TableColumn<TRow, TVal>[];
+    rows: TRow[];
+}
+export interface TableContextValue<TRow extends object, TVal = unknown> {
+    api: Table<TRow>;
+    getColumnByKey: (key: string) => TableColumn<TRow, TVal> | undefined;
+}
+export declare function getTableContext<TRow extends object, TVal = unknown>(): Context<TableContextValue<TRow, TVal>>;
+export declare const TableContext: Context<TableContextValue<object, unknown> | undefined>;
+export declare const TableProvider: <TRow extends object, TVal = unknown>({ children, columns, rows, }: TableProviderProps<TRow, TVal>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Table/components/TableBodyCell.d.ts

@@ -0,0 +1,12 @@
+import { IressTestProps } from '../../../interfaces';
+import { PropsWithChildren } from 'react';
+import { Cell } from '@tanstack/react-table';
+export interface TableBodyCellProps<TRow extends object = never> extends PropsWithChildren, IressTestProps {
+    additionalHeaders?: string;
+    cellApi: Pick<Cell<TRow, unknown>, 'column' | 'row' | 'id'>;
+    hiddenHeader?: boolean;
+    index: number;
+    scope?: 'row' | 'col';
+    tableId: string;
+}
+export declare const TableBodyCell: <TRow extends object = never>({ additionalHeaders, cellApi, children, hiddenHeader, index, scope, tableId, ...restProps }: TableBodyCellProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Table/components/TableEmpty.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare const TableEmpty: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/Table/components/TableHeader.d.ts

@@ -0,0 +1,8 @@
+import { AriaRelationshipProps } from '../../../hooks/useAriaRelationship';
+export interface TableHeaderProps extends Partial<Pick<AriaRelationshipProps, 'setControlViaRef'>> {
+    additionalHeaders?: string;
+    className?: string;
+    tableId: string;
+    testId?: string;
+}
+export declare const TableHeader: ({ additionalHeaders, className, setControlViaRef, tableId, testId, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element[] | null | undefined;

package/dist/src/components/Table/components/TableHeaderCell.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+import { IressTestProps } from '../../../interfaces';
+import { Column } from '@tanstack/react-table';
+export interface TableHeaderCellProps extends PropsWithChildren, IressTestProps {
+    additionalHeaders?: string;
+    columnApi: Pick<Column<object, unknown>, 'getCanSort' | 'toggleSorting' | 'id'>;
+    tableId: string;
+}
+export declare const TableHeaderCell: ({ additionalHeaders, children, columnApi, tableId, ...restProps }: TableHeaderCellProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Table/components/TableRows.d.ts

@@ -0,0 +1,12 @@
+import { Row } from '@tanstack/react-table';
+import { IressStyledProps } from '../../../types';
+import { AriaRelationshipProps } from '../../../hooks/useAriaRelationship';
+export interface TableRowsProps<TRow extends object = never> extends Partial<Pick<AriaRelationshipProps, 'setControlViaRef'>> {
+    additionalHeaders?: string;
+    hiddenHeader?: boolean;
+    scope?: 'row' | 'col';
+    rowProps?: IressStyledProps<'tr'> | ((row: Row<TRow>) => IressStyledProps<'tr'>);
+    tableId: string;
+    testId?: string;
+}
+export declare const TableRows: <TRow extends object = never>({ additionalHeaders, hiddenHeader, rowProps, setControlViaRef, scope, tableId, testId, }: TableRowsProps<TRow>) => import("react/jsx-runtime").JSX.Element[] | null;

package/dist/src/components/Table/components/TableSortButton.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+import { ColumnSort } from '@tanstack/react-table';
+export interface TableSortButtonProps extends PropsWithChildren {
+    label?: string;
+    noWrap?: boolean;
+    sort?: ColumnSort;
+    toggleSorting: () => void;
+}
+export declare const TableSortButton: ({ children, label, noWrap, sort, toggleSorting, }: TableSortButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Table/helpers/composeTableColumnDefs.d.ts

@@ -0,0 +1,56 @@
+import { SortDirection, SortingFnOption } from '@tanstack/react-table';
+import { TableCellFormats } from '../TableFormattedValue/TableFormattedValue';
+import { IressCSSProps } from '../../../interfaces';
+import { ReactNode } from 'react';
+export interface TableColumn<TRow extends object, TVal = never> extends Pick<IressCSSProps, 'bg' | 'color' | 'noGutter' | 'srOnly' | 'textAlign' | 'textStyle'> {
+    /**
+     * The currency code to prefix to the value if `format` is set to currency.
+     * @default $
+     */
+    currencyCode?: string;
+    /**
+     * When set to true, a divider will be rendered after the column.
+     */
+    divider?: boolean;
+    /**
+     * Formats the cell content.
+     * To use the in-built formatters, set this to: string, number, date, currency, percent.
+     * Use a custom formatter by passing a function that returns a ReactNode.
+     */
+    format?: TableCellFormats | ((value: TVal, row?: TRow) => ReactNode);
+    /**
+     * The unique key for the column.
+     */
+    key: string;
+    /**
+     * The label for the column header.
+     */
+    label?: ReactNode;
+    /**
+     * Whether the column should wrap text or not. May need to be false if the column heading is long.
+     * @default true
+     */
+    noWrap?: boolean;
+    /**
+     * When set to true, the column will be sortable.
+     * Setting it to either `asc` or `desc` will set the initial sort order.
+     */
+    sort?: boolean | SortDirection;
+    /**
+     * The sorting function to use when sorting the column.
+     * If not provided, the default sorting function will be used based on the original row data.
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#sortingfn)
+     + @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
+     */
+    sortFn?: SortingFnOption<TRow>;
+    /**
+     * Text to be read by a screen reader when a column is sortable (but not currently sorted).
+     * @default sortable
+     */
+    sortableText?: string;
+    /**
+     * The width of the column.
+     */
+    width?: string;
+}
+export declare const composeTableColumnDefs: <TRow extends object, TVal = never>(rows: TRow[], columns?: TableColumn<TRow, TVal>[]) => import('@tanstack/table-core').AccessorFnColumnDef<TRow, TRow[keyof TRow]>[];

package/dist/src/components/Table/helpers/composeTableInitialSorting.d.ts

@@ -0,0 +1,3 @@
+import { ColumnSort } from '@tanstack/react-table';
+import { TableColumn } from './composeTableColumnDefs';
+export declare const composeTableInitialSorting: <TRow extends object, TVal = unknown>(columns?: TableColumn<TRow, TVal>[]) => ColumnSort[];

package/dist/src/components/Table/hooks/useTableColumnSort.d.ts

@@ -0,0 +1,13 @@
+import { Column } from '@tanstack/react-table';
+import { TableSortButtonProps } from '../components/TableSortButton';
+export interface TableColumnSortHookProps {
+    columnApi?: Pick<Column<object, unknown>, 'getCanSort' | 'toggleSorting'>;
+    columnKey: string;
+}
+export interface TableColumnSortHookReturn {
+    buttonProps: TableSortButtonProps;
+    columnProps: {
+        'aria-sort'?: 'none' | 'ascending' | 'descending';
+    };
+}
+export declare const useTableColumnSort: ({ columnApi, columnKey, }: TableColumnSortHookProps) => TableColumnSortHookReturn | undefined;

package/dist/src/components/Table/hooks/useTableColumnStyles.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+import { Column } from '@tanstack/react-table';
+export interface TableColumnStylesHookProps {
+    columnApi?: Pick<Column<object, unknown>, 'getCanSort' | 'toggleSorting'>;
+    columnKey: string;
+}
+export interface TableColumnStylesHookReturn {
+    className: string;
+    style: CSSProperties;
+}
+export declare const useTableColumnStyles: ({ columnKey, }: TableColumnStylesHookProps) => TableColumnStylesHookReturn | undefined;

package/dist/src/components/Table/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Table';
+export * from './Table.styles';
+export * from './TableBody/TableBody';
+export * from './TableFormattedValue/TableFormattedValue';
+export type { TableColumn } from './helpers/composeTableColumnDefs';

package/dist/src/components/Table/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/Table/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

package/dist/src/components/Tag/Tag.d.ts

@@ -0,0 +1,26 @@
+import { FocusEvent, ReactNode, SyntheticEvent } from 'react';
+import { IressTextProps } from '../Text';
+export interface IressTagProps extends Omit<IressTextProps<'span'>, 'element'> {
+    /**
+     * Contents of the tag.
+     */
+    children?: ReactNode;
+    /**
+     * You can completely replace the delete button to provide your own functionality.
+     * When this is provided, `deleteButtonText` will not be used and `onDelete` and `onDeleteButtonBlur` will not be called.
+     */
+    deleteButton?: ReactNode;
+    /**
+     * Screen reader text for delete button
+     */
+    deleteButtonText?: string;
+    /**
+     * Callback triggered when the tag is deleted
+     */
+    onDelete?: (children: string, e: SyntheticEvent<HTMLButtonElement>) => void;
+    /**
+     * Callback triggered when the close button is blurred
+     */
+    onDeleteButtonBlur?: (e: FocusEvent<HTMLButtonElement>) => void;
+}
+export declare const IressTag: ({ children, className, "data-testid": dataTestId, deleteButton, deleteButtonText, onDelete, onDeleteButtonBlur, ...restProps }: IressTagProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Tag/Tag.styles.d.ts

@@ -0,0 +1,31 @@
+export declare const tag: import('../../styled-system/types').SlotRecipeRuntimeFn<"content" | "root" | "deleteButton", {
+    active: {
+        true: {
+            root: {
+                bg: "colour.primary.surface";
+                borderColor: "colour.primary.fill";
+                color: "colour.primary.text";
+            };
+        };
+    };
+    customDeleteButton: {
+        true: {
+            root: {
+                '&:has(button:hover)': {
+                    bg: "colour.primary.surface";
+                    borderColor: "colour.primary.fill";
+                    color: "colour.primary.text";
+                };
+            };
+        };
+        false: {
+            root: {
+                '&:has(button:hover)': {
+                    bg: "colour.system.danger.surface";
+                    borderColor: "colour.system.danger.fill";
+                    color: "colour.system.danger.text";
+                };
+            };
+        };
+    };
+}>;

package/dist/src/components/Tag/TagInput/TagInput.d.ts

@@ -0,0 +1,44 @@
+import { SyntheticEvent } from 'react';
+import { InputBaseElement, InputRef, IressInputProps } from '../../Input';
+import { IressTagProps } from '../Tag';
+export interface IressTagInputProps extends Omit<IressInputProps<string>, 'defaultValue' | 'onChange' | 'prepend' | 'value' | 'rows'> {
+    /**
+     * Tags to display (uncontrolled)
+     */
+    defaultValue?: string[];
+    /**
+     * Emitted when the value changes.
+     */
+    onChange?: (e?: SyntheticEvent<InputBaseElement>, value?: string[]) => void;
+    /**
+     * Emitted when the user attempts to add a tag that already exists.
+     */
+    onExistingTag?: (tag: string) => void;
+    /**
+     * Emitted when a tag is deleted
+     */
+    onTagDelete?: IressTagProps['onDelete'];
+    /**
+     * Emitted when the combined tag delete button is clicked
+     */
+    onTagDeleteAll?: IressTagProps['onDelete'];
+    /**
+     * Emitted when a tag's delete button is blurred
+     */
+    onTagDeleteButtonBlur?: IressTagProps['onDeleteButtonBlur'];
+    /**
+     * Text displayed next to tag count in tag when tag limit is exceeded
+     * @default options selected
+     */
+    selectedOptionsTagText?: string;
+    /**
+     * Limit of tags to display before shortening to `selectedOptionsTagText`
+     * @default 5
+     */
+    tagLimit?: number;
+    /**
+     * Tags to display (controlled)
+     */
+    value?: string[];
+}
+export declare const IressTagInput: import('react').ForwardRefExoticComponent<IressTagInputProps & import('react').RefAttributes<InputRef>>;

package/dist/src/components/Tag/TagInput/TagInput.styles.d.ts

@@ -0,0 +1 @@
+export declare const tagInput: import('../../../styled-system/types').SlotRecipeRuntimeFn<"input" | "tag", import('../../../styled-system/types').SlotRecipeVariantRecord<"input" | "tag">>;

package/dist/src/components/Tag/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Tag';
+export * from './Tag.styles';
+export * from './TagInput/TagInput';

package/dist/src/components/Tag/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/Tag/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

package/dist/src/components/Text/Text.d.ts

@@ -0,0 +1,9 @@
+import { IressStyledProps } from '../../types';
+export type TextElements = 'p' | 'div' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'small' | 'cite' | 'caption' | 'strong' | 'em' | 'a' | 'blockquote' | 'pre';
+export type IressTextProps<E extends TextElements = 'div'> = IressStyledProps<E> & {
+    /**
+     * The HTML element that should be rendered.
+     */
+    element?: E;
+};
+export declare const IressText: <E extends TextElements = "div">({ className, ...restProps }: IressTextProps<E>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Text/Text.styles.d.ts

@@ -0,0 +1 @@
+export { text } from '../../styled-system/recipes';

package/dist/src/components/Text/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Text.styles';
+export * from './Text';

package/dist/src/components/Text/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/Text/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

package/dist/src/components/Toaster/Toaster.d.ts

@@ -0,0 +1,25 @@
+import { FloatingUIContainer, IressStyledProps } from '../../types';
+import { ToastAnimatedProps } from './components/Toast/ToastAnimated';
+export interface ToasterItem extends Omit<ToastAnimatedProps, 'children' | 'animation'> {
+    /**
+     * A unique identifier for the toast.
+     */
+    id: string;
+}
+export interface ToasterProps extends Omit<IressStyledProps, 'children'> {
+    /**
+     * The container element to render the toaster into.
+     * By default, the toaster will render at the end of the document body.
+     */
+    container?: FloatingUIContainer;
+    /**
+     * The position on the screen where the toast will appear.
+     * @default bottom-end
+     */
+    position?: 'bottom-center' | 'bottom-end' | 'bottom-start' | 'top-center' | 'top-end' | 'top-start';
+    /**
+     * The toasts that will be displayed in the toaster.
+     */
+    toasts?: ToasterItem[];
+}
+export declare const Toaster: ({ className, container, position, toasts, ...restProps }: ToasterProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/Toaster/Toaster.styles.d.ts

@@ -0,0 +1,42 @@
+export declare const toaster: import('../../styled-system/types').SlotRecipeRuntimeFn<"root", {
+    position: {
+        'bottom-end': {
+            root: {
+                insetBlockEnd: "[0]";
+                insetInlineEnd: "[0]";
+            };
+        };
+        'bottom-start': {
+            root: {
+                insetBlockEnd: "[0]";
+                insetInlineStart: "[0]";
+            };
+        };
+        'bottom-center': {
+            root: {
+                insetBlockEnd: "[0]";
+                insetInlineStart: "[50%]";
+                transform: "translateX(-50%)";
+            };
+        };
+        'top-end': {
+            root: {
+                insetBlockStart: "[0]";
+                insetInlineEnd: "[0]";
+            };
+        };
+        'top-start': {
+            root: {
+                insetBlockStart: "[0]";
+                insetInlineStart: "[0]";
+            };
+        };
+        'top-center': {
+            root: {
+                insetBlockStart: "[0]";
+                insetInlineStart: "[50%]";
+                transform: "translateX(-50%)";
+            };
+        };
+    };
+}>;

package/dist/src/components/Toaster/ToasterProvider.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+import { ToasterProps } from './Toaster';
+export interface IressToasterProviderProps extends Omit<ToasterProps, 'toasts'>, PropsWithChildren {
+    /**
+     * A unique identifier for the toaster provider.
+     * This is useful if you have multiple toaster providers in your application based on context.
+     */
+    id?: string;
+}
+export declare const IressToasterProvider: ({ children, id, position, ...restProps }: IressToasterProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Toaster/components/Toast/Toast.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode, MouseEvent } from 'react';
+import { IressStyledProps } from '../../../../types';
+export type ToastStatus = 'success' | 'error' | 'info';
+export interface ToastProps extends Omit<IressStyledProps, 'content'> {
+    /**
+     * Buttons and controls for the toast.
+     */
+    actions?: ReactNode;
+    /**
+     * Alternative to children.
+     */
+    content?: ReactNode;
+    /**
+     * A boolean to show/hide the dismiss close button.
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * The heading area of the toast. You can pass react component such as `<IressText>Error</IressText>`.
+     * If a string is provided, it will default to a `<h2 />` element.
+     */
+    heading?: ReactNode;
+    /**
+     * Click event on the close button of the toast.
+     */
+    onClose?: (e?: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * System status of Toast
+     */
+    status: ToastStatus;
+}
+export declare const Toast: import('react').ForwardRefExoticComponent<ToastProps & import('react').RefAttributes<HTMLDivElement>>;