@stella-source/stellasource-dsl 1.4.3 → 2.0.0

package/dist/esm/styles.css

@@ -21,7 +21,9 @@
   --pale-grey: #f5f5f5;
   --grey50: #e9edf5;
   --grey100: #d5dbe5;
+  --grey200: #bcc2ce;
   --grey500: #687182;
+  --grey700: #464f60;
   /* oranges */
   --orange: #ff7600;
   --light-orange: #ff9133;

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

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

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

@@ -3,6 +3,9 @@ interface HeaderIconButtonProps {
     $active: boolean;
     $sort?: false | SortDirection;
 }
+interface PaginationProps {
+    $hasData?: boolean;
+}
 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;
@@ -41,7 +44,7 @@ declare const LoadingShimmer: import("styled-components/dist/types").IStyledComp
     $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 CustomPagination: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Pagination/types").PaginationProps, PaginationProps>> & 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;
 declare const EmptyTableCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
 declare const EmptyTableSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {

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

@@ -45,6 +45,14 @@ export interface TableProps<T> {
         showClearFilterButton?: boolean;
         onClearFilters?: () => void;
     };
+    defaultFilters?: {
+        id: string;
+        value: unknown;
+    }[];
+    staticFilters?: {
+        id: string;
+        value: unknown;
+    }[];
 }
 export interface CustomColumnMeta {
     headerAlign?: "left" | "right";
@@ -52,7 +60,7 @@ export interface CustomColumnMeta {
     dataType?: "string" | "number";
     pin?: "left" | "right";
     filterOptions?: string[] | number[];
-    singleSelect?: boolean;
+    filterMode?: "singleSelect" | "multiSelect" | "search";
 }
 export type RowStatus = "action-pending" | "completed";
 export {};

package/dist/esm/types/components/Tabs/Styles.d.ts

@@ -0,0 +1,8 @@
+import { TabsVariant } from "./types";
+interface TabsStylesProps {
+    $variant: `${TabsVariant}`;
+    $isPill?: boolean;
+}
+declare const TabsBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, TabsStylesProps>> & string;
+declare const TabButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TabsStylesProps>> & string;
+export { TabsBar, TabButton };

package/dist/esm/types/components/Tabs/Tab.d.ts

@@ -0,0 +1,13 @@
+import React, { HTMLAttributes } from "react";
+import { TabsVariant } from "./types";
+interface TabProps {
+    id?: string;
+    className?: string;
+    onClick?: (tabLabel: string) => void;
+    htmlProps?: HTMLAttributes<HTMLButtonElement>;
+    active?: boolean;
+    variant?: `${TabsVariant}`;
+    label: string;
+}
+declare const Tab: ({ id, className, onClick, htmlProps, label, variant, active, }: TabProps) => React.JSX.Element;
+export default Tab;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { TabsProps } from "./types";
+declare const Tabs: ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, variant, isPill, }: TabsProps) => React.JSX.Element;
+export default Tabs;

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

@@ -0,0 +1,18 @@
+import { TabsProps, TabsVariant } from "./types";
+declare const _default: {
+    title: string;
+    component: ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, variant, isPill, }: TabsProps) => import("react").JSX.Element;
+    tags: string[];
+    parameters: {};
+    argTypes: {
+        variant: {
+            options: TabsVariant[];
+            control: {
+                type: string;
+            };
+        };
+    };
+    args: TabsProps;
+};
+export default _default;
+export declare const Tabs: {};

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

@@ -0,0 +1,26 @@
+import { HTMLAttributes } from "react";
+export declare enum TabsVariant {
+    LIGHT = "light",
+    DARK = "dark"
+}
+interface TabsBaseProps {
+    id?: string;
+    className?: string;
+    activeTab?: string;
+    htmlProps?: HTMLAttributes<HTMLElement>;
+    defaultActiveTab?: string;
+    isPill?: boolean;
+    variant?: `${TabsVariant}`;
+    tabs: string[];
+    onTabClick: (label?: string) => void;
+}
+interface TabsPropsLight {
+    variant?: `${TabsVariant.LIGHT}`;
+    isPill?: boolean;
+}
+interface TabsPropsDark {
+    variant?: `${TabsVariant.DARK}`;
+    isPill?: never;
+}
+export type TabsProps = TabsBaseProps & (TabsPropsLight | TabsPropsDark);
+export {};

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

@@ -15,6 +15,7 @@ import Pagination from "./components/Pagination/Pagination";
 import Sync from "./components/Sync/Sync";
 import TableUnitsAndTotals from "./components/TableUnitsAndTotals/TableUnitsAndTotals";
 import PaymentStatus from "./components/PaymentStatus/PaymentStatus";
+import Tabs from "./components/Tabs/Tabs";
 /** Types */
 import { StellaButtonVariant } from "./components/StellaButton/types";
 /** Tokens */
@@ -22,4 +23,4 @@ import { Styles } from "./shared/tokens";
 import "./shared/tokens/tokens.css";
 /**Exports */
 export type { StellaIconDefinition } from "./components/StellaIcon/types";
