@juspay/blend-design-system 0.0.37-beta.8 → 0.0.37

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

@@ -17,6 +17,7 @@ export type MenuSkeletonProps = {
     show?: boolean;
     variant?: SkeletonVariant;
 };
+export type MenuSearchSortFn = (items: MenuItemType[], searchText: string) => MenuItemType[];
 export type MenuProps = {
     trigger: React.ReactNode;
     items?: MenuGroupType[];
@@ -26,6 +27,8 @@ export type MenuProps = {
     minWidth?: number;
     enableSearch?: boolean;
     searchPlaceholder?: string;
+    searchSortFn?: MenuSearchSortFn;
+    onEnter?: (searchText: string, filteredGroups: MenuGroupType[]) => void;
     enableVirtualScrolling?: boolean;
     virtualItemHeight?: number | ((item: MenuItemType, index: number) => number);
     virtualOverscan?: number;
@@ -68,6 +71,10 @@ export type MenuItemType = {
     subMenu?: MenuItemType[];
     enableSubMenuSearch?: boolean;
     subMenuSearchPlaceholder?: string;
+    /** Custom sort function for submenu search results. Defaults to exact → prefix → substring. */
+    subMenuSearchSortFn?: MenuSearchSortFn;
+    /** Called when the user presses Enter while focused on the submenu search input. */
+    onSubMenuSearchEnter?: (searchText: string, filteredResults: MenuItemType[]) => void;
     tooltip?: string | React.ReactNode;
     tooltipProps?: {
         side?: TooltipSide;

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

@@ -1,3 +1,11 @@
-import { MenuGroupType, MenuItemType } from './types';
-export declare const filterMenuGroups: (groups: MenuGroupType[], searchText: string) => MenuGroupType[];
+import { MenuGroupType, MenuItemType, MenuSearchSortFn } from './types';
+export declare enum MenuMatchRank {
+    EXACT = 0,
+    PREFIX = 1,
+    SUBSTRING = 2,
+    NONE = 3
+}
+export declare const getItemMatchRank: (item: MenuItemType, lower: string) => MenuMatchRank;
+export declare const defaultSearchSortFn: MenuSearchSortFn;
+export declare const filterMenuGroups: (groups: MenuGroupType[], searchText: string, searchSortFn?: MenuSearchSortFn) => MenuGroupType[];
 export declare const filterMenuItem: (item: MenuItemType, lower: string) => MenuItemType | null;

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

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use ModalV2 instead. */
 export { default as Modal } from './Modal';
 export * from './modal.tokens';
 export * from './types';

package/dist/components/ModalV2/ModalV2.d.ts

@@ -0,0 +1,22 @@
+declare const ModalV2: import('react').ForwardRefExoticComponent<{
+    isOpen: boolean;
+    isCustom?: boolean;
+    onClose: () => void;
+    title?: string;
+    subtitle?: string;
+    children: import('react').ReactNode;
+    primaryAction?: import('./modalV2.types').ModalV2ButtonAction;
+    secondaryAction?: import('./modalV2.types').ModalV2ButtonAction;
+    showCloseButton?: boolean;
+    showHeader?: boolean;
+    showFooter?: boolean;
+    closeOnBackdropClick?: boolean;
+    customHeader?: import('react').ReactNode;
+    customFooter?: import('react').ReactNode;
+    headerSlot?: import('react').ReactNode;
+    showDivider?: boolean;
+    dimensions?: import('./modalV2.types').ModalV2Dimensions;
+    useDrawerOnMobile?: boolean;
+    skeleton?: import('./modalV2.types').ModalV2BodySkeletonProps;
+} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "style" | "className" | "title" | "children"> & import('react').RefAttributes<HTMLDivElement>>;
+export default ModalV2;

package/dist/components/ModalV2/ModalV2Footer.d.ts

@@ -0,0 +1,10 @@
+import { ModalV2Props } from './modalV2.types';
+import { SkeletonVariant } from '../Skeleton';
+declare const ModalV2Footer: ({ primaryAction, secondaryAction, showDivider, showSkeleton, skeletonVariant, }: {
+    primaryAction?: ModalV2Props["primaryAction"];
+    secondaryAction?: ModalV2Props["secondaryAction"];
+    showDivider?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default ModalV2Footer;

package/dist/components/ModalV2/ModalV2Header.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { SkeletonVariant } from '../Skeleton';
+declare const ModalV2Header: ({ title, subtitle, onClose, showCloseButton, headerSlot, showDivider, showSkeleton, skeletonVariant, titleId, subtitleId, }: {
+    title?: string;
+    subtitle?: string;
+    onClose: () => void;
+    showCloseButton?: boolean;
+    headerSlot?: ReactNode;
+    showDivider?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
+    titleId?: string;
+    subtitleId?: string;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default ModalV2Header;

package/dist/components/ModalV2/ModalV2Skeleton.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ModalV2SkeletonProps } from './modalV2.types';
+declare const ModalV2Skeleton: FC<ModalV2SkeletonProps>;
+export default ModalV2Skeleton;

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

@@ -0,0 +1,4 @@
+export { default as ModalV2 } from './ModalV2';
+export * from './modalV2.tokens';
+export * from './modalV2.tokens.types';
+export * from './modalV2.types';

package/dist/components/ModalV2/mobileModalV2.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+declare const MobileModalV2: React.ForwardRefExoticComponent<{
+    isOpen: boolean;
+    isCustom?: boolean;
+    onClose: () => void;
+    title?: string;
+    subtitle?: string;
+    children: React.ReactNode;
+    primaryAction?: import('./modalV2.types').ModalV2ButtonAction;
+    secondaryAction?: import('./modalV2.types').ModalV2ButtonAction;
+    showCloseButton?: boolean;
+    showHeader?: boolean;
+    showFooter?: boolean;
+    closeOnBackdropClick?: boolean;
+    customHeader?: React.ReactNode;
+    customFooter?: React.ReactNode;
+    headerSlot?: React.ReactNode;
+    showDivider?: boolean;
+    dimensions?: import('./modalV2.types').ModalV2Dimensions;
+    useDrawerOnMobile?: boolean;
+    skeleton?: import('./modalV2.types').ModalV2BodySkeletonProps;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "className" | "title" | "children"> & React.RefAttributes<HTMLDivElement>>;
+export default MobileModalV2;

package/dist/components/ModalV2/modalAnimationV2.d.ts

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

package/dist/components/ModalV2/modalV2.dark.tokens.d.ts

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

package/dist/components/ModalV2/modalV2.light.tokens.d.ts

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

package/dist/components/ModalV2/modalV2.tokens.d.ts

@@ -0,0 +1,5 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { Theme } from '../../context/theme.enum';
+import { ResponsiveModalV2Tokens } from './modalV2.tokens.types';
+export type { ModalV2State, ModalV2TokensType, ResponsiveModalV2Tokens, } from './modalV2.tokens.types';
+export declare const getModalV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveModalV2Tokens;

package/dist/components/ModalV2/modalV2.tokens.types.d.ts

@@ -0,0 +1,91 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type ModalV2State = 'default';
+export type ModalV2TokensType = {
+    boxShadow: CSSObject['boxShadow'];
+    borderRadius: CSSObject['borderRadius'];
+    overlay: {
+        backgroundColor: CSSObject['backgroundColor'];
+        offset: CSSObject['offset'];
+    };
+    paddingTop: CSSObject['paddingTop'];
+    paddingRight: CSSObject['paddingRight'];
+    paddingBottom: CSSObject['paddingBottom'];
+    paddingLeft: CSSObject['paddingLeft'];
+    backgroundColor: CSSObject['backgroundColor'];
+    header: {
+        gap: CSSObject['gap'];
+        paddingTop: CSSObject['paddingTop'];
+        paddingRight: CSSObject['paddingRight'];
+        paddingBottom: CSSObject['paddingBottom'];
+        paddingLeft: CSSObject['paddingLeft'];
+        maxHeight: CSSObject['maxHeight'];
+        borderBottom: CSSObject['border'];
+        backgroundColor: CSSObject['backgroundColor'];
+        borderTopLeftRadius: CSSObject['borderTopLeftRadius'];
+        borderTopRightRadius: CSSObject['borderTopRightRadius'];
+        slot: {
+            gap: CSSObject['gap'];
+        };
+        text: {
+            title: {
+                color: CSSObject['color'];
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                lineHeight: CSSObject['lineHeight'];
+            };
+            subtitle: {
+                color: CSSObject['color'];
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                lineHeight: CSSObject['lineHeight'];
+            };
+        };
+    };
+    divider: {
+        borderColor: CSSObject['borderColor'];
+    };
+    skeleton: {
+        header: {
+            gap: CSSObject['gap'];
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            borderBottom: CSSObject['border'];
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            borderRadius: CSSObject['borderRadius'];
+        };
+        body: {
+            gap: CSSObject['gap'];
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            borderRadius: CSSObject['borderRadius'];
+        };
+    };
+    body: {
+        paddingTop: CSSObject['paddingTop'];
+        paddingRight: CSSObject['paddingRight'];
+        paddingBottom: CSSObject['paddingBottom'];
+        paddingLeft: CSSObject['paddingLeft'];
+        backgroundColor: CSSObject['backgroundColor'];
+    };
+    footer: {
+        paddingTop: CSSObject['paddingTop'];
+        paddingRight: CSSObject['paddingRight'];
+        paddingBottom: CSSObject['paddingBottom'];
+        paddingLeft: CSSObject['paddingLeft'];
+        borderTop: CSSObject['border'];
+        backgroundColor: CSSObject['backgroundColor'];
+        gap: CSSObject['gap'];
+    };
+    closeButton: {
+        color: CSSObject['color'];
+        width: CSSObject['width'];
+        height: CSSObject['height'];
+    };
+};
+export type ResponsiveModalV2Tokens = {
+    [key in keyof BreakpointType]: ModalV2TokensType;
+};

package/dist/components/ModalV2/modalV2.types.d.ts

@@ -0,0 +1,66 @@
+import { SkeletonVariant } from '../Skeleton';
+import { ModalV2TokensType } from './modalV2.tokens.types';
+import { HTMLAttributes, ReactNode } from 'react';
+import { ButtonV2Props } from '../ButtonV2';
+import { CSSObject } from 'styled-components';
+export type HeaderSkeletonConfig = {
+    show: boolean;
+    showDivider: boolean;
+    showCloseButton: boolean;
+};
+export type BodySkeletonConfig = {
+    show: boolean;
+    width: string;
+    height: string | number;
+};
+export type FooterSkeletonConfig = {
+    show: boolean;
+    showDivider: boolean;
+};
+export type ModalV2SkeletonProps = {
+    modalTokens: ModalV2TokensType;
+    headerSkeleton?: HeaderSkeletonConfig;
+    bodySkeleton?: BodySkeletonConfig;
+    footerSkeleton?: FooterSkeletonConfig;
+    skeletonVariant: SkeletonVariant;
+};
+export type ModalV2ButtonAction = Omit<ButtonV2Props, 'buttonGroupPosition'>;
+export type BodySkeletonProps = {
+    show?: boolean;
+    width?: string;
+    height?: string | number;
+};
+export type ModalV2BodySkeletonProps = {
+    show?: boolean;
+    variant?: SkeletonVariant;
+    bodySkeletonProps?: BodySkeletonProps;
+};
+export type ModalV2Dimensions = {
+    width?: CSSObject['width'];
+    height?: CSSObject['height'];
+    minWidth?: CSSObject['minWidth'];
+    maxWidth?: CSSObject['maxWidth'];
+    minHeight?: CSSObject['minHeight'];
+    maxHeight?: CSSObject['maxHeight'];
+};
+export type ModalV2Props = {
+    isOpen: boolean;
+    isCustom?: boolean;
+    onClose: () => void;
+    title?: string;
+    subtitle?: string;
+    children: ReactNode;
+    primaryAction?: ModalV2ButtonAction;
+    secondaryAction?: ModalV2ButtonAction;
+    showCloseButton?: boolean;
+    showHeader?: boolean;
+    showFooter?: boolean;
+    closeOnBackdropClick?: boolean;
+    customHeader?: ReactNode;
+    customFooter?: ReactNode;
+    headerSlot?: ReactNode;
+    showDivider?: boolean;
+    dimensions?: ModalV2Dimensions;
+    useDrawerOnMobile?: boolean;
+    skeleton?: ModalV2BodySkeletonProps;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title' | 'className' | 'style'>;

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

@@ -1,4 +1,6 @@
+/** @deprecated Will be deprecated soon. Use MultiSelectV2 instead. */
 export { default as MultiSelect } from './MultiSelect';
+/** @deprecated Will be deprecated soon. Use MultiSelectV2 instead. */
 export { default as MultiSelectTrigger } from './MultiSelectTrigger';
 export * from './multiSelect.tokens';
 export * from './types';

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

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use PopoverV2 instead. */
 export { default as Popover } from './Popover';
 export * from './popover.tokens';
 export * from './types';

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

@@ -1,7 +1,7 @@
 import { default as React, JSX } from 'react';
 import { CSSObject } from 'styled-components';
 type SpacingValue = string | number;
-type StateStyles = {
+export type StateStyles = {
     _hover?: StyledBlockProps;
     _focus?: StyledBlockProps;
     _active?: StyledBlockProps;

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

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use ProgressBarV2 instead. */
 export { default as ProgressBar } from './ProgressBar';
 export * from './progressbar.tokens';
 export * from './types';

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

@@ -1,4 +1,6 @@
+/** @deprecated Will be deprecated soon. Use RadioV2 instead. */
 export { default as Radio } from './Radio';
+/** @deprecated Will be deprecated soon. Use RadioV2 instead. */
 export { default as RadioGroup } from './RadioGroup';
 export { RadioSize } from './types';
 export type { RadioProps, RadioGroupProps } from './types';

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

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { DirectoryData } from '../Directory/types';
+import { DirectoryData, DirectoryProps } from '../Directory/types';
 import { SidebarMerchantInfo, SidebarStateChangeType } from './types';
 export type SidebarContentProps = {
     sidebarTopSlot?: React.ReactNode;
@@ -20,6 +20,14 @@ export type SidebarContentProps = {
     footer?: React.ReactNode;
     setIsHovering?: (isHovering: boolean) => void;
     sidebarState?: SidebarStateChangeType;
+    showHierarchyLines?: DirectoryProps['showHierarchyLines'];
+    hierarchyLineBorderRadius?: DirectoryProps['hierarchyLineBorderRadius'];
+    expandedItems?: DirectoryProps['expandedItems'];
+    defaultExpandedItems?: DirectoryProps['defaultExpandedItems'];
+    onExpandedItemsChange?: DirectoryProps['onExpandedItemsChange'];
+    onItemExpand?: DirectoryProps['onItemExpand'];
+    enableVirtualization?: DirectoryProps['enableVirtualization'];
+    virtualization?: DirectoryProps['virtualization'];
 };
 declare const SidebarContent: React.FC<SidebarContentProps>;
 export default SidebarContent;

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

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use SidebarV2 instead. */
 export { default as Sidebar } from './Sidebar';
 export * from './sidebar.tokens';
 export * from './types';

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { DirectoryData, NavbarItem } from '../Directory/types';
+import { DirectoryData, DirectoryProps, NavbarItem } from '../Directory/types';
 import { MerchantInfo, LeftPanelInfo, TenantBadge } from '../shared/layoutTypes';
 export type { LeftPanelInfo, LeftPanelItem, TenantBadge, } from '../shared/layoutTypes';
 export type TenantItem = {
@@ -48,6 +48,14 @@ export type SidebarProps = {
     onActiveItemChange?: (item: string | null) => void;
     defaultActiveItem?: string | null;
     onHoveringChange?: (isHovering: boolean) => void;
+    showHierarchyLines?: DirectoryProps['showHierarchyLines'];
+    hierarchyLineBorderRadius?: DirectoryProps['hierarchyLineBorderRadius'];
+    expandedItems?: DirectoryProps['expandedItems'];
+    defaultExpandedItems?: DirectoryProps['defaultExpandedItems'];
+    onExpandedItemsChange?: DirectoryProps['onExpandedItemsChange'];
+    onItemExpand?: DirectoryProps['onItemExpand'];
+    enableVirtualization?: DirectoryProps['enableVirtualization'];
+    virtualization?: DirectoryProps['virtualization'];
 };
 export type MobileNavigationItem = NavbarItem & {
     sectionLabel?: string;

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { DirectoryData } from '../Directory/types';
+import { DirectoryData, DirectoryProps } from '../Directory/types';
 import { SidebarV2StateChangeType } from './types';
 import { SidebarV2TokensType } from './sidebarV2.tokens';
 export type SidebarV2PanelProps = {
@@ -29,6 +29,14 @@ export type SidebarV2PanelProps = {
     setIsHovering?: (isHovering: boolean) => void;
     sidebarState?: SidebarV2StateChangeType;
     tokens: SidebarV2TokensType;
+    showHierarchyLines?: DirectoryProps['showHierarchyLines'];
+    hierarchyLineBorderRadius?: DirectoryProps['hierarchyLineBorderRadius'];
+    expandedItems?: DirectoryProps['expandedItems'];
+    defaultExpandedItems?: DirectoryProps['defaultExpandedItems'];
+    onExpandedItemsChange?: DirectoryProps['onExpandedItemsChange'];
+    onItemExpand?: DirectoryProps['onItemExpand'];
+    enableVirtualization?: DirectoryProps['enableVirtualization'];
+    virtualization?: DirectoryProps['virtualization'];
 };
-declare const SidebarV2Panel: ({ sidebarTopSlot, merchantInfo, isExpanded, isScrolled, sidebarCollapseKey, onToggle, sidebarNavId, data, idPrefix, activeItem, onActiveItemChange, defaultActiveItem, iconOnlyMode, hideToggleButton, footer, setIsHovering, sidebarState, tokens, }: SidebarV2PanelProps) => import("react/jsx-runtime").JSX.Element;
+declare const SidebarV2Panel: ({ sidebarTopSlot, merchantInfo, isExpanded, isScrolled, sidebarCollapseKey, onToggle, sidebarNavId, data, idPrefix, activeItem, onActiveItemChange, defaultActiveItem, iconOnlyMode, hideToggleButton, footer, setIsHovering, sidebarState, tokens, showHierarchyLines, hierarchyLineBorderRadius, expandedItems, defaultExpandedItems, onExpandedItemsChange, onItemExpand, enableVirtualization, virtualization, }: SidebarV2PanelProps) => import("react/jsx-runtime").JSX.Element;
 export default SidebarV2Panel;

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

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
-import { DirectoryData } from '../Directory/types';
+import { DirectoryData, DirectoryProps } from '../Directory/types';
 import { MerchantInfo } from '../Topbar/types';
 import { TenantBadge } from '../Sidebar/types';
 export type { TenantBadge } from '../Sidebar/types';
@@ -50,5 +50,13 @@ export type SidebarV2Props = {
     activeItem?: string | null;
     onActiveItemChange?: (item: string | null) => void;
     defaultActiveItem?: string | null;
+    showHierarchyLines?: DirectoryProps['showHierarchyLines'];
+    hierarchyLineBorderRadius?: DirectoryProps['hierarchyLineBorderRadius'];
+    expandedItems?: DirectoryProps['expandedItems'];
+    defaultExpandedItems?: DirectoryProps['defaultExpandedItems'];
+    onExpandedItemsChange?: DirectoryProps['onExpandedItemsChange'];
+    onItemExpand?: DirectoryProps['onItemExpand'];
+    enableVirtualization?: DirectoryProps['enableVirtualization'];
+    virtualization?: DirectoryProps['virtualization'];
 };
 export type { SidebarV2MobileNavigationItem, SidebarV2MobileNavigationProps, } from './SidebarV2MobileNavigation/types';

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

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use SingleSelectV2 instead. */
 export { default as SingleSelect } from './SingleSelect';
 export * from './singleSelect.tokens';
 export * from './types';

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

@@ -1,4 +1,21 @@
+import { default as Skeleton } from './Skeleton';
+import { default as SkeletonAvatar } from './SkeletonAvatar';
+import { default as SkeletonCard } from './SkeletonCard';
 import { SkeletonProps } from './types';
+declare const SkeletonRoot: import('react').ForwardRefExoticComponent<import('./types').BaseSkeletonProps & Omit<import('../Primitives/Block/Block').BlockProps, "children"> & {
+    children?: import('react').ReactNode;
+    animate?: boolean;
+    width?: string | number;
+    height?: string | number;
+    maxHeight?: string | number;
+    minHeight?: string | number;
+    maxWidth?: string | number;
+    minWidth?: string | number;
+    shape?: import('./skeleton.tokens').SkeletonShape;
+} & import('react').RefAttributes<HTMLDivElement>>;
+declare const SkeletonCircle: import('react').ForwardRefExoticComponent<Omit<SkeletonProps, "shape"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const SkeletonRectangle: import('react').ForwardRefExoticComponent<Omit<SkeletonProps, "shape"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const SkeletonRounded: import('react').ForwardRefExoticComponent<Omit<SkeletonProps, "shape"> & import('react').RefAttributes<HTMLDivElement>>;
 /**
  * Enhanced Skeleton with compound component pattern
  *
@@ -11,47 +28,21 @@ import { SkeletonProps } from './types';
  * Or traditional:
  * <Skeleton.Text loading={isLoading} lines={3} />
  */
-declare const SkeletonCompound: import('react').ForwardRefExoticComponent<import('./types').BaseSkeletonProps & Omit<import('../Primitives/Block/Block').BlockProps, "children"> & {
-    children?: import('react').ReactNode;
-    animate?: boolean;
-    width?: string | number;
-    height?: string | number;
-    maxHeight?: string | number;
-    minHeight?: string | number;
-    maxWidth?: string | number;
-    minWidth?: string | number;
-    shape?: import('./skeleton.tokens').SkeletonShape;
-} & import('react').RefAttributes<HTMLDivElement>> & {
+declare const SkeletonCompound: typeof SkeletonRoot & {
     /**
      * Avatar skeleton with circular or square shapes and multiple sizes
      */
-    Avatar: import('react').ForwardRefExoticComponent<import('./types').BaseSkeletonProps & Omit<import('../Primitives/Block/Block').BlockProps, "children"> & {
-        size?: import('./types').SkeletonSize;
-        shape?: "circle" | "square";
-    } & import('react').RefAttributes<HTMLDivElement>>;
+    Avatar: typeof SkeletonAvatar;
     /**
      * Card skeleton with default layout or custom children
      */
-    Card: import('react').ForwardRefExoticComponent<import('./types').BaseSkeletonProps & Omit<import('../Primitives/Block/Block').BlockProps, "children"> & {
-        children?: import('react').ReactNode;
-        padding?: string | number;
-    } & import('react').RefAttributes<HTMLDivElement>>;
+    Card: typeof SkeletonCard;
     /**
      * Base skeleton component for custom shapes and layouts
      */
-    Base: import('react').ForwardRefExoticComponent<import('./types').BaseSkeletonProps & Omit<import('../Primitives/Block/Block').BlockProps, "children"> & {
-        children?: import('react').ReactNode;
-        animate?: boolean;
-        width?: string | number;
-        height?: string | number;
-        maxHeight?: string | number;
-        minHeight?: string | number;
-        maxWidth?: string | number;
-        minWidth?: string | number;
-        shape?: import('./skeleton.tokens').SkeletonShape;
-    } & import('react').RefAttributes<HTMLDivElement>>;
-    Circle: import('react').ForwardRefExoticComponent<Omit<SkeletonProps, "shape"> & import('react').RefAttributes<HTMLDivElement>>;
-    Rectangle: import('react').ForwardRefExoticComponent<Omit<SkeletonProps, "shape"> & import('react').RefAttributes<HTMLDivElement>>;
-    Rounded: import('react').ForwardRefExoticComponent<Omit<SkeletonProps, "shape"> & import('react').RefAttributes<HTMLDivElement>>;
+    Base: typeof Skeleton;
+    Circle: typeof SkeletonCircle;
+    Rectangle: typeof SkeletonRectangle;
+    Rounded: typeof SkeletonRounded;
 };
 export default SkeletonCompound;

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

@@ -1,4 +1,6 @@
+/** @deprecated Will be deprecated soon. Use SnackbarV2 instead. */
 export { default as Snackbar } from './Snackbar';
+/** @deprecated Will be deprecated soon. Use SnackbarV2 instead. */
 export { addSnackbar } from './Snackbar';
 export * from './snackbar.tokens';
 export * from './types';

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

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use StatCardV2 instead. */
 export { default as StatCard } from './StatCard';
 export * from './statcard.tokens';
 export * from './types';

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

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use StepperV2 instead. */
 export { default as Stepper } from './Stepper';
 export * from './stepper.tokens';
 export * from './types';

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

@@ -1,4 +1,6 @@
+/** @deprecated Will be deprecated soon. Use SwitchV2 instead. */
 export { Switch } from './Switch';
+/** @deprecated Will be deprecated soon. Use SwitchV2 instead. */
 export { default as SwitchGroup } from './SwitchGroup';
 export { SwitchSize } from './types';
 export type { SwitchProps, SwitchGroupProps } from './types';

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

@@ -2,6 +2,7 @@ import { default as Tabs } from './Tabs';
 import { default as TabsList } from './TabsList';
 import { default as TabsTrigger } from './TabsTrigger';
 import { default as TabsContent } from './TabsContent';
+/** @deprecated Will be deprecated soon. Use TabsV2 instead. */
 export { Tabs, TabsList, TabsTrigger, TabsContent };
 export * from './types';
 export * from './tabs.token';

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

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use TagV2 instead. */
 export { default as Tag } from './Tag';
 export * from './tag.tokens';
 export * from './types';

package/dist/components/Timeline/Timeline.d.ts

@@ -1,41 +1,17 @@
-declare const Timeline: import('react').ForwardRefExoticComponent<{
+import { default as TimelineLabel } from './TimelineLabel';
+import { default as TimelineHeader } from './TimelineHeader';
+import { default as TimelineSubstep } from './TimelineSubstep';
+import { default as TimelineNode } from './TimelineNode';
+import { default as TimelineShowMore } from './TimelineShowMore';
+declare const TimelineRoot: import('react').ForwardRefExoticComponent<{
     children: import('react').ReactNode;
     className?: string;
-} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "style" | "className" | "children"> & import('react').RefAttributes<HTMLDivElement>> & {
-    Label: import('react').ForwardRefExoticComponent<import('./types').TimelineLabelProps & import('react').RefAttributes<HTMLDivElement>>;
-    Header: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
-        title: string;
-        status?: import('./types').TimelineNodeStatus;
-        timestamp?: string;
-        children?: import('react').ReactNode;
-        leftSlot?: import('react').ReactNode;
-        rightSlot?: import('react').ReactNode;
-    } & import('react').RefAttributes<HTMLDivElement>>;
-    Substep: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
-        title: string;
-        isNestedUnderHeader?: boolean;
-        showIndicator?: boolean;
-        description?: string;
-        timestamp?: string;
-        rightSlot?: import('react').ReactNode;
-        datetimeLeftSlot?: import('react').ReactNode;
-        datetimeRightSlot?: import('react').ReactNode;
-    } & import('react').RefAttributes<HTMLDivElement>>;
-    Node: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
-        title?: string;
-        leftSlot?: import('react').ReactNode;
-        headerRightSlot?: import('react').ReactNode;
-        datetime?: string;
-        datetimeLeftSlot?: import('react').ReactNode;
-        datetimeRightSlot?: import('react').ReactNode;
-        text?: string;
-        maxLines?: number;
-        user?: import('./types').TimelineUser;
-        avatarProps?: Partial<Omit<import('../AvatarV2').AvatarV2Props, "src" | "fallbackText">>;
-        time?: string;
-        status?: import('./types').TimelineNodeStatus;
-        children?: import('react').ReactNode;
-    } & import('react').RefAttributes<HTMLDivElement>>;
-    ShowMore: import('react').ForwardRefExoticComponent<import('./types').TimelineShowMoreProps & import('react').RefAttributes<HTMLDivElement>>;
+} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "style" | "className" | "children"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const Timeline: typeof TimelineRoot & {
+    Label: typeof TimelineLabel;
+    Header: typeof TimelineHeader;
+    Substep: typeof TimelineSubstep;
+    Node: typeof TimelineNode;
+    ShowMore: typeof TimelineShowMore;
 };
 export default Timeline;