@stella-source/stellasource-dsl 0.1.7 → 0.2.1

package/dist/esm/styles.css

@@ -9,7 +9,7 @@
   --dark-navy: #1f4168;
   --primary-blue: #336dae;
   --sky-blue: #7099c6;
-  --light-blue: #ebf0fa;
+  --DSL-light-blue: #ebf0fa;
   --pale-blue: #f8fafe;
   /* greys */
   --medium-grey: #c6c6c6;

package/dist/esm/types/components/IconButton/IconButton.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { IconButtonProps } from "./types";
-declare const IconButton: ({ iconName, onClick, disabled, variant, isLoading, ariaLabel, className, id, htmlProps, size, }: IconButtonProps) => React.JSX.Element;
+declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default IconButton;

package/dist/esm/types/components/IconButton/IconButton.stories.d.ts

@@ -2,7 +2,7 @@ import { IconButtonProps } from "./types";
 import { StellaButtonVariant } from "../StellaButton/types";
 declare const _default: {
     title: string;
-    component: ({ iconName, onClick, disabled, variant, isLoading, ariaLabel, className, id, htmlProps, size, }: IconButtonProps) => import("react").JSX.Element;
+    component: import("react").ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     tags: string[];
     parameters: {};
     argTypes: {

package/dist/esm/types/components/IconButton/types.d.ts

@@ -5,11 +5,14 @@ export interface IconButtonProps {
     iconName: `${StellaIconDefinition}`;
     ariaLabel: string;
     size?: number;
-    onClick: () => void;
+    onClick: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     id?: string;
     className?: string;
     isLoading?: boolean;
     disabled?: boolean;
+    ref?: React.Ref<HTMLButtonElement>;
+    preventDefault?: boolean;
+    dataTestId?: string;
     variant?: `${StellaButtonVariant}`;
     htmlProps?: HTMLAttributes<HTMLButtonElement>;
 }

package/dist/esm/types/components/Pagination/Pagination.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { PaginationProps } from "./types";
+declare const Pagination: ({ isLoading, rowsPerPage, totalRows, ariaLabel, onPageChange, startingPage, id, className, htmlProps, }: PaginationProps) => React.JSX.Element;
+export default Pagination;

package/dist/esm/types/components/Pagination/Pagination.stories.d.ts

@@ -0,0 +1,13 @@
+import { PaginationProps } from "./types";
+declare const _default: {
+    title: string;
+    component: ({ isLoading, rowsPerPage, totalRows, ariaLabel, onPageChange, startingPage, id, className, htmlProps, }: PaginationProps) => import("react").JSX.Element;
+    tags: string[];
+    parameters: {};
+    argTypes: {};
+    args: PaginationProps;
+};
+export default _default;
+export declare const Pagination: {
+    args: {};
+};

package/dist/esm/types/components/Pagination/styles.d.ts

@@ -0,0 +1,14 @@
+declare const PaginationContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+declare const CustomSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>> & string;
+declare const DarkText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+declare const LightText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+declare const CustomSelectContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $currentPageCount: number;
+}>> & string;
+declare const SelectCaret: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../StellaIcon/types").StellaIconProps, never>> & string & Omit<({ iconName, size, color, className, id, dataTestId, }: import("../StellaIcon/types").StellaIconProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+declare const RowInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const PageInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const LoadingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const PageText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+declare const PageTotals: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export { PaginationContainer, LoadingContainer, RowInfo, PageInfo, CustomSelect, CustomSelectContainer, SelectCaret, DarkText, LightText, PageTotals, PageText, };

package/dist/esm/types/components/Pagination/types.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from "react";
+export interface PaginationProps {
+    id?: string;
+    className?: string;
+    htmlProps?: HTMLAttributes<HTMLElement>;
+    isLoading?: boolean;
+    rowsPerPage?: number;
+    ariaLabel?: string;
+    totalRows: number;
+    onPageChange?: (page: number, pageSize: number) => void;
+    startingPage?: number;
+    resetTrigger?: number;
+}

package/dist/esm/types/components/StellaButton/StellaButton.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { StellaButtonProps } from "./types";
-declare const StellaButton: ({ disabled, variant, label, startIcon, endIcon, isLoading, className, id, htmlProps, onClick, preventDefault, type, }: StellaButtonProps) => React.JSX.Element;
+declare const StellaButton: React.ForwardRefExoticComponent<Omit<StellaButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default StellaButton;

package/dist/esm/types/components/StellaButton/StellaButton.stories.d.ts

@@ -2,7 +2,7 @@ import { StellaButtonVariant } from "./types";
 import { StellaButtonIcons, StellaButtonProps } from "./types";
 declare const _default: {
     title: string;
-    component: ({ disabled, variant, label, startIcon, endIcon, isLoading, className, id, htmlProps, onClick, preventDefault, type, }: StellaButtonProps) => import("react").JSX.Element;
+    component: import("react").ForwardRefExoticComponent<Omit<StellaButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     tags: string[];
     parameters: {};
     argTypes: {

package/dist/esm/types/components/StellaButton/types.d.ts

@@ -20,5 +20,6 @@ export interface StellaButtonProps {
     disabled?: boolean;
     preventDefault?: boolean;
     variant?: `${StellaButtonVariant}`;
+    ref?: React.Ref<HTMLButtonElement>;
     htmlProps?: HTMLAttributes<HTMLButtonElement>;
 }

package/dist/esm/types/components/StellaIcon/types.d.ts

@@ -1,4 +1,4 @@
-export type StellaIconDefinition = "search" | "required" | "help" | "info" | "kebab-menu" | "error" | "warning" | "filter" | "sort" | "close" | "add" | "stella-logo" | "chevron-right" | "chevron-down" | "caret-right" | "caret-down" | "success" | "in-progress" | "complete" | "calendar" | "unlocked" | "locked" | "settings" | "preferences" | "account-settings" | "user" | "company-details" | "collapse" | "expand" | "star-filled" | "star-outline" | "dashboard" | "shopping-cart" | "calculator" | "pricing-strategies" | "stella-finance" | "resource-center" | "line-item-pricing" | "basket-pricing" | "paperclip" | "thumbs-up" | "thumbs-down" | "send" | "palette" | "eye" | "eye-slash";
+export type StellaIconDefinition = "search" | "required" | "help" | "info" | "kebab-menu" | "error" | "warning" | "filter" | "sort" | "close" | "add" | "stella-logo" | "chevron-right" | "chevron-down" | "caret-right" | "caret-down" | "success" | "in-progress" | "complete" | "calendar" | "unlocked" | "locked" | "settings" | "preferences" | "account-settings" | "user" | "company-details" | "collapse" | "expand" | "star-filled" | "star-outline" | "dashboard" | "shopping-cart" | "calculator" | "pricing-strategies" | "stella-finance" | "resource-center" | "line-item-pricing" | "basket-pricing" | "paperclip" | "thumbs-up" | "thumbs-down" | "send" | "palette" | "eye" | "eye-slash" | "sync" | "chevron-left";
 export interface StellaIconProps {
     iconName: StellaIconDefinition;
     size?: number;

package/dist/esm/types/components/Sync/Sync.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SyncProps } from "./types";
+declare const Sync: ({ dataTestId, onClick, className, id, showTime, labelPosition, }: SyncProps) => React.JSX.Element;
+export default Sync;

package/dist/esm/types/components/Sync/Sync.stories.d.ts

@@ -0,0 +1,20 @@
+import { SyncProps } from "./types";
+declare const _default: {
+    title: string;
+    component: ({ dataTestId, onClick, className, id, showTime, labelPosition, }: SyncProps) => import("react").JSX.Element;
+    tags: string[];
+    parameters: {};
+    argTypes: {
+        labelPosition: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+    args: SyncProps;
+};
+export default _default;
+export declare const Sync: {
+    args: {};
+};

package/dist/esm/types/components/Sync/styles.d.ts

@@ -0,0 +1,7 @@
+interface SyncContainerProps {
+    $labelPosition?: "right" | "left";
+}
+declare const SyncContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SyncContainerProps>> & string;
+declare const CustomLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Label/types").LabelProps | import("../Label/types").LabelWithChildrenProps, import("styled-components/dist/types").BaseObject>> & string & Omit<({ hideLabel, labelValue, required, tooltipText, children, htmlFor, htmlProps, id, className, }: import("../Label/types").LabelProps | import("../Label/types").LabelWithChildrenProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+declare const CustomIconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("../IconButton/types").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../IconButton/types").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export { CustomIconButton, CustomLabel, SyncContainer };

package/dist/esm/types/components/Sync/types.d.ts

@@ -0,0 +1,8 @@
+export interface SyncProps {
+    id: string;
+    className?: string;
+    onClick?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>, time?: string) => void;
+    dataTestId?: string;
+    showTime?: boolean;
+    labelPosition?: "right" | "left";
+}

package/dist/esm/types/components/Table/Table.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TableProps } from "./types";
+declare function Table<T>({ columns, data, isLoading, serverSide, onPageChange, onSortChange, onFilterChange, onRowSelect, rowStatuses, showSelection, showRowOptions, showPagination, variant, paginationDetails, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, }: TableProps<T>): React.JSX.Element;
+export default Table;

package/dist/esm/types/components/Table/Table.stories.d.ts

@@ -0,0 +1,23 @@
+import TableComponent from "./Table";
+import { TableProps } from "./types";
+interface Person {
+    id: number;
+    name: string;
+    access: string;
+    age: number;
+    status: string;
+}
+declare const _default: {
+    title: string;
+    component: typeof TableComponent;
+    tags: string[];
+    parameters: {};
+    argTypes: {};
+    args: TableProps<Person>;
+};
+export default _default;
+export declare const Table: {
+    args: {
+        variant: string;
+    };
+};

package/dist/esm/types/components/Table/TableComponents/IndeterminateCheckbox.d.ts

@@ -0,0 +1,8 @@
+import React, { ChangeEvent } from "react";
+interface IndeterminateCheckboxProps {
+    isIndeterminate?: boolean;
+    isChecked?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+declare const IndeterminateCheckbox: ({ isIndeterminate, isChecked, onChange, }: IndeterminateCheckboxProps) => React.JSX.Element;
+export default IndeterminateCheckbox;

package/dist/esm/types/components/Table/TableComponents/RowOptions.d.ts

@@ -0,0 +1,12 @@
+import { Row } from "@tanstack/react-table";
+import React from "react";
+interface RowOptionsProps {
+    row: Row<any>;
+    selectionMenuItems?: {
+        label: string;
+        onClick: (row: Row<any>) => void;
+        conditional?: () => boolean;
+    }[];
+}
+declare const RowOptions: ({ row, selectionMenuItems }: RowOptionsProps) => React.JSX.Element;
+export default RowOptions;

package/dist/esm/types/components/Table/TableComponents/TableHeaderCell.d.ts

@@ -0,0 +1,18 @@
+import { Header } from "@tanstack/react-table";
+import React from "react";
+interface HeaderCellProps {
+    serverSide?: boolean;
+    header: Header<any, unknown>;
+    filters: Record<string, (string | number)[]>;
+    sorting: {
+        id: string;
+        desc: boolean;
+    }[];
+    scrollPosition: {
+        atLeft: boolean;
+        atRight: boolean;
+    };
+    onFilterMenuInteraction?: (id: string | number, active: boolean) => void;
+}
+declare const TableHeaderCell: ({ header, serverSide, filters, sorting, scrollPosition, onFilterMenuInteraction, }: HeaderCellProps) => React.JSX.Element;
+export default TableHeaderCell;

package/dist/esm/types/components/Table/TableModule.d.ts

@@ -0,0 +1,6 @@
+import type { FilterFn } from "@tanstack/react-table";
+declare module "@tanstack/react-table" {
+    interface FilterFns {
+        number: FilterFn<unknown>;
+    }
+}

package/dist/esm/types/components/Table/styles.d.ts

@@ -0,0 +1,44 @@
+import { Column, SortDirection } from "@tanstack/react-table";
+interface HeaderIconButtonProps {
+    $active: boolean;
+    $sort?: false | SortDirection;
+}
+declare const HeaderCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {
+    $isPinnedLeft?: boolean;
+    $isPinnedRight?: boolean;
+    $columnInfo: Column<any, unknown>;
+    $filterMenuOpen?: boolean;
+}>> & string;
+declare const HeaderCellPosition: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const TableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const TableWrapperScroll: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $filterMenuOpen: boolean;
+}>> & string;
+declare const StyledTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;
+declare const CustomIconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("../IconButton/types").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, HeaderIconButtonProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../IconButton/types").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+declare const SortButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<Omit<import("../IconButton/types").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, keyof HeaderIconButtonProps> & HeaderIconButtonProps, HeaderIconButtonProps>> & string;
+declare const HeaderRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never>> & string;
+declare const CellRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never>> & string;
+declare const FilterMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const Checkbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>, never>, never>> & string;
+declare const MenuItemGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const BodyCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {
+    $isPinnedLeft?: boolean;
+    $isPinnedRight?: boolean;
+    $columnInfo: Column<any, unknown>;
+    $isLastRow: boolean;
+}>> & string;
+declare const MenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+declare const MenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const MenuItemOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $applied: boolean;
+}>> & string;
+declare const FilterLabelTransparent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const FilterBoxLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+declare const LoadingShimmer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $width?: string;
+    $height?: string;
+}>> & string;
+declare const CustomPagination: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Pagination/types").PaginationProps, never>> & string & Omit<({ isLoading, rowsPerPage, totalRows, ariaLabel, onPageChange, startingPage, id, className, htmlProps, }: import("../Pagination/types").PaginationProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+declare const KebabAlign: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export { HeaderCell, TableWrapper, TableWrapperScroll, StyledTable, CustomIconButton, SortButton, HeaderRow, FilterMenu, Checkbox, BodyCell, HeaderCellPosition, MenuButton, MenuItem, FilterBoxLabel, LoadingShimmer, FilterLabelTransparent, CustomPagination, CellRow, MenuItemGroup, KebabAlign, MenuItemOption, };

