@juspay/blend-design-system 0.0.24 → 0.0.25

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/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.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/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/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/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/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

@@ -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;
@@ -234,6 +235,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?: {
@@ -274,8 +277,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/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/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/Drawer/types.d.ts

@@ -105,6 +105,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 +133,10 @@ export type DrawerTitleProps = {
      * Custom class name
      */
     className?: string;
+    /**
+     * ID for ARIA labeling
+     */
+    id?: string;
 };
 export type DrawerDescriptionProps = {
     /**
@@ -135,6 +147,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.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;