@aurora-ds/components 0.23.5 → 0.24.0

package/dist/esm/resources/Icons.d.ts

@@ -10,4 +10,6 @@ import { EyeIcon } from '@resources/icons/EyeIcon.tsx';
 import { EyeOffIcon } from '@resources/icons/EyeOffIcon.tsx';
 import { InfoIcon } from '@resources/icons/InfoIcon.tsx';
 import { MoreHorizontalIcon } from '@resources/icons/MoreHorizontalIcon.tsx';
-export { AlertCircleIcon, AlertTriangleIcon, CalendarIcon, CheckCircleIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, InfoIcon, MoreHorizontalIcon, EyeIcon, EyeOffIcon, CloseIcon };
+import { PlusIcon } from '@resources/icons/PlusIcon.tsx';
+import { TrashIcon } from '@resources/icons/TrashIcon.tsx';
+export { AlertCircleIcon, AlertTriangleIcon, CalendarIcon, CheckCircleIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, InfoIcon, MoreHorizontalIcon, EyeIcon, EyeOffIcon, CloseIcon, PlusIcon, TrashIcon };

package/dist/esm/resources/icons/PlusIcon.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const PlusIcon: FC;

package/dist/esm/resources/icons/TrashIcon.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const TrashIcon: FC;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { PropsWithChildren, FC, ReactNode, MouseEvent, CSSProperties, FormEvent, DragEvent, ComponentPropsWithoutRef, ReactElement, RefObject } from 'react';
+import { PropsWithChildren, FC, ReactNode, MouseEvent, CSSProperties, FormEvent, ComponentType, SVGProps, DragEvent, ComponentPropsWithoutRef, ReactElement, RefObject } from 'react';
 
 /**
  * Alert variant types
@@ -818,6 +818,219 @@ type DatePickerProps = {
 
 declare const _default: react.NamedExoticComponent<DatePickerProps>;
 
+/**
+ * SVG icon component type (compatible with Aurora-DS Icon)
+ */
+type SvgIconComponent = ComponentType<SVGProps<SVGSVGElement>>;
+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'];
+};
+
+/**
+ * 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>;
+
+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'];
+};
+
+/**
+ * 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>;
+
 type BoxProps = {
     /** Box children elements */
     children?: ReactNode;
@@ -1707,5 +1920,5 @@ declare module '@aurora-ds/theme' {
  */
 declare const defaultTheme: Theme;
 
-export { Accordion, Alert, AlertProvider, Avatar, AvatarGroup, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonToggle, ButtonToggleGroup, Card, _default as DatePicker, DrawerItem, _default$3 as Form, Grid, Icon, IconButton, _default$2 as Input, Menu, MenuGroup, MenuItem, Modal, Page, PageSection, Pagination, Select, Separator, Skeleton, Stack, Status, TabItem, Tabs, Text, _default$1 as TextArea, defaultTheme, useAlert, useAnchorPosition, useClickOutside, useTransitionRender };
-export type { AccordionProps, AlertContextValue, AlertPosition, AlertProps, AlertProviderProps, AlertVariant, AnchorOrigin, AnchorPosition, AvatarGroupProps, AvatarProps, BoxProps, BreadcrumbEllipsisProps, BreadcrumbLinkProps, BreadcrumbPageProps, BreadcrumbProps, BreadcrumbSeparatorProps, ButtonProps, ButtonToggleGroupProps, ButtonToggleProps, ButtonVariantStyle, ButtonVariants, CardProps, DateFormat, DatePickerProps, DrawerItemProps, FormProps, GridProps, IconButtonProps, IconProps, InputProps, MenuGroupProps, MenuItemProps, MenuProps, ModalProps, PageProps, PageSectionProps, PaginationProps, SelectOption, SelectProps, SeparatorProps, ShowAlertOptions, SkeletonProps, StackProps, StatusColor, StatusProps, StatusSize, StatusVariant, TabItemProps, TabsProps, TextAreaProps, TextProps, TextVariantStyle, TextVariants, Theme, ThemeBreakpointsContract, ThemeColorContract, ThemeContract, ThemeFontSizeContract, ThemeFontWeightContract, ThemeLineHeightContract, ThemeOpacityContract, ThemeRadiusContract, ThemeShadowsContract, ThemeSpacingContract, ThemeTransitionContract, ThemeZIndexContract, UseTransitionRenderReturnType };
+export { Accordion, Alert, AlertProvider, Avatar, AvatarGroup, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonToggle, ButtonToggleGroup, Card, _default as DatePicker, DrawerItem, FilePicker, _default$3 as Form, Grid, Icon, IconButton, ImagePicker, _default$2 as Input, Menu, MenuGroup, MenuItem, Modal, Page, PageSection, Pagination, Select, Separator, Skeleton, Stack, Status, TabItem, Tabs, Text, _default$1 as TextArea, defaultTheme, useAlert, useAnchorPosition, useClickOutside, useTransitionRender };
+export type { AccordionProps, AlertContextValue, AlertPosition, AlertProps, AlertProviderProps, AlertVariant, AnchorOrigin, AnchorPosition, AvatarGroupProps, AvatarProps, BoxProps, BreadcrumbEllipsisProps, BreadcrumbLinkProps, BreadcrumbPageProps, BreadcrumbProps, BreadcrumbSeparatorProps, ButtonProps, ButtonToggleGroupProps, ButtonToggleProps, ButtonVariantStyle, ButtonVariants, CardProps, DateFormat, DatePickerProps, DrawerItemProps, FilePickerProps, FormProps, GridProps, IconButtonProps, IconProps, ImagePickerProps, InputProps, MenuGroupProps, MenuItemProps, MenuProps, ModalProps, PageProps, PageSectionProps, PaginationProps, SelectOption, SelectProps, SeparatorProps, ShowAlertOptions, SkeletonProps, StackProps, StatusColor, StatusProps, StatusSize, StatusVariant, TabItemProps, TabsProps, TextAreaProps, TextProps, TextVariantStyle, TextVariants, Theme, ThemeBreakpointsContract, ThemeColorContract, ThemeContract, ThemeFontSizeContract, ThemeFontWeightContract, ThemeLineHeightContract, ThemeOpacityContract, ThemeRadiusContract, ThemeShadowsContract, ThemeSpacingContract, ThemeTransitionContract, ThemeZIndexContract, UseTransitionRenderReturnType };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurora-ds/components",
-  "version": "0.23.5",
+  "version": "0.24.0",
   "type": "module",
   "description": "Aurora DS - React Components Library",
   "main": "dist/cjs/index.js",