@am92/react-design-system 2.9.10 → 2.10.0

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)[];

package/dist/Components/DsFileUploader/Slots/DsFileUploaderDropZone.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DsBox } from '../../DsBox';
+import { DsButton } from '../../DsButton';
+import { DsInput } from '../../DsInput';
+import { DsRemixIcon } from '../../DsRemixIcon';
+import { DsStack } from '../../DsStack';
+import { DsTypography } from '../../DsTypography';
+import { DsFileUploaderDropzoneDefaultProps } 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 const DsFileUploaderDropZone = (inProps) => {
+    const props = {
+        ...DsFileUploaderDropzoneDefaultProps,
+        ...inProps
+    };
+    const { variant, IconProps, title, description, InputProps, disabled, ...restDsStackProps } = props;
+    const isCompressed = variant === 'COMPRESSED';
+    const renderDescription = () => {
+        if (!description)
+            return null;
+        const isArray = Array.isArray(description);
+        const isString = typeof description === 'string';
+        const shouldRenderCompressedArray = isArray && isCompressed;
+        const shouldRenderString = isString;
+        if (!shouldRenderCompressedArray && !shouldRenderString)
+            return null;
+        const color = `var(--ds-colour-${isCompressed ? 'typoPrimary' : 'typoTertiary'})`;
+        const containerProps = {
+            direction: isCompressed ? 'row' : undefined,
+            justifyContent: isCompressed
+                ? isArray && description.length > 1
+                    ? 'space-between'
+                    : 'center'
+                : 'center',
+            alignItems: isCompressed ? 'center' : undefined,
+            textAlign: isCompressed ? 'center' : undefined,
+            pb: isCompressed ? undefined : 'var(--ds-spacing-bitterCold)',
+            sx: isCompressed
+                ? {
+                    py: 'var(--ds-spacing-quickFreeze)',
+                    px: 'var(--ds-spacing-glacial)',
+                    backgroundColor: 'var(--ds-colour-surfaceSecondary)',
+                    borderRadius: 'var(--ds-radius-quickFreeze)'
+                }
+                : undefined
+        };
+        const renderTypographies = () => {
+            const descList = isString ? [description] : description;
+            return descList.map((desc, index) => (_jsx(DsTypography, { variant: 'bodyRegularSmall', align: 'center', color: color, children: desc }, index)));
+        };
+        return (_jsx(DsStack, { ...containerProps, children: renderTypographies() }, 'dropzone-description'));
+    };
+    return [
+        _jsxs(DsBox, { sx: {
+                width: '100%',
+                position: 'relative',
+                borderRadius: 'var(--ds-radius-glacial)',
+                borderWidth: '1px',
+                borderStyle: 'dashed',
+                borderColor: 'var(--ds-colour-strokeDefault)',
+                backgroundColor: disabled
+                    ? 'var(--ds-colour-stateDisabledSurface)'
+                    : 'var(--ds-colour-surfacePrimary)',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                '&:hover': {
+                    borderColor: disabled
+                        ? 'var(--ds-colour-strokeDefault)'
+                        : 'var(--ds-colour-strokeSecondarySelected)',
+                    '.dropzone-content-wrapper': {
+                        backgroundColor: disabled
+                            ? 'var(--ds-colour-stateDisabledSurface)'
+                            : isCompressed
+                                ? 'var(--ds-colour-surfaceSecondary)'
+                                : 'var(--ds-colour-stateSelectedSecondaryHover)'
+                    }
+                }
+            }, children: [_jsxs(DsStack, { className: 'dropzone-content-wrapper', flexDirection: isCompressed ? 'row' : 'column', gap: 'var(--ds-spacing-quickFreeze)', justifyContent: 'center', alignItems: 'center', ...restDsStackProps, sx: {
+                        borderRadius: isCompressed
+                            ? 'var(--ds-radius-quickFreeze)'
+                            : 'var(--ds-radius-glacial)',
+                        m: isCompressed
+                            ? 'var(--ds-spacing-frostbite)'
+                            : 'var(--ds-spacing-zero)',
+                        px: isCompressed
+                            ? 'var(--ds-spacing-glacial)'
+                            : 'var(--ds-spacing-bitterCold)',
+                        pt: isCompressed
+                            ? 'var(--ds-spacing-zero)'
+                            : 'var(--ds-spacing-bitterCold)',
+                        backgroundColor: disabled
+                            ? 'var(--ds-colour-stateDisabledSurface)'
+                            : isCompressed
+                                ? 'var(--ds-colour-surfaceSecondary)'
+                                : 'var(--ds-colour-surfacePrimary)',
+                        '&:hover': {
+                            backgroundColor: isCompressed
+                                ? 'var(--ds-colour-surfaceSecondary)'
+                                : 'var(--ds-colour-stateSelectedSecondaryHover)'
+                        },
+                        ...restDsStackProps?.sx
+                    }, children: [_jsx(DsRemixIcon, { className: isCompressed ? 'ri-upload-line' : 'ri-upload-cloud-2-line', fontSize: isCompressed ? 'frostbite' : 'mild', color: disabled ? 'disabled' : 'secondary', ...IconProps }), _jsx(DsButton, { disabled: disabled, variant: 'text', color: 'secondary', children: title }), !isCompressed && renderDescription()] }), _jsx(DsInput, { type: 'file', slot: 'input', disabled: disabled, sx: {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        height: '100%',
+                        width: '100%',
+                        opacity: 0,
+                        margin: 'var(--ds-spacing-zero) !important'
+                    }, onChange: InputProps?.onChange, onDrop: InputProps?.onDrop, onDragOver: InputProps?.onDragOver, disableUnderline: true, inputProps: {
+                        title,
+                        value: '',
+                        ...InputProps,
+                        accept: InputProps?.accept,
+                        multiple: InputProps?.multiple,
+                        style: {
+                            height: '100%',
+                            width: '100%',
+                            cursor: disabled ? 'not-allowed' : 'pointer',
+                            ...InputProps?.style
+                        }
+                    } })] }, 'dropzone-box'),
+        isCompressed && renderDescription()
+    ];
+};

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

