@aurora-ds/components 0.23.6 → 0.24.0

package/README.md

@@ -211,7 +211,7 @@ The `defaultTheme` includes these token categories:
 **Buttons:** Button, IconButton  
 **Layout:** Box, Card, Stack, Grid, Page, PageSection, Separator  
 **Typography:** Text  
-**Forms:** Input, TextArea, Select, DatePicker, Form  
+**Forms:** Input, TextArea, Select, DatePicker, Form, FilePicker, ImagePicker  
 **Data Display:** Status, Avatar, AvatarGroup, Icon  
 **Navigation:** Breadcrumb, Tabs, DrawerItem, Menu, Pagination  
 **Feedback:** Alert, Accordion

package/dist/cjs/components/forms/file-picker/FilePicker.d.ts

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { FilePickerProps } from '@components/forms/file-picker/FilePicker.props.ts';
+/**
+ * Generic file picker component with drag-and-drop style interface.
+ * Supports custom preview, icons, and styling for use in external libraries.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with image
+ * <FilePicker
+ *     label="Upload Image"
+ *     accept="image/*"
+ *     preview={imagePreview}
+ *     placeholder="Click to upload"
+ *     hint="JPEG, PNG or WebP"
+ *     icon={PlusIcon}
+ *     clearIcon={TrashIcon}
+ *     onSelect={handleSelect}
+ *     onClear={handleClear}
+ * />
+ * ```
+ */
+declare const FilePicker: FC<FilePickerProps>;
+export default FilePicker;

package/dist/cjs/components/forms/file-picker/FilePicker.props.d.ts

@@ -0,0 +1,99 @@
+import { ComponentType, CSSProperties, ReactNode, SVGProps } from 'react';
+/**
+ * SVG icon component type (compatible with Aurora-DS Icon)
+ */
+export type SvgIconComponent = ComponentType<SVGProps<SVGSVGElement>>;
+export type FilePickerProps = {
+    /**
+     * Label for the input
+     */
+    label?: string;
+    /**
+     * Accepted file types (MIME types)
+     * @example 'image/jpeg,image/png,image/webp'
+     * @example 'application/pdf'
+     * @example '.jpg,.png,.pdf'
+     */
+    accept?: string;
+    /**
+     * Preview content to display when a file is selected
+     * Can be a URL string for images or a ReactNode for custom preview
+     */
+    preview?: string | ReactNode | null;
+    /**
+     * Whether the preview is an image URL
+     * @default true when preview is a string
+     */
+    previewIsImage?: boolean;
+    /**
+     * Alt text for image preview
+     */
+    previewAlt?: string;
+    /**
+     * Error message to display
+     */
+    error?: string | null;
+    /**
+     * Callback when a file is selected
+     */
+    onSelect: (file: File | null) => void;
+    /**
+     * Callback when the file is cleared
+     */
+    onClear: () => void;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Placeholder text shown in the dropzone
+     */
+    placeholder?: string;
+    /**
+     * Hint text shown below the placeholder (e.g., accepted formats)
+     */
+    hint?: string;
+    /**
+     * Icon component to display in the dropzone
+     * Should be an SVG component (e.g., from @resources/Icons)
+     */
+    icon?: SvgIconComponent;
+    /**
+     * Icon component to display on the clear button
+     * Should be an SVG component (e.g., from @resources/Icons)
+     */
+    clearIcon?: SvgIconComponent;
+    /**
+     * Aria label for the clear button
+     */
+    clearAriaLabel?: string;
+    /**
+     * Width of the FilePicker container
+     * @example '400px'
+     * @example '100%'
+     */
+    width?: CSSProperties['width'];
+    /**
+     * Height of the dropzone (when no preview)
+     * @example '200px'
+     * @default '120px'
+     */
+    dropzoneHeight?: CSSProperties['height'];
+    /**
+     * Max height of the preview image
+     * @example '300px'
+     * @default '200px'
+     */
+    previewMaxHeight?: CSSProperties['maxHeight'];
+    /**
+     * Max width of the preview image
+     * @example '400px'
+     * @default '100%'
+     */
+    previewMaxWidth?: CSSProperties['maxWidth'];
+    /**
+     * Object fit for the preview image
+     * @default 'cover'
+     */
+    previewObjectFit?: CSSProperties['objectFit'];
+};

