@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.4

package/dist/components/StepperV2/stepperV2.tokens.d.ts

@@ -0,0 +1,99 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { StepperV2InteractionState, StepperV2StepStatus } from './stepperV2.types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { Theme } from '../../context/theme.enum';
+export type StepperV2TokensType = {
+    container: {
+        gap: CSSObject['gap'];
+        step: {
+            circle: {
+                [key in StepperV2StepStatus]: {
+                    [key in StepperV2InteractionState]: {
+                        backgroundColor: CSSObject['backgroundColor'];
+                        borderColor: CSSObject['borderColor'];
+                        borderWidth: CSSObject['borderWidth'];
+                        borderRadius: CSSObject['borderRadius'];
+                        size: CSSObject['width'];
+                        transition: CSSObject['transition'];
+                        outline: CSSObject['outline'];
+                        outlineOffset: CSSObject['outlineOffset'];
+                        paddingTop: CSSObject['paddingTop'];
+                        paddingRight: CSSObject['paddingRight'];
+                        paddingBottom: CSSObject['paddingBottom'];
+                        paddingLeft: CSSObject['paddingLeft'];
+                    };
+                };
+            };
+            icon: {
+                [key in StepperV2StepStatus]: {
+                    [key in StepperV2InteractionState]: {
+                        color: CSSObject['color'];
+                    };
+                };
+            };
+        };
+        connector: {
+            line: {
+                color: CSSObject['color'];
+                height: CSSObject['height'];
+            };
+        };
+        subConnector: {
+            line: {
+                color: CSSObject['color'];
+                height: CSSObject['height'];
+            };
+            dot: {
+                border: CSSObject['border'];
+                borderRadius: CSSObject['borderRadius'];
+                height: CSSObject['height'];
+                width: CSSObject['width'];
+                paddingTop: CSSObject['paddingTop'];
+                paddingRight: CSSObject['paddingRight'];
+                paddingBottom: CSSObject['paddingBottom'];
+                paddingLeft: CSSObject['paddingLeft'];
+            };
+            expander: {
+                icon: {
+                    color: CSSObject['color'];
+                };
+                width: CSSObject['width'];
+            };
+            text: {
+                [key in StepperV2StepStatus]: {
+                    color: CSSObject['color'];
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                };
+            };
+        };
+        title: {
+            text: {
+                [key in StepperV2StepStatus]: {
+                    [key in StepperV2InteractionState]: {
+                        color: CSSObject['color'];
+                        fontSize: CSSObject['fontSize'];
+                        fontWeight: CSSObject['fontWeight'];
+                        gap: CSSObject['gap'];
+                        paddingTop: CSSObject['paddingTop'];
+                        paddingRight: CSSObject['paddingRight'];
+                        paddingBottom: CSSObject['paddingBottom'];
+                        paddingLeft: CSSObject['paddingLeft'];
+                    };
+                };
+            };
+        };
+        description: {
+            text: {
+                color: CSSObject['color'];
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+            };
+        };
+    };
+};
+export type ResponsiveStepperV2Tokens = {
+    [key in keyof BreakpointType]: StepperV2TokensType;
+};
+export declare const getStepperV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveStepperV2Tokens;

package/dist/components/StepperV2/stepperV2.types.d.ts