@@ -0,0 +1,10 @@
+import { TDsFileUploaderSlotProps } from '../DsFileUploader.Types';
+/**
+ * DsFileUploaderSelectedFilesSegment
+ *
+ * This component is a wrapper to render a labeled section
+ * for displaying selected files in a scrollable container.
+ *
+ * It supports slot-level customization via props and merges them with default values.
+ */
+export declare const DsFileUploaderSelectedFilesSegment: (inProps: TDsFileUploaderSlotProps["SelectedItemSegment"]) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/DsFileUploader/Slots/DsFileUploaderSelectedFilesSegment.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DsStack } from '../../DsStack';
+import { DsTypography } from '../../DsTypography';
+import { DsFileUploaderDefaultProps } from '../DsFileUploader.Types';
+import { cloneElement, isValidElement } from 'react';
+/**
+ * DsFileUploaderSelectedFilesSegment
+ *
+ * This component is a wrapper to render a labeled section
+ * for displaying selected files in a scrollable container.
+ *
+ * It supports slot-level customization via props and merges them with default values.
+ */
+export const DsFileUploaderSelectedFilesSegment = (inProps) => {
+    const props = {
+        ...DsFileUploaderDefaultProps.slotProps?.SelectedItemSegment,
+        ...inProps
+    };
+    const { label, children } = props;
+    return (_jsxs(DsStack, { spacing: 'var(--ds-spacing-frostbite)', children: [_jsx(DsTypography, { py: 'var(--ds-spacing-glacial)', variant: 'subheadingSemiboldDefault', color: 'var(--ds-colour-typoSecondary)', children: label }), _jsx(DsStack, { spacing: 'var(--ds-spacing-frostbite)', sx: { maxHeight: '440px', overflowY: 'auto' }, children: isValidElement(children) && cloneElement(children, { ...props }) })] }));
+};

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

