@juspay/blend-design-system 0.0.20 → 0.0.21

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

@@ -16,7 +16,6 @@ export type AccordionItemProps = {
     subtextSlot?: ReactNode;
     children: ReactNode;
     isDisabled?: boolean;
-    className?: string;
     chevronPosition?: AccordionChevronPosition;
 };
 export type AccordionProps = {

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

@@ -6,8 +6,6 @@ declare const Button: import('react').ForwardRefExoticComponent<{
     text?: string;
     leadingIcon?: React.ReactNode;
     trailingIcon?: React.ReactNode;
-    isLoading?: boolean;
-    isDisabled?: boolean;
     disabled?: boolean;
     onClick?: () => void;
     loading?: boolean;

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

@@ -18,7 +18,7 @@ export declare enum ButtonSubType {
 }
 export declare enum ButtonState {
     DEFAULT = "default",
-    HOBVER = "hover",
+    HOVER = "hover",
     ACTIVE = "active",
     DISABLED = "disabled"
 }
@@ -29,8 +29,6 @@ export type ButtonProps = {
     text?: string;
     leadingIcon?: React.ReactNode;
     trailingIcon?: React.ReactNode;
-    isLoading?: boolean;
-    isDisabled?: boolean;
     disabled?: boolean;
     onClick?: () => void;
     loading?: boolean;

package/dist/components/CodeBlock/CodeBlock.d.ts

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

package/dist/components/CodeBlock/codeBlock.token.d.ts

@@ -0,0 +1,90 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { DiffLineType } from './types';
+/**
+ * CodeBlock Tokens following the pattern: [target].CSSProp.[variant].[state]
+ *
+ * Structure:
+ * - target: container | header | gutter | code | syntax (defines what element the token applies to)
+ * - CSSProp: backgroundColor | border | borderRadius | padding | color | fontSize | fontFamily | lineHeight
+ * - variant: default | removed | added (for diff-specific styles)
+ * - state: default | hover | active (for interactive elements)
+ * Need to check for this — Rust, Haskel, resript, python
+ * Size-independent properties: all properties are size-independent for CodeBlock
+ */
+export type CodeBlockTokenType = {
+    backgroundColor: CSSObject['backgroundColor'];
+    border: CSSObject['border'];
+    borderRadius: CSSObject['borderRadius'];
+    boxShadow: CSSObject['boxShadow'];
+    header: {
+        backgroundColor: CSSObject['backgroundColor'];
+        borderBottom: CSSObject['borderBottom'];
+        padding: {
+            x: CSSObject['padding'];
+            y: CSSObject['padding'];
+        };
+        gap: CSSObject['gap'];
+        icon: {
+            width: CSSObject['width'];
+        };
+        text: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            lineHeight: CSSObject['lineHeight'];
+            color: CSSObject['color'];
+        };
+    };
+    body: {
+        padding: {
+            x: CSSObject['padding'];
+            y: CSSObject['padding'];
+        };
+        backgroundColor: CSSObject['backgroundColor'];
+        gutter: {
+            width: CSSObject['width'];
+            color: CSSObject['color'];
+            backgroundColor: {
+                [key in DiffLineType]: CSSObject['backgroundColor'];
+            };
+            borderLeft: {
+                [key in DiffLineType]: CSSObject['borderLeft'];
+            };
+            borderColor: {
+                [key in DiffLineType]: CSSObject['color'];
+            };
+        };
+        code: {
+            fontFamily: CSSObject['fontFamily'];
+            fontSize: CSSObject['fontSize'];
+            lineHeight: CSSObject['lineHeight'];
+            padding: {
+                x: {
+                    left: CSSObject['paddingLeft'];
+                    right: CSSObject['paddingRight'];
+                };
+                y: CSSObject['padding'];
+            };
+        };
+        highlightedLine: {
+            backgroundColor: {
+                [key in DiffLineType]: CSSObject['backgroundColor'];
+            };
+        };
+        syntax: {
+            keyword: CSSObject['color'];
+            function: CSSObject['color'];
+            string: CSSObject['color'];
+            number: CSSObject['color'];
+            operator: CSSObject['color'];
+            variable: CSSObject['color'];
+            comment: CSSObject['color'];
+            text: CSSObject['color'];
+        };
+    };
+};
+export type ResponsiveCodeBlockTokens = {
+    [key in keyof BreakpointType]: CodeBlockTokenType;
+};
+export declare const getCodeBlockTokens: (foundationToken: FoundationTokenType) => ResponsiveCodeBlockTokens;

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

@@ -0,0 +1,2 @@
+export { default as CodeBlock } from './CodeBlock';
+export * from './types';

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

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export declare enum CodeBlockVariant {
+    DEFAULT = "default",
+    NO_GUTTER = "no-gutter",
+    DIFF = "diff"
+}
+export declare enum DiffLineType {
+    ADDED = "added",
+    REMOVED = "removed",
+    UNCHANGED = "unchanged"
+}
+export interface DiffLine {
+    content: string;
+    type: DiffLineType;
+}
+export type CodeBlockProps = {
+    code: string;
+    variant?: CodeBlockVariant;
+    showLineNumbers?: boolean;
+    showHeader?: boolean;
+    header?: string;
+    headerLeftSlot?: ReactNode;
+    headerRightSlot?: ReactNode;
+    diffLines?: DiffLine[];
+};

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

@@ -0,0 +1,38 @@
+import { CodeBlockTokenType } from './codeBlock.token';
+import { DiffLineType, DiffLine } from './types';
+/**
+ * Token interface for syntax highlighting
+ */
+export interface SyntaxToken {
+    type: string;
+    value: string;
+}
+/**
+ * Tokenizes a line of code for syntax highlighting
+ * Supports multiple languages: JavaScript/TypeScript, Python, Rust, Haskell
+ */
+export declare const tokenizeLine: (line: string) => SyntaxToken[];
+/**
+ * Gets the color for a token type based on syntax highlighting rules
+ */
+export declare const getTokenColor: (type: string, syntaxTokens: CodeBlockTokenType["body"]["syntax"]) => string;
+/**
+ * Gets the gutter (line number) styling for diff mode
+ */
+export declare const getDiffGutterStyle: (lineType: DiffLineType | undefined, isDiffMode: boolean, gutterTokens: CodeBlockTokenType["body"]["gutter"]) => React.CSSProperties;
+/**
+ * Gets the highlighted line background styling for diff mode
+ */
+export declare const getDiffLineBackground: (lineType: DiffLineType | undefined, isDiffMode: boolean, highlightedLineTokens: CodeBlockTokenType["body"]["highlightedLine"]) => React.CSSProperties;
+/**
+ * Determines if line numbers should be shown based on variant and explicit prop
+ */
+export declare const shouldShowLineNumbers: (showLineNumbers: boolean | undefined, variant: string) => boolean;
+/**
+ * Creates a copy to clipboard function with state management
+ */
+export declare const createCopyToClipboard: (code: string, setIsCopied: (copied: boolean) => void) => () => void;
+/**
+ * Processes lines for diff or normal mode
+ */
+export declare const processLines: (isDiffMode: boolean, diffLines: DiffLine[] | undefined, code: string) => string[] | undefined;

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

@@ -2,6 +2,7 @@ import { ColumnDefinition, SearchConfig, AdvancedFilterProps } from '../types';
 export type DataTableHeaderProps<T extends Record<string, unknown>> = {
     title?: string;
     description?: string;
+    showHeader?: boolean;
     showToolbar?: boolean;
     enableSearch?: boolean;
     searchPlaceholder?: string;

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

@@ -254,6 +254,7 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     onPageChange?: (page: number) => void;
     onPageSizeChange?: (pageSize: number) => void;
     isLoading?: boolean;
+    showHeader?: boolean;
     showToolbar?: boolean;
     showSettings?: boolean;
     headerSlot1?: ReactNode;

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

@@ -16,6 +16,7 @@ export type NavbarItem = {
     rightSlot?: ReactNode;
     onClick?: () => void;
     href?: string;
+    isSelected?: boolean;
 };
 export type SectionProps = {
     section: DirectoryData;

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

@@ -1,3 +1,3 @@
 import { OTPProps } from './types';
-declare const OTPInput: ({ label, sublabel, disabled, helpIconHintText, name, required, error, errorMessage, hintText, value, length, autoFocus, onChange, form, ...rest }: OTPProps) => import("react/jsx-runtime").JSX.Element;
+declare const OTPInput: ({ label, placeholder, sublabel, disabled, helpIconHintText, name, required, error, errorMessage, hintText, value, length, autoFocus, onChange, form, ...rest }: OTPProps) => import("react/jsx-runtime").JSX.Element;
 export default OTPInput;

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

@@ -10,4 +10,5 @@ export type OTPProps = {
     autoFocus?: boolean;
     onChange?: (value: string) => void;
     form?: string;
+    placeholder?: string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onChange'>;

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

@@ -7,6 +7,7 @@ export declare enum KeyValuePairSize {
     MEDIUM = "md",
     LARGE = "lg"
 }
+export type TextOverflowMode = 'truncate' | 'wrap' | 'wrap-clamp';
 export type KeyValuePairPropTypes = {
     keyString: string;
     size?: KeyValuePairSize;
@@ -16,4 +17,26 @@ export type KeyValuePairPropTypes = {
     valueRightSlot?: React.ReactNode;
     keyValuePairState?: KeyValuePairStateType;
     maxWidth?: string;
+    /**
+     * Controls how text overflow is handled for both key and value
+     * - 'truncate': Single line with ellipsis (default, all browsers)
+     * - 'wrap': Allow natural text wrapping (all browsers)
+     * - 'wrap-clamp': Wrap with line limit and ellipsis (Chrome/Edge/Safari/Firefox 68+, graceful fallback for older browsers)
+     *
+     * Note: 'wrap-clamp' uses -webkit-line-clamp which is widely supported but non-standard.
+     * In unsupported browsers, text will wrap naturally without the line limit.
+     *
+     * @default 'truncate'
+     */
+    textOverflow?: TextOverflowMode;
+    /**
+     * Maximum number of lines to display when textOverflow is 'wrap-clamp'
+     * @default 2
+     */
+    maxLines?: number;
+    /**
+     * Show tooltip on hover when text is truncated
+     * @default true
+     */
+    showTooltipOnTruncate?: boolean;
 };

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

@@ -0,0 +1,23 @@
+import { CSSObject } from 'styled-components';
+import { TextOverflowMode, KeyValuePairStateType } from './types';
+import { KeyValuePairTokensType } from './KeyValuePair.tokens';
+/**
+ * Get text styles based on overflow mode
+ */
+export declare const getTextStyles: (textOverflow: TextOverflowMode, maxLines: number) => CSSObject;
+/**
+ * Get PrimitiveText styles based on overflow mode
+ */
+export declare const getPrimitiveTextStyles: (textOverflow: TextOverflowMode) => CSSObject;
+/**
+ * Get container styles based on text overflow mode and max width
+ */
+export declare const getContainerStyles: (textOverflow: TextOverflowMode, maxWidth: string) => CSSObject;
+/**
+ * Get flex direction and gap based on layout state
+ */
+export declare const getLayoutStyles: (keyValuePairState: KeyValuePairStateType, keyValuePairTokens: KeyValuePairTokensType) => CSSObject;
+/**
+ * Get slot container styles
+ */
+export declare const getSlotStyles: () => CSSObject;

package/dist/components/Snackbar/snackbar.tokens.d.ts

@@ -26,7 +26,6 @@ export type SnackbarTokens = Readonly<{
     backgroundColor: CSSObject['backgroundColor'];
     borderRadius: CSSObject['borderRadius'];
     padding: CSSObject['padding'];
-    minWidth: CSSObject['minWidth'];
     maxWidth: CSSObject['maxWidth'];
     boxShadow: CSSObject['boxShadow'];
     gap: CSSObject['gap'];

package/dist/components/Stepper/HorizonatlLine.d.ts

@@ -0,0 +1,6 @@
+declare const HorizonatlLine: ({ color, height, width, }: {
+    color?: string;
+    width?: string;
+    height?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default HorizonatlLine;

package/dist/components/Stepper/HorizontalStepper.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { StepperProps } from './types';
+declare const HorizontalStepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
+export default HorizontalStepper;

package/dist/components/Stepper/Stepper.d.ts

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

package/dist/components/Stepper/StepperLine.d.ts

@@ -0,0 +1,6 @@
+import { StepperType } from './types';
+declare const StepperLine: ({ stepperType, color, }: {
+    stepperType?: StepperType;
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default StepperLine;

package/dist/components/Stepper/VerticalLine.d.ts

@@ -0,0 +1,5 @@
+declare const VerticalLine: import('react').ForwardRefExoticComponent<{
+    color?: string;
+    height?: string;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export default VerticalLine;

package/dist/components/Stepper/VerticalStepper.d.ts

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

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

@@ -0,0 +1,2 @@
+export { default as Stepper } from './Stepper';
+export * from './types';

package/dist/components/Stepper/stepper.tokens.d.ts

@@ -0,0 +1,67 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { StepState } from './types';
+export type StepperState = 'default' | 'hover' | 'focus' | 'disabled';
+export type StepperTokensType = {
+    container: {
+        default: {
+            gap: CSSObject['gap'];
+        };
+    };
+    step: {
+        circle: {
+            [key in StepState]: {
+                [key in StepperState]: {
+                    backgroundColor: CSSObject['backgroundColor'];
+                    borderColor: CSSObject['borderColor'];
+                    borderWidth: CSSObject['borderWidth'];
+                    borderRadius: CSSObject['borderRadius'];
+                    size: CSSObject['width'];
+                    transition: CSSObject['transition'];
+                    outline: CSSObject['outline'];
+                    outlineOffset: CSSObject['outlineOffset'];
+                };
+            };
+        };
+        icon: {
+            [key in StepState]: {
+                [key in StepperState]: {
+                    color: CSSObject['color'];
+                };
+            };
+        };
+    };
+    connector: {
+        line: {
+            active: {
+                default: {
+                    color: CSSObject['color'];
+                    height: CSSObject['height'];
+                };
+            };
+            inactive: {
+                default: {
+                    color: CSSObject['color'];
+                    height: CSSObject['height'];
+                };
+            };
+        };
+    };
+    title: {
+        text: {
+            [key in StepState]: {
+                [key in StepperState]: {
+                    color: CSSObject['color'];
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                    gap: CSSObject['gap'];
+                };
+            };
+        };
+    };
+};
+export type ResponsiveStepperTokens = {
+    [key in keyof BreakpointType]: StepperTokensType;
+};
+export declare const getStepperTokens: (foundationToken: FoundationTokenType) => ResponsiveStepperTokens;

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

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+export declare enum StepState {
+    COMPLETED = "completed",
+    CURRENT = "current",
+    PENDING = "pending",
+    DISABLED = "disabled",
+    SKIPPED = "skipped"
+}
+export declare enum StepperType {
+    HORIZONTAL = "horizontal",
+    VERTICAL = "vertical"
+}
+export type StepperProps = {
+    steps: Step[];
+    onStepClick?: (stepIndex: number) => void;
+    onSubstepClick?: (stepId: number, substepIndex: number) => void;
+    clickable?: boolean;
+    stepperType?: StepperType;
+};
+export type SubStep = {
+    id: number;
+    title: string;
+    status?: StepState;
+    disabled?: boolean;
+};
+export type Step = {
+    id: number;
+    title: string;
+    status?: StepState;
+    disabled?: boolean;
+    description?: string;
+    icon?: ReactNode;
+    substeps?: SubStep[];
+    isExpandable?: boolean;
+    isExpanded?: boolean;
+};
+export type StepProps = {
+    step: Step;
+    stepIndex: number;
+    isCompleted: boolean;
+    isCurrent: boolean;
+    isLast: boolean;
+    isFirst: boolean;
+    onClick?: (stepIndex: number) => void;
+    onSubstepClick?: (stepIndex: number, substepIndex: number) => void;
+    clickable?: boolean;
+    currentSubsteps?: Record<string, number>;
+};

package/dist/components/Upload/Upload.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { UploadProps } from './types';
+declare const Upload: React.FC<UploadProps>;
+export default Upload;

package/dist/components/Upload/components/DefaultState.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { UploadTokenType } from '../upload.tokens';
+type DefaultStateProps = {
+    children?: React.ReactNode;
+    description?: string;
+    disabled: boolean;
+    uploadTokens: UploadTokenType;
+};
+declare const DefaultState: React.FC<DefaultStateProps>;
+export default DefaultState;

package/dist/components/Upload/components/ErrorState.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { UploadedFileWithStatus } from '../types';
+import { UploadTokenType } from '../upload.tokens';
+type ErrorStateProps = {
+    errorFiles: UploadedFileWithStatus[];
+    multiple: boolean;
+    children?: React.ReactNode;
+    errorText?: string;
+    onFileRemove?: (fileId: string) => void;
+    uploadTokens: UploadTokenType;
+    maxFiles?: number;
+};
+declare const ErrorState: React.FC<ErrorStateProps>;
+export default ErrorState;

package/dist/components/Upload/components/FileListDisplay.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { UploadedFileWithStatus } from '../types';
+import { UploadTokenType } from '../upload.tokens';
+type FileListDisplayProps = {
+    files: UploadedFileWithStatus[];
+    onFileRemove?: (fileId: string) => void;
+    uploadTokens: UploadTokenType;
+    maxFiles?: number;
+};
+declare const FileListDisplay: React.FC<FileListDisplayProps>;
+export default FileListDisplay;

package/dist/components/Upload/components/MixedState.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { UploadedFileWithStatus } from '../types';
+import { UploadTokenType } from '../upload.tokens';
+type MixedStateProps = {
+    successfulFiles: UploadedFileWithStatus[];
+    errorFiles: UploadedFileWithStatus[];
+    children?: React.ReactNode;
+    onFileRemove?: (fileId: string) => void;
+    uploadTokens: UploadTokenType;
+    maxFiles?: number;
+};
+declare const MixedState: React.FC<MixedStateProps>;
+export default MixedState;

package/dist/components/Upload/components/SuccessState.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { UploadedFileWithStatus } from '../types';
+import { UploadTokenType } from '../upload.tokens';
+type SuccessStateProps = {
+    successfulFiles: UploadedFileWithStatus[];
+    multiple: boolean;
+    children?: React.ReactNode;
+    onReplaceFile?: () => void;
+    onFileRemove?: (fileId: string) => void;
+    uploadTokens: UploadTokenType;
+    maxFiles?: number;
+};
+declare const SuccessState: React.FC<SuccessStateProps>;
+export default SuccessState;

package/dist/components/Upload/components/UploadingState.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { UploadTokenType } from '../upload.tokens';
+type UploadingStateProps = {
+    uploadingFile: {
+        file: File;
+        progress: number;
+    };
+    children?: React.ReactNode;
+    description?: string;
+    uploadTokens: UploadTokenType;
+};
+declare const UploadingState: React.FC<UploadingStateProps>;
+export default UploadingState;

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

@@ -0,0 +1,6 @@
+export { default as FileListDisplay } from './FileListDisplay';
+export { default as UploadingState } from './UploadingState';
+export { default as SuccessState } from './SuccessState';
+export { default as MixedState } from './MixedState';
+export { default as ErrorState } from './ErrorState';
+export { default as DefaultState } from './DefaultState';

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

@@ -0,0 +1,2 @@
+export { default as Upload } from './Upload';
+export * from './types';

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

@@ -0,0 +1,56 @@
+import { default as React } from 'react';
+export declare enum UploadState {
+    IDLE = "idle",
+    UPLOADING = "uploading",
+    SUCCESS = "success",
+    ERROR = "error"
+}
+export type FileRejection = {
+    file: File;
+    errors: Array<{
+        code: string;
+        message: string;
+    }>;
+};
+export type UploadFile = {
+    file: File;
+    progress: number;
+    status: UploadState;
+    id: string;
+    error?: string;
+};
+export type UploadedFileWithStatus = {
+    file: File;
+    id: string;
+    status: 'success' | 'error';
+    error?: string;
+};
+export type UploadProps = {
+    multiple?: boolean;
+    accept?: string[];
+    maxSize?: number;
+    maxFiles?: number;
+    disabled?: boolean;
+    required?: boolean;
+    label?: string;
+    subLabel?: string;
+    helpIconHintText?: string;
+    children?: React.ReactNode;
+    description?: string;
+    className?: string;
+    errorText?: string;
+    state?: UploadState;
+    uploadingFiles?: UploadFile[];
+    uploadedFiles?: UploadedFileWithStatus[];
+    failedFiles?: UploadedFileWithStatus[];
+    enforceFileTypeConsistency?: boolean;
+    onDrop?: (acceptedFiles: File[], fileRejections: FileRejection[]) => void;
+    onDropAccepted?: (files: File[]) => void;
+    onDropRejected?: (fileRejections: FileRejection[]) => void;
+    onFileRemove?: (fileId: string) => void;
+    onReplaceFile?: () => void;
+    isDragActive?: boolean;
+    isDragAccept?: boolean;
+    isDragReject?: boolean;
+    validator?: (file: File) => FileRejection['errors'][0] | null;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onDrop' | 'onDragOver' | 'onDragLeave'>;