@@ -0,0 +1,61 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export declare enum StepperV2StepStatus {
+    DEFAULT = "default",
+    COMPLETED = "completed",
+    CURRENT = "current",
+    PENDING = "pending",
+    DISABLED = "disabled",
+    SKIPPED = "skipped"
+}
+export type StepperV2InteractionState = 'default' | 'hover' | 'focus' | 'disabled';
+export declare enum StepperV2Type {
+    HORIZONTAL = "horizontal",
+    VERTICAL = "vertical"
+}
+export type StepperV2Props = {
+    steps: StepperV2Step[];
+    onStepClick?: (stepIndex: number) => void;
+    /**
+     * Called when a substep is clicked. The substepIndex is **1-based** (starts at 1).
+     * @param stepId - The id of the parent step
+     * @param substepIndex - The 1-based index of the substep (e.g., 1 for first substep)
+     */
+    onSubstepClick?: (stepId: number, substepIndex: number) => void;
+    clickable?: boolean;
+    stepperType?: StepperV2Type;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'id'>;
+export type StepperV2SubStep = {
+    id: number;
+    title: string;
+    status?: StepperV2StepStatus;
+    disabled?: boolean;
+};
+export type StepperV2Step = {
+    id: number;
+    title: string;
+    status?: StepperV2StepStatus;
+    disabled?: boolean;
+    description?: string;
+    icon?: ReactNode;
+    substeps?: StepperV2SubStep[];
+    isExpandable?: boolean;
+    isExpanded?: boolean;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'id'>;
+export type StepperV2StepProps = {
+    step: StepperV2Step;
+    stepIndex: number;
+    isCompleted: boolean;
+    isCurrent: boolean;
+    isLast: boolean;
+    isFirst: boolean;
+    onClick?: (stepIndex: number) => void;
+    /**
+     * Called when a substep is clicked. The substepIndex is **1-based** (starts at 1).
+     * @param stepIndex - The index of the parent step
+     * @param substepIndex - The 1-based index of the substep (e.g., 1 for first substep)
+     */
+    onSubstepClick?: (stepIndex: number, substepIndex: number) => void;
+    clickable?: boolean;
+    currentSubsteps?: Record<string, number>;
+    onKeyDown?: (event: React.KeyboardEvent, stepIndex: number) => void;
+};

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

@@ -0,0 +1,4 @@
+import { StepperV2Step, StepperV2StepStatus } from './stepperV2.types';
+export declare const getStepState: (step: StepperV2Step, isCompleted: boolean, isCurrent: boolean) => StepperV2StepStatus;
+/** Short-lived polite live region for keyboard step navigation. */
+export declare function scheduleLiveRegionAnnouncement(message: string): () => void;

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

@@ -9,7 +9,7 @@ export type TabsState = 'default' | 'hover' | 'active' | 'disabled';
  * Structure:
  * - target: container | trigger | text | underline (defines what element the token applies to)
  * - CSSProp: backgroundColor | borderRadius | padding | border | color | fontSize | fontWeight | gap | height
- * - size: md | lg (only for size-dependent properties)
+ * - size: sm | md | lg (only for size-dependent properties)
  * - variant: underline | boxed | floating | pills (tabs variant)
  * - state: default | hover | active | disabled (interaction state)
  *

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

@@ -8,6 +8,7 @@ export declare enum TabsVariant {
     PILLS = "pills"
 }
 export declare enum TabsSize {
+    SM = "sm",
     MD = "md",
     LG = "lg"
 }

package/dist/components/TabsV2/index.d.ts

@@ -2,7 +2,9 @@ export { default as TabsV2 } from './TabsV2';
 export { default as TabsV2List } from './TabsV2List';
 export { default as TabsV2Trigger } from './TabsV2Trigger';
 export { default as TabsV2Content } from './TabsV2Content';
-export { TabsV2Provider, useTabsV2Context } from './tabsV2.context';
+export { StyledTabsRoot, StyledTabsContent, StyledTabsList, StyledTabsTrigger, TabsV2IconContainer, } from './StyledTabsV2';
+export { TabsV2Provider, useTabsV2Context, TabsV2Context, } from './tabsV2.context';
 export type { TabsV2ContextValue } from './tabsV2.context';
 export { getTabsV2Tokens, type TabsV2TokensType, type ResponsiveTabsV2Tokens, } from './tabsV2.tokens';
 export * from './tabsV2.types';
+export * from './tabsV2.utils';

package/dist/components/TabsV2/tabsV2.types.d.ts

@@ -8,6 +8,7 @@ export declare enum TabsV2Variant {
     PILLS = "pills"
 }
 export declare enum TabsV2Size {
+    SM = "sm",
     MD = "md",
     LG = "lg"
 }

package/dist/components/TagV2/TagV2.d.ts

@@ -18,5 +18,5 @@ declare const TagV2: import('react').ForwardRefExoticComponent<{
         skeletonVariant?: import('../Skeleton').SkeletonVariant;
     };
     tagGroupPosition?: "center" | "left" | "right";
-} & Omit<import('react').HTMLAttributes<HTMLButtonElement | HTMLDivElement>, "size" | "style" | "className"> & import('react').RefAttributes<HTMLButtonElement | HTMLDivElement>>;
+} & Omit<import('react').HTMLAttributes<HTMLDivElement | HTMLButtonElement>, "size" | "style" | "className"> & import('react').RefAttributes<HTMLDivElement | HTMLButtonElement>>;
 export default TagV2;

