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

package/dist/components/InputsV2/SearchInputV2/SearchInputV2.tokens.d.ts

@@ -0,0 +1,92 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
+import { InputSizeV2, InputStateV2 } from '../inputV2.types';
+import { Theme } from '../../../context/theme.enum';
+export type SearchInputV2TokensType = {
+    gap: CSSObject['gap'];
+    label: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in InputStateV2]: CSSObject['color'];
+        };
+    };
+    subLabel: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in InputStateV2]: CSSObject['color'];
+        };
+    };
+    hintText: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in InputStateV2]: CSSObject['color'];
+        };
+    };
+    errorMessage: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: CSSObject['color'];
+    };
+    required: {
+        color: CSSObject['color'];
+    };
+    inputContainer: {
+        paddingTop: {
+            [key in InputSizeV2]: CSSObject['paddingTop'];
+        };
+        paddingRight: {
+            [key in InputSizeV2]: CSSObject['paddingRight'];
+        };
+        paddingBottom: {
+            [key in InputSizeV2]: CSSObject['paddingBottom'];
+        };
+        paddingLeft: {
+            [key in InputSizeV2]: CSSObject['paddingLeft'];
+        };
+        borderRadius: CSSObject['borderRadius'];
+        borderBottom: {
+            [key in InputStateV2]: CSSObject['borderBottom'];
+        };
+        outline: CSSObject['outline'];
+        boxShadow: CSSObject['boxShadow'];
+        color: {
+            [key in InputStateV2]: CSSObject['color'];
+        };
+        placeholderColor: {
+            [key in InputStateV2]: CSSObject['color'];
+        };
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        slot: {
+            left: {
+                top: CSSObject['top'];
+                left: CSSObject['left'];
+                bottom: CSSObject['bottom'];
+            };
+            right: {
+                top: CSSObject['top'];
+                right: CSSObject['right'];
+                bottom: CSSObject['bottom'];
+            };
+            transition: CSSObject['transition'];
+            transform: CSSObject['transform'];
+            color: {
+                [key in InputStateV2]: CSSObject['color'];
+            };
+        };
+    };
+    icon: {
+        color: {
+            [key in InputStateV2]: CSSObject['color'];
+        };
+        width: CSSObject['width'];
+    };
+};
+export type ResponsiveSearchInputV2Tokens = {
+    [key in keyof BreakpointType]: SearchInputV2TokensType;
+};
+export declare const getSearchInputV2Tokens: (foundationTokens: FoundationTokenType, theme?: Theme | string) => ResponsiveSearchInputV2Tokens;

package/dist/components/InputsV2/SearchInputV2/SearchInputV2.types.d.ts

