@juspay/blend-design-system 0.0.20 → 0.0.21

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

@@ -0,0 +1,101 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type UploadState = 'idle' | 'uploading' | 'success' | 'error' | 'dragActive';
+/**
+ * Upload Tokens following the pattern: [target].CSSProp.[state]
+ *
+ * Structure:
+ * - target: wrapper | label | container | slot | text | progressContainer | fileList
+ * - CSSProp: padding | border | backgroundColor | fontSize | fontWeight | color | gap | margin
+ * - state: idle | uploading | success | error | dragActive (upload states)
+ *
+ * Hierarchy:
+ * - Wrapper: Outermost container with base padding
+ * - Label: Label section with text styling and spacing
+ * - Container: Upload box with state-dependent styling (border, background)
+ * - Slot: Content area with icon/content spacing
+ * - Text: Text styling for titles, descriptions, filenames, errors
+ * - ProgressContainer: Progress bar section with spacing
+ * - FileList: File list display with spacing and layout
+ */
+export type UploadTokenType = {
+    header: {
+        label: {
+            text: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+            };
+            marginBottom: CSSObject['marginBottom'];
+            gap: CSSObject['gap'];
+        };
+        required: {
+            text: {
+                color: CSSObject['color'];
+            };
+            gap: CSSObject['gap'];
+        };
+        subLabel: {
+            text: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+            };
+            gap: CSSObject['gap'];
+        };
+        helpIcon: {
+            width: CSSObject['width'];
+            color: CSSObject['color'];
+        };
+    };
+    container: {
+        border: {
+            idle: CSSObject['border'];
+            uploading: CSSObject['border'];
+            success: CSSObject['border'];
+            error: CSSObject['border'];
+            dragActive: CSSObject['border'];
+        };
+        backgroundColor: {
+            idle: CSSObject['backgroundColor'];
+            uploading: CSSObject['backgroundColor'];
+            success: CSSObject['backgroundColor'];
+            error: CSSObject['backgroundColor'];
+            dragActive: CSSObject['backgroundColor'];
+        };
+        borderRadius: CSSObject['borderRadius'];
+        padding: CSSObject['padding'];
+        content: {
+            slot: {
+                width: CSSObject['width'];
+                gap: CSSObject['gap'];
+            };
+            text: {
+                title: {
+                    color: CSSObject['color'];
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                };
+                subtitle: {
+                    color: CSSObject['color'];
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                };
+                gap: CSSObject['gap'];
+            };
+            actionable: {
+                gap: CSSObject['gap'];
+                errorText: {
+                    color: CSSObject['color'];
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                };
+            };
+        };
+    };
+};
+export type ResponsiveUploadTokens = {
+    [key in keyof BreakpointType]: UploadTokenType;
+};
+export declare const getUploadTokens: (foundationToken: FoundationTokenType) => ResponsiveUploadTokens;

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