package/dist/cjs/components/forms/file-picker/FilePicker.styles.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties } from 'react';
+type StyleParams = {
+    width?: CSSProperties['width'];
+    dropzoneHeight?: CSSProperties['height'];
+    previewMaxHeight?: CSSProperties['maxHeight'];
+    previewMaxWidth?: CSSProperties['maxWidth'];
+    previewObjectFit?: CSSProperties['objectFit'];
+};
+export declare const FILE_PICKER_STYLES: {
+    root: (params?: StyleParams | undefined) => string;
+    dropzone: (params?: StyleParams | undefined) => string;
+    dropzoneDisabled: string;
+    hiddenInput: string;
+    previewContainer: string;
+    preview: (params?: StyleParams | undefined) => string;
+    clearButton: string;
+};
+export {};

package/dist/cjs/components/forms/file-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FilePicker } from '@components/forms/file-picker/FilePicker.tsx';
+export type { FilePickerProps } from '@components/forms/file-picker/FilePicker.props.ts';

package/dist/cjs/components/forms/image-picker/ImagePicker.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { ImagePickerProps } from '@components/forms/image-picker/ImagePicker.props.ts';
+/**
+ * Image picker component built on top of the generic FilePicker.
+ * Pre-configured for image uploads with JPEG, PNG, and WebP support.
+ *
+ * @example
+ * ```tsx
+ * <ImagePicker
+ *     label="Profile Picture"
+ *     preview={imageUrl}
+ *     onSelect={handleImageSelect}
+ *     onClear={handleImageClear}
+ * />
+ * ```
+ */
+declare const ImagePicker: FC<ImagePickerProps>;
+export default ImagePicker;

package/dist/cjs/components/forms/image-picker/ImagePicker.props.d.ts

@@ -0,0 +1,76 @@
+import { CSSProperties } from 'react';
+export type ImagePickerProps = {
+    /**
+     * Label for the input
+     */
+    label?: string;
+    /**
+     * Preview URL of the selected image
+     */
+    preview: string | null;
+    /**
+     * Error message to display
+     */
+    error?: string | null;
+    /**
+     * Callback when a file is selected
+     */
+    onSelect: (file: File | null) => void;
+    /**
+     * Callback when the image is cleared
+     */
+    onClear: () => void;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Placeholder text shown in the dropzone
+     * @default 'Click to upload an image'
+     */
+    placeholder?: string;
+    /**
+     * Hint text shown below the placeholder
+     * @default 'JPEG, PNG or WebP'
+     */
+    hint?: string;
+    /**
+     * Alt text for image preview
+     * @default 'Image preview'
+     */
+    previewAlt?: string;
+    /**
+     * Aria label for the clear button
+     * @default 'Remove image'
+     */
+    clearAriaLabel?: string;
+    /**
+     * Width of the ImagePicker container
+     * @example '400px'
+     * @example '100%'
+     */
+    width?: CSSProperties['width'];
+    /**
+     * Height of the dropzone (when no preview)
+     * @example '200px'
+     * @default '120px'
+     */
+    dropzoneHeight?: CSSProperties['height'];
+    /**
+     * Max height of the preview image
+     * @example '300px'
+     * @default '200px'
+     */
+    previewMaxHeight?: CSSProperties['maxHeight'];
+    /**
+     * Max width of the preview image
+     * @example '400px'
+     * @default '100%'
+     */
+    previewMaxWidth?: CSSProperties['maxWidth'];
+    /**
+     * Object fit for the preview image
+     * @default 'cover'
+     */
+    previewObjectFit?: CSSProperties['objectFit'];
+};

package/dist/cjs/components/forms/image-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ImagePicker } from '@components/forms/image-picker/ImagePicker.tsx';
+export type { ImagePickerProps } from '@components/forms/image-picker/ImagePicker.props.ts';

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

@@ -11,6 +11,8 @@ export * from '@components/forms/input';
 export * from '@components/forms/textarea';
 export * from '@components/forms/select';
 export * from '@components/forms/date-picker';
+export * from '@components/forms/file-picker';
+export * from '@components/forms/image-picker';
 export * from '@components/layout/box';
 export * from '@components/layout/stack';
 export * from '@components/layout/card';

package/dist/cjs/index.js

@@ -1227,6 +1227,10 @@ const MoreHorizontalIcon = () => {
     return (jsxRuntime.jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'lucide lucide-ellipsis-icon lucide-ellipsis', children: [jsxRuntime.jsx("circle", { cx: '12', cy: '12', r: '1' }), jsxRuntime.jsx("circle", { cx: '19', cy: '12', r: '1' }), jsxRuntime.jsx("circle", { cx: '5', cy: '12', r: '1' })] }));
 };
 