package/dist/esm/types/components/Table/types.d.ts

@@ -0,0 +1,51 @@
+import { ColumnDef, ColumnFiltersState, Row } from "@tanstack/react-table";
+import { HTMLAttributes } from "react";
+declare enum TableVariant {
+    PRIMARY = "Primary",
+    SECONDARY = "Secondary"
+}
+interface PaginationDetails {
+    startingPage: number;
+    totalRows: number;
+    rowsPerPage?: number;
+}
+export interface TableProps<T> {
+    columns: ColumnDef<T, any>[];
+    data: T[];
+    isLoading?: boolean;
+    serverSide?: boolean;
+    onPageChange?: (page: number, pageSize: number) => void;
+    onSortChange?: (sort: {
+        id: string;
+        desc: boolean;
+    }[]) => void;
+    onFilterChange?: (filters: ColumnFiltersState) => void;
+    onRowSelect?: (rows: T[]) => void;
+    showSelection?: boolean;
+    showRowOptions?: boolean;
+    showPagination?: boolean;
+    variant?: `${TableVariant}`;
+    selectionMenuItems?: {
+        label: string;
+        onClick: (row: Row<T>) => void;
+        conditional?: () => boolean;
+    }[];
+    dataTestId?: string;
+    dataAuto?: string;
+    id?: string;
+    className?: string;
+    htmlProps?: HTMLAttributes<HTMLTableElement>;
+    paginationDetails?: PaginationDetails;
+    rowStatuses?: Record<number | string, RowStatus>;
+    resetTrigger?: number;
+}
+export interface CustomColumnMeta {
+    headerAlign?: "left" | "right";
+    cellAlign?: "left" | "right";
+    dataType?: "string" | "number";
+    pin?: "left" | "right";
+    filterOptions?: string[] | number[];
+    singleSelect?: boolean;
+}
+export type RowStatus = "action-pending" | "completed";
+export {};

