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

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

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

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

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

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

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

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

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

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

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

package/dist/components/Skeleton/SkeletonCompound.d.ts

@@ -6,7 +6,6 @@ import { SkeletonProps } from './types';
  * <Skeleton loading={true}>
  *   <Skeleton.Avatar size="md" />
  *   <Skeleton.Text lines={2} />
- *   <Skeleton.Button />
  * </Skeleton>
  *
  * Or traditional:
@@ -26,20 +25,6 @@ declare const SkeletonCompound: import('react').ForwardRefExoticComponent<import
         size?: import('./types').SkeletonSize;
         shape?: "circle" | "square";
     } & import('react').RefAttributes<HTMLDivElement>>;
-    /**
-     * Button skeleton with perfect token mirroring and dynamic sizing
-     */
-    Button: import('react').ForwardRefExoticComponent<import('./types').BaseSkeletonProps & Omit<import('../Primitives/Block/Block').BlockProps, "children"> & {
-        buttonType?: import('../Button').ButtonType;
-        size?: import('../Button').ButtonSize;
-        subType?: import('../Button').ButtonSubType;
-        width?: string | number;
-        fullWidth?: boolean;
-        buttonGroupPosition?: "center" | "left" | "right";
-        text?: string;
-        hasLeadingIcon?: boolean;
-        hasTrailingIcon?: boolean;
-    } & import('react').RefAttributes<HTMLDivElement>>;
     /**
      * Card skeleton with default layout or custom children
      */

package/dist/components/Skeleton/hooks/useSkeletonBase.d.ts

@@ -15,7 +15,3 @@ export declare const useSkeletonBase: (loading: boolean, children?: ReactNode) =
     tokens: SkeletonTokensType;
     prefersReducedMotion: boolean;
 };
-/**
- * Common skeleton component props validation and defaults
- */
-export declare const useSkeletonDefaults: <T extends Record<string, unknown>>(props: T, defaults: Partial<T>) => T;

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

@@ -1,10 +1,10 @@
 export { default as Skeleton } from './SkeletonCompound';
 export { default as SkeletonBase } from './Skeleton';
 export { default as SkeletonAvatar } from './SkeletonAvatar';
-export { default as SkeletonButton } from './SkeletonButton';
 export { default as SkeletonCard } from './SkeletonCard';
 export { useSkeletonBase } from './hooks/useSkeletonBase';
-export type { SkeletonProps, SkeletonAvatarProps, SkeletonButtonProps, SkeletonCardProps, SkeletonSize, BaseSkeletonProps, SkeletonVariant, SkeletonShape, } from './types';
+export { getSkeletonState, mergeSkeletonProps, getSkeletonDefaults, } from './utils';
+export type { SkeletonProps, SkeletonAvatarProps, SkeletonCardProps, SkeletonSize, BaseSkeletonProps, SkeletonVariant, SkeletonShape, } from './types';
 export type { SkeletonTokensType, ResponsiveSkeletonTokens, } from './skeleton.tokens';
 export { getSkeletonTokens } from './skeleton.tokens';
 export { default } from './SkeletonCompound';

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

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 import { BlockProps } from '../Primitives/Block/Block';
 import { SkeletonVariant, SkeletonShape } from './skeleton.tokens';
-import { ButtonType, ButtonSize, ButtonSubType } from '../Button/types';
 export type SkeletonSize = 'sm' | 'md' | 'lg';
 export type BaseSkeletonProps = {
     variant?: SkeletonVariant;
@@ -19,17 +18,6 @@ export type SkeletonAvatarProps = BaseSkeletonProps & Omit<BlockProps, 'children
     size?: SkeletonSize;
     shape?: 'circle' | 'square';
 };
