@juspay/blend-design-system 0.0.31 → 0.0.32-beta

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

@@ -91,5 +91,84 @@ type PrimitiveTextareaProps = StateStyles & {
     fontWeight?: CSSObject['fontWeight'];
 };
 export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & PrimitiveTextareaProps;
-declare const PrimitiveTextarea: React.FC<TextareaProps>;
+declare const PrimitiveTextarea: React.ForwardRefExoticComponent<React.TextareaHTMLAttributes<HTMLTextAreaElement> & StateStyles & {
+    color?: CSSObject["color"];
+    position?: CSSObject["position"];
+    inset?: CSSObject["inset"];
+    top?: CSSObject["top"];
+    right?: CSSObject["right"];
+    bottom?: CSSObject["bottom"];
+    left?: CSSObject["left"];
+    zIndex?: CSSObject["zIndex"];
+    pointerEvents?: CSSObject["pointerEvents"];
+    opacity?: CSSObject["opacity"];
+    padding?: CSSObject["padding"];
+    paddingTop?: CSSObject["paddingTop"];
+    paddingBottom?: CSSObject["paddingBottom"];
+    paddingLeft?: CSSObject["paddingLeft"];
+    paddingRight?: CSSObject["paddingRight"];
+    paddingX?: CSSObject["padding"];
+    paddingY?: CSSObject["padding"];
+    paddingInlineStart?: CSSObject["paddingInlineStart"];
+    paddingInlineEnd?: CSSObject["paddingInlineEnd"];
+    margin?: CSSObject["margin"];
+    marginTop?: CSSObject["marginTop"];
+    marginBottom?: CSSObject["marginBottom"];
+    marginLeft?: CSSObject["marginLeft"];
+    marginRight?: CSSObject["marginRight"];
+    marginX?: CSSObject["margin"];
+    marginY?: CSSObject["margin"];
+    display?: CSSObject["display"];
+    flexDirection?: CSSObject["flexDirection"];
+    justifyContent?: CSSObject["justifyContent"];
+    alignItems?: CSSObject["alignItems"];
+    flexWrap?: CSSObject["flexWrap"];
+    flexGrow?: CSSObject["flexGrow"];
+    flexShrink?: CSSObject["flexShrink"];
+    flexBasis?: CSSObject["flexBasis"];
+    gap?: CSSObject["gap"];
+    rowGap?: CSSObject["rowGap"];
+    columnGap?: CSSObject["columnGap"];
+    alignContent?: CSSObject["alignContent"];
+    alignSelf?: CSSObject["alignSelf"];
+    justifySelf?: CSSObject["justifySelf"];
+    borderRadius?: CSSObject["borderRadius"];
+    borderTopLeftRadius?: CSSObject["borderTopLeftRadius"];
+    borderTopRightRadius?: CSSObject["borderTopRightRadius"];
+    borderBottomLeftRadius?: CSSObject["borderBottomLeftRadius"];
+    borderBottomRightRadius?: CSSObject["borderBottomRightRadius"];
+    outline?: CSSObject["outline"];
+    outlineColor?: CSSObject["outlineColor"];
+    outlineWidth?: CSSObject["outlineWidth"];
+    outlineStyle?: CSSObject["outlineStyle"];
+    outlineOffset?: CSSObject["outlineOffset"];
+    width?: CSSObject["width"];
+    height?: CSSObject["height"];
+    minWidth?: CSSObject["minWidth"];
+    minHeight?: CSSObject["minHeight"];
+    maxWidth?: CSSObject["maxWidth"];
+    maxHeight?: CSSObject["maxHeight"];
+    backgroundColor?: CSSObject["backgroundColor"];
+    border?: CSSObject["border"];
+    borderTop?: CSSObject["borderTop"];
+    borderBottom?: CSSObject["borderBottom"];
+    borderLeft?: CSSObject["borderLeft"];
+    borderRight?: CSSObject["borderRight"];
+    boxShadow?: CSSObject["boxShadow"];
+    overflow?: CSSObject["overflow"];
+    overflowX?: CSSObject["overflowX"];
+    overflowY?: CSSObject["overflowY"];
+    contentCentered?: boolean;
+    cursor?: CSSObject["cursor"];
+    transition?: CSSObject["transition"];
+    transitionProperty?: CSSObject["transitionProperty"];
+    transitionDuration?: CSSObject["transitionDuration"];
+    transitionTimingFunction?: CSSObject["transitionTimingFunction"];
+    transitionDelay?: CSSObject["transitionDelay"];
+    placeholderStyles?: CSSObject;
+    resize?: CSSObject["resize"];
+    fontFamily?: CSSObject["fontFamily"];
+    fontSize?: CSSObject["fontSize"];
+    fontWeight?: CSSObject["fontWeight"];
+} & React.RefAttributes<HTMLTextAreaElement>>;
 export default PrimitiveTextarea;

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

@@ -8,6 +8,7 @@ type SidebarHeaderProps = {
     sidebarCollapseKey: string;
     onToggle: () => void;
     sidebarNavId?: string;
+    hideToggleButton?: boolean;
 };
 declare const SidebarHeader: React.FC<SidebarHeaderProps>;
 export default SidebarHeader;

package/dist/components/Sidebar/sidebar.tokens.d.ts