@@ -0,0 +1,10 @@
+import { TDsFileUploaderSlotProps } from '../DsFileUploader.Types';
+/**
+ * DsFileUploaderSelectedFilesSegment
+ *
+ * This component is a wrapper to render a labeled section
+ * for displaying uploaded files in a scrollable container.
+ *
+ * It supports slot-level customization via props and merges them with default values.
+ */
+export declare const DsFileUploaderUploadedFilesSegment: (inProps: TDsFileUploaderSlotProps["UploadedItemSegment"]) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/DsFileUploader/Slots/DsFileUploaderUploadedFilesSegment.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DsStack } from '../../DsStack';
+import { DsTypography } from '../../DsTypography';
+import { DsFileUploaderDefaultProps } from '../DsFileUploader.Types';
+import { cloneElement, isValidElement } from 'react';
+/**
+ * DsFileUploaderSelectedFilesSegment
+ *
+ * This component is a wrapper to render a labeled section
+ * for displaying uploaded files in a scrollable container.
+ *
+ * It supports slot-level customization via props and merges them with default values.
+ */
+export const DsFileUploaderUploadedFilesSegment = (inProps) => {
+    const props = {
+        ...DsFileUploaderDefaultProps.slotProps?.UploadedItemSegment,
+        ...inProps
+    };
+    const { label, children } = props;
+    return (_jsxs(DsStack, { spacing: 'var(--ds-spacing-frostbite)', children: [_jsx(DsTypography, { py: 'var(--ds-spacing-glacial)', variant: 'subheadingSemiboldDefault', color: 'var(--ds-colour-typoSecondary)', children: label }), _jsx(DsStack, { spacing: 'var(--ds-spacing-frostbite)', sx: { maxHeight: '440px', overflowY: 'auto' }, children: isValidElement(children) && cloneElement(children, { ...props }) })] }));
+};

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

@@ -0,0 +1,2 @@
+import type { TContentType, TFile } from './DsFileUploader.Types';
+export declare const fileToFileUploader: (file: File, contentType: TContentType) => Promise<TFile<TContentType>>;

package/dist/Components/DsFileUploader/converter.js

@@ -0,0 +1,25 @@
+export const fileToFileUploader = async (file, contentType) => {
+    const { name, type, size } = file;
+    let content = file;
+    if (contentType === 'BASE64') {
+        content = await fileToBase64(file);
+        if (typeof content === 'string' && content.startsWith('data:')) {
+            content = content.substring(content.indexOf(',') + 1);
+        }
+    }
+    const fileUploader = {
+        name,
+        type,
+        size,
+        content
+    };
+    return fileUploader;
+};
+const fileToBase64 = (file) => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = error => reject(error);
+    });
+};

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

@@ -0,0 +1,9 @@
+import type { IDsFileUploaderProps, TContentType, TErrorValue, TFile, TMultiple, TFileValue } from './DsFileUploader.Types';
+export declare const mergeProps: <T extends Record<string, any>>(inProps: Partial<T>, defaultProps: T) => T;
+export declare const getFileTypeIcon: <ContentType extends TContentType>(file: TFile<ContentType>) => import("react/jsx-runtime").JSX.Element;
+export declare const humanizeFileSize: (bytes: number, decimals?: number) => string;
+export declare const getDefaultValue: <Multiple extends TMultiple, ContentType extends TContentType>(props: IDsFileUploaderProps<Multiple, ContentType>) => TFileValue<Multiple, ContentType> | null;
+export declare const getValidProcessedFile: <Multiple extends TMultiple, ContentType extends TContentType>(filesToProcess: FileList, files: TFileValue<Multiple, ContentType> | null, accept: string, minSize?: number, maxSize?: number, contentType?: TContentType) => Promise<{
+    valid: TFileValue<Multiple, ContentType>;
+    invalid: TErrorValue<Multiple, ContentType>;
+}>;

