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

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

@@ -16,5 +16,7 @@ declare const TabsList: React.ForwardRefExoticComponent<Omit<import('@radix-ui/r
     onTabChange?: (value: string) => void;
     activeTab?: string;
     disable?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: import('../Skeleton').SkeletonVariant;
 } & React.RefAttributes<HTMLDivElement>>;
 export default TabsList;

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

@@ -9,5 +9,10 @@ declare const TabsTrigger: import('react').ForwardRefExoticComponent<Omit<import
     closable?: boolean;
     onClose?: () => void;
     disable?: boolean;
+    isActive?: boolean;
+    isOverlay?: boolean;
+    tabsGroupId?: string;
+    showSkeleton?: boolean;
+    skeletonVariant?: import('../Skeleton').SkeletonVariant;
 } & import('react').RefAttributes<HTMLButtonElement>>;
 export default TabsTrigger;

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

@@ -1,4 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { SkeletonVariant } from '../Skeleton/skeleton.tokens';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 export declare enum TabsVariant {
     BOXED = "boxed",
@@ -17,6 +18,8 @@ export type TabItem = {
     closable?: boolean;
     isDefault?: boolean;
     disable?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
 };
 export type TabsProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
     variant?: TabsVariant;
@@ -30,6 +33,8 @@ export type TabsProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
     addButtonTooltip?: string;
     maxDisplayTabs?: number;
     disable?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
 };
 export type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
     variant?: TabsVariant;
@@ -47,6 +52,8 @@ export type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List>
     onTabChange?: (value: string) => void;
     activeTab?: string;
     disable?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
 };
 export type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
     value: string;
@@ -58,6 +65,11 @@ export type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Tri
     closable?: boolean;
     onClose?: () => void;
     disable?: boolean;