-export { Label, StellaButton, IconButton, Loader, HelperText, Tooltip, StellaIcon, TextInput, PasswordInput, NumberInput, Table, Pagination, Sync, TableUnitsAndTotals, StellaButtonVariant, PaymentStatus, Styles, };
+export { Tabs, Label, StellaButton, IconButton, Loader, HelperText, Tooltip, StellaIcon, TextInput, PasswordInput, NumberInput, Table, Pagination, Sync, TableUnitsAndTotals, StellaButtonVariant, PaymentStatus, Styles, };

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

@@ -20,7 +20,9 @@ declare const Styles: {
             pale: string;
             50: string;
             100: string;
+            200: string;
             500: string;
+            700: string;
         };
         blue: {
             darkNavy: string;

package/dist/esm/types/shared/tokens/storybook/color.d.ts

@@ -34,8 +34,12 @@ declare const colorTokens: {
         50: string;
         /** #d5dbe5 */
         100: string;
+        /** #BCC2CE */
+        200: string;
         /** #687182 */
         500: string;
+        /** #464F60 */
+        700: string;
     };
     blue: {
         /** #1f4168 */

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

@@ -0,0 +1,10 @@
+type DebouncedCallback<T extends (...args: any[]) => any> = (...args: Parameters<T>) => void;
+type DebounceControls<T extends (...args: any[]) => any> = {
+    flush: () => void;
+    cancel: () => void;
+};
+/**
+ * Returns a debounced version of a callback, along with flush and cancel methods.
+ */
+export declare function useDebounceCallback<T extends (...args: any[]) => any>(callback: T, delay: number): [DebouncedCallback<T>, DebounceControls<T>];
+export {};

package/dist/index.d.ts

@@ -266,10 +266,18 @@ interface TableProps<T> {
         showClearFilterButton?: boolean;
         onClearFilters?: () => void;
     };
+    defaultFilters?: {
+        id: string;
+        value: unknown;
+    }[];
+    staticFilters?: {
+        id: string;
+        value: unknown;
+    }[];
 }
 type RowStatus = "action-pending" | "completed";
 
-declare function Table<T>({ columns, data, isLoading, serverSide, onPageChange, onSortChange, onFilterChange, onRowSelect, onRowClick, rowStatuses, showSelection, showRowOptions, showPagination, variant, paginationDetails, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, emptyTableState, }: TableProps<T>): React$1.JSX.Element;
+declare function Table<T>({ columns, data, isLoading, serverSide, onPageChange, onSortChange, onFilterChange, onRowSelect, onRowClick, rowStatuses, showSelection, showRowOptions, showPagination, variant, paginationDetails, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, emptyTableState, defaultFilters, staticFilters, }: TableProps<T>): React$1.JSX.Element;
 
 interface PaginationProps {
     id?: string;
@@ -336,6 +344,33 @@ interface PaymentStatusProps {
 
 declare const PaymentStatus: ({ variant, id, className }: PaymentStatusProps) => React$1.JSX.Element;
 
+declare enum TabsVariant {
+    LIGHT = "light",
+    DARK = "dark"
+}
+interface TabsBaseProps {
+    id?: string;
+    className?: string;
+    activeTab?: string;
+    htmlProps?: HTMLAttributes<HTMLElement>;
+    defaultActiveTab?: string;
+    isPill?: boolean;
+    variant?: `${TabsVariant}`;
+    tabs: string[];
+    onTabClick: (label?: string) => void;
+}
+interface TabsPropsLight {
+    variant?: `${TabsVariant.LIGHT}`;
+    isPill?: boolean;
+}
+interface TabsPropsDark {
+    variant?: `${TabsVariant.DARK}`;
+    isPill?: never;
+}
+type TabsProps = TabsBaseProps & (TabsPropsLight | TabsPropsDark);
+
+declare const Tabs: ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, variant, isPill, }: TabsProps) => React$1.JSX.Element;
+
 declare const Styles: {
     color: {
         white: string;
@@ -358,7 +393,9 @@ declare const Styles: {
             pale: string;
             50: string;
             100: string;
+            200: string;
             500: string;
+            700: string;
         };
         blue: {
             darkNavy: string;
@@ -397,5 +434,5 @@ declare const Styles: {
     };
 };
 
-export { HelperText, IconButton, Label, Loader, NumberInput, Pagination, PasswordInput, PaymentStatus, StellaButton, StellaButtonVariant, StellaIcon, Styles, Sync, Table, TableUnitsAndTotals, TextInput, Tooltip };
+export { HelperText, IconButton, Label, Loader, NumberInput, Pagination, PasswordInput, PaymentStatus, StellaButton, StellaButtonVariant, StellaIcon, Styles, Sync, Table, TableUnitsAndTotals, Tabs, TextInput, Tooltip };
 export type { StellaIconDefinition };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stella-source/stellasource-dsl",
-  "version": "1.4.3",
+  "version": "2.0.0",
   "description": "Design System owned and operated by Stella Source.",
   "files": [
     "dist"