package/dist/esm/types/components/TextField/PasswordInput/styles.d.ts

@@ -1,2 +1,2 @@
-declare const CustomIconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../IconButton/types").IconButtonProps, never>> & string & Omit<({ iconName, onClick, disabled, variant, isLoading, ariaLabel, className, id, htmlProps, size, }: import("../../IconButton/types").IconButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+declare const CustomIconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("../../IconButton/types").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../../IconButton/types").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
 export { CustomIconButton };

package/dist/esm/types/index.d.ts

@@ -9,10 +9,14 @@ import IconButton from "./components/IconButton/IconButton";
 import TextInput from "./components/TextField/TextInput/TextInput";
 import PasswordInput from "./components/TextField/PasswordInput/PasswordInput";
 import NumberInput from "./components/TextField/NumberInput/NumberInput";
+import Table from "./components/Table/Table";
+import Pagination from "./components/Pagination/Pagination";
+import Sync from "./components/Sync/Sync";
+import TableUnitsAndTotals from "./components/TableUnitsAndTotals/TableUnitsAndTotals";
 /** Types */
 import { StellaButtonVariant } from "./components/StellaButton/types";
 /** Tokens */
 import { Styles } from "./shared/tokens";
 import "./shared/tokens/tokens.css";
 export type { StellaIconDefinition } from "./components/StellaIcon/types";
