@juspay/blend-design-system 0.0.35 → 0.0.36-beta.1

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

@@ -0,0 +1,132 @@
+import { CSSObject } from 'styled-components';
+import { TimelineNodeStatus } from './types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { Theme } from '../../context/theme.enum';
+export type TimelineStatusColors = {
+    [key in TimelineNodeStatus]: CSSObject['backgroundColor'];
+};
+export type TimelineTokensType = {
+    track: {
+        width: CSSObject['width'];
+        backgroundColor: CSSObject['backgroundColor'];
+        left: CSSObject['left'];
+    };
+    indicator: {
+        left: CSSObject['left'];
+        width: CSSObject['width'];
+        height: CSSObject['height'];
+    };
+    statusColors: TimelineStatusColors;
+    label: {
+        paddingLeft: CSSObject['paddingLeft'];
+        marginBottom: CSSObject['marginBottom'];
+        circle: {
+            left: CSSObject['left'];
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            backgroundColor: CSSObject['backgroundColor'];
+            border: CSSObject['border'];
+        };
+        mask: {
+            backgroundColor: CSSObject['backgroundColor'];
+            height: CSSObject['height'];
+        };
+        text: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+        };
+    };
+    header: {
+        row: {
+            paddingLeft: CSSObject['paddingLeft'];
+            marginBottom: CSSObject['marginBottom'];
+            gap: CSSObject['gap'];
+        };
+        section: {
+            marginBottom: CSSObject['marginBottom'];
+        };
+        title: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+        };
+        timestamp: {
+            fontSize: CSSObject['fontSize'];
+            color: CSSObject['color'];
+            gap: CSSObject['gap'];
+        };
+    };
+    subsection: {
+        paddingLeft: CSSObject['paddingLeft'];
+        marginTop: CSSObject['marginTop'];
+        marginBottom: CSSObject['marginBottom'];
+        marginLeft: CSSObject['marginLeft'];
+        rootIndicator: {
+            top: CSSObject['top'];
+        };
+        headerRow: {
+            gap: CSSObject['gap'];
+        };
+        titleRow: {
+            gap: CSSObject['gap'];
+        };
+        datetimeGroup: {
+            gap: CSSObject['gap'];
+        };
+        title: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+            gap: CSSObject['gap'];
+        };
+        description: {
+            fontSize: CSSObject['fontSize'];
+            color: CSSObject['color'];
+            marginTop: CSSObject['marginTop'];
+            marginBottom: CSSObject['marginBottom'];
+            lineHeight: CSSObject['lineHeight'];
+        };
+        datetime: {
+            fontSize: CSSObject['fontSize'];
+            color: CSSObject['color'];
+            gap: CSSObject['gap'];
+        };
+        connector: {
+            left: CSSObject['left'];
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            color: CSSObject['color'];
+        };
+        avatar: {
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            marginTop: CSSObject['marginTop'];
+        };
+        user: {
+            fontSize: CSSObject['fontSize'];
+            color: CSSObject['color'];
+            marginLeft: CSSObject['marginLeft'];
+        };
+        time: {
+            fontSize: CSSObject['fontSize'];
+            color: CSSObject['color'];
+        };
+        separator: {
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            color: CSSObject['color'];
+            marginLeft: CSSObject['marginLeft'];
+            marginRight: CSSObject['marginRight'];
+        };
+    };
+    showMore: {
+        paddingLeft: CSSObject['paddingLeft'];
+        marginTop: CSSObject['marginTop'];
+    };
+};
+export type ResponsiveTimelineTokens = {
+    [key in keyof BreakpointType]: TimelineTokensType;
+};
+export declare const getTimelineTokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveTimelineTokens;

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