+const PlusIcon = () => (jsxRuntime.jsx("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: jsxRuntime.jsx("path", { d: 'M8 3.33337V12.6667M3.33333 8H12.6667', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) }));
+
+const TrashIcon = () => (jsxRuntime.jsxs("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: [jsxRuntime.jsx("path", { d: 'M2 4H3.33333H14', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }), jsxRuntime.jsx("path", { d: 'M5.33325 4.00004V2.66671C5.33325 2.31309 5.47373 1.97395 5.72378 1.7239C5.97382 1.47385 6.31296 1.33337 6.66659 1.33337H9.33325C9.68687 1.33337 10.026 1.47385 10.276 1.7239C10.5261 1.97395 10.6666 2.31309 10.6666 2.66671V4.00004M12.6666 4.00004V13.3334C12.6666 13.687 12.5261 14.0261 12.276 14.2762C12.026 14.5262 11.6868 14.6667 11.3333 14.6667H4.66659C4.31296 14.6667 3.97382 14.5262 3.72378 14.2762C3.47373 14.0261 3.33325 13.687 3.33325 13.3334V4.00004H12.6666Z', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' })] }));
+
 /**
  * Input component
  */
@@ -2109,6 +2113,150 @@ const DatePicker = ({ value, onChange, label, mandatory = false, placeholder, di
 DatePicker.displayName = 'DatePicker';
 var DatePicker_default = React.memo(DatePicker);
 
+const FILE_PICKER_STYLES = theme.createStyles((theme) => ({
+    root: (params) => ({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.spacing.xs,
+        width: params?.width ?? '100%',
+    }),
+    dropzone: (params) => ({
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: theme.spacing.sm,
+        padding: theme.spacing.lg,
+        border: `2px dashed ${theme.colors.border}`,
+        borderRadius: theme.radius.md,
+        backgroundColor: theme.colors.surface,
+        cursor: 'pointer',
+        transition: `all ${theme.transition.fast}`,
+        minHeight: params?.dropzoneHeight ?? '120px',
+        '&:hover': {
+            borderColor: theme.colors.primary,
+            backgroundColor: theme.colors.surfaceHover,
+        },
+    }),
+    dropzoneDisabled: {
+        opacity: 0.5,
+        cursor: 'not-allowed',
+        '&:hover': {
+            borderColor: theme.colors.border,
+            backgroundColor: theme.colors.surface,
+        },
+    },
+    hiddenInput: {
+        display: 'none',
+    },
+    previewContainer: {
+        position: 'relative',
+        width: '100%',
+        borderRadius: theme.radius.md,
+        overflow: 'hidden',
+    },
+    preview: (params) => ({
+        width: '100%',
+        maxHeight: params?.previewMaxHeight ?? '200px',
+        maxWidth: params?.previewMaxWidth ?? '100%',
+        objectFit: params?.previewObjectFit ?? 'cover',
+        borderRadius: theme.radius.md,
+    }),
+    clearButton: {
+        position: 'absolute',
+        top: theme.spacing.xs,
+        right: theme.spacing.xs,
+        '& button': {
+            backgroundColor: 'rgba(0, 0, 0, 0.6)',
+            '&:hover': {
+                backgroundColor: 'rgba(0, 0, 0, 0.8)',
+            },
+        },
+    },
+}));
+
+/**
+ * Generic file picker component with drag-and-drop style interface.
+ * Supports custom preview, icons, and styling for use in external libraries.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with image
+ * <FilePicker
+ *     label="Upload Image"
+ *     accept="image/*"
+ *     preview={imagePreview}
+ *     placeholder="Click to upload"
+ *     hint="JPEG, PNG or WebP"
+ *     icon={PlusIcon}
+ *     clearIcon={TrashIcon}
+ *     onSelect={handleSelect}
+ *     onClear={handleClear}
+ * />
+ * ```
+ */
+const FilePicker = ({ label, accept, preview, previewIsImage = true, previewAlt = 'Preview', error, onSelect, onClear, disabled = false, placeholder = 'Click to upload a file', hint, icon: IconComponent, clearIcon: ClearIconComponent, clearAriaLabel = 'Remove file', width, dropzoneHeight, previewMaxHeight, previewMaxWidth, previewObjectFit, }) => {
+    // refs
+    const inputRef = React.useRef(null);
+    // handlers
+    const handleClick = () => {
+        if (!disabled && inputRef.current) {
+            inputRef.current.click();
+        }
+    };
+    const handleChange = (e) => {
+        const file = e.target.files?.[0] || null;
+        onSelect(file);
+        // Reset input to allow selecting the same file again
+        if (inputRef.current) {
+            inputRef.current.value = '';
+        }
+    };
+    const handleClear = (e) => {
+        e.stopPropagation();
+        onClear();
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleClick();
+        }
+    };
+    // Determine if preview is a string (image URL) or ReactNode
+    const isImagePreview = typeof preview === 'string' && previewIsImage;
+    const hasPreview = preview !== null && preview !== undefined;
+    // Style parameters
+    const styleParams = {
+        width,
+        dropzoneHeight,
+        previewMaxHeight,
+        previewMaxWidth,
+        previewObjectFit,
+    };
+    return (jsxRuntime.jsxs("div", { className: FILE_PICKER_STYLES.root(styleParams), children: [label && (jsxRuntime.jsx(Text, { fontSize: 'sm', variant: 'label', children: label })), jsxRuntime.jsx("input", { ref: inputRef, type: 'file', accept: accept, className: FILE_PICKER_STYLES.hiddenInput, onChange: handleChange, disabled: disabled }), hasPreview ? (jsxRuntime.jsxs("div", { className: FILE_PICKER_STYLES.previewContainer, children: [isImagePreview ? (jsxRuntime.jsx("img", { src: preview, alt: previewAlt, className: FILE_PICKER_STYLES.preview(styleParams) })) : (preview), !disabled && ClearIconComponent && (jsxRuntime.jsx("div", { className: FILE_PICKER_STYLES.clearButton, children: jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(ClearIconComponent, {}), onClick: handleClear, ariaLabel: clearAriaLabel, variant: 'contained', size: 'small', textColor: 'surface' }) }))] })) : (jsxRuntime.jsxs("div", { className: `${FILE_PICKER_STYLES.dropzone(styleParams)} ${disabled ? FILE_PICKER_STYLES.dropzoneDisabled : ''}`, onClick: handleClick, role: 'button', tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, children: [IconComponent && (jsxRuntime.jsx(Icon, { size: 'lg', color: 'text', children: jsxRuntime.jsx(IconComponent, {}) })), jsxRuntime.jsx(Text, { children: placeholder }), hint && (jsxRuntime.jsx(Text, { fontSize: 'xs', color: 'textSecondary', children: hint }))] })), error && (jsxRuntime.jsx(Text, { fontSize: 'sm', color: 'error', children: error }))] }));
+};
+FilePicker.displayName = 'FilePicker';
+
+/**
+ * Image picker component built on top of the generic FilePicker.
+ * Pre-configured for image uploads with JPEG, PNG, and WebP support.
+ *
+ * @example
+ * ```tsx
+ * <ImagePicker
+ *     label="Profile Picture"
+ *     preview={imageUrl}
+ *     onSelect={handleImageSelect}
+ *     onClear={handleImageClear}
+ * />
+ * ```
+ */
+const ImagePicker = ({ label, preview, error, onSelect, onClear, disabled = false, placeholder = 'Click to upload an image', hint = 'JPEG, PNG or WebP', previewAlt = 'Image preview', clearAriaLabel = 'Remove image', width, dropzoneHeight, previewMaxHeight, previewMaxWidth, previewObjectFit, }) => {
+    return (jsxRuntime.jsx(FilePicker, { label: label, accept: 'image/jpeg,image/png,image/webp', preview: preview, previewIsImage: true, previewAlt: previewAlt, error: error, onSelect: onSelect, onClear: onClear, disabled: disabled, placeholder: placeholder, hint: hint, icon: PlusIcon, clearIcon: TrashIcon, clearAriaLabel: clearAriaLabel, width: width, dropzoneHeight: dropzoneHeight, previewMaxHeight: previewMaxHeight, previewMaxWidth: previewMaxWidth, previewObjectFit: previewObjectFit }));
+};
+ImagePicker.displayName = 'ImagePicker';
+
 /**
  * Box styles using createStyles from @aurora-ds/theme
  */
@@ -3574,10 +3722,12 @@ exports.ButtonToggleGroup = ButtonToggleGroup;
 exports.Card = Card;
 exports.DatePicker = DatePicker_default;
 exports.DrawerItem = DrawerItem;
+exports.FilePicker = FilePicker;
 exports.Form = Form$1;
 exports.Grid = Grid;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
+exports.ImagePicker = ImagePicker;
 exports.Input = Input_default;
 exports.Menu = Menu;
 exports.MenuGroup = MenuGroup;