package/dist/components/TagV2/index.d.ts

@@ -1,2 +1,5 @@
 export { default as TagV2 } from './TagV2';
+export { default as TagSkeleton } from './TagSkeleton';
+export * from './tagV2.tokens';
 export * from './TagV2.types';
+export * from './utils';

package/dist/components/TooltipV2/index.d.ts

@@ -1,3 +1,4 @@
 export { default as TooltipV2 } from './TooltipV2';
+export * from './tooltipV2.animation';
 export * from './tooltipV2.tokens';
 export * from './tooltipV2.types';

package/dist/components/TopbarV2/TopbarV2.d.ts

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

package/dist/components/TopbarV2/index.d.ts

@@ -0,0 +1,3 @@
+export { default as TopbarV2 } from './TopbarV2';
+export * from './topbarV2.tokens';
+export type { MerchantInfoV2, TopbarV2Props } from './types';

package/dist/components/TopbarV2/topbarV2.dark.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsiveTopbarV2Tokens } from './topbarV2.tokens';
+export declare const getTopbarV2DarkTokens: (foundationToken: FoundationTokenType) => ResponsiveTopbarV2Tokens;

package/dist/components/TopbarV2/topbarV2.light.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsiveTopbarV2Tokens } from './topbarV2.tokens';
+export declare const getTopbarV2LightTokens: (foundationToken: FoundationTokenType) => ResponsiveTopbarV2Tokens;

package/dist/components/TopbarV2/topbarV2.tokens.d.ts

@@ -0,0 +1,83 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { Theme } from '../../context/theme.enum';
+export type TopbarV2State = 'default' | 'hover' | 'active';
+export type TopbarV2TokenType = {
+    zIndex: CSSObject['zIndex'];
+    height: CSSObject['height'];
+    borderBottom: CSSObject['borderBottom'];
+    backgroundColor: CSSObject['backgroundColor'];
+    backdropFilter: CSSObject['backdropFilter'];
+    padding: CSSObject['padding'];
+    gap: CSSObject['gap'];
+    separator: {
+        width: CSSObject['width'];
+        color: CSSObject['color'];
+    };
+    toggleButton: {
+        borderRadius: CSSObject['borderRadius'];
+        padding: CSSObject['padding'];
+        backgroundColor: {
+            [key in TopbarV2State]: CSSObject['backgroundColor'];
+        };
+        transition: CSSObject['transition'];
+        icon: {
+            size: CSSObject['width'];
+            color: CSSObject['color'];
+        };
+    };
+    actionButton: {
+        borderRadius: CSSObject['borderRadius'];
+        padding: CSSObject['padding'];
+        minWidth: CSSObject['minWidth'];
+        height: CSSObject['height'];
+        backgroundColor: {
+            [key in TopbarV2State]: CSSObject['backgroundColor'];
+        };
+        transition: CSSObject['transition'];
+        icon: {
+            size: CSSObject['width'];
+            color: CSSObject['color'];
+        };
+    };
+    tenantIconButton: {
+        borderRadius: CSSObject['borderRadius'];
+        minHeight: CSSObject['minHeight'];
+        backgroundColor: {
+            [key in TopbarV2State]: CSSObject['backgroundColor'];
+        };
+        transition: CSSObject['transition'];
+    };
+    merchantSelectTrigger: {
+        gap: CSSObject['gap'];
+        icon: {
+            size: CSSObject['width'];
+            color: CSSObject['color'];
+        };
+        text: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+        };
+    };
+    leftSection: {
+        gap: CSSObject['gap'];
+        maxHeight: CSSObject['maxHeight'];
+        divider: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+        };
+    };
+    rightSection: {
+        gap: CSSObject['gap'];
+    };
+    sidebarSection: {
+        gap: CSSObject['gap'];
+    };
+};
+export type ResponsiveTopbarV2Tokens = {
+    [key in keyof BreakpointType]: TopbarV2TokenType;
+};
+export declare const getTopbarV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveTopbarV2Tokens;

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

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+import { SecondarySidebarInfo } from '../SidebarV2/types';
+export type MerchantInfoV2 = {
+    items: Array<{
+        label: string;
+        value: string;
+        icon?: ReactNode;
+    }>;
+    selected: string;
+    onSelect: (value: string) => void;
+};
+export type TopbarV2Props = {
+    children?: ReactNode;
+    /** Sidebar expansion state */
+    isExpanded?: boolean;
+    /**
+     * @reserved Toggle expansion callback. Accepted for future implementation
+     * of an in-topbar toggle button. Currently a no-op.
+     */
+    onToggleExpansion?: () => void;
+    /**
+     * @reserved Controls toggle button visibility. Accepted for future
+     * implementation. Currently a no-op.
+     */
+    showToggleButton?: boolean;
+    /**
+     * @reserved When true, hides toggle button (used in panel-only mode).
+     * Accepted for future implementation. Currently a no-op.
+     */
+    panelOnlyMode?: 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;
+    leftAction?: ReactNode;
+    rightActions?: ReactNode;
+    showBackButton?: boolean;
+    onBackClick?: () => void;
+    secondarySidebar?: SecondarySidebarInfo;
+    merchantInfo?: MerchantInfoV2;
+    /**
+     * @reserved ARIA controls ID for the sidebar navigation. Accepted for
+     * future implementation. Currently a no-op.
+     */
+    ariaControls?: string;
+};

