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

package/dist/components/AccordionV2/AccordionV2.d.ts

@@ -0,0 +1,12 @@
+import { AccordionV2Type } from './accordionV2.types';
+import * as React from 'react';
+declare const AccordionV2: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    accordionType?: AccordionV2Type;
+    defaultValue?: string | string[];
+    value?: string | string[];
+    isMultiple?: boolean;
+    onValueChange?: (value: string | string[]) => void;
+} & import('./accordionV2.types').AccordionV2Dimensions & React.RefAttributes<HTMLDivElement>>;
+export default AccordionV2;
+export { AccordionV2Item } from './AccordionV2Item';

package/dist/components/AccordionV2/AccordionV2Chevron.d.ts

@@ -0,0 +1,11 @@
+import { AccordionV2ChevronPosition } from './accordionV2.types';
+import { AccordionV2TokensType } from './accordionV2.tokens';
+import * as React from 'react';
+type AccordionV2ChevronProps = {
+    isExpanded: boolean;
+    isDisabled: boolean;
+    position: AccordionV2ChevronPosition;
+    accordionTokens: AccordionV2TokensType;
+};
+export declare const AccordionV2Chevron: React.FC<AccordionV2ChevronProps>;
+export {};

package/dist/components/AccordionV2/AccordionV2Item.d.ts

@@ -0,0 +1,10 @@
+import { AccordionV2ItemProps, AccordionV2Type, AccordionV2ChevronPosition } from './accordionV2.types';
+declare const AccordionV2Item: import('react').ForwardRefExoticComponent<AccordionV2ItemProps & {
+    accordionType?: AccordionV2Type;
+    chevronPosition?: AccordionV2ChevronPosition;
+    isFirst?: boolean;
+    isLast?: boolean;
+    isIntermediate?: boolean;
+    currentValue?: string | string[];
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { AccordionV2Item };

package/dist/components/AccordionV2/AccordionV2TriggerContent.d.ts

@@ -0,0 +1,17 @@
+import { AccordionV2ChevronPosition } from './accordionV2.types';
+import { AccordionV2TokensType } from './accordionV2.tokens';
+import * as React from 'react';
+type AccordionV2TriggerContentProps = {
+    title: string;
+    subtext?: string;
+    leftSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+    subtextSlot?: React.ReactNode;
+    isDisabled: boolean;
+    isExpanded: boolean;
+    chevronPosition: AccordionV2ChevronPosition;
+    accordionTokens: AccordionV2TokensType;
+    isSmallScreen: boolean;
+};
+export declare const AccordionV2TriggerContent: React.FC<AccordionV2TriggerContentProps>;
+export {};

package/dist/components/AccordionV2/accordionV2.animations.d.ts

@@ -0,0 +1,3 @@
+export declare const accordionDown: import('styled-components/dist/models/Keyframes').default;
+export declare const accordionUp: import('styled-components/dist/models/Keyframes').default;
+export declare const ACCORDION_TRANSITION = "all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)";

package/dist/components/AccordionV2/accordionV2.dark.tokens.d.ts

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

package/dist/components/AccordionV2/accordionV2.light.tokens.d.ts

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

package/dist/components/AccordionV2/accordionV2.tokens.d.ts

@@ -0,0 +1,70 @@
+import { CSSObject } from 'styled-components';
+import { AccordionV2Type } from './accordionV2.types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { Theme } from '../../context/theme.enum';
+export type AccordionV2State = 'default' | 'hover' | 'active' | 'disabled' | 'open';
+export type AccordionV2TokensType = {
+    gap: {
+        [key in AccordionV2Type]: CSSObject['gap'];
+    };
+    borderRadius: {
+        [key in AccordionV2Type]: CSSObject['borderRadius'];
+    };
+    trigger: {
+        content: {
+            gap: CSSObject['gap'];
+        };
+        backgroundColor: {
+            [key in AccordionV2Type]: {
+                [key in AccordionV2State]: CSSObject['backgroundColor'];
+            };
+        };
+        border: {
+            [key in AccordionV2Type]: {
+                [key in AccordionV2State]: CSSObject['border'];
+            };
+        };
+        padding: {
+            [key in AccordionV2Type]: CSSObject['padding'];
+        };
+        text: {
+            gap: CSSObject['gap'];
+            title: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                lineHeight: CSSObject['lineHeight'];
+                color: {
+                    [key in AccordionV2State]: CSSObject['color'];
+                };
+            };
+            subtext: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                lineHeight: CSSObject['lineHeight'];
+                gap: CSSObject['gap'];
+                color: {
+                    [key in AccordionV2State]: CSSObject['color'];
+                };
+            };
+        };
+        slot: {
+            height: CSSObject['height'];
+        };
+    };
+    separator: {
+        color: {
+            [key in AccordionV2Type]: CSSObject['color'];
+        };
+    };
+    chevron: {
+        height: CSSObject['height'];
+        color: {
+            [key in AccordionV2State]: CSSObject['color'];
+        };
+    };
+};
+export type ResponsiveAccordionV2Tokens = {
+    [key in keyof BreakpointType]: AccordionV2TokensType;
+};
+export declare const getAccordionV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveAccordionV2Tokens;