@@ -0,0 +1,114 @@
+import { default as React } from 'react';
+import { FileRejection, UploadFile, UploadedFileWithStatus, UploadState } from './types';
+export declare const useUploadState: () => {
+    internalDragState: {
+        isDragActive: boolean;
+        isDragAccept: boolean;
+        isDragReject: boolean;
+    };
+    setInternalDragState: React.Dispatch<React.SetStateAction<{
+        isDragActive: boolean;
+        isDragAccept: boolean;
+        isDragReject: boolean;
+    }>>;
+    setDragCounter: React.Dispatch<React.SetStateAction<number>>;
+};
+export declare const getVisualState: (disabled: boolean, isDragReject: boolean, isDragAccept: boolean, isDragActive: boolean) => string;
+export declare const validateFile: (accept: string[], maxSize?: number, validator?: (file: File) => FileRejection["errors"][0] | null) => (file: File) => FileRejection["errors"];
+export declare const processFiles: (disabled: boolean, validateFileFn: (file: File) => FileRejection["errors"], onDrop?: (acceptedFiles: File[], rejectedFiles: FileRejection[]) => void, onDropAccepted?: (files: File[]) => void, onDropRejected?: (rejections: FileRejection[]) => void) => (files: FileList) => void;
+export declare const updateDragState: (controlledIsDragActive?: boolean, validateFileFn?: (file: File) => FileRejection["errors"], setInternalDragState?: (state: {
+    isDragActive: boolean;
+    isDragAccept: boolean;
+    isDragReject: boolean;
+}) => void) => (isDragActive: boolean, files?: File[]) => void;
+export declare const createDragHandlers: (disabled: boolean, setDragCounter: (fn: (prev: number) => number) => void, updateDragStateFn: (isDragActive: boolean, files?: File[]) => void, processFilesFn: (files: FileList) => void) => {
+    handleDragEnter: (e: React.DragEvent) => void;
+    handleDragLeave: (e: React.DragEvent) => void;
+    handleDragOver: (e: React.DragEvent) => void;
+    handleDrop: (e: React.DragEvent) => void;
+};
+export declare const createClickHandler: (disabled: boolean, fileInputRef: React.RefObject<HTMLInputElement>) => () => void;
+export declare const createFileInputChangeHandler: (processFilesFn: (files: FileList) => void) => (e: React.ChangeEvent<HTMLInputElement>) => void;
+export declare const getUploadContent: (uploadingFiles: UploadFile[], uploadedFiles: {
+    id: string;
+    file: File;
+    status: "success" | "error";
+    error?: string;
+}[], failedFiles: {
+    id: string;
+    file: File;
+    status: "success" | "error";
+    error?: string;
+}[], state: UploadState, multiple?: boolean) => {
+    hasUploadingFiles: boolean;
+    uploadingFile: UploadFile | undefined;
+    successfulFiles: {
+        id: string;
+        file: File;
+        status: "success" | "error";
+        error?: string;
+    }[];
+    errorFiles: {
+        id: string;
+        file: File;
+        status: "success" | "error";
+        error?: string;
+    }[];
+    hasSuccessfulFiles: boolean;
+    hasErrorFiles: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    multiple: boolean;
+};
+export declare const getMainTitle: (isDragActive: boolean, isDragAccept: boolean) => string;
+export declare const getUploadStateTitle: (state: UploadState, multiple: boolean, hasSuccessfulFiles: boolean, hasErrorFiles: boolean, fileName?: string) => string;
+export declare const getUploadStateDescription: (state: UploadState, multiple: boolean, successfulFiles: {
+    id: string;
+    file: File;
+    status: string;
+}[], errorFiles: {
+    id: string;
+    file: File;
+    status: string;
+}[], userDescription?: string, fileName?: string) => string;
+export declare const getVisualUploadState: (disabled: boolean, isDragReject: boolean, isDragAccept: boolean, isDragActive: boolean, state: UploadState) => string;
+export declare const truncateFileList: (files: {
+    id: string;
+    file: File;
+    status: string;
+}[]) => {
+    displayFiles: {
+        id: string;
+        file: File;
+        status: string;
+    }[];
+    truncatedCount: number;
+};
+export declare const createEnhancedValidator: (accept: string[], maxSize?: number, validator?: (file: File) => FileRejection["errors"][0] | null) => (file: File) => FileRejection["errors"];
+export declare const createEnhancedProcessFiles: (uploadingFiles: UploadFile[], uploadedFiles: UploadedFileWithStatus[], failedFiles: UploadedFileWithStatus[]) => (files: File[]) => {
+    unique: File[];
+    duplicates: File[];
+};
+export declare const generateFileId: () => string;
+export declare const createFileKey: (file: File) => string;
+export declare const filterDuplicateFiles: (newFiles: File[], existingFiles: {
+    file: File;
+}[]) => {
+    unique: File[];
+    duplicates: File[];
+};
+export declare const createDuplicateRejections: (files: File[]) => FileRejection[];
+export declare const simulateFileUpload: (uploadFile: UploadFile, onProgressUpdate: (id: string, progress: number) => void, progressInterval?: number) => (() => void);
+export declare const createEnhancedProcessFilesFn: (disabled: boolean, validateFileFn: (file: File) => FileRejection["errors"], checkDuplicatesFn: (files: File[]) => {
+    unique: File[];
+    duplicates: File[];
+}, maxFiles?: number, onDrop?: (acceptedFiles: File[], rejectedFiles: FileRejection[]) => void, onDropAccepted?: (files: File[]) => void, onDropRejected?: (rejections: FileRejection[]) => void) => (files: FileList) => void;
+export declare const createUploadManager: () => {
+    startUpload: (uploadFile: UploadFile, onProgress: (id: string, progress: number) => void, onComplete: (id: string) => void, progressInterval?: number) => (() => void);
+    cancelUpload: (uploadId: string) => void;
+    cancelAllUploads: () => void;
+    hasActiveUploads: () => boolean;
+};
+export declare const createComplexDropHandler: (multiple: boolean, maxFiles: number | undefined, disabled: boolean, uploadingFiles: UploadFile[], uploadedFiles: UploadedFileWithStatus[], failedFiles: UploadedFileWithStatus[], setInternalState: (state: UploadState) => void, setInternalUploadingFiles: React.Dispatch<React.SetStateAction<UploadFile[]>>, setInternalUploadedFiles: React.Dispatch<React.SetStateAction<UploadedFileWithStatus[]>>, setInternalFailedFiles: React.Dispatch<React.SetStateAction<UploadedFileWithStatus[]>>, uploadManager: ReturnType<typeof createUploadManager>) => (acceptedFiles: File[], rejectedFiles: FileRejection[]) => void;
+export declare const createFileRemovalHandler: (setInternalUploadedFiles: React.Dispatch<React.SetStateAction<UploadedFileWithStatus[]>>, setInternalFailedFiles: React.Dispatch<React.SetStateAction<UploadedFileWithStatus[]>>, setInternalState: (state: UploadState) => void) => (fileId: string) => void;
+export declare const createFileReplacementHandler: (setInternalState: (state: UploadState) => void, setInternalUploadedFiles: React.Dispatch<React.SetStateAction<UploadedFileWithStatus[]>>, setInternalFailedFiles: React.Dispatch<React.SetStateAction<UploadedFileWithStatus[]>>) => () => void;