package/dist/components/common/TruncatedTextWithTooltipV2/TruncatedTextWithTooltipV2.d.ts

@@ -0,0 +1,2 @@
+import { TruncatedTextWithTooltipV2Props } from './types';
+export declare const TruncatedTextWithTooltipV2: import('react').ForwardRefExoticComponent<TruncatedTextWithTooltipV2Props & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/components/common/TruncatedTextWithTooltipV2/index.d.ts

@@ -0,0 +1,2 @@
+export { TruncatedTextWithTooltipV2 } from './TruncatedTextWithTooltipV2';
+export type { TruncatedTextWithTooltipV2Props } from './types';

package/dist/components/common/TruncatedTextWithTooltipV2/types.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+import { TooltipV2Align, TooltipV2Side, TooltipV2Size } from '../../TooltipV2/tooltipV2.types';
+export type TruncatedTextWithTooltipV2Props = {
+    text: string;
+    className?: string;
+    style?: CSSProperties;
+    tooltipContent?: string;
+    side?: TooltipV2Side;
+    align?: TooltipV2Align;
+    size?: TooltipV2Size;
+    delayDuration?: number;
+    offset?: number;
+    disabled?: boolean;
+    'data-element'?: string;
+    'data-id'?: string;
+};

package/dist/components/common/TruncatedTextWithTooltipV2/utils.d.ts

@@ -0,0 +1 @@
+export declare const getEffectiveTooltipContent: (text: string, tooltipContent?: string) => string;

package/dist/components/common/index.d.ts

@@ -1,6 +1,7 @@
 export { errorShakeAnimation, getErrorShakeStyle } from './error.animations';
 export { useErrorShake } from './useErrorShake';
 export { TruncatedTextWithTooltip } from './TruncatedTextWithTooltip';
+export { TruncatedTextWithTooltipV2 } from './TruncatedTextWithTooltipV2';
 export { ResponsiveText } from '../KeyValuePairV2/ResponsiveText';
 export type { ResponsiveTextProps } from '../KeyValuePairV2/ResponsiveText';
-export { getTextStyles, getPrimitiveTextStyles, type TextOverflowMode, } from '../KeyValuePairV2/responsiveTextStyles';
+export { getTextStyles, getPrimitiveTextStyles, type KeyValuePairV2TextOverflowMode, } from '../KeyValuePairV2/responsiveTextStyles';

package/dist/context/ThemeContext.d.ts

@@ -35,6 +35,7 @@ import { ResponsiveSnackbarTokens } from '../components/Snackbar/snackbar.tokens
 import { ResponsiveKeyValuePairTokens } from '../components/KeyValuePair/KeyValuePair.tokens';
 import { ResponsiveCardTokens } from '../components/Card/card.tokens';
 import { ResponsiveTopbarTokens } from '../components/Topbar/topbar.tokens';
