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

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

@@ -3,4 +3,10 @@ export type BreadcrumbItemType = {
     rightSlot?: React.ReactNode;
     label: string;
     href: string;
+    /**
+     * Optional click handler for custom routing (e.g., React Router).
+     * When provided, prevents default link behavior and calls this handler instead.
+     * Use this to avoid page reloads and handle navigation with client-side routing.
+     */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
 };

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

@@ -37,7 +37,10 @@ export type ButtonTokensType = {
     padding: {
         [key in ButtonSize]: {
             [key in ButtonType]: {
-                [key in ButtonSubType]: CSSObject['padding'];
+                [key in ButtonSubType]: {
+                    x: CSSObject['padding'];
+                    y: CSSObject['padding'];
+                };
             };
         };
     };

package/dist/components/Checkbox/checkbox.animations.d.ts

@@ -0,0 +1,2 @@
+export declare const checkboxRootAnimations: import('styled-components').RuleSet<object>;
+export declare const checkboxIndicatorAnimations: import('styled-components').RuleSet<object>;

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

@@ -188,11 +188,12 @@ export type PaginationConfig = {
     totalRows: number;
     pageSizeOptions?: number[];
 };
-export type BulkAction = {
-    id: string;
-    label: string;
-    variant: 'primary' | 'secondary' | 'danger';
-    onClick: (selectedRowIds: string[]) => void;
+export type BulkActionsConfig = {
+    showSelectAll?: boolean;
+    showDeselectAll?: boolean;
+    onSelectAll?: () => void;
+    onDeselectAll?: () => void;
+    customActions?: ReactNode;
 };
 export type RowActionConfig<T extends Record<string, unknown>> = {
     id: string;
@@ -274,8 +275,24 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     isRowExpandable?: (row: T, index: number) => boolean;
     onRowExpansionChange?: (rowId: unknown, isExpanded: boolean, rowData: T) => void;
     enableRowSelection?: boolean;
-    bulkActions?: BulkAction[];
+    onRowSelectionChange?: (selectedRowIds: string[], isSelected: boolean, rowId: string, rowData: T) => void;
+    bulkActions?: BulkActionsConfig;
     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/DateRangePicker/TimeSelector.d.ts

@@ -1,12 +1,10 @@
 import { default as React } from 'react';
-import { CalendarTokenType } from './dateRangePicker.tokens';
 type TimeSelectorProps = {
     value: string;
     onChange: (time: string) => void;
     className?: string;
     autoFocus?: boolean;
     tabIndex?: number;
-    calendarToken?: CalendarTokenType;
 };
 declare const TimeSelector: React.ForwardRefExoticComponent<TimeSelectorProps & React.RefAttributes<HTMLDivElement>>;
 export default TimeSelector;

package/dist/components/DateRangePicker/dateRangePicker.tokens.d.ts

@@ -83,7 +83,7 @@ export type CalendarTokenType = {
         border: CSSObject['border'];
         borderRadius: CSSObject['borderRadius'];
         boxShadow: CSSObject['boxShadow'];
-        inputs: {
+        header: {
             padding: {
                 x: CSSObject['padding'];
                 y: CSSObject['padding'];
@@ -92,12 +92,9 @@ export type CalendarTokenType = {
                 gap: CSSObject['gap'];
                 label: {
                     color: CSSObject['color'];
-                    width: CSSObject['width'];
                     fontSize: CSSObject['fontSize'];
                     fontWeight: CSSObject['fontWeight'];
                 };
-                fontSize: CSSObject['fontSize'];
-                fontWeight: CSSObject['fontWeight'];
             };
         };
         calendarGrid: {
@@ -136,8 +133,8 @@ export type CalendarTokenType = {
                     fontWeight: CSSObject['fontWeight'];
                     fontSize: CSSObject['fontSize'];
                     lineHeight: CSSObject['lineHeight'];
-                    outline: {
-                        [key in CalendarState]: CSSObject['outline'];
+                    border: {
+                        [key in CalendarState]: CSSObject['border'];
                     };
                     borderRadius: CSSObject['borderRadius'];
                 };
@@ -166,14 +163,8 @@ export type CalendarTokenType = {
                     todayDay: {
                         fontWeight: CSSObject['fontWeight'];
                     };
-                    hoverState: {
-                        boxShadow: CSSObject['boxShadow'];
-                        borderRadius: CSSObject['borderRadius'];
-                    };
                     disabledDay: {
-                        opacity: CSSObject['opacity'];
-                        cursor: CSSObject['cursor'];
-                        pointerEvents: CSSObject['pointerEvents'];
+                        color: CSSObject['color'];
                     };
                 };
                 text: {
@@ -189,16 +180,13 @@ export type CalendarTokenType = {
                     todayDay: {
                         color: CSSObject['color'];
                     };
+                    disabledDate: {
+                        color: CSSObject['color'];
+                    };
                 };
                 todayIndicator: {
                     width: CSSObject['width'];
-                    height: CSSObject['height'];
                     backgroundColor: CSSObject['backgroundColor'];
-                    borderRadius: CSSObject['borderRadius'];
-                    position: CSSObject['position'];
-                    bottom: CSSObject['bottom'];
-                    left: CSSObject['left'];
-                    transform: CSSObject['transform'];
                 };
             };
         };

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

@@ -17,6 +17,11 @@ export type NavbarItem = {
     onClick?: () => void;
     href?: string;
     isSelected?: boolean;
+    /**
+     * When true, the item appears in the Sidebar mobile navigation drawer.
+     * Desktop always renders all items regardless of this flag.
+     */
+    showOnMobile?: boolean;
 };
 export type SectionProps = {
     section: DirectoryData;

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

@@ -0,0 +1,8 @@
+/**
+ * Menu dropdown content animations
+ */
+export declare const menuContentAnimations = "\n  transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n\n  &[data-side='bottom'][data-state='open'] {\n    animation: slideInFromTop 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='bottom'][data-state='closed'] {\n    animation: slideOutToTop 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  &[data-side='top'][data-state='open'] {\n    animation: slideInFromBottom 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='top'][data-state='closed'] {\n    animation: slideOutToBottom 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  &[data-side='right'][data-state='open'] {\n    animation: slideInFromLeft 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='right'][data-state='closed'] {\n    animation: slideOutToLeft 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  &[data-side='left'][data-state='open'] {\n    animation: slideInFromRight 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='left'][data-state='closed'] {\n    animation: slideOutToRight 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  /* Shadcn-style keyframes with zoom + slide + fade */\n  @keyframes slideInFromTop {\n    from {\n      opacity: 0;\n      transform: translateY(-8px) scale(0.95);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  @keyframes slideOutToTop {\n    from {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: translateY(-8px) scale(0.95);\n    }\n  }\n\n  @keyframes slideInFromBottom {\n    from {\n      opacity: 0;\n      transform: translateY(8px) scale(0.95);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  @keyframes slideOutToBottom {\n    from {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: translateY(8px) scale(0.95);\n    }\n  }\n\n  @keyframes slideInFromLeft {\n    from {\n      opacity: 0;\n      transform: translateX(-8px) scale(0.95);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0) scale(1);\n    }\n  }\n\n  @keyframes slideOutToLeft {\n    from {\n      opacity: 1;\n      transform: translateX(0) scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: translateX(-8px) scale(0.95);\n    }\n  }\n\n  @keyframes slideInFromRight {\n    from {\n      opacity: 0;\n      transform: translateX(8px) scale(0.95);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0) scale(1);\n    }\n  }\n\n  @keyframes slideOutToRight {\n    from {\n      opacity: 1;\n      transform: translateX(0) scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: translateX(8px) scale(0.95);\n    }\n  }\n";
+/**
+ * Submenu animations
+ */
+export declare const submenuContentAnimations = "\n  transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n\n  &[data-side='right'][data-state='open'] {\n    animation: slideInFromLeft 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='right'][data-state='closed'] {\n    animation: slideOutToLeft 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  &[data-side='left'][data-state='open'] {\n    animation: slideInFromRight 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='left'][data-state='closed'] {\n    animation: slideOutToRight 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n";

package/dist/components/Modal/modal.animations.d.ts

@@ -0,0 +1,3 @@
+export declare const modalBackdropAnimations: (isAnimatingIn: boolean) => import('styled-components').RuleSet<object>;
+export declare const modalContentAnimations: (isAnimatingIn: boolean) => import('styled-components').RuleSet<object>;
+export declare const ANIMATION_DURATION = 500;

package/dist/components/Modal/modal.utils.d.ts

@@ -0,0 +1,2 @@
+export declare const getPortalContainer: () => HTMLElement;
+export declare const cleanupPortalContainer: () => void;

package/dist/components/Modal/useModal.d.ts

@@ -0,0 +1,5 @@
+export declare const useModal: (isOpen: boolean, onClose: () => void) => {
+    shouldRender: boolean;
+    isAnimatingIn: boolean;
+    portalContainer: HTMLElement | null;
+};

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

@@ -0,0 +1,12 @@
+/**
+ * MultiSelect Dropdown Animations
+ *
+ * Shadcn-style animations with zoom + slide + fade
+ * - Combined animation in single keyframe
+ * - Side-aware based on dropdown position
+ * - Smooth spring easing
+ */
+/**
+ * Main dropdown content animations
+ */
+export declare const dropdownContentAnimations = "\n  transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n\n  /* Opening animations - Shadcn style with zoom */\n  &[data-side='bottom'][data-state='open'] {\n    animation: slideInFromTop 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='bottom'][data-state='closed'] {\n    animation: slideOutToTop 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  &[data-side='top'][data-state='open'] {\n    animation: slideInFromBottom 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='top'][data-state='closed'] {\n    animation: slideOutToBottom 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  &[data-side='right'][data-state='open'] {\n    animation: slideInFromLeft 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='right'][data-state='closed'] {\n    animation: slideOutToLeft 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  &[data-side='left'][data-state='open'] {\n    animation: slideInFromRight 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='left'][data-state='closed'] {\n    animation: slideOutToRight 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  /* Shadcn-style keyframes with zoom + slide + fade */\n  @keyframes slideInFromTop {\n    from {\n      opacity: 0;\n      transform: translateY(-8px) scale(0.95);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  @keyframes slideOutToTop {\n    from {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: translateY(-8px) scale(0.95);\n    }\n  }\n\n  @keyframes slideInFromBottom {\n    from {\n      opacity: 0;\n      transform: translateY(8px) scale(0.95);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  @keyframes slideOutToBottom {\n    from {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: translateY(8px) scale(0.95);\n    }\n  }\n\n  @keyframes slideInFromLeft {\n    from {\n      opacity: 0;\n      transform: translateX(-8px) scale(0.95);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0) scale(1);\n    }\n  }\n\n  @keyframes slideOutToLeft {\n    from {\n      opacity: 1;\n      transform: translateX(0) scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: translateX(-8px) scale(0.95);\n    }\n  }\n\n  @keyframes slideInFromRight {\n    from {\n      opacity: 0;\n      transform: translateX(8px) scale(0.95);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0) scale(1);\n    }\n  }\n\n  @keyframes slideOutToRight {\n    from {\n      opacity: 1;\n      transform: translateX(0) scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: translateX(8px) scale(0.95);\n    }\n  }\n";

package/dist/components/Popover/popover.animations.d.ts

@@ -0,0 +1 @@
+export declare const popoverContentAnimations: import('styled-components').RuleSet<object>;

package/dist/components/Primitives/PrimitiveInput/PrimitiveInput.d.ts

@@ -84,6 +84,11 @@ type PrimitiveInputProps = StateStyles & {
     overflowY?: CSSObject['overflowY'];
     contentCentered?: boolean;
     cursor?: CSSObject['cursor'];
+    transition?: CSSObject['transition'];
+    transitionProperty?: CSSObject['transitionProperty'];
+    transitionDuration?: CSSObject['transitionDuration'];
+    transitionTimingFunction?: CSSObject['transitionTimingFunction'];
+    transitionDelay?: CSSObject['transitionDelay'];
     placeholderStyles?: CSSObject;
 };
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & PrimitiveInputProps & {

package/dist/components/Primitives/PrimitiveTextArea.d.ts

@@ -79,6 +79,11 @@ type PrimitiveTextareaProps = StateStyles & {
     overflowY?: CSSObject['overflowY'];
     contentCentered?: boolean;
     cursor?: CSSObject['cursor'];
+    transition?: CSSObject['transition'];
+    transitionProperty?: CSSObject['transitionProperty'];
+    transitionDuration?: CSSObject['transitionDuration'];
+    transitionTimingFunction?: CSSObject['transitionTimingFunction'];
+    transitionDelay?: CSSObject['transitionDelay'];
     placeholderStyles?: CSSObject;
     resize?: CSSObject['resize'];
     fontFamily?: CSSObject['fontFamily'];

package/dist/components/Radio/radio.animations.d.ts

@@ -0,0 +1 @@
+export declare const radioAnimations: import('styled-components').RuleSet<object>;

package/dist/components/Sidebar/SidebarMobile/MobileNavigationItem.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { MobileNavigationItem as MobileNavigationItemType } from '../types';
+import { MobileNavigationTokenType } from './mobile.tokens';
+type MobileNavigationItemProps = {
+    item: MobileNavigationItemType;
+    index?: number;
+    tokens: MobileNavigationTokenType;
+    onSelect: (item: MobileNavigationItemType) => void;
+};
+declare const MobileNavigationItem: React.ForwardRefExoticComponent<MobileNavigationItemProps & React.RefAttributes<HTMLButtonElement>>;
+export default MobileNavigationItem;

package/dist/components/Sidebar/SidebarMobile/MoreButton.d.ts

@@ -0,0 +1,7 @@
+import { MobileNavigationTokenType } from './mobile.tokens';
+type MoreButtonProps = {
+    tokens: MobileNavigationTokenType;
+    onClick: () => void;
+};
+declare const MoreButton: import('react').ForwardRefExoticComponent<MoreButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default MoreButton;

package/dist/components/Sidebar/SidebarMobile/PrimaryActionButton.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { MobileNavigationTokenType } from './mobile.tokens';
+type PrimaryActionButtonProps = {
+    tokens: MobileNavigationTokenType;
+    buttonProps?: Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'>;
+};
+declare const PrimaryActionButton: React.ForwardRefExoticComponent<PrimaryActionButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default PrimaryActionButton;

package/dist/components/Sidebar/SidebarMobile/hooks.d.ts

@@ -0,0 +1,24 @@
+import { MobileNavigationItem } from '../types';
+/**
+ * Custom hook to manage ordered items with smart property updates.
+ * Only resets order when items are added/removed, otherwise preserves order
+ * and just updates properties (like isSelected).
+ *
+ * This hook is extracted because:
+ * 1. It encapsulates complex state logic
+ * 2. The logic is reusable across different navigation contexts
+ * 3. It keeps the component clean and focused on rendering
+ */
+export declare const useOrderedItems: <T extends {
+    label: string;
+}>(items: T[]) => readonly [T[], import('react').Dispatch<import('react').SetStateAction<T[]>>];
+/**
+ * Custom hook for item selection with smart swapping logic.
+ * Handles the complex behavior of swapping secondary items with primary items.
+ *
+ * This hook is extracted because:
+ * 1. It encapsulates business logic for item swapping
+ * 2. It reduces component complexity
+ * 3. The logic is testable in isolation
+ */
+export declare const useItemSelection: (orderedItems: MobileNavigationItem[], setOrderedItems: (items: MobileNavigationItem[]) => void, primaryItems: MobileNavigationItem[], hasSecondaryItems: boolean, onCollapse: () => void) => (item: MobileNavigationItem, isSecondaryItem?: boolean) => void;

package/dist/components/Sidebar/SidebarMobile/index.d.ts

@@ -0,0 +1,3 @@
+import { SidebarMobileNavigationProps } from '../types';
+declare const SidebarMobileNavigation: import('react').ForwardRefExoticComponent<SidebarMobileNavigationProps & import('react').RefAttributes<HTMLDivElement>>;
+export default SidebarMobileNavigation;

package/dist/components/Sidebar/SidebarMobile/mobile.tokens.d.ts

@@ -0,0 +1,81 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
+export type MobileNavigationState = 'default' | 'active';
+/**
+ * Mobile Navigation Tokens following the pattern: [target].CSSProp.[variant].[state]
+ *
+ * Structure matches Sidebar pattern for consistency:
+ * - Base properties: backgroundColor, drawer.*
+ * - Layout surfaces: padding/gap (container), row.*
+ * - Interactive elements: item.*, primaryAction.*
+ * - Interactive elements have state-based styling: [state] = default | active
+ *
+ * Note: This is mobile-only, so no responsive breakpoints needed.
+ * All navigation items (including the More button) use the same item tokens.
+ *
+ * Pattern examples:
+ * - padding.[axis] (wrapper spacing for all rows)
+ * - row.padding.[axis] (individual row spacing)
+ * - item.backgroundColor.[state] (item background per state)
+ * - primaryAction.width (primary action button dimensions)
+ */
+export type MobileNavigationTokenType = {
+    backgroundColor: CSSObject['backgroundColor'];
+    drawer: {
+        borderRadius: CSSObject['borderRadius'];
+        borderTop: CSSObject['border'];
+    };
+    padding: {
+        x: CSSObject['padding'];
+        y: CSSObject['padding'];
+    };
+    gap: CSSObject['gap'];
+    row: {
+        padding: {
+            x: CSSObject['padding'];
+            y: CSSObject['padding'];
+        };
+        gap: CSSObject['gap'];
+        item: {
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            borderRadius: CSSObject['borderRadius'];
+            gap: CSSObject['gap'];
+            backgroundColor: {
+                [key in MobileNavigationState]: CSSObject['backgroundColor'];
+            };
+            color: {
+                [key in MobileNavigationState]: CSSObject['color'];
+            };
+            fontWeight: CSSObject['fontWeight'];
+            icon: {
+                width: CSSObject['width'];
+                height: CSSObject['height'];
+                borderRadius: CSSObject['borderRadius'];
+                transition: CSSObject['transition'];
+            };
+            text: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                textAlign: CSSObject['textAlign'];
+            };
+        };
+        primaryAction: {
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            borderRadius: CSSObject['borderRadius'];
+            background: CSSObject['background'];
+            boxShadow: CSSObject['boxShadow'];
+            color: CSSObject['color'];
+            icon: {
+                width: CSSObject['width'];
+                height: CSSObject['height'];
+            };
+        };
+    };
+};
+export type ResponsiveMobileNavigationTokens = {
+    [key in keyof BreakpointType]: MobileNavigationTokenType;
+};
+export declare const getMobileNavigationTokens: (foundationToken: FoundationTokenType) => ResponsiveMobileNavigationTokens;

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

@@ -0,0 +1,29 @@
+import { MobileNavigationItem } from '../types';
+import { MobileNavigationTokenType } from './mobile.tokens';
+export declare const calculateMobileNavigationSnapPoints: (secondaryRowCount: number, viewportHeight: number | undefined, tokens: MobileNavigationTokenType, viewportHeightMultiplier: number) => Array<string | number>;
+export declare const getMobileNavigationLayout: (items: MobileNavigationItem[], viewportHeight: number | undefined, tokens: MobileNavigationTokenType, primaryVisibleLimit: number, viewportHeightMultiplier: number, options?: {
+    primaryReservedSlots?: number;
+}) => {
+    primaryItems: MobileNavigationItem[];
+    secondaryItems: MobileNavigationItem[];
+    hasSecondaryItems: boolean;
+    snapPoints: (string | number)[];
+};
+export declare const getMobileNavigationSecondaryRows: (secondaryItems: MobileNavigationItem[], primaryVisibleLimit: number) => MobileNavigationItem[][];
+export declare const getMobileNavigationFillerCount: (itemsInRow: number, primaryVisibleLimit: number) => number;
+export declare const splitPrimaryItems: (primaryItems: MobileNavigationItem[], showPrimaryAction: boolean) => {
+    leftItems: MobileNavigationItem[];
+    rightItems: MobileNavigationItem[];
+};
+/**
+ * Swap two items in an array by their labels
+ */
+export declare const swapItemsByLabel: <T extends {
+    label: string;
+}>(items: T[], itemLabel1: string, itemLabel2: string) => T[];
+/**
+ * Update item properties without changing order
+ */
+export declare const updateItemProperties: <T extends {
+    label: string;
+}>(orderedItems: T[], newItems: T[]) => T[];

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { DirectoryData } from '../Directory/types';
+import { DirectoryData, NavbarItem } from '../Directory/types';
 import { MerchantInfo } from '../Topbar/types';
 export type LeftPanelItem = {
     label: string;
@@ -37,6 +37,22 @@ export type SidebarProps = {
     merchantInfo?: MerchantInfo;
     rightActions?: ReactNode;
     enableTopbarAutoHide?: boolean;
+    /**
+     * Controlled state: Show/hide topbar
+     * When provided, topbar operates in controlled mode - parent must handle visibility updates
+     */
+    isTopbarVisible?: boolean;
+    /**
+     * Callback fired when topbar visibility should change
+     * In controlled mode: Parent should update isTopbarVisible prop based on this callback
+     * In uncontrolled mode: Optional callback for visibility change notifications
+     */
+    onTopbarVisibilityChange?: (isVisible: boolean) => void;
+    /**
+     * Uncontrolled mode: Initial topbar visibility (defaults to true)
+     * Only used when isTopbarVisible is not provided
+     */
+    defaultIsTopbarVisible?: boolean;
     /**
      * Controlled state: Current expanded state of the sidebar
      * When provided, sidebar operates in controlled mode - parent must handle state updates
@@ -53,4 +69,22 @@ export type SidebarProps = {
      * Only used when isExpanded is not provided
      */
     defaultIsExpanded?: boolean;
+    /**
+     * Show primary action button in mobile navigation
+     */
+    showPrimaryActionButton?: boolean;
+    /**
+     * Props for the primary action button in mobile navigation
+     * Extends HTML button attributes
+     */
+    primaryActionButtonProps?: Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'>;
+};
+export type MobileNavigationItem = NavbarItem & {
+    sectionLabel?: string;
+};
+export type SidebarMobileNavigationProps = {
+    items: MobileNavigationItem[];
+    onHeightChange?: (height: string) => void;
+    showPrimaryActionButton?: boolean;
+    primaryActionButtonProps?: Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'>;
 };

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

@@ -1,5 +1,6 @@
-import { TenantItem } from './types';
+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) => {
     visibleTenants: TenantItem[];
     hiddenTenants: TenantItem[];
@@ -25,3 +26,40 @@ export declare const getDefaultMerchantInfo: () => {
 };
 export declare const useTopbarAutoHide: (enableTopbarAutoHide: boolean) => boolean;
 export declare const isControlledSidebar: (isExpanded: boolean | undefined) => boolean;
+export declare const getMobileNavigationItems: (directory: DirectoryData[]) => MobileNavigationItem[];
+/**
+ * Parse CSS unit values to numbers (e.g., "16px" -> 16)
+ * Returns 0 for invalid values
+ */
+export declare const parseUnitValue: (value: string | number | undefined) => number;
+/**
+ * Parse CSS values to numbers, allowing null for invalid values
+ * Returns null for invalid values (more flexible than parseUnitValue)
+ */
+export declare const parseCssValue: (value: string | number | null | undefined) => number | null;
+export declare const MOBILE_NAVIGATION_COLLAPSED_HEIGHT: string;
+export declare const MOBILE_NAVIGATION_SAFE_AREA: string;
+export declare const getMobileNavigationLayout: (items: MobileNavigationItem[], viewportHeight?: number, options?: {
+    primaryReservedSlots?: number;
+}) => {
+    primaryItems: MobileNavigationItem[];
+    secondaryItems: MobileNavigationItem[];
+    hasSecondaryItems: boolean;
+    snapPoints: (string | number)[];
+};
+export declare const getMobileNavigationSecondaryRows: (secondaryItems: MobileNavigationItem[]) => MobileNavigationItem[][];
+export declare const getMobileNavigationFillerCount: (itemsInRow: number) => number;
+export declare const getMobileNavigationRowPadding: ({ isSecondary, isLastRow, }: {
+    isSecondary: boolean;
+    isLastRow: boolean;
+}) => {
+    paddingTop: number | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "-webkit-max-content" | "auto" | "fit-content" | "intrinsic" | "max-content" | "min-content" | "min-intrinsic" | undefined;
+    paddingRight: number | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "-webkit-max-content" | "auto" | "fit-content" | "intrinsic" | "max-content" | "min-content" | "min-intrinsic" | undefined;
+    paddingBottom: number | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "-webkit-max-content" | "auto" | "fit-content" | "intrinsic" | "max-content" | "min-content" | "min-intrinsic" | undefined;
+    paddingLeft: number | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "-webkit-max-content" | "auto" | "fit-content" | "intrinsic" | "max-content" | "min-content" | "min-intrinsic" | undefined;
+};
+export declare const MOBILE_NAVIGATION_BUTTON_DIMENSIONS: {
+    width: number | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "-webkit-max-content" | "auto" | "fit-content" | "intrinsic" | "max-content" | "min-content" | "min-intrinsic" | undefined;
+    height: number | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "-webkit-max-content" | "auto" | "fit-content" | "intrinsic" | "max-content" | "min-content" | "min-intrinsic" | undefined;
+};
+export declare const MOBILE_NAVIGATION_GAP: number | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "-webkit-max-content" | "auto" | "fit-content" | "intrinsic" | "max-content" | "min-content" | "min-intrinsic" | undefined;

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

@@ -0,0 +1,3 @@
+export declare const dropdownContentAnimations: import('styled-components').RuleSet<object>;
+export declare const submenuContentAnimations: import('styled-components').RuleSet<object>;
+export declare const hoverTransition: import('styled-components').RuleSet<object>;

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

@@ -2,7 +2,7 @@ import { CSSObject } from 'styled-components';
 import { ChangeType, StatCardVariant } from './types';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { BreakpointType } from '../../breakpoints/breakPoints';
-export type StatCardState = 'default' | 'hover' | 'loading';
+export type StatCardState = 'default' | 'hover';
 export type StatCardTokenType = {
     height: CSSObject['height'];
     maxWidth: CSSObject['maxWidth'];

package/dist/components/Switch/switch.animations.d.ts

@@ -0,0 +1,2 @@
+export declare const switchRootAnimations: import('styled-components').RuleSet<object>;
+export declare const switchThumbAnimations: import('styled-components').RuleSet<object>;

package/dist/components/Tags/Tags.d.ts

@@ -0,0 +1,12 @@
+import { TagColor, TagShape, TagSize, TagVariant } from './types';
+declare const Tag: import('react').ForwardRefExoticComponent<Omit<import('../Primitives/Block/Block').BlockProps, "children"> & {
+    text: string;
+    variant?: TagVariant;
+    color?: TagColor;
+    size?: TagSize;
+    shape?: TagShape;
+    leftSlot?: import('react').ReactNode;
+    rightSlot?: import('react').ReactNode;
+    splitTagPosition?: "left" | "right";
+} & import('react').RefAttributes<HTMLDivElement>>;
+export default Tag;

package/dist/components/Tags/tag.tokens.d.ts

@@ -2,6 +2,7 @@ import { CSSObject } from 'styled-components';
 import { TagColor, TagShape, TagSize, TagVariant } from './types';
 import { BreakpointType } from '../../breakpoints/breakPoints';
 import { FoundationTokenType } from '../../tokens/theme.token';
+import { Theme } from '../../context/ThemeProvider';
 /**
  * Tag Tokens following the pattern: [target].CSSProp.[size].[variant].[subType]
  *
@@ -52,5 +53,5 @@ export type TagTokensType = Readonly<{
 export type ResponsiveTagTokens = {
     [key in keyof BreakpointType]: TagTokensType;
 };
-export declare const getTagTokens: (foundationToken: FoundationTokenType) => ResponsiveTagTokens;
+export declare const getTagTokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveTagTokens;
 export default getTagTokens;

package/dist/components/Tooltip/tooltip.animations.d.ts

@@ -0,0 +1 @@
+export declare const tooltipContentAnimations: import('styled-components').RuleSet<object>;

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

@@ -11,9 +11,16 @@ export type MerchantInfo = {
 };
 export type TopbarProps = {
     children?: ReactNode;
+    /** Sidebar expansion state */
     isExpanded?: boolean;
     onToggleExpansion?: () => void;
     showToggleButton?: boolean;
+    /** Controlled mode: Show/hide topbar */
+    isVisible?: boolean;
+    /** Callback when visibility changes (controlled mode) */
+    onVisibilityChange?: (visible: boolean) => void;
+    /** Uncontrolled mode: Initial topbar visibility (defaults to true) */
+    defaultIsVisible?: boolean;
     sidebarTopSlot?: ReactNode;
     topbar?: ReactNode;
     title?: string;

package/dist/components/animations/ChevronAnimation/ChevronAnimation.d.ts

@@ -0,0 +1,3 @@
+import { ChevronAnimationProps } from './types';
+declare const ChevronAnimation: import('react').ForwardRefExoticComponent<ChevronAnimationProps & import('react').RefAttributes<HTMLDivElement>>;
+export default ChevronAnimation;

package/dist/components/animations/ChevronAnimation/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ChevronAnimation } from './ChevronAnimation';
+export * from './types';
+export * from './utils';