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

package/dist/components/Avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import { AvatarSize, AvatarShape } from './types';
+import { AvatarSize, AvatarShape, AvatarOnlinePosition } from './types';
 declare const Avatar: import('react').ForwardRefExoticComponent<{
     src?: string;
     alt?: string;
@@ -6,6 +6,7 @@ declare const Avatar: import('react').ForwardRefExoticComponent<{
     size?: AvatarSize;
     shape?: AvatarShape;
     online?: boolean;
+    onlinePosition?: AvatarOnlinePosition;
     leadingSlot?: React.ReactNode;
     trailingSlot?: React.ReactNode;
 } & Omit<import('react').HTMLAttributes<HTMLDivElement>, "children"> & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -10,6 +10,10 @@ export declare enum AvatarShape {
     CIRCULAR = "circular",
     ROUNDED = "rounded"
 }
+export declare enum AvatarOnlinePosition {
+    TOP = "top",
+    BOTTOM = "bottom"
+}
 export type AvatarProps = {
     src?: string;
     alt?: string;
@@ -17,6 +21,7 @@ export type AvatarProps = {
     size?: AvatarSize;
     shape?: AvatarShape;
     online?: boolean;
+    onlinePosition?: AvatarOnlinePosition;
     leadingSlot?: React.ReactNode;
     trailingSlot?: React.ReactNode;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

package/dist/components/Button/Button.d.ts

@@ -7,7 +7,7 @@ declare const Button: import('react').ForwardRefExoticComponent<{
     leadingIcon?: React.ReactNode;
     trailingIcon?: React.ReactNode;
     disabled?: boolean;
-    onClick?: () => void;
+    onClick?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
     loading?: boolean;
     showSkeleton?: boolean;
     skeletonVariant?: import('../Skeleton').SkeletonVariant;

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

@@ -31,7 +31,7 @@ export type ButtonProps = {
     leadingIcon?: React.ReactNode;
     trailingIcon?: React.ReactNode;
     disabled?: boolean;
-    onClick?: () => void;
+    onClick?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
     loading?: boolean;
     showSkeleton?: boolean;
     skeletonVariant?: SkeletonVariant;

package/dist/components/DataTable/TableHeader/DraggableColumnHeader.d.ts

@@ -0,0 +1,9 @@
+interface DraggableColumnHeaderProps {
+    id: string;
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    'data-table-column-heading'?: string;
+}
+export declare const DraggableColumnHeader: React.FC<DraggableColumnHeaderProps>;
+export {};

package/dist/components/DataTable/TableHeader/index.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { TableHeaderProps } from './types';
-declare const TableHeader: import('react').ForwardRefExoticComponent<TableHeaderProps<Record<string, unknown>> & import('react').RefAttributes<HTMLTableSectionElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps<Record<string, unknown>> & React.RefAttributes<HTMLTableSectionElement>>;
 export default TableHeader;

package/dist/components/DataTable/TableHeader/types.d.ts

@@ -8,6 +8,7 @@ export type TableHeaderProps<T extends Record<string, unknown>> = {
     sortConfig?: SortConfig | null;
     enableInlineEdit?: boolean;
     enableColumnManager?: boolean;
+    enableColumnReordering?: boolean;
     columnManagerMaxSelections?: number;
     columnManagerAlwaysSelected?: string[];
     columnManagerPrimaryAction?: {
@@ -36,6 +37,7 @@ export type TableHeaderProps<T extends Record<string, unknown>> = {
     onSortDescending?: (field: keyof T) => void;
     onSelectAll: (checked: boolean | 'indeterminate') => void;
     onColumnChange: (columns: ColumnDefinition<T>[]) => void;
+    onColumnReorder?: (columns: ColumnDefinition<T>[]) => void;
     onColumnFilter?: (field: string, type: FilterType, value: string | string[] | {
         min: number;
         max: number;

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

@@ -235,6 +235,8 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     onAdvancedFiltersChange?: (filters: unknown[]) => void;
     columnFreeze?: number;
     enableColumnManager?: boolean;
+    enableColumnReordering?: boolean;
+    onColumnReorder?: (columns: ColumnDefinition<T>[]) => void;
     columnManagerMaxSelections?: number;
     columnManagerAlwaysSelected?: (keyof T)[];
     columnManagerPrimaryAction?: {

package/dist/components/Directory/directory.tokens.d.ts

@@ -0,0 +1,86 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type DirectoryState = 'default' | 'hover' | 'active';
+/**
+ * Directory Tokens following the pattern: [target].CSSProp.[state]
+ *
+ * Hierarchical Structure:
+ * - Container level: gap, paddingX, paddingY (spacing for the entire directory)
+ * - Section level: Contains header, label, chevron, and item
+ *   - header: Controls section header layout
+ *   - label: Controls section label text styling
+ *   - chevron: Controls section collapse/expand icon
+ *   - item: Navigation items within the section (NavItem)
+ *     - nested: Child items within navigation items
+ *
+ * Pattern examples:
+ * - gap (space between sections)
+ * - paddingX (container horizontal padding)
+ * - section.header.padding (section header spacing)
+ * - section.item.backgroundColor.[state] (nav item background with states)
+ * - section.item.nested.paddingLeft (nested item indentation)
+ */
+export type DirectoryTokenType = {
+    gap: CSSObject['gap'];
+    paddingX: CSSObject['padding'];
+    paddingY: CSSObject['padding'];
+    section: {
+        gap: CSSObject['gap'];
+        header: {
+            padding: {
+                x: CSSObject['padding'];
+                y: CSSObject['padding'];
+            };
+            label: {
+                fontSize: CSSObject['fontSize'];
+                color: CSSObject['color'];
+                fontWeight: CSSObject['fontWeight'];
+            };
+            chevron: {
+                width: CSSObject['width'];
+                color: CSSObject['color'];
+            };
+        };
+        itemList: {
+            gap: CSSObject['gap'];
+            item: {
+                padding: {
+                    x: CSSObject['padding'];
+                    y: CSSObject['padding'];
+                };
+                gap: CSSObject['gap'];
+                borderRadius: CSSObject['borderRadius'];
+                fontWeight: CSSObject['fontWeight'];
+                fontSize: CSSObject['fontSize'];
+                transition: CSSObject['transition'];
+                backgroundColor: {
+                    [key in DirectoryState]: CSSObject['backgroundColor'];
+                };
+                color: {
+                    [key in DirectoryState]: CSSObject['color'];
+                };
+                icon: {
+                    width: CSSObject['width'];
+                };
+                chevron: {
+                    width: CSSObject['width'];
+                    color: CSSObject['color'];
+                };
+            };
+            nested: {
+                paddingLeft: CSSObject['paddingLeft'];
+                marginTop: CSSObject['marginTop'];
+                border: {
+                    width: CSSObject['width'];
+                    color: CSSObject['color'];
+                    leftOffset: CSSObject['left'];
+                };
+            };
+        };
+    };
+};
+export type ResponsiveDirectoryTokens = {
+    [key in keyof BreakpointType]: DirectoryTokenType;
+};
+export declare const getDirectoryTokens: (foundationToken: FoundationTokenType) => ResponsiveDirectoryTokens;

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

@@ -105,6 +105,14 @@ export type DrawerContentProps = {
      * Custom styles
      */
     style?: React.CSSProperties;
+    /**
+     * Accessibility label for the drawer content
+     */
+    'aria-label'?: string;
+    /**
+     * ID of the element describing the drawer content
+     */
+    'aria-describedby'?: string;
 };
 export type DrawerHeaderProps = {
     /**
@@ -125,6 +133,10 @@ export type DrawerTitleProps = {
      * Custom class name
      */
     className?: string;
+    /**
+     * ID for ARIA labeling
+     */
+    id?: string;
 };
 export type DrawerDescriptionProps = {
     /**
@@ -135,6 +147,10 @@ export type DrawerDescriptionProps = {
      * Custom class name
      */
     className?: string;
+    /**
+     * ID for ARIA description
+     */
+    id?: string;
 };
 export type DrawerFooterProps = {
     /**

package/dist/components/Inputs/MultiValueInput/MultiValueInput.d.ts

@@ -1,3 +1,3 @@
 import { MultiValueInputProps } from './types';
-declare const MultiValueInput: ({ value, label, sublabel, disabled, required, error, errorMessage, hintText, tags, onTagAdd, onTagRemove, onChange, size, ...rest }: MultiValueInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiValueInput: ({ value, label, sublabel, disabled, required, error, errorMessage, hintText, tags, onTagAdd, onTagRemove, onChange, size, onFocus, onBlur, ...rest }: MultiValueInputProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiValueInput;

package/dist/components/Inputs/MultiValueInput/types.d.ts

@@ -25,4 +25,6 @@ export type MultiValueInputProps = {
     onTagRemove?: (tag: string) => void;
     onChange?: (value: string) => void;
     size?: TextInputSize;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onChange' | 'value'>;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onChange' | 'value' | 'onFocus' | 'onBlur'>;

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

@@ -5,6 +5,7 @@ type TenantPanelProps = {
     selected: string;
     onSelect: (label: string) => void;
     maxVisibleItems?: number;
+    tenantFooter?: React.ReactNode;
 };
 declare const TenantPanel: React.FC<TenantPanelProps>;
 declare const TenantItem: React.FC<{

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

@@ -11,6 +11,7 @@ export type LeftPanelInfo = {
     selected: string;
     onSelect: (value: string) => void;
     maxVisibleItems?: number;
+    tenantFooter?: ReactNode;
 };
 export type TenantItem = {
     label: string;

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

@@ -1,16 +1,7 @@
-import { ReactNode } from 'react';
-import { TagColor, TagProps, TagShape, TagSize, TagVariant } from '../Tags';
-export type TagConfig = {
-    text: string;
-    variant?: TagVariant;
-    style?: TagColor;
-    onClick?: () => void;
-};
+import { TagProps, TagShape, TagSize } from '../Tags';
 export type SplitTagProps = {
     primaryTag: Omit<TagProps, 'splitTagPosition' | 'size' | 'shape'>;
     secondaryTag?: Omit<TagProps, 'splitTagPosition' | 'size' | 'shape'>;
-    leadingSlot?: ReactNode;
-    trailingSlot?: ReactNode;
     size?: TagSize;
     shape?: TagShape;
 };

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

@@ -11,6 +11,10 @@ export declare enum ChangeType {
     INCREASE = "increase",
     DECREASE = "decrease"
 }
+export declare enum StatCardArrowDirection {
+    UP = "up",
+    DOWN = "down"
+}
 export type ChartDataPoint = {
     value: number;
     name: string;
@@ -18,6 +22,7 @@ export type ChartDataPoint = {
 export type StatCardChange = {
     value: number;
     valueType: ChangeType;
+    arrowDirection?: StatCardArrowDirection;
     tooltip?: ReactNode;
 };
 export declare enum StatCardDirection {

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

@@ -3,7 +3,6 @@ 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'];
     zIndex: CSSObject['zIndex'];
     borderBottom: CSSObject['borderBottom'];

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

@@ -23,7 +23,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';