+import { ResponsiveTopbarV2Tokens } from '../components/TopbarV2/topbarV2.tokens';
 import { ResponsiveAvatarTokens } from '../components/Avatar/avatar.tokens';
 import { ResponsiveAvatarGroupTokens } from '../components/AvatarGroup/avatarGroup.tokens';
 import { ResponsiveSidebarTokens } from '../components/Sidebar/sidebar.tokens';
@@ -44,6 +45,7 @@ import { ResponsiveCodeBlockTokens } from '../components/CodeBlock/codeBlock.tok
 import { ResponsiveSkeletonTokens } from '../components/Skeleton/skeleton.tokens';
 import { BREAKPOINTS } from '../breakpoints/breakPoints';
 import { ResponsiveMobileNavigationTokens } from '../components/Sidebar/SidebarMobile/mobile.tokens';
+import { ResponsiveMobileNavigationV2Tokens } from '../components/SidebarV2/SidebarV2MobileNavigation/mobile.tokens';
 import { ResponsiveStepperTokens } from '../components/Stepper/stepper.tokens';
 import { ResponsiveChatInputTokensType } from '../components/ChatInput/chatInput.tokens';
 import { ResponsiveTagV2Tokens } from '../components/TagV2/tagV2.tokens';
@@ -55,6 +57,7 @@ import { ResponsiveSingleSelectV2Tokens } from '../components/SingleSelectV2/sin
 import { ResponsiveMultiSelectV2Tokens } from '../components/MultiSelectV2/multiSelectV2.tokens';
 import { ResponsiveAvatarV2Tokens } from '../components/AvatarV2/avatarV2.tokens';
 import { ResponsiveTextInputV2Tokens } from '../components/InputsV2/TextInputV2/TextInputV2.tokens';
+import { ResponsiveTextAreaV2Tokens } from '../components/InputsV2/TextAreaV2/TextAreaV2.tokens';
 import { ResponsiveChartV2Tokens } from '../components/ChartsV2/chartV2.tokens';
 import { ResponsiveTimelineTokens } from '../components/Timeline/timeline.token';
 import { ResponsiveCheckboxV2Tokens } from '../components/SelectorV2/CheckboxV2/checkboxV2.tokens';
@@ -63,15 +66,24 @@ import { ResponsiveStatCardV2Tokens } from '../components/StatCardV2/statcardV2.
 import { ResponsiveTooltipV2Tokens } from '../components/TooltipV2/tooltipV2.tokens';
 import { ResponsiveRadioV2Tokens } from '../components/SelectorV2/RadioV2/radioV2.tokens';
 import { ResponsivePopoverV2Tokens } from '../components/PopoverV2/popoverV2.token';
+import { ResponsiveSidebarV2Tokens } from '../components/SidebarV2/sidebarV2.tokens';
 import { ResponsiveTabsV2Tokens } from '../components/TabsV2/tabsV2.tokens';
 import { ResponsiveCodeEditorV2Tokens } from '../components/CodeEditorV2/codeEditorV2.tokens';
 import { ResponsiveProgressBarV2Tokens } from '../components/ProgressBarV2/progressBarV2.tokens';
+import { ResponsiveStepperV2Tokens } from '../components/StepperV2/stepperV2.tokens';
 import { ResponsiveBreadcrumbV2Tokens } from '../components/BreadcrumbV2/breadcrumbV2.tokens';
 import { ResponsiveMultiValueInputV2Tokens } from '../components/InputsV2/MultiValueInputV2/MultiValueInputV2.tokens';