-export { Label, StellaButton, IconButton, Loader, HelperText, Tooltip, StellaIcon, TextInput, PasswordInput, NumberInput, StellaButtonVariant, Styles, };
+export { Label, StellaButton, IconButton, Loader, HelperText, Tooltip, StellaIcon, TextInput, PasswordInput, NumberInput, Table, Pagination, Sync, TableUnitsAndTotals, StellaButtonVariant, Styles, };

package/dist/esm/types/shared/utils/dateHelpers.d.ts

@@ -0,0 +1,3 @@
+type DateInput = Date | string | undefined;
+export declare function formatDateToTime(date: DateInput, convertUtc?: boolean): string;
+export {};

package/dist/esm/types/shared/utils/testing.d.ts

@@ -4,7 +4,7 @@ import { Options } from "@testing-library/user-event";
 declare const setup: (jsx: React.JSX.Element, setupOptions?: Options) => {
     container: HTMLElement;
     baseElement: HTMLElement;
-    debug: (baseElement?: ReactDOMClient.Container | any | Array<ReactDOMClient.Container | any> | undefined, maxLength?: number | undefined, options?: import("pretty-format").OptionsReceived | undefined) => void;
+    debug: (baseElement?: import("react-dom/client").Container | (Element | Document) | Array<import("react-dom/client").Container | (Element | Document)> | undefined, maxLength?: number | undefined, options?: import("pretty-format").OptionsReceived | undefined) => void;
     rerender: (ui: React.ReactNode) => void;
     unmount: () => void;
     asFragment: () => DocumentFragment;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import React$1, { HTMLAttributes, ReactElement } from 'react';
 import { TooltipProps as TooltipProps$1 } from 'antd';
+import { ColumnDef, ColumnFiltersState, Row } from '@tanstack/react-table';
 
 interface LabelProps {
     id: string;
@@ -47,10 +48,11 @@ interface StellaButtonProps {
     disabled?: boolean;
     preventDefault?: boolean;
     variant?: `${StellaButtonVariant}`;
+    ref?: React.Ref<HTMLButtonElement>;
     htmlProps?: HTMLAttributes<HTMLButtonElement>;
 }
 
-declare const StellaButton: ({ disabled, variant, label, startIcon, endIcon, isLoading, className, id, htmlProps, onClick, preventDefault, type, }: StellaButtonProps) => React$1.JSX.Element;
+declare const StellaButton: React$1.ForwardRefExoticComponent<Omit<StellaButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 interface LoaderProps {
     size?: number;
@@ -94,7 +96,7 @@ interface TooltipProps {
 
 declare const Tooltip: ({ title, placement, type, ariaLabel, iconSize, htmlProps, className, id, }: TooltipProps) => React$1.JSX.Element;
 
-type StellaIconDefinition = "search" | "required" | "help" | "info" | "kebab-menu" | "error" | "warning" | "filter" | "sort" | "close" | "add" | "stella-logo" | "chevron-right" | "chevron-down" | "caret-right" | "caret-down" | "success" | "in-progress" | "complete" | "calendar" | "unlocked" | "locked" | "settings" | "preferences" | "account-settings" | "user" | "company-details" | "collapse" | "expand" | "star-filled" | "star-outline" | "dashboard" | "shopping-cart" | "calculator" | "pricing-strategies" | "stella-finance" | "resource-center" | "line-item-pricing" | "basket-pricing" | "paperclip" | "thumbs-up" | "thumbs-down" | "send" | "palette" | "eye" | "eye-slash";
+type StellaIconDefinition = "search" | "required" | "help" | "info" | "kebab-menu" | "error" | "warning" | "filter" | "sort" | "close" | "add" | "stella-logo" | "chevron-right" | "chevron-down" | "caret-right" | "caret-down" | "success" | "in-progress" | "complete" | "calendar" | "unlocked" | "locked" | "settings" | "preferences" | "account-settings" | "user" | "company-details" | "collapse" | "expand" | "star-filled" | "star-outline" | "dashboard" | "shopping-cart" | "calculator" | "pricing-strategies" | "stella-finance" | "resource-center" | "line-item-pricing" | "basket-pricing" | "paperclip" | "thumbs-up" | "thumbs-down" | "send" | "palette" | "eye" | "eye-slash" | "sync" | "chevron-left";
 interface StellaIconProps {
     iconName: StellaIconDefinition;
     size?: number;
@@ -110,16 +112,19 @@ interface IconButtonProps {
     iconName: `${StellaIconDefinition}`;
     ariaLabel: string;
     size?: number;
-    onClick: () => void;
+    onClick: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     id?: string;
     className?: string;
     isLoading?: boolean;
     disabled?: boolean;
+    ref?: React.Ref<HTMLButtonElement>;
+    preventDefault?: boolean;
+    dataTestId?: string;
     variant?: `${StellaButtonVariant}`;
     htmlProps?: HTMLAttributes<HTMLButtonElement>;
 }
 
-declare const IconButton: ({ iconName, onClick, disabled, variant, isLoading, ariaLabel, className, id, htmlProps, size, }: IconButtonProps) => React$1.JSX.Element;
+declare const IconButton: React$1.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare enum TextFieldAlignments {
     LEFT = "left",
@@ -231,6 +236,109 @@ interface NumberInputProps {
 
 declare const NumberInput: ({ id, className, htmlProps, leftCategory, rightCategory, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder, textAlign, isTruncated, helperTextAffectLayout, hideLabel, disabled, isLoading, hasError, thousandSeparator, decimalPlaces, allowNegativeNumbers, ariaDescribedBy, }: NumberInputProps) => React$1.JSX.Element;
 
+declare enum TableVariant {
+    PRIMARY = "Primary",
+    SECONDARY = "Secondary"
+}
+interface PaginationDetails {
+    startingPage: number;
+    totalRows: number;
+    rowsPerPage?: number;
+}
+interface TableProps<T> {
+    columns: ColumnDef<T, any>[];
+    data: T[];
+    isLoading?: boolean;
+    serverSide?: boolean;
+    onPageChange?: (page: number, pageSize: number) => void;
+    onSortChange?: (sort: {
+        id: string;
+        desc: boolean;
+    }[]) => void;
+    onFilterChange?: (filters: ColumnFiltersState) => void;
+    onRowSelect?: (rows: T[]) => void;
+    showSelection?: boolean;
+    showRowOptions?: boolean;
+    showPagination?: boolean;
+    variant?: `${TableVariant}`;
+    selectionMenuItems?: {
+        label: string;
+        onClick: (row: Row<T>) => void;
+        conditional?: () => boolean;
+    }[];
+    dataTestId?: string;
+    dataAuto?: string;
+    id?: string;
+    className?: string;
+    htmlProps?: HTMLAttributes<HTMLTableElement>;
+    paginationDetails?: PaginationDetails;
+    rowStatuses?: Record<number | string, RowStatus>;
+    resetTrigger?: number;
+}
+type RowStatus = "action-pending" | "completed";
+
+declare function Table<T>({ columns, data, isLoading, serverSide, onPageChange, onSortChange, onFilterChange, onRowSelect, rowStatuses, showSelection, showRowOptions, showPagination, variant, paginationDetails, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, }: TableProps<T>): React$1.JSX.Element;
+
+interface PaginationProps {
+    id?: string;
+    className?: string;
+    htmlProps?: HTMLAttributes<HTMLElement>;
+    isLoading?: boolean;
+    rowsPerPage?: number;
+    ariaLabel?: string;
+    totalRows: number;
+    onPageChange?: (page: number, pageSize: number) => void;
+    startingPage?: number;
+    resetTrigger?: number;
+}
+
+declare const Pagination: ({ isLoading, rowsPerPage, totalRows, ariaLabel, onPageChange, startingPage, id, className, htmlProps, }: PaginationProps) => React$1.JSX.Element;
+
+interface SyncProps {
+    id: string;
+    className?: string;
+    onClick?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>, time?: string) => void;
+    dataTestId?: string;
+    showTime?: boolean;
+    labelPosition?: "right" | "left";
+}
+
+declare const Sync: ({ dataTestId, onClick, className, id, showTime, labelPosition, }: SyncProps) => React$1.JSX.Element;
+
+declare enum QuoteVariants {
+    TOTAL_PRICE = "total-price",
+    TOTAL_WEIGHT = "total-weight"
+}
+declare enum QuoteCategory {
+    ITEM = "/item",
+    HOUR = "/hr",
+    CWT = "CWT",
+    LBS = "lbs",
+    KG = "kg",
+    TON = "ton"
+}
+interface TableUnitsAndTotalsProps {
+    id?: string;
+    className?: string;
+    value: number;
+    subValue?: number;
+    rightCategory?: `${QuoteCategory}`;
+}
+interface TotalPriceProps {
+    variant: QuoteVariants.TOTAL_PRICE;
+    leftCategory?: `${TableUnitsAndTotalsLeftCategory}`;
+}
+interface TotalWeightProps {
+    variant: QuoteVariants.TOTAL_WEIGHT;
+    leftCategory?: never;
+}
+type TableUnitsAndTotals$1 = TableUnitsAndTotalsProps & (TotalPriceProps | TotalWeightProps);
+declare enum TableUnitsAndTotalsLeftCategory {
+    US_CURRENCY = "$"
+}
+
+declare const TableUnitsAndTotals: ({ id, className, value, subValue, variant, leftCategory, rightCategory, }: TableUnitsAndTotals$1) => React$1.JSX.Element;
+
 declare const Styles: {
     color: {
         white: string;
@@ -292,5 +400,5 @@ declare const Styles: {
     };
 };
 
-export { HelperText, IconButton, Label, Loader, NumberInput, PasswordInput, StellaButton, StellaButtonVariant, StellaIcon, Styles, TextInput, Tooltip };
+export { HelperText, IconButton, Label, Loader, NumberInput, Pagination, PasswordInput, StellaButton, StellaButtonVariant, StellaIcon, Styles, Sync, Table, TableUnitsAndTotals, TextInput, Tooltip };
 export type { StellaIconDefinition };