package/dist/context/ThemeContext.d.ts

@@ -34,9 +34,12 @@ import { ResponsiveTopbarTokens } from '../components/Topbar/topbar.tokens';
 import { ResponsiveAvatarTokens } from '../components/Avatar/avatar.tokens';
 import { ResponsiveAvatarGroupTokens } from '../components/AvatarGroup/avatarGroup.tokens';
 import { ResponsiveSidebarTokens } from '../components/Sidebar/sidebar.tokens';
+import { ResponsiveUploadTokens } from '../components/Upload/upload.tokens';
+import { ResponsiveCodeBlockTokens } from '../components/CodeBlock/codeBlock.token';
 import { ThemeType } from '../tokens';
-import { BREAKPOINTS } from '../breakpoints/breakPoints';
 import { ResponsiveSkeletonTokens } from '../components/Skeleton/skeleton.tokens';
+import { BREAKPOINTS } from '../breakpoints/breakPoints';
+import { ResponsiveStepperTokens } from '../components/Stepper/stepper.tokens';
 export type ComponentTokenType = {
     TAGS?: ResponsiveTagTokens;
     SEARCH_INPUT?: ResponsiveSearchInputTokens;
@@ -68,6 +71,7 @@ export type ComponentTokenType = {
     DRAWER?: ResponsiveDrawerTokens;
     CHARTS?: ResponsiveChartTokens;
     SNACKBAR?: ResponsiveSnackbarTokens;
+    STEPPER?: ResponsiveStepperTokens;
     KEYVALUEPAIR?: ResponsiveKeyValuePairTokens;
     CARD?: ResponsiveCardTokens;
     SKELETON?: ResponsiveSkeletonTokens;
@@ -75,6 +79,8 @@ export type ComponentTokenType = {
     AVATAR?: ResponsiveAvatarTokens;
     AVATAR_GROUP?: ResponsiveAvatarGroupTokens;
     SIDEBAR?: ResponsiveSidebarTokens;
+    UPLOAD?: ResponsiveUploadTokens;
+    CODE_BLOCK?: ResponsiveCodeBlockTokens;
 };
 type ThemeContextType = {
     foundationTokens: ThemeType;

package/dist/context/useComponentToken.d.ts

@@ -28,6 +28,7 @@ import { ResponsiveDrawerTokens } from '../components/Drawer/drawer.tokens';
 import { ResponsiveSingleSelectTokens } from '../components/SingleSelect/singleSelect.tokens';
 import { ResponsiveChartTokens } from '../components/Charts/chart.tokens';
 import { ResponsiveSnackbarTokens } from '../components/Snackbar/snackbar.tokens';
+import { ResponsiveStepperTokens } from '../components/Stepper/stepper.tokens';
 import { ResponsiveKeyValuePairTokens } from '../components/KeyValuePair/KeyValuePair.tokens';
 import { ResponsiveCardTokens } from '../components/Card/card.tokens';
 import { ResponsiveSkeletonTokens } from '../components/Skeleton/skeleton.tokens';
@@ -36,4 +37,6 @@ import { ResponsiveAvatarTokens } from '../components/Avatar/avatar.tokens';
 import { ResponsiveAvatarGroupTokens } from '../components/AvatarGroup/avatarGroup.tokens';
 import { ResponsiveStatCardTokens } from '../components/StatCard/statcard.tokens';
 import { ResponsiveSidebarTokens } from '../components/Sidebar/sidebar.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 | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveSkeletonTokens | ResponsiveTopbarTokens | ResponsiveAvatarTokens | ResponsiveAvatarGroupTokens | ResponsiveSidebarTokens;
+import { ResponsiveUploadTokens } from '../components/Upload/upload.tokens';
+import { ResponsiveCodeBlockTokens } from '../components/CodeBlock/codeBlock.token';
+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;

package/dist/main.d.ts

@@ -29,9 +29,11 @@ export * from './components/SingleSelect';
 export * from './components/Slider';
 export * from './components/ProgressBar';
 export * from './components/Drawer';
+export * from './components/Stepper';
 export * from './components/Skeleton';
 export * from './components/KeyValuePair';
 export * from './components/VirtualList';
+export * from './components/Upload';
 export * from './components/ButtonGroup';
 export * from './components/Button';
 export * from './context';