+import { ResponsiveNumberInputV2Tokens } from '../components/InputsV2/NumberInputV2/numberInputV2.tokens';
+import { ResponsiveOTPInputV2Tokens } from '../components/InputsV2/OTPInputV2/OTPInputV2.tokens';
+import { ResponsiveBadgeTokens } from '../components/Badge/badge.tokens';
+import { ResponsiveSearchInputV2Tokens } from '../components/InputsV2/SearchInputV2/SearchInputV2.tokens';
+import { ResponsiveChatInputV2TokensType } from '../components/InputsV2/ChatInputV2/ChatInputV2.tokens';
+import { ChatInputV2MobileTokensType } from '../components/InputsV2/ChatInputV2/ChatInputV2Mobile.tokens';
 export type ComponentTokenType = {
     TAGS?: ResponsiveTagTokens;
     SEARCH_INPUT?: ResponsiveSearchInputTokens;
     TEXT_AREA?: ResponsiveTextAreaTokens;
+    TEXT_AREA_V2?: ResponsiveTextAreaV2Tokens;
     RADIO?: ResponsiveRadioTokens;
     SWITCH?: ResponsiveSwitchTokens;
     TEXT_INPUT?: ResponsiveTextInputTokens;
@@ -105,14 +117,17 @@ export type ComponentTokenType = {
     CARD?: ResponsiveCardTokens;
     SKELETON?: ResponsiveSkeletonTokens;
     TOPBAR?: ResponsiveTopbarTokens;
+    TOPBARV2?: ResponsiveTopbarV2Tokens;
     AVATAR?: ResponsiveAvatarTokens;
     AVATAR_GROUP?: ResponsiveAvatarGroupTokens;
     SIDEBAR?: ResponsiveSidebarTokens;
     DIRECTORY?: ResponsiveDirectoryTokens;
     MOBILE_NAVIGATION?: ResponsiveMobileNavigationTokens;
+    MOBILE_NAVIGATION_V2?: ResponsiveMobileNavigationV2Tokens;
     UPLOAD?: ResponsiveUploadTokens;
     CODE_BLOCK?: ResponsiveCodeBlockTokens;
     CHAT_INPUT?: ResponsiveChatInputTokensType;
+    CHAT_INPUTV2?: ResponsiveChatInputV2TokensType;
     TIMELINE?: ResponsiveTimelineTokens;
     BUTTONV2?: ResponsiveButtonV2Tokens;
     TAGV2?: ResponsiveTagV2Tokens;
@@ -131,11 +146,18 @@ export type ComponentTokenType = {
     TOOLTIPV2?: ResponsiveTooltipV2Tokens;
     RADIOV2?: ResponsiveRadioV2Tokens;
     POPOVERV2?: ResponsivePopoverV2Tokens;
+    SIDEBARV2?: ResponsiveSidebarV2Tokens;
     TABSV2?: ResponsiveTabsV2Tokens;
     BREADCRUMBV2?: ResponsiveBreadcrumbV2Tokens;
     CODEEDITORV2?: ResponsiveCodeEditorV2Tokens;
     PROGRESS_BARV2?: ResponsiveProgressBarV2Tokens;
     MULTI_VALUE_INPUT_V2?: ResponsiveMultiValueInputV2Tokens;
+    NUMBER_INPUT_V2?: ResponsiveNumberInputV2Tokens;
+    OTP_INPUTV2?: ResponsiveOTPInputV2Tokens;
+    BADGE?: ResponsiveBadgeTokens;
+    SEARCH_INPUT_V2?: ResponsiveSearchInputV2Tokens;
+    CHAT_INPUTV2_MOBILE?: ChatInputV2MobileTokensType;
+    STEPPERV2?: ResponsiveStepperV2Tokens;
 };
 type ThemeContextType = {
     foundationTokens: ThemeType;

package/dist/context/useComponentToken.d.ts

@@ -42,6 +42,7 @@ import { ResponsiveSidebarTokens } from '../components/Sidebar/sidebar.tokens';
 import { ResponsiveUploadTokens } from '../components/Upload/upload.tokens';
 import { ResponsiveCodeBlockTokens } from '../components/CodeBlock/codeBlock.token';
 import { ResponsiveMobileNavigationTokens } from '../components/Sidebar/SidebarMobile/mobile.tokens';
+import { ResponsiveMobileNavigationV2Tokens } from '../components/SidebarV2/SidebarV2MobileNavigation/mobile.tokens';
 import { ResponsiveDirectoryTokens } from '../components/Directory/directory.tokens';
 import { ResponsiveChatInputTokensType } from '../components/ChatInput/chatInput.tokens';
 import { ResponsiveTagV2Tokens } from '../components/TagV2/tagV2.tokens';
@@ -60,9 +61,19 @@ import { ResponsiveKeyValuePairV2Tokens } from '../components/KeyValuePairV2/key
 import { ResponsiveStatCardV2Tokens } from '../components/StatCardV2/statcardV2.tokens';
 import { ResponsiveRadioV2Tokens } from '../components/SelectorV2/RadioV2/radioV2.tokens';
 import { ResponsivePopoverV2Tokens } from '../components/PopoverV2/popoverV2.token';
+import { ResponsiveSidebarV2Tokens } from '../components/SidebarV2/sidebarV2.tokens';
 import { ResponsiveTabsV2Tokens } from '../components/TabsV2/tabsV2.tokens';
 import { ResponsiveBreadcrumbV2Tokens } from '../components/BreadcrumbV2/breadcrumbV2.tokens';
 import { ResponsiveCodeEditorV2Tokens } from '../components/CodeEditorV2/codeEditorV2.tokens';
+import { ResponsiveTopbarV2Tokens } from '../components/TopbarV2/topbarV2.tokens';
 import { ResponsiveProgressBarV2Tokens } from '../components/ProgressBarV2/progressBarV2.tokens';
 import { ResponsiveMultiValueInputV2Tokens } from '../components/InputsV2/MultiValueInputV2/MultiValueInputV2.tokens';
-export declare const useComponentToken: (component: keyof ComponentTokenType) => ResponsiveSearchInputTokens | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | ResponsiveMultiValueInputTokens | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveModalTokens | ResponsiveBreadcrumbTokens | ResponsivePopoverTokens | ResponsiveMenuTokensType | ResponsiveMenuV2TokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ResponsiveProgressBarTokens | ResponsiveDrawerTokens | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveStepperTokens | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveSkeletonTokens | ResponsiveTopbarTokens | ResponsiveAvatarTokens | ResponsiveAvatarGroupTokens | ResponsiveSidebarTokens | ResponsiveUploadTokens | ResponsiveCodeBlockTokens | ResponsiveMobileNavigationTokens | ResponsiveDirectoryTokens | ResponsiveChatInputTokensType | ResponsiveButtonTokens | ResponsiveButtonV2Tokens | ResponsiveChatInputTokensType | ResponsiveTagV2Tokens | ResponsiveAlertV2Tokens | ResponsiveAccordionV2Tokens | ResponsiveSnackbarV2Tokens | ResponsiveSwitchV2Tokens | ResponsiveSingleSelectV2Tokens | ResponsiveMultiSelectV2Tokens | ResponsiveChartV2Tokens | ResponsiveAvatarV2Tokens | ResponsiveTextInputV2Tokens | ResponsiveTimelineTokens | ResponsiveCheckboxV2Tokens | ResponsiveKeyValuePairV2Tokens | ResponsiveStatCardV2Tokens | ResponsiveRadioV2Tokens | ResponsivePopoverV2Tokens | ResponsiveTabsV2Tokens | ResponsiveBreadcrumbV2Tokens | ResponsiveProgressBarV2Tokens | ResponsiveMultiValueInputV2Tokens | ResponsiveCodeEditorV2Tokens;
+import { ResponsiveNumberInputV2Tokens } from '../components/InputsV2/NumberInputV2/numberInputV2.tokens';
+import { ResponsiveOTPInputV2Tokens } from '../components/InputsV2/OTPInputV2/OTPInputV2.tokens';
+import { ResponsiveTextAreaV2Tokens } from '../components/InputsV2/TextAreaV2/TextAreaV2.tokens';
+import { ResponsiveBadgeTokens } from '../components/Badge/badge.tokens';
+import { ResponsiveSearchInputV2Tokens } from '../components/InputsV2/SearchInputV2/SearchInputV2.tokens';
+import { ResponsiveChatInputV2TokensType } from '../components/InputsV2/ChatInputV2/ChatInputV2.tokens';
+import { ChatInputV2MobileTokensType } from '../components/InputsV2/ChatInputV2/ChatInputV2Mobile.tokens';
+import { ResponsiveStepperV2Tokens } from '../components/StepperV2/stepperV2.tokens';
+export declare const useComponentToken: (component: keyof ComponentTokenType) => ResponsiveSearchInputTokens | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | ResponsiveMultiValueInputTokens | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveModalTokens | ResponsiveBreadcrumbTokens | ResponsivePopoverTokens | ResponsiveMenuTokensType | ResponsiveMenuV2TokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ResponsiveProgressBarTokens | ResponsiveDrawerTokens | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveStepperTokens | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveSkeletonTokens | ResponsiveTopbarTokens | ResponsiveAvatarTokens | ResponsiveAvatarGroupTokens | ResponsiveSidebarTokens | ResponsiveUploadTokens | ResponsiveCodeBlockTokens | ResponsiveMobileNavigationTokens | ResponsiveMobileNavigationV2Tokens | ResponsiveDirectoryTokens | ResponsiveChatInputTokensType | ResponsiveButtonTokens | ResponsiveButtonV2Tokens | ResponsiveChatInputTokensType | ResponsiveTagV2Tokens | ResponsiveAlertV2Tokens | ResponsiveAccordionV2Tokens | ResponsiveSnackbarV2Tokens | ResponsiveSwitchV2Tokens | ResponsiveSingleSelectV2Tokens | ResponsiveMultiSelectV2Tokens | ResponsiveChartV2Tokens | ResponsiveAvatarV2Tokens | ResponsiveTextInputV2Tokens | ResponsiveTimelineTokens | ResponsiveCheckboxV2Tokens | ResponsiveKeyValuePairV2Tokens | ResponsiveStatCardV2Tokens | ResponsiveRadioV2Tokens | ResponsivePopoverV2Tokens | ResponsiveTabsV2Tokens | ResponsiveSidebarV2Tokens | ResponsiveBreadcrumbV2Tokens | ResponsiveTopbarV2Tokens | ResponsiveProgressBarV2Tokens | ResponsiveMultiValueInputV2Tokens | ResponsiveNumberInputV2Tokens | ResponsiveOTPInputV2Tokens | ResponsiveTextAreaV2Tokens | ResponsiveSearchInputV2Tokens | ResponsiveCodeEditorV2Tokens | ResponsiveBadgeTokens | ResponsiveChatInputV2TokensType | ChatInputV2MobileTokensType | ResponsiveStepperV2Tokens;

package/dist/hooks/index.d.ts

@@ -5,3 +5,4 @@ export { default as useDropdownInteractionLock } from './useDropdownInteractionL
 export { default as useTruncationDetection } from './useTruncationDetection';
 export type { UseTruncationDetectionOptions } from './useTruncationDetection';
 export { useShadowRoot } from '../context/ShadowAware';
+export { useSectionScroll } from './useSectionScroll';

package/dist/hooks/useResizeObserver.d.ts

@@ -1 +1 @@
-export declare function useResizeObserver(targetRef: React.RefObject<HTMLElement>, callback: (rect: DOMRectReadOnly) => void): void;
+export declare function useResizeObserver<T extends HTMLElement = HTMLElement>(targetRef: React.RefObject<T | null>, callback: (rect: DOMRectReadOnly) => void): void;

package/dist/hooks/useSectionScroll.d.ts

@@ -0,0 +1,24 @@
+interface ScrollOptions {
+    /** Amount of padding (in pixels) from scrollable container edge when scrolling */
+    padding?: number;
+    /** Whether to scroll instantly or smoothly */
+    behavior?: ScrollBehavior;
+}
+/**
+ * A custom hook that provides scroll management utilities for sidebar sections.
+ * Used to automatically scroll elements into view when they expand near the
+ * bottom of their nearest scrollable ancestor container (not the viewport).
+ *
+ * This hook finds the closest scrollable ancestor element (with overflow-y: auto or scroll)
+ * and scrolls within that container, not the viewport. This is important when using
+ * the hook in nested scrollers or modals.
+ *
+ * @example
+ * const { scrollIntoView } = useSectionScroll()
+ * scrollIntoView(sectionRef.current)
+ */
+export declare const useSectionScroll: (options?: ScrollOptions) => {
+    scrollIntoView: (element: HTMLElement) => void;
+    findScrollableAncestor: (element: HTMLElement | null) => HTMLElement | null;
+};
+export default useSectionScroll;

package/dist/hooks/useTruncationDetection.d.ts

@@ -3,4 +3,4 @@ export type UseTruncationDetectionOptions = {
     disabled?: boolean;
     deps?: DependencyList;
 };
-export default function useTruncationDetection(elementRef: React.RefObject<HTMLElement>, selector?: string, options?: UseTruncationDetectionOptions): boolean;
+export default function useTruncationDetection<T extends HTMLElement = HTMLElement>(elementRef: React.RefObject<T | null>, selector?: string, options?: UseTruncationDetectionOptions): boolean;