+    isActive?: boolean;
+    isOverlay?: boolean;
+    tabsGroupId?: string;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
 };
 export type TabsContentProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
 export type TabsStyles = {

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

@@ -38,3 +38,23 @@ export declare const prepareDropdownItems: (tabs: TabItem[]) => {
  * Returns all tabs for display (no limiting - let horizontal scroll handle overflow)
  */
 export declare const getDisplayTabs: (tabs: TabItem[]) => TabItem[];
+/**
+ * Calculates the position and width for the tab indicator
+ */
+export declare const calculateTabIndicatorPosition: (tabElement: HTMLButtonElement, listElement: HTMLDivElement) => {
+    tabLeft: number;
+    tabWidth: number;
+};
+/**
+ * Determines if the tab movement is from left to right
+ */
+export declare const isMovingRight: (oldTab: HTMLButtonElement, newTab: HTMLButtonElement) => boolean;
+/**
+ * Calculates transition dimensions for the animated underline
+ */
+export declare const calculateTransitionDimensions: (oldTab: HTMLButtonElement, newTab: HTMLButtonElement, listElement: HTMLDivElement) => {
+    left: number;
+    width: number;
+    finalLeft: number;
+    finalWidth: number;
+};

package/dist/components/Topbar/topbar.tokens.d.ts

@@ -2,9 +2,24 @@ import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { BreakpointType } from '../../breakpoints/breakPoints';
 export type TopbarState = 'default' | 'hover' | 'active';
-export type TopbarTokensType = {
-    position: CSSObject['position'];
-    top: CSSObject['top'];
+/**
+ * Topbar Tokens following the pattern: [target].CSSProp.[variant].[state]
+ *
+ * Structure matches Sidebar pattern for consistency:
+ * - Base properties: borderBottom, backgroundColor, backdropFilter, padding, gap
+ * - Target sections: toggleButton.*, actionButton.*, tenantIconButton.*, merchantSelectTrigger.*, leftSection.*, rightSection.*, sidebarSection.*
+ * - Each target has: backgroundColor, padding, borderRadius, gap, specific properties
+ * - Interactive elements have state-based styling: [state] = default | hover | active
+ *
+ * Pattern examples:
+ * - backgroundColor (topbar background color)
+ * - padding (topbar content padding)
+ * - toggleButton.backgroundColor.[state] (interactive toggle button)
+ * - actionButton.padding (action button spacing)
+ * - leftSection.gap (left section item spacing)
+ * - merchantSelectTrigger.text.color (merchant text color)
+ */
+export type TopbarTokenType = {
     zIndex: CSSObject['zIndex'];
     borderBottom: CSSObject['borderBottom'];
     backgroundColor: CSSObject['backgroundColor'];
@@ -66,13 +81,6 @@ export type TopbarTokensType = {
             color: CSSObject['color'];
         };
     };
-    centerSection: {
-        title: {
-            fontSize: CSSObject['fontSize'];
-            fontWeight: CSSObject['fontWeight'];
-            color: CSSObject['color'];
-        };
-    };
     rightSection: {
         gap: CSSObject['gap'];
     };
@@ -81,6 +89,6 @@ export type TopbarTokensType = {
     };
 };
 export type ResponsiveTopbarTokens = {
-    [key in keyof BreakpointType]: TopbarTokensType;
+    [key in keyof BreakpointType]: TopbarTokenType;
 };
 export declare const getTopbarTokens: (foundationToken: FoundationTokenType) => ResponsiveTopbarTokens;

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

@@ -15,6 +15,8 @@ export type TopbarProps = {
     isExpanded?: boolean;
     onToggleExpansion?: () => void;
     showToggleButton?: boolean;
+    /** When true, hides toggle button (used in panel only mode) */
+    panelOnlyMode?: boolean;
     /** Controlled mode: Show/hide topbar */
     isVisible?: boolean;
     /** Callback when visibility changes (controlled mode) */
@@ -23,7 +25,6 @@ export type TopbarProps = {
     defaultIsVisible?: boolean;
     sidebarTopSlot?: ReactNode;
     topbar?: ReactNode;
-    title?: string;
     leftAction?: ReactNode;
     rightActions?: ReactNode;
     showBackButton?: boolean;

package/dist/context/ThemeContext.d.ts

@@ -34,6 +34,7 @@ import { ResponsiveTopbarTokens } from '../components/Topbar/topbar.tokens';
 import { ResponsiveAvatarTokens } from '../components/Avatar/avatar.tokens';
 import { ResponsiveAvatarGroupTokens } from '../components/AvatarGroup/avatarGroup.tokens';
 import { ResponsiveSidebarTokens } from '../components/Sidebar/sidebar.tokens';
+import { ResponsiveDirectoryTokens } from '../components/Directory/directory.tokens';
 import { ResponsiveUploadTokens } from '../components/Upload/upload.tokens';
 import { ResponsiveCodeBlockTokens } from '../components/CodeBlock/codeBlock.token';
 import { ThemeType } from '../tokens';
@@ -82,6 +83,7 @@ export type ComponentTokenType = {
     AVATAR?: ResponsiveAvatarTokens;
     AVATAR_GROUP?: ResponsiveAvatarGroupTokens;
     SIDEBAR?: ResponsiveSidebarTokens;
+    DIRECTORY?: ResponsiveDirectoryTokens;
     MOBILE_NAVIGATION?: ResponsiveMobileNavigationTokens;
     UPLOAD?: ResponsiveUploadTokens;
     CODE_BLOCK?: ResponsiveCodeBlockTokens;

package/dist/context/useComponentToken.d.ts

@@ -41,4 +41,5 @@ import { ResponsiveUploadTokens } from '../components/Upload/upload.tokens';
 import { ResponsiveCodeBlockTokens } from '../components/CodeBlock/codeBlock.token';
 import { ResponsiveWorkflowTokens } from '../components/WorkflowCanvas/workflow.tokens';
 import { ResponsiveMobileNavigationTokens } from '../components/Sidebar/SidebarMobile/mobile.tokens';
-export declare const useComponentToken: (component: keyof ComponentTokenType) => ResponsiveSearchInputTokens | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | ResponsiveMultiValueInputTokens | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ResponsiveModalTokens | ResponsiveBreadcrumbTokens | ResponsivePopoverTokens | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ResponsiveProgressBarTokens | ResponsiveDrawerTokens | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveStepperTokens | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveSkeletonTokens | ResponsiveTopbarTokens | ResponsiveAvatarTokens | ResponsiveAvatarGroupTokens | ResponsiveSidebarTokens | ResponsiveUploadTokens | ResponsiveCodeBlockTokens | ResponsiveWorkflowTokens | ResponsiveMobileNavigationTokens;
+import { ResponsiveDirectoryTokens } from '../components/Directory/directory.tokens';
+export declare const useComponentToken: (component: keyof ComponentTokenType) => ResponsiveSearchInputTokens | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | ResponsiveMultiValueInputTokens | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ResponsiveModalTokens | ResponsiveBreadcrumbTokens | ResponsivePopoverTokens | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ResponsiveProgressBarTokens | ResponsiveDrawerTokens | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveStepperTokens | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveSkeletonTokens | ResponsiveTopbarTokens | ResponsiveAvatarTokens | ResponsiveAvatarGroupTokens | ResponsiveSidebarTokens | ResponsiveUploadTokens | ResponsiveCodeBlockTokens | ResponsiveWorkflowTokens | ResponsiveMobileNavigationTokens | ResponsiveDirectoryTokens;

package/dist/main.d.ts

@@ -24,6 +24,7 @@ export * from './components/Inputs';
 export * from './components/Menu';
 export * from './components/DataTable';
 export * from './components/Sidebar';
+export * from './components/Directory';
 export * from './components/MultiSelect';
 export * from './components/SingleSelect';
 export * from './components/Slider';