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

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

@@ -52,6 +52,8 @@ import { ResponsiveSnackbarV2Tokens } from '../components/SnackbarV2/snackbarV2.
 import { ResponsiveSwitchV2Tokens } from '../components/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';
 export type ComponentTokenType = {
     TAGS?: ResponsiveTagTokens;
     SEARCH_INPUT?: ResponsiveSearchInputTokens;
@@ -96,6 +98,7 @@ export type ComponentTokenType = {
     UPLOAD?: ResponsiveUploadTokens;
     CODE_BLOCK?: ResponsiveCodeBlockTokens;
     CHAT_INPUT?: ResponsiveChatInputTokensType;
+    TIMELINE?: ResponsiveTimelineTokens;
     BUTTONV2?: ResponsiveButtonV2Tokens;
     TAGV2?: ResponsiveTagV2Tokens;
     ALERTV2?: ResponsiveAlertV2Tokens;
@@ -104,6 +107,7 @@ export type ComponentTokenType = {
     SWITCHV2?: ResponsiveSwitchV2Tokens;
     AVATARV2?: ResponsiveAvatarV2Tokens;
     TEXT_INPUTV2?: ResponsiveTextInputV2Tokens;
+    CHARTSV2?: ResponsiveChartV2Tokens;
 };
 type ThemeContextType = {
     foundationTokens: ThemeType;

package/dist/context/useComponentToken.d.ts

@@ -50,4 +50,6 @@ import { ResponsiveSnackbarV2Tokens } from '../components/SnackbarV2';
 import { ResponsiveSwitchV2Tokens } from '../components/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';
+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;

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';