package/dist/components/AccordionV2/accordionV2.types.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { CSSObject } from 'styled-components';
+export declare enum AccordionV2Type {
+    BORDER = "border",
+    NO_BORDER = "noBorder"
+}
+export declare enum AccordionV2ChevronPosition {
+    LEFT = "left",
+    RIGHT = "right"
+}
+export type AccordionV2ItemProps = {
+    value: string;
+    title: string;
+    subtext?: string;
+    leftSlot?: ReactNode;
+    rightSlot?: ReactNode;
+    subtextSlot?: ReactNode;
+    children: ReactNode;
+    isDisabled?: boolean;
+    chevronPosition?: AccordionV2ChevronPosition;
+};
+export type AccordionV2Dimensions = {
+    width?: CSSObject['width'];
+    maxWidth?: CSSObject['maxWidth'];
+    minWidth?: CSSObject['minWidth'];
+};
+export type AccordionV2Props = {
+    children: ReactNode;
+    accordionType?: AccordionV2Type;
+    defaultValue?: string | string[];
+    value?: string | string[];
+    isMultiple?: boolean;
+    onValueChange?: (value: string | string[]) => void;
+} & AccordionV2Dimensions;

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

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

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

@@ -1,3 +1,3 @@
 import { TextInputProps } from './types';
-declare const TextInput: ({ size, leftSlot, rightSlot, error, errorMessage, hintText, helpIconHintText, disabled, label, placeholder, sublabel, value, onChange, name, required, onBlur, onFocus, cursor, id: providedId, passwordToggle, type: providedType, ...rest }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const TextInput: ({ size, leftSlot, rightSlot, error, errorMessage, hintText, helpIconHintText, disabled, label, placeholder, sublabel, value, onChange, name, required, onBlur, onFocus, cursor, id: providedId, passwordToggle, type: providedType, textInputGroupPosition, ...rest }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
 export default TextInput;

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

@@ -10,6 +10,11 @@ export declare enum TextInputState {
     ERROR = "error",
     DISABLED = "disabled"
 }
+export declare enum TextInputGroupPosition {
+    CENTER = "center",
+    LEFT = "left",
+    RIGHT = "right"
+}
 export type TextInputProps = {
     label?: string;
     sublabel?: string;
@@ -26,4 +31,5 @@ export type TextInputProps = {
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
     cursor?: 'text' | 'pointer' | 'default' | 'not-allowed';
     passwordToggle?: boolean;
+    textInputGroupPosition?: TextInputGroupPosition;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onBlur' | 'onFocus'>;

package/dist/components/Inputs/TextInput/utils.d.ts

@@ -0,0 +1,6 @@
+import { TextInputTokensType } from './textInput.tokens';
+import { TextInputGroupPosition, TextInputSize } from './types';
+export declare const getTextInputBorderRadius: (size: TextInputSize, textInputGroupPosition: TextInputGroupPosition | undefined, tokens: TextInputTokensType) => {
+    borderRadius: string;
+    borderRight?: string;
+};

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

@@ -1,3 +1,3 @@
 import { MultiSelectMenuProps } from './types';
-declare const MultiSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, disabled, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, onSelectAll, alignment, side, sideOffset, alignOffset, open, onOpenChange, showActionButtons, primaryAction, secondaryAction, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, skeleton, size, variant, allowCustomValue, customValueLabel, menuId, }: MultiSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, disabled, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, onSelectAll, alignment, side, sideOffset, alignOffset, collisionBoundary, open, onOpenChange, showActionButtons, primaryAction, secondaryAction, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, skeleton, size, variant, allowCustomValue, customValueLabel, menuId, }: MultiSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelectMenu;

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

@@ -176,4 +176,5 @@ export type MultiSelectMenuProps = {
     allowCustomValue?: boolean;
     customValueLabel?: string;
     menuId?: string;
+    collisionBoundary?: Element | null | Array<Element | null>;
 };

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

@@ -16,6 +16,7 @@ type SingleSelectMenuProps = {
     side?: SelectMenuSide;
     sideOffset?: number;
     alignOffset?: number;
+    collisionBoundary?: Element | null | Array<Element | null>;
     open: boolean;
     onOpenChange: (open: boolean) => void;
     size?: SelectMenuSize;
@@ -32,5 +33,5 @@ type SingleSelectMenuProps = {
     customValueLabel?: string;
     menuId?: string;
 };
-declare const SingleSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, enableSearch, searchPlaceholder, disabled, alignment, side, sideOffset, alignOffset, open, onOpenChange, size, variant, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, skeleton, allowCustomValue, customValueLabel, }: SingleSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, enableSearch, searchPlaceholder, disabled, alignment, side, sideOffset, alignOffset, collisionBoundary, open, onOpenChange, size, variant, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, skeleton, allowCustomValue, customValueLabel, }: SingleSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelectMenu;

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

@@ -15,5 +15,6 @@ declare const Tabs: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react
     showSkeleton?: boolean;
     skeletonVariant?: import('../Skeleton').SkeletonVariant;
     stickyHeader?: boolean;
+    offsetTop?: number;
 } & React.RefAttributes<HTMLDivElement>>;
 export default Tabs;

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