@@ -25,6 +25,7 @@ export type SidebarTokenType = {
     maxWidth: {
         withLeftPanel: CSSObject['maxWidth'];
         withoutLeftPanel: CSSObject['maxWidth'];
+        iconOnly?: CSSObject['maxWidth'];
     };
     backgroundColor: CSSObject['backgroundColor'];
     borderRight: CSSObject['border'];

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

@@ -97,6 +97,25 @@ export type SidebarProps = {
      * Defaults to false (intermediate state enabled)
      */
     disableIntermediateState?: boolean;
+    /**
+     * When true, shows only icons (52px width) with tooltips on hover
+     * In this mode:
+     * - Directory items show only their icons
+     * - Tooltips appear on hover showing the item label
+     * - Sections render as horizontal dividers
+     * - Merchant switcher moves to topbar
+     * - Intermediate/hover state expansion is disabled
+     * - Toggle button appears at the top of the icon-only panel
+     * Defaults to false
+     */
+    iconOnlyMode?: boolean;
+    /**
+     * When true, clicking the toggle button in icon-only mode will completely hide the sidebar.
+     * When false, clicking the toggle button will expand to full sidebar view.
+     * Only applies when iconOnlyMode is true
+     * @default false
+     */
+    hideOnIconOnlyToggle?: boolean;
     /**
      * Show primary action button in mobile navigation
      */

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

@@ -6,7 +6,7 @@ export declare const arrangeTenants: (tenants: TenantItem[], selectedLabel: stri
     hiddenTenants: TenantItem[];
     hasMoreTenants: boolean;
 };
-export declare const getSidebarWidth: (isExpanded: boolean, isHovering: boolean, hasLeftPanel: boolean, tokens: SidebarTokenType) => string;
+export declare const getSidebarWidth: (isExpanded: boolean, isHovering: boolean, hasLeftPanel: boolean, tokens: SidebarTokenType, iconOnlyMode?: boolean) => string;
 export declare const getSidebarBorder: (isExpanded: boolean, isHovering: boolean, tokens: SidebarTokenType) => string;
 export declare const getTopbarStyles: (enableAutoHide: boolean, showTopbar: boolean) => {
     transform?: undefined;

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

@@ -1,3 +1,3 @@
 import { TooltipProps } from './types';
-export declare const Tooltip: ({ children: trigger, content, side, align, showArrow, size, slot, slotDirection, delayDuration, offset, open, maxWidth, fullWidth, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ children: trigger, content, side, align, showArrow, size, slot, slotDirection, delayDuration, offset, open, maxWidth, fullWidth, disableInteractive, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

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

@@ -32,4 +32,5 @@ export type TooltipProps = {
     offset?: number;
     maxWidth?: string;
     fullWidth?: boolean;
+    disableInteractive?: boolean;
 };

package/dist/components/VirtualList/VirtualList.d.ts

@@ -1,9 +1,5 @@
 import { default as React } from 'react';
 import { VirtualListProps, VirtualListRef, VirtualListItem } from './types';
-/**
- * A simple, performant virtual list component that only renders visible items.
- *
- */
 declare function VirtualListInner<T extends VirtualListItem>({ items, renderItem, height, itemHeight, overscan, onScroll, onEndReached, endReachedThreshold, isLoading, hasMore, className, style, }: VirtualListProps<T>, ref: React.Ref<VirtualListRef>): import("react/jsx-runtime").JSX.Element;
 declare const VirtualList: (<T extends VirtualListItem>(props: VirtualListProps<T> & {
     ref?: React.Ref<VirtualListRef>;

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

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { TooltipSize } from '../Tooltip/types';
+type TruncatedTextWithTooltipProps = {
+    text: string;
+    style?: React.CSSProperties;
+    tooltipSize?: TooltipSize;
+    delayDuration?: number;
+    'data-id'?: string;
+    'data-element'?: string;
+} & {
+    [key: `data-${string}`]: string | undefined;
+};
+export declare const TruncatedTextWithTooltip: ({ text, style, tooltipSize, delayDuration, "data-id": dataId, "data-element": dataElement, ...restProps }: TruncatedTextWithTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

package/dist/context/ThemeContext.d.ts

@@ -43,6 +43,7 @@ import { BREAKPOINTS } from '../breakpoints/breakPoints';
 import { ResponsiveMobileNavigationTokens } from '../components/Sidebar/SidebarMobile/mobile.tokens';
 import { ResponsiveStepperTokens } from '../components/Stepper/stepper.tokens';
 import { Theme } from './theme.enum';
+import { ResponsiveChatInputTokensType } from '../components/ChatInput/chatInput.tokens';
 export type ComponentTokenType = {
     TAGS?: ResponsiveTagTokens;
     SEARCH_INPUT?: ResponsiveSearchInputTokens;
@@ -86,6 +87,7 @@ export type ComponentTokenType = {
     MOBILE_NAVIGATION?: ResponsiveMobileNavigationTokens;
     UPLOAD?: ResponsiveUploadTokens;
     CODE_BLOCK?: ResponsiveCodeBlockTokens;
+    CHAT_INPUT?: ResponsiveChatInputTokensType;
 };
 type ThemeContextType = {
     foundationTokens: ThemeType;

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 { ResponsiveMobileNavigationTokens } from '../components/Sidebar/SidebarMobile/mobile.tokens';
 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 | ResponsiveMobileNavigationTokens | ResponsiveDirectoryTokens;
+import { ResponsiveChatInputTokensType } from '../components/ChatInput/chatInput.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 | ResponsiveMobileNavigationTokens | ResponsiveDirectoryTokens | ResponsiveChatInputTokensType;