@@ -0,0 +1,13 @@
+export type SearchInputV2Props = {
+    leftSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+    error?: boolean;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    allowClear?: boolean;
+    onClear?: () => void;
+    clearIcon?: React.ReactNode;
+    disabled?: boolean;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'placeholderStyles' | 'required'>;

package/dist/components/InputsV2/SearchInputV2/index.d.ts

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

package/dist/components/InputsV2/TextAreaV2/TextAreaV2.d.ts

@@ -0,0 +1,23 @@
+import { InputSizeV2 } from '../inputV2.types';
+declare const TextAreaV2: import('react').ForwardRefExoticComponent<{
+    size?: InputSizeV2;
+    value: string;
+    placeholder: string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    rows?: number;
+    label?: string;
+    sublabel?: string;
+    hintText?: string;
+    helpIconText?: string;
+    required?: boolean;
+    error?: {
+        show: boolean;
+        message?: string;
+    };
+    resize?: "none" | "both" | "horizontal" | "vertical" | "block" | "inline";
+} & Omit<import('react').TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "style" | "className" | "onFocus" | "onBlur" | "cols"> & import('react').RefAttributes<HTMLTextAreaElement>>;
+export default TextAreaV2;

package/dist/components/InputsV2/TextAreaV2/TextAreaV2.dark.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { ResponsiveTextAreaV2Tokens } from './TextAreaV2.tokens';
+export declare const getTextAreaV2DarkTokens: (foundationTokens: FoundationTokenType) => ResponsiveTextAreaV2Tokens;

package/dist/components/InputsV2/TextAreaV2/TextAreaV2.light.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { ResponsiveTextAreaV2Tokens } from './TextAreaV2.tokens';
+export declare const getTextAreaV2LightTokens: (foundationTokens: FoundationTokenType) => ResponsiveTextAreaV2Tokens;

package/dist/components/InputsV2/TextAreaV2/TextAreaV2.tokens.d.ts

@@ -0,0 +1,63 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
+import { InputFooterV2Tokens, InputLabelsV2Tokens } from '../inputV2.tokens';
+import { InputStateV2, InputSizeV2 } from '../inputV2.types';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { Theme } from '../../../context/theme.enum';
+export type TextAreaV2TokensType = {
+    gap: CSSObject['gap'];
+    topContainer: InputLabelsV2Tokens;
+    inputContainer: {
+        gap: CSSObject['gap'];
+        placeholder: {
+            transition: CSSObject['transition'];
+            color: {
+                [key in InputStateV2]: CSSObject['color'];
+            };
+            fontSize: {
+                [key in InputSizeV2]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in InputSizeV2]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in InputSizeV2]: CSSObject['lineHeight'];
+            };
+        };
+        lineHeight: {
+            [key in InputSizeV2]: CSSObject['lineHeight'];
+        };
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        padding: {
+            top: {
+                [key in InputSizeV2]: CSSObject['padding'];
+            };
+            right: {
+                [key in InputSizeV2]: CSSObject['padding'];
+            };
+            bottom: {
+                [key in InputSizeV2]: CSSObject['padding'];
+            };
+            left: {
+                [key in InputSizeV2]: CSSObject['padding'];
+            };
+        };
+        borderRadius: CSSObject['borderRadius'];
+        boxShadow: CSSObject['boxShadow'];
+        border: {
+            [key in InputStateV2]: CSSObject['border'];
+        };
+        color: {
+            [key in InputStateV2]: CSSObject['color'];
+        };
+        backgroundColor: {
+            [key in InputStateV2]: CSSObject['backgroundColor'];
+        };
+    };
+    bottomContainer: InputFooterV2Tokens;
+};
+export type ResponsiveTextAreaV2Tokens = {
+    [key in keyof BreakpointType]: TextAreaV2TokensType;
+};
+export declare const getTextAreaV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveTextAreaV2Tokens;

package/dist/components/InputsV2/TextAreaV2/TextAreaV2.types.d.ts

@@ -0,0 +1,22 @@
+import { InputSizeV2 } from '../inputV2.types';
+export type TextAreaV2Props = {
+    size?: InputSizeV2;
+    value: string;
+    placeholder: string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    rows?: number;
+    label?: string;
+    sublabel?: string;
+    hintText?: string;
+    helpIconText?: string;
+    required?: boolean;
+    error?: {
+        show: boolean;
+        message?: string;
+    };
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical' | 'block' | 'inline';
+} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'style' | 'className' | 'onFocus' | 'onBlur' | 'cols'>;

package/dist/components/InputsV2/TextAreaV2/index.d.ts

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

package/dist/components/InputsV2/TextAreaV2/utils.d.ts

@@ -0,0 +1,47 @@
+import { toPixels } from '../../../global-utils/GlobalUtils';
+import { TextAreaV2TokensType } from './TextAreaV2.tokens';
+import { InputSizeV2, InputStateV2 } from '../inputV2.types';
+export declare function getTextAreaAriaDescribedBy(hintText: string | undefined, error: {
+    show: boolean;
+    message?: string;
+}, hintId: string, errorId: string): string | undefined;
+export declare function getTextAreaLabelState(disabled: boolean | undefined, errorShow: boolean, isFocused: boolean): InputStateV2;
+export type TextAreaInputPadding = {
+    paddingTop: number;
+    paddingBottom: number;
+    paddingLeft: number;
+    paddingRight: number;
+    /** Base top token — FloatingLabelsV2 anchor (not the scaled focused top). */
+    floatingLabelTopPadding: number;
+    floatingLabelLeftPadding: number;
+};
+/**
+ * Computes textarea padding from tokens. On small screens when the field has focus or
+ * value, top padding increases and bottom goes to 0 to make room for the floating label.
+ */
+export declare function getTextAreaInputPadding({ inputContainer, size, isSmallScreen, inputFocusedOrWithValue, }: {
+    inputContainer: TextAreaV2TokensType['inputContainer'];
+    size: InputSizeV2;
+    isSmallScreen: boolean;
+    inputFocusedOrWithValue: boolean;
+}): TextAreaInputPadding;
+/**
+ * Minimum textarea height so the visible area matches `rows` lines of text at the
+ * given line-height, including vertical padding (same numbers as {@link getTextAreaInputPadding}).
+ */
+export declare function getTextAreaV2MinHeightFromRows(rows: number, lineHeight: Parameters<typeof toPixels>[0], padding: Pick<TextAreaInputPadding, 'paddingTop' | 'paddingBottom'>): number;
+export type TextAreaInteractionKeys = {
+    borderDefault: 'error' | 'default';
+    borderHover: 'error' | 'hover';
+    borderFocus: 'error' | 'focus';
+    bgDefault: 'error' | 'default';
+    bgHover: 'error' | 'hover';
+    textColorKey: 'disabled' | 'default';
+};
+export declare function getTextAreaInteractionKeys(errorShow: boolean, disabled: boolean | undefined): TextAreaInteractionKeys;
+/**
+ * Strips TextAreaV2-only props (and `cols`, which this component does not support) so they are
+ * never forwarded to a native {@link HTMLTextAreaElement}.
+ * Use after extracting top-level props, as a safety net for spreads / future API fields.
+ */
+export declare function omitTextAreaV2PrivateProps(props: Record<string, unknown>): Record<string, unknown>;