@@ -19,5 +19,6 @@ declare const TabsList: React.ForwardRefExoticComponent<Omit<import('@radix-ui/r
     showSkeleton?: boolean;
     skeletonVariant?: import('../Skeleton').SkeletonVariant;
     stickyHeader?: boolean;
+    offsetTop?: number;
 } & React.RefAttributes<HTMLDivElement>>;
 export default TabsList;

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

@@ -38,6 +38,7 @@ export type TabsProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
     showSkeleton?: boolean;
     skeletonVariant?: SkeletonVariant;
     stickyHeader?: boolean;
+    offsetTop?: number;
 };
 export type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
     variant?: TabsVariant;
@@ -58,6 +59,7 @@ export type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List>
     showSkeleton?: boolean;
     skeletonVariant?: SkeletonVariant;
     stickyHeader?: boolean;
+    offsetTop?: number;
 };
 export type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
     value: string;

package/dist/components/TextInputGroup/TextInputGroup.d.ts

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

package/dist/components/TextInputGroup/TextInputGroupProps.types.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { TextInputProps } from '../Inputs/TextInput/types';
+export type TextInputGroupProps = {
+    stacked?: boolean;
+    gap?: string | number;
+    children: ReactElement<TextInputProps> | ReactElement<TextInputProps>[];
+};

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

@@ -0,0 +1,3 @@
+import { default as TextInputGroup } from './TextInputGroup';
+export { TextInputGroup };
+export type * from './TextInputGroupProps.types';

package/dist/context/ThemeContext.d.ts

@@ -47,6 +47,7 @@ import { ResponsiveStepperTokens } from '../components/Stepper/stepper.tokens';
 import { ResponsiveChatInputTokensType } from '../components/ChatInput/chatInput.tokens';
 import { ResponsiveTagV2Tokens } from '../components/TagV2/tagV2.tokens';
 import { ResponsiveAlertV2Tokens } from '../components/AlertV2/alertV2.tokens';
+import { ResponsiveAccordionV2Tokens } from '../components/AccordionV2/accordionV2.tokens';
 import { ResponsiveSnackbarV2Tokens } from '../components/SnackbarV2/snackbarV2.tokens';
 import { ResponsiveSwitchV2Tokens } from '../components/SwitchV2/switchV2.tokens';
 export type ComponentTokenType = {
@@ -96,6 +97,7 @@ export type ComponentTokenType = {
     BUTTONV2?: ResponsiveButtonV2Tokens;
     TAGV2?: ResponsiveTagV2Tokens;
     ALERTV2?: ResponsiveAlertV2Tokens;
+    ACCORDIONV2?: ResponsiveAccordionV2Tokens;
     SNACKBARV2?: ResponsiveSnackbarV2Tokens;
     SWITCHV2?: ResponsiveSwitchV2Tokens;
 };

package/dist/context/useComponentToken.d.ts

@@ -45,6 +45,7 @@ import { ResponsiveDirectoryTokens } from '../components/Directory/directory.tok
 import { ResponsiveChatInputTokensType } from '../components/ChatInput/chatInput.tokens';
 import { ResponsiveTagV2Tokens } from '../components/TagV2/tagV2.tokens';
 import { ResponsiveAlertV2Tokens } from '../components/AlertV2';
+import { ResponsiveAccordionV2Tokens } from '../components/AccordionV2';
 import { ResponsiveSnackbarV2Tokens } from '../components/SnackbarV2';
 import { ResponsiveSwitchV2Tokens } from '../components/SwitchV2/switchV2.tokens';
-export declare const useComponentToken: (component: keyof ComponentTokenType) => ResponsiveSearchInputTokens | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | ResponsiveMultiValueInputTokens | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | 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 | ResponsiveButtonTokens | ResponsiveButtonV2Tokens | ResponsiveChatInputTokensType | ResponsiveTagV2Tokens | ResponsiveAlertV2Tokens | ResponsiveSnackbarV2Tokens | ResponsiveSwitchV2Tokens;
+export declare const useComponentToken: (component: keyof ComponentTokenType) => ResponsiveSearchInputTokens | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | ResponsiveMultiValueInputTokens | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | 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 | ResponsiveButtonTokens | ResponsiveButtonV2Tokens | ResponsiveChatInputTokensType | ResponsiveTagV2Tokens | ResponsiveAlertV2Tokens | ResponsiveAccordionV2Tokens | ResponsiveSnackbarV2Tokens | ResponsiveSwitchV2Tokens;