@am92/react-design-system 2.9.12 → 2.10.1

package/dist/Components/DsFileUploader/DsFileUploader.Types.d.ts

@@ -1,19 +1,312 @@
-import { DsButtonProps } from '../DsButton';
-import { DsInputProps } from '../DsInput';
+import type { ElementType } from 'react';
+import { DsInputLabelProps } from '../DsInputLabel';
 import { DsRemixIconProps } from '../DsRemixIcon';
-import { DsTypographyProps } from '../DsTypography';
-export interface DsFileUploaderProps {
+import { DsStackProps } from '../DsStack';
+import { DsInputProps } from '../DsInput';
+import { DsIconButtonProps } from '../DsIconButton';
+export declare enum CONTENT_TYPE {
+    FILE = "FILE",
+    BASE64 = "BASE64"
+}
+export declare enum VARIANT {
+    FULL = "FULL",
+    COMPRESSED = "COMPRESSED"
+}
+export type TMultiple = boolean | undefined;
+export type TContentType = keyof typeof CONTENT_TYPE;
+export type TVariant = keyof typeof VARIANT;
+export type TFileType<TContentType> = TContentType extends 'FILE' ? File : string;
+export type TFile<TContentType> = {
+    /**
+     * Name of the file selected or dropped.
+     */
     name: string;
-    onChange: (name: string, files: File[]) => void;
+    /**
+     * mime-type of the file selected or dropped.
+     */
+    type: string;
+    /**
+     * size in bytes of the file selected or dropped.
+     */
+    size: number;
+    /**
+     * content of the file selected or dropped.
+     */
+    content: TFileType<TContentType>;
+    /**
+     * Unique Identifier for the file.
+     */
+    id?: string;
+    /**
+     * Extra content required to be displayed with the file name and size
+     */
+    subText?: string;
+};
+export type TFileValue<Multiple, TContentType> = Multiple extends false ? TFile<TContentType> | null | undefined : TFile<TContentType>[] | undefined;
+export type TProcessFile<TMultiple, TContentType> = {
+    valid: TFileValue<TMultiple, TContentType>;
+    invalid: TErrorValue<TMultiple, TContentType>;
+};
+export declare enum ERROR_CODES {
+    INVALID_FILE_TYPE = "INVALID_FILE_TYPE",
+    MAX_FILE_SIZE_EXCEEDED = "MAX_FILE_SIZE_EXCEEDED",
+    FILE_SIZE_BELOW_MIN = "FILE_SIZE_BELOW_MIN"
+}
+export type TErrorCodes = keyof typeof ERROR_CODES;
+export type TErrorFile<CONTENT_TYPE> = {
+    file: TFile<CONTENT_TYPE>;
+    errorCode: TErrorCodes;
+};
+export type TErrorValue<Multiple, CONTENT_TYPE> = Multiple extends false ? TErrorFile<CONTENT_TYPE> | null : TErrorFile<CONTENT_TYPE>[];
+export interface IDsFileUploaderProps<Multiple extends TMultiple = true, ContentType extends TContentType = 'FILE'> {
+    InputLabelProps?: Omit<DsInputLabelProps, 'ref' | 'error' | 'success' | 'htmlFor' | 'disabled'>;
+    /**
+     * Name attribute of the input element.
+     */
+    name: string;
+    /**
+     * @param {TVariant} variant The variant of file uploader component.
+     * @default 'FULL'
+     */
+    variant?: TVariant;
+    /**
+     * The `input` value. Value should be array of `TFile<TContentType>` type objects. If you have multiple false then value would be null
+     * @default []
+     */
+    value?: TFileValue<Multiple, ContentType> | null;
+    /**
+     * The `input` uploadedValue. uploadedValue should be array of `TFile<TContentType>` type objects of your previously uploaded files. If you have multiple false then uploadedValue would be null
+     * @default []
+     */
+    uploadedValue?: TFileValue<Multiple, ContentType>;
+    /**
+     * validate the minimum file size (in bytes).
+     *
+     * If file size is below the provided value then file will be passed back in `onError` callback.
+     */
+    minSize?: number;
+    /**
+     * The `content` type in the file object returned in callbacks for newly selected files.
+     * @default 'FILE'
+     */
+    contentType?: TContentType;
+    /**
+     * validate the maximum file size (in bytes).
+     *
+     * If file size exceeds the provided value then file will be passed back in `onError` callback.
+     */
+    maxSize?: number;
+    /**
+     * The `accept` attribute of the input element.
+     *
+     * This will allow to restrict user to only upload specific type of files.
+     *
+     * If you want to allow only images then use `accept='image/*'` and so on.
+     *
+     * By default it will allow any file.
+     * @default '*'
+     */
+    accept?: string;
+    /**
+     * The `multiple` attribute of the input element.
+     *
+     * If `false` then user can upload only single file.
+     * @default false
+     */
+    multiple?: Multiple;
+    /**
+     * To override icon associated to each file type. Called in loop for all selected files
+     *
+     * @param {string} name The name provided to the component.
+     * @param {TFile<ContentType>} [file] This would be the valid `TFile<ContentType>` type objects selected with its content value depending on `contentType` props or as provided in value.
+     */
+    FileIconMapper?: (file: TFile<ContentType>) => DsRemixIconProps['className'];
+    /**
+     * Callback fired when a invalid file is selected or dropped.
+     *
+     * @param {string} name The name provided to the component.
+     * @param { TErrorValue<Multiple, ContentType>} [files] This would be the valid `T_ERROR_FILE` type objects selected with its content as `FILE` type or as provided in value with the error code.
+     */
+    onError?: (name: string, files: TErrorValue<Multiple, ContentType>) => void;
+    /**
+     * Callback fired when a file is selected or dropped.
+     *
+     * @param {string} name The name provided to the component.
+     * @param {TFileValue<Multiple, ContentType>} [files] This would be the valid `T_FILE_UPLOADER` type objects selected with its content value depending on `contentType` props or as provided in value.
+     */
+    onChange: (name: string, files: TFileValue<Multiple, ContentType>) => void;
+    /**
+     * Callback fired when an existing file is removed.
+     *
+     * @param {string} name The name provided to the component.
+     * @param {TFile<ContentType>} [file] This would be the valid `TFile<ContentType>` type objects selected with its content value depending on `contentType` props or as provided in value.
+     */
+    onDelete?: (name: string, file: TFile<ContentType>) => void;
+    /**
+     * This is a handler that user can use to pass boolean if delete operation is async/API driven.
+     *
+     * @param {string} name The name provided to the component.
+     * @param {TFile<ContentType>} [file] This would be the valid `TFile<ContentType>` type objects selected with its content value depending on `contentType` props or as provided in value.
+     */
+    canDeleteFile?: (name: string, file: TFile<ContentType>) => Promise<boolean>;
+    /**
+     * Callback fired when an preview button is clicked for an existing file.
+     *
+     * @param {string} name The name provided to the component.
+     * @param {TFile<ContentType>} [file] This would be the valid `TFile<ContentType>` type objects selected with its content value depending on `contentType` props or as provided in value.
+     */
+    onPreview?: (name: string, file: TFile<ContentType>) => void;
+    /**
+     * Callback fired when an download button is clicked for an existing file.
+     *
+     * @param {string} name The name provided to the component.
+     * @param {TFile<ContentType>} [file] This would be the valid `TFile<ContentType>` type objects selected with its content value depending on `contentType` props or as provided in value.
+     */
+    onDownload?: (name: string, file: TFile<ContentType>) => void;
+    /**
+     slots prop is used to provide custom slots components to the file uploader
+     */
+    slots?: TDsFileUploaderSlots;
+    /**
+     slotProps prop is used to provide custom props to the individual slots of the file uploader
+     */
+    slotProps?: TDsFileUploaderSlotProps;
+}
+export interface IDsFileUploaderDropZoneProps extends DsStackProps {
+    /**
+     * @param {TFileUploaderVariant} variant The variant of file uploader component.
+     * @default 'FULL'
+     */
+    variant?: IDsFileUploaderProps['variant'];
+    /**
+     * The `iconProps` component to be used for the file uploader.
+     */
     IconProps?: Omit<DsRemixIconProps, 'ref'>;
-    titleButtonText?: React.ReactNode;
-    TitleButtonProps?: Omit<DsButtonProps, 'ref'>;
-    descriptionTypograpghyText?: React.ReactNode;
-    DescriptionTypograpghyProps?: DsTypographyProps;
+    /**
+     * To override title text in dropbox.
+     */
+    title?: string;
+    /**
+     * To override description text in dropbox.
+     */
+    description?: string | string[];
+    /**
+     * To override props passed to input element
+     */
     InputProps?: DsInputProps['inputProps'];
+    /**
+     * This prop can be used to toggle the disabled state of the file uploaded.
+     */
+    disabled?: boolean;
 }
-export interface DsFileUploaderState {
-    files: File[];
+export interface IDsFileUploaderItemSegmentProps extends DsStackProps {
+    /**
+     * This prop is used to provide custom label to the segments
+     */
+    label?: string;
+    /**
+     * This prop is used to switch the visibility of delete button in a particular segment
+     */
+    showDeleteIcon?: boolean;
+    /**
+     * This prop is used to switch the visibility of preview button in a particular segment
+     */
+    showPreviewIcon?: boolean;
+    /**
+     * This prop is used to switch the visibility of download button in a particular segment
+     */
+    showDownloadIcon?: boolean;
+    /**
+     * This prop is used to supply files to the segment
+     */
+    files?: TFile<TContentType> | TFile<TContentType>[];
+    /**
+     * Callback fired when an preview button is clicked for an existing file.
+     *
+     * @param {string} name The name provided to the component.
+     * @param {TFile<TContentType>} [file] This would be the valid `TFile<TContentType>` type objects selected with its content value depending on `contentType` props or as provided in value.
+     */
+    onPreview?: IDsFileUploaderProps['onPreview'];
+    /**
+     * Callback fired when an existing file is removed.
+     *
+     * @param {string} name The name provided to the component.
+     * @param {TFile<TContentType>} [file] This would be the valid `TFile<TContentType>` type objects selected with its content value depending on `contentType` props or as provided in value.
+     */
+    onDelete?: IDsFileUploaderProps['onDelete'];
+    /**
+     * Callback fired when an download button is clicked for an existing file.
+     *
+     * @param {string} name The name provided to the component.
+     * @param {TFile<TContentType>} [file] This would be the valid `TFile<TContentType>` type objects selected with its content value depending on `contentType` props or as provided in value.
+     */
+    onDownload?: IDsFileUploaderProps['onDownload'];
+    /**
+     slots prop is used to provide custom slots components to the file uploader
+     */
+    slots?: IDsFileUploaderProps['slots'];
+    /**
+     slotPros used to provide custom props to the individual slots of the file uploader
+     */
+    slotProps?: IDsFileUploaderProps['slotProps'];
+}
+export interface IDsFileUploaderActionButtonProps extends DsIconButtonProps {
+    /**
+     * To override delete icon in files
+     */
+    IconProps?: Omit<DsRemixIconProps, 'ref'>;
 }
-export declare const DsFileUploaderDefaultProps: DsFileUploaderProps;
-export declare const DsFileUploaderDefaultState: DsFileUploaderState;
+export type TDsFileUploaderSlots = {
+    /**
+     This prop is used to provide custom slot component to the drop zone of the component
+     */
+    DropZone?: ElementType<IDsFileUploaderDropZoneProps>;
+    /**
+     This prop is used to provide custom slot component to the selected segment of the component
+     */
+    SelectedItemSegment?: ElementType<IDsFileUploaderItemSegmentProps>;
+    /**
+     This prop is used to provide custom slot component to the uploaded segment of the component
+     */
+    UploadedItemSegment?: ElementType<IDsFileUploaderItemSegmentProps>;
+    /**
+     This prop is used to provide custom slot component to the delete button of the component
+     */
+    DeleteButton?: ElementType<IDsFileUploaderActionButtonProps>;
+    /**
+     This prop is used to provide custom slot component to the preview button of the component
+     */
+    PreviewButton?: ElementType<IDsFileUploaderActionButtonProps>;
+    /**
+     This prop is used to provide custom slot component to the download button of the component
+     */
+    DownloadButton?: ElementType<IDsFileUploaderActionButtonProps>;
+};
+export type TDsFileUploaderSlotProps = {
+    /**
+     This prop is used to provide custom props drop zone of the component
+     */
+    DropZone?: IDsFileUploaderDropZoneProps;
+    /**
+     This prop is used to provide custom props selected segment of the component
+     */
+    SelectedItemSegment?: IDsFileUploaderItemSegmentProps;
+    /**
+     This prop is used to provide custom props uploaded segment of the component
+     */
+    UploadedItemSegment?: IDsFileUploaderItemSegmentProps;
+    /**
+     This prop is used to provide custom props delete button of the component
+     */
+    DeleteButton?: IDsFileUploaderActionButtonProps;
+    /**
+     This prop is used to provide custom props preview button of the component
+     */
+    PreviewButton?: IDsFileUploaderActionButtonProps;
+    /**
+     This prop is used to provide custom props download button of the component
+     */
+    DownloadButton?: IDsFileUploaderActionButtonProps;
+};
+export declare const DsFileUploaderDefaultProps: IDsFileUploaderProps<TMultiple, 'FILE'>;
+export declare const DsFileUploaderDropzoneDefaultProps: IDsFileUploaderDropZoneProps;

package/dist/Components/DsFileUploader/DsFileUploader.Types.js

@@ -1,9 +1,51 @@
+import { DsFileUploaderActionButton } from './Slots/DsFileUploaderActionButton.Component';
+import { DsFileUploaderDropZone } from './Slots/DsFileUploaderDropZone';
+import { DsFileUploaderSelectedFilesSegment } from './Slots/DsFileUploaderSelectedFilesSegment';
+import { DsFileUploaderUploadedFilesSegment } from './Slots/DsFileUploaderUploadedFilesSegment';
+export var CONTENT_TYPE;
+(function (CONTENT_TYPE) {
+    CONTENT_TYPE["FILE"] = "FILE";
+    CONTENT_TYPE["BASE64"] = "BASE64";
+})(CONTENT_TYPE || (CONTENT_TYPE = {}));
+export var VARIANT;
+(function (VARIANT) {
+    VARIANT["FULL"] = "FULL";
+    VARIANT["COMPRESSED"] = "COMPRESSED";
+})(VARIANT || (VARIANT = {}));
+export var ERROR_CODES;
+(function (ERROR_CODES) {
+    ERROR_CODES["INVALID_FILE_TYPE"] = "INVALID_FILE_TYPE";
+    ERROR_CODES["MAX_FILE_SIZE_EXCEEDED"] = "MAX_FILE_SIZE_EXCEEDED";
+    ERROR_CODES["FILE_SIZE_BELOW_MIN"] = "FILE_SIZE_BELOW_MIN";
+})(ERROR_CODES || (ERROR_CODES = {}));
 export const DsFileUploaderDefaultProps = {
     name: '',
     onChange: () => { },
-    titleButtonText: 'Upload document',
-    descriptionTypograpghyText: 'Click to browse or drop here to upload'
+    value: undefined,
+    accept: '*',
+    variant: 'FULL',
+    multiple: true,
+    slots: {
+        DropZone: DsFileUploaderDropZone,
+        UploadedItemSegment: DsFileUploaderUploadedFilesSegment,
+        SelectedItemSegment: DsFileUploaderSelectedFilesSegment,
+        DeleteButton: DsFileUploaderActionButton,
+        PreviewButton: DsFileUploaderActionButton,
+        DownloadButton: DsFileUploaderActionButton
+    },
+    slotProps: {
+        SelectedItemSegment: {
+            label: 'Selected Documents',
+            showDeleteIcon: true
+        },
+        UploadedItemSegment: {
+            label: 'Uploaded documents',
+            showDeleteIcon: true
+        }
+    }
 };
-export const DsFileUploaderDefaultState = {
-    files: []
+export const DsFileUploaderDropzoneDefaultProps = {
+    variant: DsFileUploaderDefaultProps.variant,
+    title: 'Upload document',
+    description: 'Click to browse or drop here to upload'
 };

package/dist/Components/DsFileUploader/DsFileUploaderPreview/DsFileUploaderImagePreview.Component.d.ts

@@ -0,0 +1,11 @@
+import { TContentType, TFile } from '../DsFileUploader.Types';
+interface DsFileUploaderImagePreview {
+    file: TFile<TContentType>;
+}
+/**
+ * This component is responsible for rendering a preview of an uploaded image file.
+ * If the file content is valid and can be loaded, it shows the image preview.
+ * Otherwise, it displays a fallback icon.
+ */
+export declare const DsFileUploaderImagePreview: ({ file }: DsFileUploaderImagePreview) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/DsFileUploader/DsFileUploaderPreview/DsFileUploaderImagePreview.Component.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { DsImage } from '../../DsImage';
+import { DsRemixIcon } from '../../DsRemixIcon';
+/**
+ * This component is responsible for rendering a preview of an uploaded image file.
+ * If the file content is valid and can be loaded, it shows the image preview.
+ * Otherwise, it displays a fallback icon.
+ */
+export const DsFileUploaderImagePreview = ({ file }) => {
+    const [src, setSrc] = useState(null);
+    useEffect(() => {
+        let isMounted = true;
+        const loadImage = async () => {
+            try {
+                let content = file.content;
+                if (typeof content === 'string') {
+                    const img = new Image();
+                    if (!content.startsWith('data:')) {
+                        content = `data:${file.type};base64,${content}`;
+                    }
+                    img.src = content;
+                    img.onload = () => isMounted && setSrc(img.src);
+                    img.onerror = () => isMounted && setSrc(null);
+                }
+                else if (content instanceof File) {
+                    const url = URL.createObjectURL(content);
+                    const img = new Image();
+                    img.src = url;
+                    img.onload = () => isMounted && setSrc(url);
+                    img.onerror = () => {
+                        if (isMounted)
+                            setSrc(null);
+                        URL.revokeObjectURL(url);
+                    };
+                }
+            }
+            catch {
+                if (isMounted)
+                    setSrc(null);
+            }
+        };
+        loadImage();
+        return () => {
+            isMounted = false;
+            if (src && src.startsWith('blob:')) {
+                URL.revokeObjectURL(src);
+            }
+        };
+    }, [file]);
+    if (src) {
+        return (_jsx(DsImage, { srcSet: [{ src: src, alt: file.name }], width: '32px', height: '32px', WrapperProps: {
+                sx: {
+                    width: '32px',
+                    height: '32px'
+                }
+            }, style: {
+                objectFit: 'cover',
+                borderRadius: 'var(--ds-radius-quickFreeze)'
+            } }));
+    }
+    return (_jsx(DsRemixIcon, { sx: {
+            p: 'var(--ds-spacing-quickFreeze)',
+            borderRadius: 'var(--ds-radius-quickFreeze)',
+            backgroundColor: 'var(--ds-colour-neutral2)',
+            color: 'var(--ds-colour-actionTertiary)'
+        }, className: 'ri-image-2-line' }));
+};

package/dist/Components/DsFileUploader/DsFileUploaderPreview/DsFileUploaderPreview.Component.d.ts

@@ -0,0 +1,14 @@
+import { TContentType, TFile } from '../DsFileUploader.Types';
+interface IDsFileUploaderPreviewProps {
+    file: TFile<TContentType>;
+}
+/**
+ * DsFileUploaderPreview is a functional component that renders an appropriate preview
+ * based on the MIME type of the uploaded file.
+ *
+ * - For image files (e.g., image/jpeg, image/png), it shows an actual image preview.
+ * - For video files, it shows a video icon.
+ * - For all other file types, it shows a generic file icon.
+ */
+export declare const DsFileUploaderPreview: ({ file }: IDsFileUploaderPreviewProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/DsFileUploader/DsFileUploaderPreview/DsFileUploaderPreview.Component.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DsRemixIcon } from '../../DsRemixIcon';
+import { DsFileUploaderImagePreview } from './DsFileUploaderImagePreview.Component';
+/**
+ * DsFileUploaderPreview is a functional component that renders an appropriate preview
+ * based on the MIME type of the uploaded file.
+ *
+ * - For image files (e.g., image/jpeg, image/png), it shows an actual image preview.
+ * - For video files, it shows a video icon.
+ * - For all other file types, it shows a generic file icon.
+ */
+export const DsFileUploaderPreview = ({ file }) => {
+    const { type: mimeType } = file;
+    const IMAGE_REGEX = new RegExp('^image/.*');
+    const VIDEO_REGEX = new RegExp('^video/.*');
+    if (IMAGE_REGEX.test(mimeType)) {
+        return _jsx(DsFileUploaderImagePreview, { file: file });
+    }
+    const iconName = VIDEO_REGEX.test(mimeType)
+        ? 'ri-video-line'
+        : 'ri-file-list-2-line';
+    return (_jsx(DsRemixIcon, { sx: {
+            p: 'var(--ds-spacing-quickFreeze)',
+            borderRadius: 'var(--ds-radius-quickFreeze)',
+            backgroundColor: 'var(--ds-colour-neutral2)',
+            color: 'var(--ds-colour-actionTertiary)'
+        }, className: iconName }));
+};

package/dist/Components/DsFileUploader/FileUploaderFiles.d.ts

@@ -0,0 +1,3 @@
+import { type IDsFileUploaderItemSegmentProps } from './DsFileUploader.Types';
+declare const FileUploaderFiles: (inProps: IDsFileUploaderItemSegmentProps) => import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[] | null;
+export default FileUploaderFiles;

package/dist/Components/DsFileUploader/FileUploaderFiles.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DsBox } from '../DsBox';
+import { DsStack } from '../DsStack';
+import { DsTypography } from '../DsTypography';
+import { DsFileUploaderDefaultProps } from './DsFileUploader.Types';
+import { DsFileUploaderPreview } from './DsFileUploaderPreview/DsFileUploaderPreview.Component';
+import { humanizeFileSize } from './helpers';
+const FileUploaderFiles = (inProps) => {
+    const mergedSlotProps = {
+        ...DsFileUploaderDefaultProps.slots,
+        ...inProps.slots
+    };
+    const props = { ...inProps, slots: mergedSlotProps };
+    const { files, onPreview, onDelete, onDownload, showDeleteIcon, showDownloadIcon, showPreviewIcon, slots = {}, slotProps = {} } = props;
+    const { DownloadButton, PreviewButton, DeleteButton } = slots;
+    const { DownloadButton: DownloadButtonProps, PreviewButton: PreviewButtonProps, DeleteButton: DeleteButtonProps } = slotProps;
+    if (!files) {
+        return null;
+    }
+    const renderFile = (file, index) => {
+        return (_jsxs(DsStack, { direction: 'row', spacing: 'var(--ds-spacing-bitterCold)', sx: {
+                alignItems: 'center',
+                p: 'var(--ds-spacing-bitterCold)',
+                borderRadius: 'var(--ds-radius-glacial)',
+                borderWidth: '1px',
+                borderStyle: 'solid',
+                borderColor: 'var(--ds-colour-strokeDefault)',
+                backgroundColor: 'var(--ds-colour-surfacePrimary)',
+                cursor: 'pointer',
+                '&:hover:not(:has(.delete-icon:hover, .action-icon:hover))': {
+                    borderColor: 'var(--ds-colour-strokeSecondarySelected)',
+                    backgroundColor: 'var(--ds-colour-stateSelectedSecondaryHover)'
+                }
+            }, children: [_jsx(DsFileUploaderPreview, { file: file }), _jsxs(DsBox, { sx: {
+                        display: 'flex',
+                        flexGrow: 1,
+                        minWidth: 0,
+                        flexDirection: 'column'
+                    }, children: [_jsx(DsTypography, { component: 'div', variant: 'bodyBoldSmall', noWrap: true, children: file.name }), _jsx(DsTypography, { component: 'div', variant: 'bodyRegularSmall', noWrap: true, sx: {
+                                color: 'var(--ds-colour-typoTertiary)'
+                            }, children: humanizeFileSize(file.size) })] }), showDownloadIcon && DownloadButton && (_jsx(DownloadButton, { IconProps: { className: 'ri-download-line' }, onClick: () => onDownload && onDownload(file.name, file), ...DownloadButtonProps })), showPreviewIcon && PreviewButton && (_jsx(PreviewButton, { IconProps: { className: 'ri-eye-line' }, onClick: () => onPreview && onPreview(file.name, file), ...PreviewButtonProps })), showDeleteIcon && DeleteButton && (_jsx(DeleteButton, { IconProps: { className: 'ri-delete-bin-line' }, onClick: () => onDelete && onDelete(file.name, file), ...DeleteButtonProps }))] }, `${file?.name}-${index}`));
+    };
+    if (!Array.isArray(files)) {
+        return renderFile(files, 0);
+    }
+    return files?.map(renderFile);
+};
+export default FileUploaderFiles;

package/dist/Components/DsFileUploader/Slots/DsFileUploaderActionButton.Component.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IDsFileUploaderActionButtonProps } from '../DsFileUploader.Types';
+/**
+ * DsFileUploaderActionButton
+ *
+ * A reusable icon button component used within the FileUploader for actions like
+ * delete, download, preview, etc. It wraps a `DsRemixIcon` inside a `DsIconButton`
+ * and accepts customization through props.
+ */
+export declare const DsFileUploaderActionButton: React.FC<IDsFileUploaderActionButtonProps>;

package/dist/Components/DsFileUploader/Slots/DsFileUploaderActionButton.Component.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DsIconButton } from '../../DsIconButton';
+import { DsRemixIcon } from '../../DsRemixIcon';
+/**
+ * DsFileUploaderActionButton
+ *
+ * A reusable icon button component used within the FileUploader for actions like
+ * delete, download, preview, etc. It wraps a `DsRemixIcon` inside a `DsIconButton`
+ * and accepts customization through props.
+ */
+export const DsFileUploaderActionButton = ({ onClick, IconProps, ...iconButtonProps }) => {
+    return (_jsx(DsIconButton, { onClick: onClick, sx: {
+            p: 'var(--ds-spacing-glacial)',
+            borderRadius: 'var(--ds-radius-quickFreeze)',
+            backgroundColor: 'var(--ds-colour-surfaceSecondary)',
+            ...iconButtonProps.sx
+        }, ...iconButtonProps, children: _jsx(DsRemixIcon, { fontSize: 'bitterCold', ...IconProps }) }));
+};

package/dist/Components/DsFileUploader/Slots/DsFileUploaderDropZone.d.ts

@@ -0,0 +1,10 @@
+import { IDsFileUploaderDropZoneProps } from '../DsFileUploader.Types';
+/**
+ * DsFileUploaderDropZone
+ *
+ * This component renders a drop zone area where users can drag & drop files
+ * or click to upload using a hidden input field. It supports two layout variants:
+ * - 'DEFAULT': Large button with drag and drop space area
+ * - 'COMPRESSED': Smaller area and button size to save space
+ */
+export declare const DsFileUploaderDropZone: (inProps: IDsFileUploaderDropZoneProps) => (false | import("react/jsx-runtime").JSX.Element | null)[];