package/dist/components/InputsV2/TextInputV2/TextInputV2.d.ts

@@ -1,4 +1,5 @@
 import { InputSizeV2 } from '../inputV2.types';
+import { TextInputV2Dropdown } from './TextInputV2.types';
 declare const TextInputV2: import('react').ForwardRefExoticComponent<{
     value: string;
     label?: string;
@@ -10,6 +11,7 @@ declare const TextInputV2: import('react').ForwardRefExoticComponent<{
     };
     hintText?: string;
     helpIconText?: string;
+    dropdown?: TextInputV2Dropdown | TextInputV2Dropdown[];
     leftSlot?: {
         slot: import('react').ReactElement;
         maxHeight?: import('styled-components').CSSObject["maxHeight"];
@@ -18,5 +20,5 @@ declare const TextInputV2: import('react').ForwardRefExoticComponent<{
         slot: import('react').ReactElement;
         maxHeight?: import('styled-components').CSSObject["maxHeight"];
     };
-} & Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "size" | "style" | "className"> & import('react').RefAttributes<HTMLInputElement>>;
+} & Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "size" | "style" | "className" | "dropdown"> & import('react').RefAttributes<HTMLInputElement>>;
 export default TextInputV2;

package/dist/components/InputsV2/TextInputV2/TextInputV2.types.d.ts

@@ -1,6 +1,19 @@
 import { ReactElement } from 'react';
 import { CSSObject } from 'styled-components';
 import { InputSizeV2 } from '../inputV2.types';