package/dist/Components/DsFileUploader/helpers.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DsFileUploaderImagePreview } from './DsFileUploaderPreview/DsFileUploaderImagePreview.Component';
+import { getFileValidator } from './validator';
+import { fileToFileUploader } from './converter';
+import { DsRemixIcon } from '../DsRemixIcon';
+export const mergeProps = (inProps, defaultProps) => {
+    return {
+        ...defaultProps,
+        ...inProps,
+        slots: {
+            ...defaultProps.slots,
+            ...inProps.slots
+        },
+        slotProps: {
+            ...defaultProps.slotProps,
+            ...inProps.slotProps,
+            SelectedItemSegment: {
+                ...defaultProps.slotProps?.SelectedItemSegment,
+                ...inProps.slotProps?.SelectedItemSegment
+            },
+            UploadedItemSegment: {
+                ...defaultProps.slotProps?.UploadedItemSegment,
+                ...inProps.slotProps?.UploadedItemSegment
+            },
+            DropZone: {
+                ...defaultProps?.slotProps?.DropZone,
+                ...inProps.slotProps?.DropZone
+            }
+        }
+    };
+};
+export const getFileTypeIcon = (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 });
+    }
+    else if (VIDEO_REGEX.test(mimeType)) {
+        return _jsx(DsRemixIcon, { className: "ri-video-line" });
+    }
+    else {
+        return _jsx(DsRemixIcon, { className: "ri-file-list-2-line" });
+    }
+};
+export const humanizeFileSize = (bytes, decimals = 2) => {
+    if (!+bytes)
+        return '0 Bytes';
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+};
+export const getDefaultValue = (props) => {
+    const { value, multiple } = props;
+    if (value) {
+        return value;
+    }
+    if (multiple) {
+        return [];
+    }
+    return null;
+};
+export const getValidProcessedFile = async (filesToProcess, files, accept, minSize, maxSize, contentType) => {
+    const validator = getFileValidator(accept, minSize, maxSize);
+    const isMultiple = Array.isArray(files);
+    const validFiles = isMultiple ? [...files] : [];
+    const invalidFiles = [];
+    const fileList = [...filesToProcess];
+    for (const file of fileList) {
+        const fileUploader = await fileToFileUploader(file, contentType || 'FILE');
+        const errorCode = validator(file);
+        if (!errorCode) {
+            validFiles.unshift(fileUploader);
+        }
+        else {
+            const temp = {
+                file: fileUploader,
+                errorCode
+            };
+            invalidFiles.push(temp);
+        }
+    }
+    const valid = isMultiple ? validFiles : validFiles[0];
+    const invalid = (isMultiple ? invalidFiles : invalidFiles[0]);
+    return { valid, invalid };
+};

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

@@ -0,0 +1,2 @@
+import { type TErrorCodes } from './DsFileUploader.Types';
+export declare const getFileValidator: (accept: string, minSize?: number | undefined, maxSize?: number | undefined) => (file: File) => TErrorCodes | undefined;

package/dist/Components/DsFileUploader/validator.js

@@ -0,0 +1,37 @@
+import { ERROR_CODES } from './DsFileUploader.Types';
+export const getFileValidator = (accept, minSize = 0, maxSize = Infinity) => {
+    const validateFileType = getFileTypeValidator(accept);
+    return (file) => {
+        const { size, type } = file;
+        if (!validateMinSize(size, minSize)) {
+            return ERROR_CODES.FILE_SIZE_BELOW_MIN;
+        }
+        if (!validateMaxSize(size, maxSize)) {
+            return ERROR_CODES.MAX_FILE_SIZE_EXCEEDED;
+        }
+        if (!validateFileType(type)) {
+            return ERROR_CODES.INVALID_FILE_TYPE;
+        }
+    };
+};
+const validateMinSize = (size, minSize = 0) => {
+    return size >= minSize;
+};
+const validateMaxSize = (size, maxSize = Infinity) => {
+    return size <= maxSize;
+};
+const getFileTypeValidator = (accept) => {
+    // Escape dots and replace wildcards with .* for regex
+    const typesPattern = accept
+        .split(',')
+        .map(type => type.trim())
+        .map(type => type.replace(/\./g, '\\.').replace(/\*/g, '.*'))
+        .join('|');
+    // Create a regex with start and end anchors
+    const typesRegex = new RegExp(`^(${typesPattern})$`);
+    // Validator function
+    const validateFileType = (mimeType) => {
+        return typesRegex.test(mimeType);
+    };
+    return validateFileType;
+};