@juspay/blend-design-system 0.0.25-beta → 0.0.26-beta

package/dist/components/Avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import { AvatarSize, AvatarShape } from './types';
+import { AvatarSize, AvatarShape, AvatarOnlinePosition } from './types';
 declare const Avatar: import('react').ForwardRefExoticComponent<{
     src?: string;
     alt?: string;
@@ -6,6 +6,7 @@ declare const Avatar: import('react').ForwardRefExoticComponent<{
     size?: AvatarSize;
     shape?: AvatarShape;
     online?: boolean;
+    onlinePosition?: AvatarOnlinePosition;
     leadingSlot?: React.ReactNode;
     trailingSlot?: React.ReactNode;
 } & Omit<import('react').HTMLAttributes<HTMLDivElement>, "children"> & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -10,6 +10,10 @@ export declare enum AvatarShape {
     CIRCULAR = "circular",
     ROUNDED = "rounded"
 }
+export declare enum AvatarOnlinePosition {
+    TOP = "top",
+    BOTTOM = "bottom"
+}
 export type AvatarProps = {
     src?: string;
     alt?: string;
@@ -17,6 +21,7 @@ export type AvatarProps = {
     size?: AvatarSize;
     shape?: AvatarShape;
     online?: boolean;
+    onlinePosition?: AvatarOnlinePosition;
     leadingSlot?: React.ReactNode;
     trailingSlot?: React.ReactNode;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

package/dist/components/Button/Button.d.ts

@@ -7,7 +7,7 @@ declare const Button: import('react').ForwardRefExoticComponent<{
     leadingIcon?: React.ReactNode;
     trailingIcon?: React.ReactNode;
     disabled?: boolean;
-    onClick?: () => void;
+    onClick?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
     loading?: boolean;
     showSkeleton?: boolean;
     skeletonVariant?: import('../Skeleton').SkeletonVariant;

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

@@ -31,7 +31,7 @@ export type ButtonProps = {
     leadingIcon?: React.ReactNode;
     trailingIcon?: React.ReactNode;
     disabled?: boolean;
-    onClick?: () => void;
+    onClick?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
     loading?: boolean;
     showSkeleton?: boolean;
     skeletonVariant?: SkeletonVariant;

package/dist/components/Checkbox/checkboxUtils.d.ts

@@ -1,25 +1,6 @@
 import { CheckboxSize } from './types';
 import { CheckboxTokensType } from './checkbox.token';
 export declare const getCheckboxDataState: (checked: boolean | "indeterminate") => string;
-export declare const extractPixelValue: (tokenValue: string | number | undefined) => number;
-/**
- * Determines if the checkbox component is controlled based on the checked prop
- */
-export declare const isControlledCheckbox: (checked: boolean | "indeterminate" | undefined) => boolean;
-/**
- * Creates input props for controlled vs uncontrolled components
- */
-export declare const createCheckboxInputProps: (checked: boolean | "indeterminate" | undefined, defaultChecked: boolean) => {
-    checked: boolean | undefined;
-    defaultChecked?: undefined;
-} | {
-    defaultChecked: boolean;
-    checked?: undefined;
-};
-/**
- * Gets the current checked state for styling purposes
- */
-export declare const getCurrentCheckedState: (checked: boolean | "indeterminate" | undefined, defaultChecked: boolean) => boolean | "indeterminate";
 /**
  * Gets the icon color based on checkbox state
  */

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

@@ -16,7 +16,7 @@ export declare enum CheckboxInteractionState {
 }
 export type CheckboxProps = {
     id?: string;
-    value?: string;
+    name?: string;
     checked?: boolean | 'indeterminate';
     defaultChecked?: boolean;
     onCheckedChange?: (checked: boolean | 'indeterminate') => void;

package/dist/components/DataTable/TableBody/types.d.ts

@@ -1,5 +1,6 @@
 import { ColumnDefinition, RowActionsConfig } from '../types';
 import { MobileDataTableConfig } from '../hooks/useMobileDataTable';
+import { SkeletonVariant } from '../../Skeleton/skeleton.tokens';
 export type TableBodyProps<T extends Record<string, unknown>> = {
     currentData: T[];
     visibleColumns: ColumnDefinition<T>[];
@@ -35,4 +36,8 @@ export type TableBodyProps<T extends Record<string, unknown>> = {
     getColumnWidth: (column: ColumnDefinition<T>, index: number) => React.CSSProperties;
     getRowStyle?: (row: T, index: number) => React.CSSProperties;
     getDisplayValue?: (value: unknown, column: ColumnDefinition<T>) => unknown;
+    isLoading?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
+    isRowLoading?: (row: T, index: number) => boolean;
 };

package/dist/components/DataTable/TableHeader/DraggableColumnHeader.d.ts

@@ -0,0 +1,9 @@
+interface DraggableColumnHeaderProps {
+    id: string;
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    'data-table-column-heading'?: string;
+}
+export declare const DraggableColumnHeader: React.FC<DraggableColumnHeaderProps>;
+export {};

package/dist/components/DataTable/TableHeader/index.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { TableHeaderProps } from './types';
-declare const TableHeader: import('react').ForwardRefExoticComponent<TableHeaderProps<Record<string, unknown>> & import('react').RefAttributes<HTMLTableSectionElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps<Record<string, unknown>> & React.RefAttributes<HTMLTableSectionElement>>;
 export default TableHeader;

package/dist/components/DataTable/TableHeader/types.d.ts

@@ -8,6 +8,7 @@ export type TableHeaderProps<T extends Record<string, unknown>> = {
     sortConfig?: SortConfig | null;
     enableInlineEdit?: boolean;
     enableColumnManager?: boolean;
+    enableColumnReordering?: boolean;
     columnManagerMaxSelections?: number;
     columnManagerAlwaysSelected?: string[];
     columnManagerPrimaryAction?: {
@@ -36,6 +37,7 @@ export type TableHeaderProps<T extends Record<string, unknown>> = {
     onSortDescending?: (field: keyof T) => void;
     onSelectAll: (checked: boolean | 'indeterminate') => void;
     onColumnChange: (columns: ColumnDefinition<T>[]) => void;
+    onColumnReorder?: (columns: ColumnDefinition<T>[]) => void;
     onColumnFilter?: (field: string, type: FilterType, value: string | string[] | {
         min: number;
         max: number;

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { ButtonType, ButtonSize, ButtonSubType } from '../Button/types';
+import { SkeletonVariant } from '../Skeleton/skeleton.tokens';
 export declare enum SortDirection {
     NONE = "none",
     ASCENDING = "asc",
@@ -121,6 +122,8 @@ export type BaseColumnDefinition<T> = {
     frozen?: boolean;
     className?: string;
     filterType?: FilterType;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
 };
 export type ColumnDefinition<T> = (BaseColumnDefinition<T> & {
     type: ColumnType.TEXT;
@@ -235,6 +238,8 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     onAdvancedFiltersChange?: (filters: unknown[]) => void;
     columnFreeze?: number;
     enableColumnManager?: boolean;
+    enableColumnReordering?: boolean;
+    onColumnReorder?: (columns: ColumnDefinition<T>[]) => void;
     columnManagerMaxSelections?: number;
     columnManagerAlwaysSelected?: (keyof T)[];
     columnManagerPrimaryAction?: {
@@ -255,6 +260,9 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     onPageChange?: (page: number) => void;
     onPageSizeChange?: (pageSize: number) => void;
     isLoading?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
+    isRowLoading?: (row: T, index: number) => boolean;
     showHeader?: boolean;
     showToolbar?: boolean;
     showSettings?: boolean;
@@ -280,19 +288,5 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     rowActions?: RowActionsConfig<T>;
     getRowStyle?: (row: T, index: number) => React.CSSProperties;
     tableBodyHeight?: string | number;
-    /**
-     * Approximate height of a single row in pixels.
-     * Used to calculate minimum table height based on page size.
-     * Helps maintain consistent layout and prevent shifting.
-     * @default 52
-     */
-    rowHeight?: number;
-    /**
-     * Whether to maintain minimum height based on page size.
-     * When true, table maintains consistent height preventing layout shifts.
-     * When false, table height adjusts to content.
-     * @default true
-     */
-    maintainMinHeight?: boolean;
     mobileColumnsToShow?: number;
 };

package/dist/components/Directory/directory.tokens.d.ts

@@ -0,0 +1,86 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type DirectoryState = 'default' | 'hover' | 'active';
+/**
+ * Directory Tokens following the pattern: [target].CSSProp.[state]
+ *
+ * Hierarchical Structure:
+ * - Container level: gap, paddingX, paddingY (spacing for the entire directory)
+ * - Section level: Contains header, label, chevron, and item
+ *   - header: Controls section header layout
+ *   - label: Controls section label text styling
+ *   - chevron: Controls section collapse/expand icon
+ *   - item: Navigation items within the section (NavItem)
+ *     - nested: Child items within navigation items
+ *
+ * Pattern examples:
+ * - gap (space between sections)
+ * - paddingX (container horizontal padding)
+ * - section.header.padding (section header spacing)
+ * - section.item.backgroundColor.[state] (nav item background with states)
+ * - section.item.nested.paddingLeft (nested item indentation)
+ */
+export type DirectoryTokenType = {
+    gap: CSSObject['gap'];
+    paddingX: CSSObject['padding'];
+    paddingY: CSSObject['padding'];
+    section: {
+        gap: CSSObject['gap'];
+        header: {
+            padding: {
+                x: CSSObject['padding'];
+                y: CSSObject['padding'];
+            };
+            label: {
+                fontSize: CSSObject['fontSize'];
+                color: CSSObject['color'];
+                fontWeight: CSSObject['fontWeight'];
+            };
+            chevron: {
+                width: CSSObject['width'];
+                color: CSSObject['color'];
+            };
+        };
+        itemList: {
+            gap: CSSObject['gap'];
+            item: {
+                padding: {
+                    x: CSSObject['padding'];
+                    y: CSSObject['padding'];
+                };
+                gap: CSSObject['gap'];
+                borderRadius: CSSObject['borderRadius'];
+                fontWeight: CSSObject['fontWeight'];
+                fontSize: CSSObject['fontSize'];
+                transition: CSSObject['transition'];
+                backgroundColor: {
+                    [key in DirectoryState]: CSSObject['backgroundColor'];
+                };
+                color: {
+                    [key in DirectoryState]: CSSObject['color'];
+                };
+                icon: {
+                    width: CSSObject['width'];
+                };
+                chevron: {
+                    width: CSSObject['width'];
+                    color: CSSObject['color'];
+                };
+            };
+            nested: {
+                paddingLeft: CSSObject['paddingLeft'];
+                marginTop: CSSObject['marginTop'];
+                border: {
+                    width: CSSObject['width'];
+                    color: CSSObject['color'];
+                    leftOffset: CSSObject['left'];
+                };
+            };
+        };
+    };
+};
+export type ResponsiveDirectoryTokens = {
+    [key in keyof BreakpointType]: DirectoryTokenType;
+};
+export declare const getDirectoryTokens: (foundationToken: FoundationTokenType) => ResponsiveDirectoryTokens;

package/dist/components/Drawer/components/DrawerBase.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { DrawerProps, DrawerTriggerProps, DrawerContentProps, DrawerHeaderProps, DrawerTitleProps, DrawerDescriptionProps, DrawerFooterProps, DrawerCloseProps } from '../types';
-export declare const Drawer: ({ open, onOpenChange, direction, modal, dismissible, nested, snapPoints, activeSnapPoint, onSnapPointChange, fadeFromIndex, snapToSequentialPoint, children, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Drawer: ({ open, onOpenChange, direction, modal, dismissible, nested, snapPoints, activeSnapPoint, onSnapPointChange, fadeFromIndex, snapToSequentialPoint, disableDrag, children, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
 export declare const DrawerTrigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 export declare const DrawerPortal: typeof import('vaul').Portal;
 export declare const DrawerOverlay: React.ForwardRefExoticComponent<{

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

@@ -60,6 +60,7 @@ export type DrawerProps = {
      * @default false
      */
     snapToSequentialPoint?: boolean;
+    disableDrag?: boolean;
     /**
      * Custom mobile offset values (overrides token defaults)
      */
@@ -105,6 +106,14 @@ export type DrawerContentProps = {
      * Custom styles
      */
     style?: React.CSSProperties;
+    /**
+     * Accessibility label for the drawer content
+     */
+    'aria-label'?: string;
+    /**
+     * ID of the element describing the drawer content
+     */
+    'aria-describedby'?: string;
 };
 export type DrawerHeaderProps = {
     /**
@@ -125,6 +134,10 @@ export type DrawerTitleProps = {
      * Custom class name
      */
     className?: string;
+    /**
+     * ID for ARIA labeling
+     */
+    id?: string;
 };
 export type DrawerDescriptionProps = {
     /**
@@ -135,6 +148,10 @@ export type DrawerDescriptionProps = {
      * Custom class name
      */
     className?: string;
+    /**
+     * ID for ARIA description
+     */
+    id?: string;
 };
 export type DrawerFooterProps = {
     /**

package/dist/components/Inputs/MultiValueInput/MultiValueInput.d.ts

@@ -1,3 +1,3 @@
 import { MultiValueInputProps } from './types';
-declare const MultiValueInput: ({ value, label, sublabel, disabled, required, error, errorMessage, hintText, tags, onTagAdd, onTagRemove, onChange, size, ...rest }: MultiValueInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiValueInput: ({ value, label, sublabel, disabled, required, error, errorMessage, hintText, tags, onTagAdd, onTagRemove, onChange, size, onFocus, onBlur, ...rest }: MultiValueInputProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiValueInput;

package/dist/components/Inputs/MultiValueInput/types.d.ts

@@ -25,4 +25,6 @@ export type MultiValueInputProps = {
     onTagRemove?: (tag: string) => void;
     onChange?: (value: string) => void;
     size?: TextInputSize;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onChange' | 'value'>;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onChange' | 'value' | 'onFocus' | 'onBlur'>;

package/dist/components/Menu/Menu.d.ts

@@ -2,7 +2,7 @@ import { CSSObject } from 'styled-components';
 import { MenuProps } from './types';
 export declare const contentBaseStyle: CSSObject;
 declare const Menu: {
-    ({ trigger, items, asModal, alignment, side, sideOffset, alignOffset, collisonBoundaryRef, maxHeight, enableSearch, searchPlaceholder, minWidth, maxWidth, open, onOpenChange, enableVirtualScrolling, virtualItemHeight, virtualOverscan, virtualScrollThreshold, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+    ({ trigger, items, asModal, alignment, side, sideOffset, alignOffset, collisonBoundaryRef, maxHeight, enableSearch, searchPlaceholder, minWidth, maxWidth, open, onOpenChange, enableVirtualScrolling, virtualItemHeight, virtualOverscan, virtualScrollThreshold, skeleton, }: MenuProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Menu;

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

@@ -1,3 +1,4 @@
+import { SkeletonVariant } from '../Skeleton';
 import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types';
 export declare enum MenuAlignment {
     START = "start",
@@ -31,6 +32,11 @@ export type MenuProps = {
     sideOffset?: number;
     alignOffset?: number;
     collisonBoundaryRef?: Element | null | Array<Element | null>;
+    skeleton?: {
+        count?: number;
+        show?: boolean;
+        variant?: SkeletonVariant;
+    };
 };
 export declare enum MenuItemVariant {
     DEFAULT = "default",

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -1,3 +1,3 @@
 import { MultiSelectProps } from './types';
-declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, customTrigger, useDrawerOnMobile, minMenuWidth, maxMenuWidth, maxMenuHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, itemsToRender, onEndReached, endReachedThreshold, hasMore, loadingComponent, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, customTrigger, useDrawerOnMobile, minMenuWidth, maxMenuWidth, maxMenuHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, itemsToRender, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;

package/dist/components/MultiSelect/MultiSelectMenu.d.ts

@@ -1,3 +1,3 @@
 import { MultiSelectMenuProps } from './types';
-declare const MultiSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, disabled, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, onSelectAll, alignment, side, sideOffset, alignOffset, open, onOpenChange, showActionButtons, primaryAction, secondaryAction, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, }: MultiSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, disabled, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, onSelectAll, alignment, side, sideOffset, alignOffset, open, onOpenChange, showActionButtons, primaryAction, secondaryAction, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, skeleton, }: MultiSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelectMenu;

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

@@ -1,3 +1,4 @@
+import { SkeletonVariant } from '../Skeleton';
 import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types';
 export declare enum MultiSelectVariant {
     CONTAINER = "container",
@@ -112,6 +113,11 @@ export type MultiSelectProps = {
     endReachedThreshold?: number;
     hasMore?: boolean;
     loadingComponent?: React.ReactNode;
+    skeleton?: {
+        count?: number;
+        show?: boolean;
+        variant?: SkeletonVariant;
+    };
 };
 export type MultiSelectMenuProps = {
     items: MultiSelectMenuGroupType[];
@@ -155,4 +161,9 @@ export type MultiSelectMenuProps = {
     endReachedThreshold?: number;
     hasMore?: boolean;
     loadingComponent?: React.ReactNode;
+    skeleton?: {
+        count?: number;
+        show?: boolean;
+        variant?: SkeletonVariant;
+    };
 };

package/dist/components/Radio/utils.d.ts

@@ -2,7 +2,6 @@ import { default as React } from 'react';
 import { RadioSize, RadioProps } from './types';
 import { RadioTokensType } from './radio.token';
 export declare const getRadioDataState: (checked: boolean) => string;
-export declare const extractPixelValue: (tokenValue: string) => number;
 export declare const getSpacingBySize: (size: RadioSize) => {
     marginLeft: string;
     marginTop: string;

package/dist/components/Sidebar/TenantPanel.d.ts

@@ -4,7 +4,9 @@ type TenantPanelProps = {
     items: TenantItem[];
     selected: string;
     onSelect: (label: string) => void;
-    maxVisibleItems?: number;
+    tenantSlot1?: React.ReactNode;
+    tenantSlot2?: React.ReactNode;
+    tenantFooter?: React.ReactNode;
 };
 declare const TenantPanel: React.FC<TenantPanelProps>;
 declare const TenantItem: React.FC<{

package/dist/components/Sidebar/sidebar.tokens.d.ts

@@ -60,6 +60,7 @@ export type SidebarTokenType = {
             backgroundColor: {
                 [key in SidebarState]: CSSObject['backgroundColor'];
             };
+            width: CSSObject['width'];
         };
     };
     directory: {

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

@@ -5,17 +5,29 @@ export type LeftPanelItem = {
     label: string;
     icon: ReactNode;
     value?: string;
+    /**
+     * When true, item appears in main panel. When false or undefined, item appears in overflow menu (3-dots)
+     * Defaults to false (hidden in overflow)
+     */
+    showInPanel?: boolean;
 };
 export type LeftPanelInfo = {
     items: LeftPanelItem[];
     selected: string;
     onSelect: (value: string) => void;
-    maxVisibleItems?: number;
+    tenantSlot1?: ReactNode;
+    tenantSlot2?: ReactNode;
+    tenantFooter?: ReactNode;
 };
 export type TenantItem = {
     label: string;
     value?: string;
     icon: ReactNode;
+    /**
+     * When true, item appears in main panel. When false or undefined, item appears in overflow menu (3-dots)
+     * Defaults to false (hidden in overflow)
+     */
+    showInPanel?: boolean;
 };
 export type SidebarMerchantInfo = {
     items: Array<{
@@ -69,6 +81,15 @@ export type SidebarProps = {
      * Only used when isExpanded is not provided
      */
     defaultIsExpanded?: boolean;
+    /**
+     * When true, shows only the left panel without any sidebar content
+     * In this mode:
+     * - Only left panel is visible (no directory, header, footer, toggle)
+     * - Left panel is always shown (no intermediate/hover states)
+     * - Sidebar cannot be expanded
+     * Only applies when leftPanel is provided
+     */
+    panelOnlyMode?: boolean;
     /**
      * Show primary action button in mobile navigation
      */

package/dist/components/Sidebar/utils.d.ts

@@ -1,7 +1,7 @@
 import { MobileNavigationItem, TenantItem } from './types';
 import { SidebarTokenType } from './sidebar.tokens';
 import { DirectoryData } from '../Directory/types';
-export declare const arrangeTenants: (tenants: TenantItem[], selectedLabel: string, maxVisible: number) => {
+export declare const arrangeTenants: (tenants: TenantItem[], selectedLabel: string) => {
     visibleTenants: TenantItem[];
     hiddenTenants: TenantItem[];
     hasMoreTenants: boolean;

package/dist/components/SingleSelect/SingleSelect.d.ts

@@ -1,3 +1,3 @@
 import { SingleSelectProps } from './types';
-declare const SingleSelect: ({ label, subLabel, hintText, required, helpIconText, placeholder, error, errorMessage, size, items, name, variant, disabled, selected, onSelect, enableSearch, searchPlaceholder, slot, customTrigger, useDrawerOnMobile, alignment, side, sideOffset, alignOffset, minMenuWidth, maxMenuWidth, maxMenuHeight, onBlur, onFocus, inline, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, loadingComponent, }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleSelect: ({ label, subLabel, hintText, required, helpIconText, placeholder, error, errorMessage, size, items, name, variant, disabled, selected, onSelect, enableSearch, searchPlaceholder, slot, customTrigger, useDrawerOnMobile, alignment, side, sideOffset, alignOffset, minMenuWidth, maxMenuWidth, maxMenuHeight, onBlur, onFocus, inline, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelect;

package/dist/components/SingleSelect/SingleSelectMenu.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { SelectMenuAlignment, SelectMenuSide, SelectMenuGroupType } from '../Select';
 import { SelectMenuSize, SelectMenuVariant } from './types';
+import { SkeletonVariant } from '../Skeleton';
 type SingleSelectMenuProps = {
     items: SelectMenuGroupType[];
     selected: string;
@@ -27,6 +28,11 @@ type SingleSelectMenuProps = {
     endReachedThreshold?: number;
     hasMore?: boolean;
     loadingComponent?: React.ReactNode;
+    skeleton?: {
+        count?: number;
+        show?: boolean;
+        variant?: SkeletonVariant;
+    };
 };
-declare const SingleSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, enableSearch, searchPlaceholder, disabled, alignment, side, sideOffset, alignOffset, open, onOpenChange, size, variant, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, }: SingleSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, enableSearch, searchPlaceholder, disabled, alignment, side, sideOffset, alignOffset, open, onOpenChange, size, variant, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, skeleton, }: SingleSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelectMenu;

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

@@ -1,3 +1,4 @@
+import { SkeletonVariant } from '../Skeleton';
 import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types';
 export declare enum SelectMenuAlignment {
     START = "start",
@@ -102,4 +103,9 @@ export type SingleSelectProps = {
     endReachedThreshold?: number;
     hasMore?: boolean;
     loadingComponent?: React.ReactNode;
+    skeleton?: {
+        count?: number;
+        show?: boolean;
+        variant?: SkeletonVariant;
+    };
 };

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

@@ -1,16 +1,7 @@
-import { ReactNode } from 'react';
-import { TagColor, TagProps, TagShape, TagSize, TagVariant } from '../Tags';
-export type TagConfig = {
-    text: string;
-    variant?: TagVariant;
-    style?: TagColor;
-    onClick?: () => void;
-};
+import { TagProps, TagShape, TagSize } from '../Tags';
 export type SplitTagProps = {
     primaryTag: Omit<TagProps, 'splitTagPosition' | 'size' | 'shape'>;
     secondaryTag?: Omit<TagProps, 'splitTagPosition' | 'size' | 'shape'>;
-    leadingSlot?: ReactNode;
-    trailingSlot?: ReactNode;
     size?: TagSize;
     shape?: TagShape;
 };

package/dist/components/StatCard/StatCard.d.ts

@@ -1,6 +1,6 @@
 import { StatCardProps } from './types';
 declare const StatCard: {
-    ({ title, value, valueTooltip, change, subtitle, variant, chartData, progressValue, titleIcon, actionIcon, helpIconText, dropdownProps, maxWidth, xAxis, yAxis, valueFormatter, height, direction, ...props }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ title, value, valueTooltip, change, subtitle, variant, chartData, progressValue, titleIcon, actionIcon, helpIconText, dropdownProps, minWidth, maxWidth, xAxis, yAxis, valueFormatter, height, direction, ...props }: StatCardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default StatCard;

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

@@ -11,6 +11,10 @@ export declare enum ChangeType {
     INCREASE = "increase",
     DECREASE = "decrease"
 }
+export declare enum StatCardArrowDirection {
+    UP = "up",
+    DOWN = "down"
+}
 export type ChartDataPoint = {
     value: number;
     name: string;
@@ -18,6 +22,7 @@ export type ChartDataPoint = {
 export type StatCardChange = {
     value: number;
     valueType: ChangeType;
+    arrowDirection?: StatCardArrowDirection;
     tooltip?: ReactNode;
 };
 export declare enum StatCardDirection {
@@ -48,6 +53,7 @@ export type StatCardProps = {
     helpIconText?: string;
     dropdownProps?: SingleSelectProps;
     maxWidth?: string;
+    minWidth?: string;
     xAxis?: StatCardAxisConfig;
     yAxis?: StatCardAxisConfig;
     valueFormatter?: AxisType;

package/dist/components/Switch/utils.d.ts

@@ -2,7 +2,6 @@ import { default as React } from 'react';
 import { SwitchSize, SwitchProps } from './types';
 import { SwitchTokensType } from './switch.token';
 export declare const getSwitchDataState: (checked: boolean) => string;
-export declare const extractPixelValue: (tokenValue: string) => number;
 export declare const getSpacingBySize: (size: SwitchSize) => {
     marginLeft: string;
     marginTop: string;

package/dist/components/Tabs/StyledTabs.d.ts

@@ -11,11 +11,13 @@ export declare const StyledTabsList: import('styled-components/dist/types').ISty
     $expanded: boolean;
     $fitContent: boolean;
     $tabsToken: TabsTokensType;
+    $hideIndicator?: boolean;
 }>> & string & Omit<import('react').ForwardRefExoticComponent<TabsPrimitive.TabsListProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
 export declare const StyledTabsTrigger: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<TabsPrimitive.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, {
     $variant: TabsVariant;
     $size: TabsSize;
     $tabsToken: TabsTokensType;
+    $isOverlay?: boolean;
 }>> & string & Omit<import('react').ForwardRefExoticComponent<TabsPrimitive.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>>, keyof import('react').Component<any, {}, any>>;
 export declare const IconContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     $tabsToken: TabsTokensType;

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

@@ -11,5 +11,7 @@ declare const Tabs: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react
     addButtonTooltip?: string;
     maxDisplayTabs?: number;
     disable?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: import('../Skeleton').SkeletonVariant;
 } & React.RefAttributes<HTMLDivElement>>;
 export default Tabs;