+import { SingleSelectV2Props, SingleSelectV2Size } from '../../SingleSelectV2/singleSelectV2.types';
+import { SelectV2Alignment } from '../../SelectV2/selectV2.shared.types';
+export declare enum DropdownPosition {
+    LEFT = "left",
+    RIGHT = "right"
+}
+/**
+ * Full `SingleSelectV2` API for the inline embed, plus `position` for TextInputV2 layout.
+ * All `SingleSelectV2` props are forwarded; the host applies embed defaults (e.g. `NO_CONTAINER`, `inline`, input-linked `size`/`disabled`, merged `menuPosition`).
+ */
+export type TextInputV2Dropdown = SingleSelectV2Props & {
+    position: DropdownPosition;
+};
 export type TextInputV2Props = {
     value: string;
     label?: string;
@@ -12,6 +25,7 @@ export type TextInputV2Props = {
     };
     hintText?: string;
     helpIconText?: string;
+    dropdown?: TextInputV2Dropdown | TextInputV2Dropdown[];
     leftSlot?: {
         slot: ReactElement;
         maxHeight?: CSSObject['maxHeight'];
@@ -20,4 +34,13 @@ export type TextInputV2Props = {
         slot: ReactElement;
         maxHeight?: CSSObject['maxHeight'];
     };
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className'>;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'dropdown'>;
+export type EmbeddedSingleSelectOptions = {
+    fieldLabel: string | undefined;
+    fieldDisabled: boolean;
+    singleSelectV2Size: SingleSelectV2Size;
+    menuAlignment: SelectV2Alignment;
+    menuSideOffset: number;
+    menuAlignOffset: number;
+    defaultSingleSelectGroupPosition: 'left' | 'right';
+};

package/dist/components/InputsV2/TextInputV2/utils.d.ts

@@ -1,10 +1,11 @@
-import { AnyRef, InputStateV2 } from '../inputV2.types';
+import { SingleSelectV2Props } from '../../SingleSelectV2/singleSelectV2.types';
+import { InputStateV2 } from '../inputV2.types';
+import { EmbeddedSingleSelectOptions } from './TextInputV2.types';
 export declare const FOCUS_RING_STYLES: {
     readonly boxShadow: "0 0 0 3px #EFF6FF";
     readonly backgroundColor: "rgba(239, 246, 255, 0.15)";
 };
 export declare const TRANSITION = "border 200ms ease-in-out, box-shadow 200ms ease-in-out, background-color 200ms ease-in-out";
-export declare const getInteractionState: (state: InputStateV2) => "default" | "hover" | "disabled" | "focus" | "error";
 export declare const getInputState: (error?: {
     show: boolean;
 } | null, disabled?: boolean) => InputStateV2;
@@ -17,4 +18,5 @@ export declare const getVerticalInputPadding: ({ isSmallScreenWithLargeSize, inp
     top: number;
     bottom: number;
 };
-export declare const setExternalRef: <T>(ref: AnyRef<T>, value: T | null) => void;
+/** Spreads full `SingleSelectV2` config, then applies TextInputV2 embed defaults and field-level disabled/label. */
+export declare function toEmbeddedSingleSelectV2Props(config: SingleSelectV2Props, options: EmbeddedSingleSelectOptions): SingleSelectV2Props;

package/dist/components/InputsV2/utils/FloatingLabelsV2/FloatingLabelsV2.d.ts

@@ -1,6 +1,7 @@
 import { InputSizeV2, InputStateV2 } from '../../inputV2.types';
 import { FloatingLabelsV2Tokens } from '../../inputV2.tokens';
-declare const FloatingLabelsV2: ({ label, required, name, inputId, isInputFocusedOrWithValue, topPadding, leftPadding, tokens, size, state, }: {
+import { CSSObject } from 'styled-components';
+declare const FloatingLabelsV2: ({ label, required, name, inputId, isInputFocusedOrWithValue, topPadding, leftPadding, tokens, size, state, backgroundColor, }: {
     label: string;
     required: boolean;
     name: string;
@@ -11,5 +12,6 @@ declare const FloatingLabelsV2: ({ label, required, name, inputId, isInputFocuse
     tokens: FloatingLabelsV2Tokens;
     size: InputSizeV2;
     state: InputStateV2;
+    backgroundColor?: CSSObject["backgroundColor"];
 }) => import("react/jsx-runtime").JSX.Element;
 export default FloatingLabelsV2;

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

@@ -0,0 +1,10 @@
+import { AnyRef, InputStateV2 } from '../inputV2.types';
+export declare const setExternalRef: <T>(ref: AnyRef<T>, value: T | null) => void;
+/** Derives stable suffix ids from a non-empty base (typically `id` prop or `useId()`). */
+export declare const generateAccessibilityIds: (baseId: string) => {
+    errorId: string;
+    hintId: string;
+    groupId: string;
+    firstInputId: string;
+};
+export declare const getInteractionState: (state: InputStateV2) => "default" | "hover" | "disabled" | "focus" | "error";

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

@@ -97,7 +97,7 @@ type StyledBlockProps = StateStyles & {
     transitionTimingFunction?: CSSObject['transitionTimingFunction'];
     transitionDelay?: CSSObject['transitionDelay'];
 };
-type SemanticTagType = keyof Pick<JSX.IntrinsicElements, 'div' | 'section' | 'article' | 'header' | 'footer' | 'main' | 'span' | 'nav' | 'hr' | 'label'>;
+type SemanticTagType = keyof Pick<JSX.IntrinsicElements, 'div' | 'section' | 'article' | 'header' | 'footer' | 'main' | 'span' | 'nav' | 'hr' | 'label' | 'button'>;
 export type BlockProps = StyledBlockProps & Omit<React.HTMLAttributes<HTMLElement>, 'as' | 'color'> & {
     children?: React.ReactNode;
     as?: SemanticTagType;

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

@@ -0,0 +1,40 @@
+import { CSSObject } from 'styled-components';
+import { ProgressBarV2TokenType } from './progressBarV2.tokens';
+import { ProgressBarV2Size } from './progressBarV2.types';
+/**
+ * Returns ordered bounds so `min` ≤ `max` (swaps when the caller passes a reversed range).
+ * Use this for progressbar ARIA (`aria-valuemin` must be ≤ `aria-valuemax`) and for math.
+ */
+export declare const normalizeRange: (min: number, max: number) => {
+    min: number;
+    max: number;
+};
+export declare const clampValue: (value: number, min: number, max: number) => number;
+export declare const getProgressBarValueState: (value: number, min: number, max: number) => {
+    rangeMin: number;
+    rangeMax: number;
+    clampedValue: number;
+    percentage: number;
+};
+export declare const calculatePercentage: (value: number, min: number, max: number) => number;
+export declare const parseTokenValue: (tokenValue: string | number | undefined, fallback: number) => number;
+export declare const extractAriaProps: (rest: Record<string, unknown> | undefined) => {
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    restProps: Record<string, unknown>;
+};
+export declare const generateDefaultAriaLabel: (value: number, min: number, max: number) => string;
+export declare const getCircularDimensions: (size: ProgressBarV2Size, tokens: ProgressBarV2TokenType) => {
+    circularSize: CSSObject["width"];
+    sizeNum: number;
+    strokeWidth: number;
+    radius: number;
+    circumference: number;
+    center: number;
+};
+/** Parse token like `"4 2"` or `"8 4"` into [dashLen, gapLen]. */
+export declare const parseCircularDashToken: (token: string | undefined, fallbackDash?: number, fallbackGap?: number) => [number, number];
+export declare const calculateCircularProgressStroke: (circumference: number, percentage: number) => {
+    strokeDasharray: string;
+    strokeDashoffset: number;
+};

package/dist/components/SidebarV2/SecondarySidebar.d.ts

@@ -0,0 +1,9 @@
+import { SidebarV2TokensType } from './sidebarV2.tokens';
+import { SecondarySidebarInfo } from './types';
+type Props = {
+    id: string;
+    secondarySidebar?: SecondarySidebarInfo;
+    tokens: SidebarV2TokensType;
+};
+export declare function SecondarySidebar({ id, secondarySidebar, tokens }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/SidebarV2/SidebarV2.d.ts

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

package/dist/components/SidebarV2/SidebarV2Footer.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { SidebarV2TokensType } from './sidebarV2.tokens';
+import { SidebarV2StateChangeType } from './types';
+type SidebarV2FooterProps = {
+    footer?: ReactNode;
+    sidebarState: SidebarV2StateChangeType;
+    tokens: SidebarV2TokensType;
+};
+declare const SidebarV2Footer: ({ footer, sidebarState, tokens, }: SidebarV2FooterProps) => import("react/jsx-runtime").JSX.Element | null;
+export default SidebarV2Footer;

package/dist/components/SidebarV2/SidebarV2Header.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { SidebarV2TokensType } from './sidebarV2.tokens';
+export type SidebarV2HeaderProps = {
+    sidebarTopSlot?: ReactNode;
+    merchantInfo?: {
+        items: Array<{
+            label: string;
+            value: string;
+            icon?: ReactNode;
+        }>;
+        selected: string;
+        onSelect: (value: string) => void;
+    };
+    isExpanded: boolean;
+    isScrolled: boolean;
+    sidebarCollapseKey: string;
+    onToggle: () => void;
+    sidebarNavId?: string;
+    hideToggleButton?: boolean;
+    iconOnlyMode?: boolean;
+    tokens: SidebarV2TokensType;
+};
+declare const SidebarV2Header: ({ sidebarTopSlot, merchantInfo, isExpanded, isScrolled, sidebarCollapseKey, onToggle, sidebarNavId, hideToggleButton, iconOnlyMode, tokens, }: SidebarV2HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default SidebarV2Header;

package/dist/components/SidebarV2/SidebarV2MobileNavigation/MobileNavigationItem.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { MobileNavigationItemProps } from './types';
+declare const MobileNavigationItem: React.ForwardRefExoticComponent<MobileNavigationItemProps & React.RefAttributes<HTMLButtonElement>>;
+export default MobileNavigationItem;

package/dist/components/SidebarV2/SidebarV2MobileNavigation/MoreButton.d.ts

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

package/dist/components/SidebarV2/SidebarV2MobileNavigation/PrimaryActionButton.d.ts

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

package/dist/components/SidebarV2/SidebarV2MobileNavigation/hooks.d.ts

@@ -0,0 +1,6 @@
+import { SidebarV2MobileNavigationItem } from './types';
+export declare const useMobileNavigationViewportHeight: () => number | undefined;
+export declare const useOrderedItems: <T extends {
+    label: string;
+}>(items: T[]) => readonly [T[], import('react').Dispatch<import('react').SetStateAction<T[]>>];
+export declare const useItemSelection: (orderedItems: SidebarV2MobileNavigationItem[], setOrderedItems: (items: SidebarV2MobileNavigationItem[]) => void, primaryItems: SidebarV2MobileNavigationItem[], hasSecondaryItems: boolean, onCollapse: () => void) => (item: SidebarV2MobileNavigationItem, isSecondaryItem?: boolean) => void;

package/dist/components/SidebarV2/SidebarV2MobileNavigation/index.d.ts

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

package/dist/components/SidebarV2/SidebarV2MobileNavigation/mobile.dark.tokens.d.ts

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

package/dist/components/SidebarV2/SidebarV2MobileNavigation/mobile.light.tokens.d.ts

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

package/dist/components/SidebarV2/SidebarV2MobileNavigation/mobile.tokens.d.ts

@@ -0,0 +1,87 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { Theme } from '../../../context/theme.enum';
+export type MobileNavigationV2State = 'default' | 'active';
+export type MobileNavigationV2TokenType = {
+    /**
+     * MobileNavigationV2 anatomy
+     * - container: floating dock surface
+     * - layout: padding/gaps/safe-area offsets used for height calculations
+     * - row: a horizontal strip of items (primary and optional secondary rows)
+     * - item: each navigation button
+     * - primaryAction: optional center primary action button
+     */
+    container: {
+        zIndex: CSSObject['zIndex'];
+        /** Base/fallback dock fill; use a color that already includes alpha (e.g. `#RRGGBBAA`). */
+        backgroundColor: CSSObject['backgroundColor'];
+        /** Optional fill when `backdrop-filter` is supported (typically slightly lower alpha). */
+        background?: CSSObject['background'];
+        border: CSSObject['border'];
+        borderWidth: CSSObject['borderWidth'];
+        borderRadius: CSSObject['borderRadius'];
+        backdropFilter: CSSObject['backdropFilter'];
+        transition: CSSObject['transition'];
+    };
+    layout: {
+        safeAreaOffset: CSSObject['padding'];
+        floatingPadding: CSSObject['padding'];
+        primaryActionMarginX: CSSObject['margin'];
+        itemLabelMarginTop: CSSObject['margin'];
+        itemLabelLineHeight: CSSObject['lineHeight'];
+        paddingTop: CSSObject['paddingTop'];
+        paddingBottom: CSSObject['paddingBottom'];
+        paddingLeft: CSSObject['paddingLeft'];
+        paddingRight: CSSObject['paddingRight'];
+        gap: CSSObject['gap'];
+        rowPaddingTop: CSSObject['paddingTop'];
+        rowPaddingBottom: CSSObject['paddingBottom'];
+        rowPaddingLeft: CSSObject['paddingLeft'];
+        rowPaddingRight: CSSObject['paddingRight'];
+        rowGap: CSSObject['gap'];
+    };
+    item: {
+        width: CSSObject['width'];
+        height: CSSObject['height'];
+        borderRadius: CSSObject['borderRadius'];
+        gap: CSSObject['gap'];
+        backgroundColor: {
+            [key in MobileNavigationV2State]: CSSObject['backgroundColor'];
+        };
+        color: {
+            [key in MobileNavigationV2State]: CSSObject['color'];
+        };
+        fontWeight: CSSObject['fontWeight'];
+        icon: {
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            borderRadius: CSSObject['borderRadius'];
+            transition: CSSObject['transition'];
+            /** SVG stroke width for Lucide-style icons. */
+            strokeWidth: number;
+        };
+        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'];
+            strokeWidth: number;
+        };
+    };
+};
+export type ResponsiveMobileNavigationV2Tokens = {
+    [key in keyof BreakpointType]: MobileNavigationV2TokenType;
+};
+export declare const getMobileNavigationV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveMobileNavigationV2Tokens;