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

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/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;
@@ -257,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;
@@ -282,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/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)
      */

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,8 @@ 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>;

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,18 +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<{
@@ -70,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/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

@@ -53,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;

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

@@ -16,5 +16,7 @@ declare const TabsList: React.ForwardRefExoticComponent<Omit<import('@radix-ui/r
     onTabChange?: (value: string) => void;
     activeTab?: string;
     disable?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: import('../Skeleton').SkeletonVariant;
 } & React.RefAttributes<HTMLDivElement>>;
 export default TabsList;

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

@@ -9,5 +9,10 @@ declare const TabsTrigger: import('react').ForwardRefExoticComponent<Omit<import
     closable?: boolean;
     onClose?: () => void;
     disable?: boolean;
+    isActive?: boolean;
+    isOverlay?: boolean;
+    tabsGroupId?: string;
+    showSkeleton?: boolean;
+    skeletonVariant?: import('../Skeleton').SkeletonVariant;
 } & import('react').RefAttributes<HTMLButtonElement>>;
 export default TabsTrigger;

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

@@ -1,4 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { SkeletonVariant } from '../Skeleton/skeleton.tokens';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 export declare enum TabsVariant {
     BOXED = "boxed",
@@ -17,6 +18,8 @@ export type TabItem = {
     closable?: boolean;
     isDefault?: boolean;
     disable?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
 };
 export type TabsProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
     variant?: TabsVariant;
@@ -30,6 +33,8 @@ export type TabsProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
     addButtonTooltip?: string;
     maxDisplayTabs?: number;
     disable?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
 };
 export type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
     variant?: TabsVariant;
@@ -47,6 +52,8 @@ export type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List>
     onTabChange?: (value: string) => void;
     activeTab?: string;
     disable?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
 };
 export type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
     value: string;
@@ -58,6 +65,11 @@ export type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Tri
     closable?: boolean;
     onClose?: () => void;
     disable?: boolean;
+    isActive?: boolean;
+    isOverlay?: boolean;
+    tabsGroupId?: string;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
 };
 export type TabsContentProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
 export type TabsStyles = {

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

@@ -38,3 +38,23 @@ export declare const prepareDropdownItems: (tabs: TabItem[]) => {
  * Returns all tabs for display (no limiting - let horizontal scroll handle overflow)
  */
 export declare const getDisplayTabs: (tabs: TabItem[]) => TabItem[];
+/**
+ * Calculates the position and width for the tab indicator
+ */
+export declare const calculateTabIndicatorPosition: (tabElement: HTMLButtonElement, listElement: HTMLDivElement) => {
+    tabLeft: number;
+    tabWidth: number;
+};
+/**
+ * Determines if the tab movement is from left to right
+ */
+export declare const isMovingRight: (oldTab: HTMLButtonElement, newTab: HTMLButtonElement) => boolean;
+/**
+ * Calculates transition dimensions for the animated underline
+ */
+export declare const calculateTransitionDimensions: (oldTab: HTMLButtonElement, newTab: HTMLButtonElement, listElement: HTMLDivElement) => {
+    left: number;
+    width: number;
+    finalLeft: number;
+    finalWidth: number;
+};

package/dist/components/Topbar/topbar.tokens.d.ts

@@ -2,8 +2,24 @@ import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { BreakpointType } from '../../breakpoints/breakPoints';
 export type TopbarState = 'default' | 'hover' | 'active';
-export type TopbarTokensType = {
-    top: CSSObject['top'];
+/**
+ * Topbar Tokens following the pattern: [target].CSSProp.[variant].[state]
+ *
+ * Structure matches Sidebar pattern for consistency:
+ * - Base properties: borderBottom, backgroundColor, backdropFilter, padding, gap
+ * - Target sections: toggleButton.*, actionButton.*, tenantIconButton.*, merchantSelectTrigger.*, leftSection.*, rightSection.*, sidebarSection.*
+ * - Each target has: backgroundColor, padding, borderRadius, gap, specific properties
+ * - Interactive elements have state-based styling: [state] = default | hover | active
+ *
+ * Pattern examples:
+ * - backgroundColor (topbar background color)
+ * - padding (topbar content padding)
+ * - toggleButton.backgroundColor.[state] (interactive toggle button)
+ * - actionButton.padding (action button spacing)
+ * - leftSection.gap (left section item spacing)
+ * - merchantSelectTrigger.text.color (merchant text color)
+ */
+export type TopbarTokenType = {
     zIndex: CSSObject['zIndex'];
     borderBottom: CSSObject['borderBottom'];
     backgroundColor: CSSObject['backgroundColor'];
@@ -65,13 +81,6 @@ export type TopbarTokensType = {
             color: CSSObject['color'];
         };
     };
-    centerSection: {
-        title: {
-            fontSize: CSSObject['fontSize'];
-            fontWeight: CSSObject['fontWeight'];
-            color: CSSObject['color'];
-        };
-    };
     rightSection: {
         gap: CSSObject['gap'];
     };
@@ -80,6 +89,6 @@ export type TopbarTokensType = {
     };
 };
 export type ResponsiveTopbarTokens = {
-    [key in keyof BreakpointType]: TopbarTokensType;
+    [key in keyof BreakpointType]: TopbarTokenType;
 };
 export declare const getTopbarTokens: (foundationToken: FoundationTokenType) => ResponsiveTopbarTokens;

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

@@ -15,6 +15,8 @@ export type TopbarProps = {
     isExpanded?: boolean;
     onToggleExpansion?: () => void;
     showToggleButton?: boolean;
+    /** When true, hides toggle button (used in panel only mode) */
+    panelOnlyMode?: boolean;
     /** Controlled mode: Show/hide topbar */
     isVisible?: boolean;
     /** Callback when visibility changes (controlled mode) */