-export type SkeletonButtonProps = BaseSkeletonProps & Omit<BlockProps, 'children'> & {
-    buttonType?: ButtonType;
-    size?: ButtonSize;
-    subType?: ButtonSubType;
-    width?: string | number;
-    fullWidth?: boolean;
-    buttonGroupPosition?: 'center' | 'left' | 'right';
-    text?: string;
-    hasLeadingIcon?: boolean;
-    hasTrailingIcon?: boolean;
-};
 export type SkeletonCardProps = BaseSkeletonProps & Omit<BlockProps, 'children'> & {
     children?: ReactNode;
     padding?: string | number;

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

@@ -0,0 +1,18 @@
+/**
+ * Simple utility function for skeleton state logic
+ * Not a hook since it doesn't call any React hooks internally
+ */
+export declare function getSkeletonState(showSkeleton: boolean): {
+    shouldShowSkeleton: boolean;
+    shouldShowContent: boolean;
+};
+/**
+ * Helper function for merging component props with skeleton props
+ * Not a hook since it's just a pure utility function
+ */
+export declare function mergeSkeletonProps<TComponentProps, TSkeletonProps>(componentProps: TComponentProps, skeletonProps?: Partial<TSkeletonProps>): TComponentProps & Partial<TSkeletonProps>;
+/**
+ * Common skeleton component props validation and defaults
+ * Renamed from useSkeletonDefaults since it's not a hook
+ */
+export declare function getSkeletonDefaults<T extends Record<string, unknown>>(props: T, defaults: Partial<T>): T;

package/dist/components/Snackbar/Snackbar.d.ts

@@ -1,6 +1,9 @@
 import { default as React } from 'react';
-import { Toaster as Snackbar } from 'sonner';
-import { AddToastOptions, CustomToastProps } from './types';
+import { AddToastOptions, CustomToastProps, SnackbarPosition } from './types';
 export declare const StyledToast: React.FC<CustomToastProps>;
-export declare const addSnackbar: ({ header, description, variant, onClose, actionButton, duration, }: AddToastOptions) => string | number;
+export declare const addSnackbar: ({ header, description, variant, onClose, actionButton, duration, position, }: AddToastOptions) => string | number;
+type SnackbarProps = {
+    position?: SnackbarPosition;
+};
+declare const Snackbar: React.FC<SnackbarProps>;
 export default Snackbar;

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

@@ -4,6 +4,14 @@ export declare enum SnackbarVariant {
     WARNING = "warning",
     ERROR = "error"
 }
+export declare enum SnackbarPosition {
+    TOP_LEFT = "top-left",
+    TOP_RIGHT = "top-right",
+    BOTTOM_LEFT = "bottom-left",
+    BOTTOM_RIGHT = "bottom-right",
+    TOP_CENTER = "top-center",
+    BOTTOM_CENTER = "bottom-center"
+}
 export type AddToastOptions = {
     header: string;
     description?: string;
@@ -15,6 +23,7 @@ export type AddToastOptions = {
         autoDismiss?: boolean;
     };
     duration?: number;
+    position?: SnackbarPosition;
 };
 export type CustomToastProps = {
     header: string;

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

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

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

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

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

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

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

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

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

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

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

@@ -1,2 +1,2 @@
-export { default as Tag } from './Tags';
+export { default as Tag } from './Tag';
 export * from './types';

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

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

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

@@ -1,4 +1,6 @@
 import { ReactNode } from 'react';
+import { SkeletonVariant } from '../Skeleton/skeleton.tokens';
+import { BlockProps } from '../Primitives/Block/Block';
 export declare enum TagVariant {
     NO_FILL = "noFill",
     ATTENTIVE = "attentive",
@@ -22,7 +24,7 @@ export declare enum TagShape {
     ROUNDED = "rounded",
     SQUARICAL = "squarical"
 }
-export type TagProps = {
+export type TagProps = Omit<BlockProps, 'children'> & {
     text: string;
     variant?: TagVariant;
     color?: TagColor;
@@ -30,6 +32,9 @@ export type TagProps = {
     shape?: TagShape;
     leftSlot?: ReactNode;
     rightSlot?: ReactNode;
-    onClick?: () => void;
     splitTagPosition?: 'left' | 'right';
 };
+export type TagWithSkeletonProps = TagProps & {
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
+};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+export declare enum ChevronAnimationDirection {
+    DOWN = "down",
+    RIGHT = "right",
+    UP = "up",
+    LEFT = "left"
+}
+export declare enum ChevronAnimationVariant {
+    ROTATE_180 = "rotate-180",
+    ROTATE_90 = "rotate-90",
+    ROTATE_270 = "rotate-270"
+}
+export declare enum ChevronAnimationSize {
+    SMALL = "sm",
+    MEDIUM = "md",
+    LARGE = "lg"
+}
+export interface ChevronAnimationProps {
+    children: ReactNode;
+    isOpen?: boolean;
+    direction?: ChevronAnimationDirection;
+    variant?: ChevronAnimationVariant;
+    size?: ChevronAnimationSize;
+    color?: string;
+    className?: string;
+    animationDuration?: number;
+    disabled?: boolean;
+}

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

@@ -0,0 +1,3 @@
+import { ChevronAnimationSize, ChevronAnimationVariant, ChevronAnimationDirection } from './types';
+export declare const getChevronTransform: (direction: ChevronAnimationDirection, variant: ChevronAnimationVariant, isOpen: boolean) => string;
+export declare const getChevronSize: (size: ChevronAnimationSize) => string;

package/dist/components/animations/Ripple/RippleContainer.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { RippleElement } from '../../../hooks/useRipple';
+type RippleContainerProps = {
+    ripples: RippleElement[];
+};
+declare const RippleContainer: React.FC<RippleContainerProps>;
+export default RippleContainer;

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

@@ -0,0 +1,2 @@
+export { default as RippleContainer } from './RippleContainer';
+export * from '../../../hooks/useRipple';

package/dist/components/common/error.animations.d.ts

@@ -0,0 +1,4 @@
+export declare const errorShakeAnimation: import('styled-components').RuleSet<object>;
+export declare const getErrorShakeStyle: (shouldShake: boolean) => {
+    animation: string | undefined;
+};

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

@@ -0,0 +1,2 @@
+export { errorShakeAnimation, getErrorShakeStyle } from './error.animations';
+export { useErrorShake } from './useErrorShake';

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

@@ -0,0 +1,6 @@
+/**
+ * Hook to manage error shake animation state
+ * @param error - Whether the component is in an error state
+ * @returns shouldShake - Boolean indicating if shake animation should be active
+ */
+export declare const useErrorShake: (error: boolean) => boolean;

package/dist/context/ThemeContext.d.ts

@@ -39,8 +39,10 @@ import { ResponsiveCodeBlockTokens } from '../components/CodeBlock/codeBlock.tok
 import { ThemeType } from '../tokens';
 import { ResponsiveSkeletonTokens } from '../components/Skeleton/skeleton.tokens';
 import { BREAKPOINTS } from '../breakpoints/breakPoints';
+import { ResponsiveMobileNavigationTokens } from '../components/Sidebar/SidebarMobile/mobile.tokens';
 import { ResponsiveStepperTokens } from '../components/Stepper/stepper.tokens';
 import { ResponsiveWorkflowTokens } from '../components/WorkflowCanvas/workflow.tokens';
+import { Theme } from './ThemeProvider';
 export type ComponentTokenType = {
     TAGS?: ResponsiveTagTokens;
     SEARCH_INPUT?: ResponsiveSearchInputTokens;
@@ -80,6 +82,7 @@ export type ComponentTokenType = {
     AVATAR?: ResponsiveAvatarTokens;
     AVATAR_GROUP?: ResponsiveAvatarGroupTokens;
     SIDEBAR?: ResponsiveSidebarTokens;
+    MOBILE_NAVIGATION?: ResponsiveMobileNavigationTokens;
     UPLOAD?: ResponsiveUploadTokens;
     CODE_BLOCK?: ResponsiveCodeBlockTokens;
     WORKFLOW_CANVAS?: ResponsiveWorkflowTokens;
@@ -88,6 +91,7 @@ type ThemeContextType = {
     foundationTokens: ThemeType;
     componentTokens: Required<ComponentTokenType>;
     breakpoints: typeof BREAKPOINTS;
+    theme: Theme | string;
 };
 declare const ThemeContext: import('react').Context<ThemeContextType>;
 export declare const useTheme: () => ThemeContextType;

package/dist/context/ThemeProvider.d.ts

@@ -1,11 +1,16 @@
 import { BreakpointType } from '../breakpoints/breakPoints';
 import { ThemeType } from '../tokens';
 import { ComponentTokenType } from './ThemeContext';
+export declare enum Theme {
+    LIGHT = "light",
+    DARK = "dark"
+}
 type ThemeProviderProps = {
     foundationTokens?: ThemeType;
     componentTokens?: ComponentTokenType;
     breakpoints?: BreakpointType;
+    theme?: Theme | string;
     children: React.ReactNode;
 };
-declare const ThemeProvider: ({ foundationTokens, componentTokens, breakpoints, children, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const ThemeProvider: ({ foundationTokens, componentTokens, breakpoints, theme, children, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
 export default ThemeProvider;

package/dist/context/index.d.ts

@@ -1,4 +1,4 @@
-export { default as ThemeProvider } from './ThemeProvider';
+export { default as ThemeProvider, Theme } from './ThemeProvider';
 export { useTheme } from './ThemeContext';
 export type { ComponentTokenType } from './ThemeContext';
 export type { ThemeType } from '../tokens';

package/dist/context/initComponentTokens.d.ts

@@ -1,4 +1,5 @@
 import { ThemeType } from '../tokens';
 import { ComponentTokenType } from './ThemeContext';
-declare const initTokens: (componentTokens: ComponentTokenType, foundationTokens: ThemeType) => Required<ComponentTokenType>;
+import { Theme } from './ThemeProvider';
+declare const initTokens: (componentTokens: ComponentTokenType, foundationTokens: ThemeType, theme?: Theme | string) => Required<ComponentTokenType>;
 export default initTokens;