@@ -0,0 +1,104 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { AvatarV2Props } from '../AvatarV2/avatarV2.types';
+import { ButtonV2Props } from '../ButtonV2/buttonV2.types';
+export declare enum TimelineNodeStatus {
+    SUCCESS = "success",
+    WARNING = "warning",
+    ERROR = "error",
+    NEUTRAL = "neutral"
+}
+export type TimelineUser = {
+    name: string;
+    avatar?: AvatarV2Props['src'];
+    fallbackText?: string;
+};
+export type LinePositionOptions = {
+    indicatorHeightPx: number;
+    indicatorTopPx: number;
+    labelCircleHeightPx: number;
+};
+export type LineLayout = {
+    top: number;
+    height: number;
+};
+export type TimelineRootProps = {
+    children: ReactNode;
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'>;
+export type TimelineLabelProps = {
+    text: string;
+};
+export type TimelineHeaderProps = HTMLAttributes<HTMLDivElement> & {
+    title: string;
+    status?: TimelineNodeStatus;
+    timestamp?: string;
+    children?: ReactNode;
+    leftSlot?: ReactNode;
+    rightSlot?: ReactNode;
+};
+export type TimelineSubstepProps = HTMLAttributes<HTMLDivElement> & {
+    title: string;
+    isNestedUnderHeader?: boolean;
+    showIndicator?: boolean;
+    description?: string;
+    timestamp?: string;
+    rightSlot?: ReactNode;
+    datetimeLeftSlot?: ReactNode;
+    datetimeRightSlot?: ReactNode;
+};
+export type TimelineNodeProps = HTMLAttributes<HTMLDivElement> & {
+    title?: string;
+    leftSlot?: ReactNode;
+    headerRightSlot?: ReactNode;
+    datetime?: string;
+    datetimeLeftSlot?: ReactNode;
+    datetimeRightSlot?: ReactNode;
+    text?: string;
+    maxLines?: number;
+    user?: TimelineUser;
+    avatarProps?: Partial<Omit<AvatarV2Props, 'src' | 'fallbackText'>>;
+    time?: string;
+    status?: TimelineNodeStatus;
+    children?: ReactNode;
+};
+export type TimelineShowMoreProps = {
+    count: number;
+    label?: string;
+    onShowMore?: () => void;
+    buttonProps?: Partial<Omit<ButtonV2Props, 'text' | 'onClick'>>;
+};
+export type TimelineCommentData = {
+    id: string;
+    text: string;
+    user: {
+        name: string;
+        avatar?: string;
+        fallbackText?: string;
+    };
+    timestamp: string;
+};
+export type TimelineSubstepData = {
+    id: string;
+    title: string;
+    description?: string;
+    timestamp: string;
+};
+export type TimelineHeaderData = {
+    id: string;
+    title: string;
+    status?: string;
+    timestamp: string;
+    substeps?: TimelineSubstepData[];
+    comments?: TimelineCommentData[];
+};
+export type TimelineLabelData = {
+    id: string;
+    date: string;
+    headers?: TimelineHeaderData[];
+    comments?: TimelineCommentData[];
+};
+export type TimelineItemData = {
+    label?: TimelineLabelData;
+    header?: TimelineHeaderData;
+    comment?: TimelineCommentData;
+};

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

@@ -0,0 +1,6 @@
+import { LineLayout, LinePositionOptions, TimelineItemData, TimelineLabelData } from './types';
+export declare function parsePx(value: string | number | undefined): number;
+export declare function getLineTop(container: HTMLElement, options: LinePositionOptions): number;
+export declare function getLineBottom(container: HTMLElement, options: LinePositionOptions): number | null;
+export declare function clampLineHeight(lineTop: number, lineBottom: number | null): LineLayout | null;
+export declare const organizeTimelineItems: (items: TimelineItemData[]) => TimelineLabelData[];

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

@@ -1,8 +1,9 @@
+import { CSSObject } from 'styled-components';
 type SeperatorProps = {
     orientation?: 'horizontal' | 'vertical';
-    height?: string;
-    width?: string;
-    color?: string;
+    height?: CSSObject['height'];
+    width?: CSSObject['width'];
+    color?: CSSObject['color'];
 };
 declare const Seperator: ({ height, width, color, }: SeperatorProps) => import("react/jsx-runtime").JSX.Element;
 export default Seperator;

package/dist/context/ThemeContext.d.ts

@@ -49,9 +49,12 @@ 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';
+import { ResponsiveSwitchV2Tokens } from '../components/SelectorV2/SwitchV2/switchV2.tokens';
 import { ResponsiveAvatarV2Tokens } from '../components/AvatarV2/avatarV2.tokens';
 import { ResponsiveTextInputV2Tokens } from '../components/InputsV2/TextInputV2/TextInputV2.tokens';
+import { ResponsiveChartV2Tokens } from '../components/ChartsV2/chartV2.tokens';
+import { ResponsiveTimelineTokens } from '../components/Timeline/timeline.token';
+import { ResponsiveCheckboxV2Tokens } from '../components/SelectorV2/CheckboxV2/checkboxV2.tokens';
 export type ComponentTokenType = {
     TAGS?: ResponsiveTagTokens;
     SEARCH_INPUT?: ResponsiveSearchInputTokens;
@@ -96,6 +99,7 @@ export type ComponentTokenType = {
     UPLOAD?: ResponsiveUploadTokens;
     CODE_BLOCK?: ResponsiveCodeBlockTokens;
     CHAT_INPUT?: ResponsiveChatInputTokensType;
+    TIMELINE?: ResponsiveTimelineTokens;
     BUTTONV2?: ResponsiveButtonV2Tokens;
     TAGV2?: ResponsiveTagV2Tokens;
     ALERTV2?: ResponsiveAlertV2Tokens;
@@ -104,6 +108,8 @@ export type ComponentTokenType = {
     SWITCHV2?: ResponsiveSwitchV2Tokens;
     AVATARV2?: ResponsiveAvatarV2Tokens;
     TEXT_INPUTV2?: ResponsiveTextInputV2Tokens;
+    CHARTSV2?: ResponsiveChartV2Tokens;
+    CHECKBOXV2?: ResponsiveCheckboxV2Tokens;
 };
 type ThemeContextType = {
     foundationTokens: ThemeType;

package/dist/context/useComponentToken.d.ts

@@ -47,7 +47,10 @@ 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';
+import { ResponsiveSwitchV2Tokens } from '../components/SelectorV2/SwitchV2/switchV2.tokens';
 import { ResponsiveAvatarV2Tokens } from '../components/AvatarV2/avatarV2.tokens';
 import { ResponsiveTextInputV2Tokens } from '../components/InputsV2/TextInputV2/TextInputV2.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 | ResponsiveAccordionV2Tokens | ResponsiveSnackbarV2Tokens | ResponsiveSwitchV2Tokens | ResponsiveAvatarV2Tokens | ResponsiveTextInputV2Tokens;
+import { ResponsiveChartV2Tokens } from '../components/ChartsV2/chartV2.tokens';
+import { ResponsiveTimelineTokens } from '../components/Timeline/timeline.token';
+import { ResponsiveCheckboxV2Tokens } from '../components/SelectorV2/CheckboxV2/checkboxV2.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 | ResponsiveAccordionV2Tokens | ResponsiveSnackbarV2Tokens | ResponsiveSwitchV2Tokens | ResponsiveTextInputV2Tokens | ResponsiveChartV2Tokens | ResponsiveAvatarV2Tokens | ResponsiveTextInputV2Tokens | ResponsiveTimelineTokens | ResponsiveCheckboxV2Tokens | ResponsiveTextInputV2Tokens;

package/dist/main.d.ts

@@ -42,3 +42,5 @@ export * from './components/ButtonGroup';
 export * from './components/Button';
 export * from './context';
 export * from './tokens';
+export * from './components/ChartsV2';
+export * from './components/Timeline';