@timmbr/ui 1.1.0 → 1.2.0

package/dist/components/ImageUpload/ImageUpload.js

@@ -0,0 +1,365 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { AlertCircle } from '@timmbr/icons';
+import { LayoutGroup, AnimatePresence } from '@timmbr/motion';
+import { resolveMotion } from '../../types/motion.js';
+import { DEFAULT_VIDEO_ACCEPT, DEFAULT_ALL_ACCEPT, DEFAULT_IMAGE_ACCEPT, DEFAULT_VIDEO_MAX_SIZE, DEFAULT_IMAGE_MAX_SIZE, normalizeUploadItems, validateUploadFiles, isVideoMedia, GRID_COLS_MAP } from './ImageUpload.helpers.js';
+import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
+import { ImageUploadSinglePreview } from './subcomponents/ImageUploadSinglePreview.js';
+import { ImageUploadDropzone } from './subcomponents/ImageUploadDropzone.js';
+import { ImageUploadThumbnailCard, ImageUploadTaskCard } from './subcomponents/ImageUploadThumbnailCard.js';
+import { ImageUploadModal } from './subcomponents/ImageUploadModal.js';
+
+const ImageUpload = React.forwardRef(
+  ({
+    className,
+    style,
+    value,
+    multiple = false,
+    mediaType = "image",
+    minFiles,
+    maxFiles,
+    onChange,
+    onUpload,
+    onRemove,
+    disabled = false,
+    loading = false,
+    loadingText,
+    accept: customAccept,
+    maxSizeBytes: customMaxSize,
+    label,
+    helperText,
+    error: externalError,
+    aspectRatio = "auto",
+    gridCols = 4,
+    layout = "grid",
+    enablePreviewModal = true,
+    motion: motionProp,
+    ...props
+  }, ref) => {
+    const fileInputRef = React.useRef(null);
+    const dragCounterRef = React.useRef(0);
+    const globalMotion = useGlobalAnimation();
+    const { shouldAnimate, motionClass, dataAttributes } = resolveMotion(
+      motionProp,
+      globalMotion
+    );
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [uploadingTasks, setUploadingTasks] = React.useState([]);
+    const [localError, setLocalError] = React.useState(null);
+    const [previewModalIndex, setPreviewModalIndex] = React.useState(null);
+    const accept = React.useMemo(() => {
+      if (customAccept) return customAccept;
+      if (mediaType === "video") return DEFAULT_VIDEO_ACCEPT;
+      if (mediaType === "all") return DEFAULT_ALL_ACCEPT;
+      return DEFAULT_IMAGE_ACCEPT;
+    }, [customAccept, mediaType]);
+    const maxSizeBytes = React.useMemo(() => {
+      if (customMaxSize) return customMaxSize;
+      return mediaType === "video" || mediaType === "all" ? DEFAULT_VIDEO_MAX_SIZE : DEFAULT_IMAGE_MAX_SIZE;
+    }, [customMaxSize, mediaType]);
+    const defaultLoadingText = loadingText || (mediaType === "video" ? "Uploading video..." : "Uploading image...");
+    const items = React.useMemo(
+      () => normalizeUploadItems(value),
+      [value]
+    );
+    const isGlobalUploading = loading || uploadingTasks.length > 0;
+    const currentCount = items.length + uploadingTasks.length;
+    const isMaxReached = Boolean(maxFiles && currentCount >= maxFiles);
+    const minFilesWarning = minFiles && items.length > 0 && items.length < minFiles ? `At least ${minFiles} items are required (currently ${items.length}).` : null;
+    const error = externalError || localError;
+    const isError = Boolean(error);
+    React.useEffect(() => {
+      return () => {
+        uploadingTasks.forEach((task) => {
+          if (task.previewUrl.startsWith("blob:")) {
+            URL.revokeObjectURL(task.previewUrl);
+          }
+        });
+      };
+    }, [uploadingTasks]);
+    const handleFiles = React.useCallback(
+      async (rawFiles) => {
+        setLocalError(null);
+        const filesToProcess = multiple ? rawFiles : rawFiles.slice(0, 1);
+        const { validFiles, errorMessage } = validateUploadFiles({
+          files: filesToProcess,
+          accept,
+          maxSizeBytes,
+          maxFiles,
+          currentCount
+        });
+        if (errorMessage) {
+          setLocalError(errorMessage);
+          return;
+        }
+        if (validFiles.length === 0) return;
+        onChange?.(multiple ? validFiles : validFiles[0]);
+        if (onUpload) {
+          const newTasks = validFiles.map((file) => ({
+            id: `${file.name}-${Date.now()}-${Math.random()}`,
+            name: file.name,
+            previewUrl: URL.createObjectURL(file),
+            isVideo: file.type.startsWith("video/") || isVideoMedia(file.name)
+          }));
+          setUploadingTasks((prev) => [...prev, ...newTasks]);
+          await Promise.allSettled(
+            validFiles.map(async (file, idx) => {
+              const taskId = newTasks[idx].id;
+              try {
+                await onUpload(file);
+              } catch (err) {
+                const msg = err instanceof Error ? err.message : `Failed to upload "${file.name}".`;
+                setLocalError(msg);
+              } finally {
+                setUploadingTasks((prev) => {
+                  const task = prev.find((t) => t.id === taskId);
+                  if (task?.previewUrl.startsWith("blob:")) {
+                    URL.revokeObjectURL(task.previewUrl);
+                  }
+                  return prev.filter((t) => t.id !== taskId);
+                });
+              }
+            })
+          );
+        }
+      },
+      [accept, currentCount, maxFiles, maxSizeBytes, multiple, onChange, onUpload]
+    );
+    const handleDragEnter = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounterRef.current += 1;
+      if (!disabled && !isGlobalUploading && !isMaxReached) {
+        setIsDragging(true);
+      }
+    };
+    const handleDragOver = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    const handleDragLeave = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounterRef.current -= 1;
+      if (dragCounterRef.current <= 0) {
+        dragCounterRef.current = 0;
+        setIsDragging(false);
+      }
+    };
+    const handleDrop = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounterRef.current = 0;
+      setIsDragging(false);
+      if (disabled || isGlobalUploading || isMaxReached) return;
+      const droppedFiles = Array.from(e.dataTransfer.files || []);
+      if (droppedFiles.length > 0) {
+        handleFiles(droppedFiles);
+      }
+    };
+    const handleInputChange = (e) => {
+      const selectedFiles = Array.from(e.target.files || []);
+      if (selectedFiles.length > 0) {
+        handleFiles(selectedFiles);
+      }
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    };
+    const handleSingleRemove = (e) => {
+      e.stopPropagation();
+      setLocalError(null);
+      onRemove?.(0, items[0]);
+    };
+    const handleItemRemove = (e, index, item) => {
+      e.stopPropagation();
+      setLocalError(null);
+      if (previewModalIndex === index) {
+        setPreviewModalIndex(null);
+      }
+      onRemove?.(index, item);
+    };
+    const openPreviewModal = (e, index) => {
+      e.stopPropagation();
+      if (enablePreviewModal) {
+        setPreviewModalIndex(index);
+      }
+    };
+    const gridClass = GRID_COLS_MAP[gridCols] || GRID_COLS_MAP[4];
+    return /* @__PURE__ */ jsxs(LayoutGroup, { id: "image-upload-group", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          "data-slot": "image-upload",
+          className: cn("flex flex-col gap-2 w-full font-sans", className),
+          style,
+          ...dataAttributes,
+          ...props,
+          children: [
+            (label || maxFiles || minFiles) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 select-none", children: [
+              label && /* @__PURE__ */ jsxs("label", { className: "text-xs font-semibold text-foreground tracking-wide flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx("span", { children: label }),
+                minFiles && minFiles > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted font-normal", children: [
+                  "(Min ",
+                  minFiles,
+                  ")"
+                ] })
+              ] }),
+              multiple && /* @__PURE__ */ jsxs("span", { className: "text-[11px] font-medium text-muted", children: [
+                items.length,
+                maxFiles ? ` / ${maxFiles}` : "",
+                " uploaded"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                accept,
+                multiple,
+                className: "hidden",
+                disabled: disabled || isGlobalUploading || isMaxReached,
+                onChange: handleInputChange
+              }
+            ),
+            !multiple ? items.length > 0 ? /* @__PURE__ */ jsx(
+              ImageUploadSinglePreview,
+              {
+                item: items[0],
+                aspectRatio,
+                disabled,
+                isUploading: isGlobalUploading,
+                enablePreviewModal,
+                onReplace: () => fileInputRef.current?.click(),
+                onRemove: handleSingleRemove,
+                onPreview: (e) => openPreviewModal(e, 0)
+              }
+            ) : /* @__PURE__ */ jsx(
+              ImageUploadDropzone,
+              {
+                disabled,
+                isUploading: isGlobalUploading,
+                loadingText: defaultLoadingText,
+                isDragging,
+                isError,
+                aspectRatio,
+                mediaType,
+                maxSizeBytes,
+                shouldAnimate,
+                motionClass,
+                onClick: () => !disabled && !isGlobalUploading && fileInputRef.current?.click(),
+                onDragEnter: handleDragEnter,
+                onDragOver: handleDragOver,
+                onDragLeave: handleDragLeave,
+                onDrop: handleDrop
+              }
+            ) : (
+              /* MULTIPLE MODE */
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 w-full", children: [
+                !isMaxReached ? /* @__PURE__ */ jsx(
+                  ImageUploadDropzone,
+                  {
+                    disabled,
+                    isUploading: isGlobalUploading,
+                    loadingText: defaultLoadingText,
+                    isDragging,
+                    isError,
+                    aspectRatio: items.length > 0 ? "auto" : aspectRatio,
+                    size: items.length > 0 ? "compact" : "default",
+                    mediaType,
+                    maxSizeBytes,
+                    maxFiles,
+                    multiple: true,
+                    hasItems: items.length > 0,
+                    shouldAnimate,
+                    motionClass,
+                    onClick: () => !disabled && !isGlobalUploading && fileInputRef.current?.click(),
+                    onDragEnter: handleDragEnter,
+                    onDragOver: handleDragOver,
+                    onDragLeave: handleDragLeave,
+                    onDrop: handleDrop
+                  }
+                ) : /* @__PURE__ */ jsxs("div", { className: "w-full rounded-xl border border-dashed border-grey-300 dark:border-grey-700 bg-grey-50/50 dark:bg-grey-900/30 p-3 text-center text-xs text-muted", children: [
+                  "Maximum upload limit reached (",
+                  maxFiles,
+                  "/",
+                  maxFiles,
+                  " items). Remove an item to add another."
+                ] }),
+                (items.length > 0 || uploadingTasks.length > 0) && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      layout === "scroll" ? "flex gap-3 overflow-x-auto pb-2.5 pt-0.5 scrollbar-thin snap-x snap-mandatory scroll-smooth w-full" : "grid gap-3 w-full",
+                      layout === "grid" && gridClass
+                    ),
+                    children: /* @__PURE__ */ jsxs(AnimatePresence, { initial: false, children: [
+                      items.map((item, index) => /* @__PURE__ */ jsx(
+                        ImageUploadThumbnailCard,
+                        {
+                          item,
+                          index,
+                          layout,
+                          disabled,
+                          enablePreviewModal,
+                          shouldAnimate,
+                          onPreview: (e) => openPreviewModal(e, index),
+                          onRemove: (e) => handleItemRemove(e, index, item)
+                        },
+                        item.key || item.url || index
+                      )),
+                      uploadingTasks.map((task) => /* @__PURE__ */ jsx(
+                        ImageUploadTaskCard,
+                        {
+                          id: task.id,
+                          name: task.name,
+                          previewUrl: task.previewUrl,
+                          isVideo: task.isVideo,
+                          layout,
+                          shouldAnimate
+                        },
+                        task.id
+                      ))
+                    ] })
+                  }
+                )
+              ] })
+            ),
+            (error || minFilesWarning || helperText) && /* @__PURE__ */ jsxs(
+              "p",
+              {
+                className: cn(
+                  "text-xs mt-1 flex items-center gap-1.5 leading-normal",
+                  isError ? "text-destructive font-medium" : minFilesWarning ? "text-amber-600 dark:text-amber-400 font-medium" : "text-muted"
+                ),
+                children: [
+                  (isError || minFilesWarning) && /* @__PURE__ */ jsx(AlertCircle, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx("span", { children: error || minFilesWarning || helperText })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ImageUploadModal,
+        {
+          isOpen: enablePreviewModal && previewModalIndex !== null,
+          activeIndex: previewModalIndex,
+          items,
+          shouldAnimate,
+          onClose: () => setPreviewModalIndex(null),
+          onNavigate: (newIndex) => setPreviewModalIndex(newIndex)
+        }
+      )
+    ] });
+  }
+);
+ImageUpload.displayName = "ImageUpload";
+
+export { ImageUpload };

package/dist/components/ImageUpload/ImageUpload.styles.d.ts

@@ -0,0 +1,17 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const imageUploadZoneVariants: (props?: ({
+    aspectRatio?: "video" | "auto" | "square" | "wide" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
+    isDragging?: boolean | null | undefined;
+    isError?: boolean | null | undefined;
+    isDisabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const imagePreviewContainerVariants: (props?: ({
+    aspectRatio?: "video" | "auto" | "square" | "wide" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const thumbnailCardVariants: (props?: ({
+    aspectRatio?: "video" | "auto" | "square" | "wide" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ImageUploadZoneVariants = VariantProps<typeof imageUploadZoneVariants>;
+export type ImagePreviewContainerVariants = VariantProps<typeof imagePreviewContainerVariants>;
+//# sourceMappingURL=ImageUpload.styles.d.ts.map

package/dist/components/ImageUpload/ImageUpload.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUpload.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ImageUpload/ImageUpload.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,uBAAuB;;;;;;8EAmCnC,CAAC;AAEF,eAAO,MAAM,6BAA6B;;8EAezC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;8EAejC,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC;AACnF,MAAM,MAAM,6BAA6B,GAAG,YAAY,CAAC,OAAO,6BAA6B,CAAC,CAAC"}

package/dist/components/ImageUpload/ImageUpload.styles.js

@@ -0,0 +1,72 @@
+import { cva } from 'class-variance-authority';
+
+const imageUploadZoneVariants = cva(
+  "relative rounded-xl border-2 border-dashed transition-all duration-200 flex flex-col items-center justify-center text-center select-none font-sans outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:border-primary",
+  {
+    variants: {
+      aspectRatio: {
+        square: "size-32 p-2 aspect-square shrink-0",
+        video: "w-full aspect-[16/10] min-h-[160px] p-5",
+        wide: "w-full aspect-[21/9] min-h-[130px] p-5",
+        auto: "w-full min-h-[130px] p-5"
+      },
+      size: {
+        default: "",
+        compact: "py-3 px-2 min-h-[80px]"
+      },
+      isDragging: {
+        true: "border-primary bg-primary-50/40 dark:bg-primary-950/20 scale-[0.99] shadow-sm",
+        false: ""
+      },
+      isError: {
+        true: "border-destructive/80 bg-destructive/5 hover:border-destructive",
+        false: "border-grey-300 dark:border-grey-700 bg-grey-50/60 dark:bg-grey-900/40 hover:border-grey-400 hover:bg-grey-50 dark:hover:bg-grey-900/60"
+      },
+      isDisabled: {
+        true: "opacity-50 cursor-not-allowed pointer-events-none",
+        false: "cursor-pointer"
+      }
+    },
+    defaultVariants: {
+      aspectRatio: "auto",
+      size: "default",
+      isDragging: false,
+      isError: false,
+      isDisabled: false
+    }
+  }
+);
+const imagePreviewContainerVariants = cva(
+  "relative group rounded-xl border border-grey-200 dark:border-grey-800 bg-grey-50 dark:bg-grey-900 overflow-hidden flex items-center justify-center transition-all shadow-xs",
+  {
+    variants: {
+      aspectRatio: {
+        square: "size-32 aspect-square shrink-0",
+        video: "w-full aspect-[16/10]",
+        wide: "w-full aspect-[21/9]",
+        auto: "w-full h-44"
+      }
+    },
+    defaultVariants: {
+      aspectRatio: "auto"
+    }
+  }
+);
+const thumbnailCardVariants = cva(
+  "relative group rounded-xl border border-grey-200 dark:border-grey-800 bg-grey-100 dark:bg-grey-900 overflow-hidden transition-all shadow-xs hover:shadow-md hover:border-grey-300 dark:hover:border-grey-700",
+  {
+    variants: {
+      aspectRatio: {
+        square: "aspect-square",
+        video: "aspect-[16/10]",
+        wide: "aspect-[21/9]",
+        auto: "aspect-square min-h-[110px]"
+      }
+    },
+    defaultVariants: {
+      aspectRatio: "square"
+    }
+  }
+);
+
+export { imagePreviewContainerVariants, imageUploadZoneVariants, thumbnailCardVariants };

package/dist/components/ImageUpload/ImageUpload.types.d.ts

@@ -0,0 +1,112 @@
+import type * as React from 'react';
+import type { MotionProps } from '../../types/motion';
+export type ImageUploadAspectRatio = 'square' | 'video' | 'wide' | 'auto';
+export type ImageUploadMediaType = 'image' | 'video' | 'all';
+export interface ImageUploadItem {
+    url: string;
+    key?: string;
+    id?: string;
+    name?: string;
+    size?: number;
+    type?: 'image' | 'video' | string;
+}
+export type ImageUploadValue = string | ImageUploadItem;
+export interface ImageUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'>, MotionProps {
+    /**
+     * Current media URL(s) to display as preview.
+     * Single string/object for single mode, array for multiple mode.
+     */
+    value?: ImageUploadValue | ImageUploadValue[] | null;
+    /**
+     * Whether multiple media uploads are supported.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Media types accepted by the component.
+     * @default "image"
+     */
+    mediaType?: ImageUploadMediaType;
+    /**
+     * Minimum number of files required (for multiple uploads validation).
+     */
+    minFiles?: number;
+    /**
+     * Maximum number of files allowed (for multiple uploads validation).
+     */
+    maxFiles?: number;
+    /**
+     * Callback fired when files are selected by the user.
+     */
+    onChange?: (files: File[] | File | null) => void;
+    /**
+     * Optional async upload handler.
+     */
+    onUpload?: (file: File) => Promise<{
+        url: string;
+        key?: string;
+        type?: string;
+    } | string>;
+    /**
+     * Callback fired when an item is removed by the user.
+     * In multi mode, receives the index and item being removed.
+     */
+    onRemove?: (index?: number, item?: ImageUploadItem | string) => void;
+    /**
+     * Disable the upload zone and actions.
+     */
+    disabled?: boolean;
+    /**
+     * Manually control the global loading state.
+     */
+    loading?: boolean;
+    /**
+     * Custom loading text displayed during upload.
+     */
+    loadingText?: string;
+    /**
+     * Accepted MIME types or extensions.
+     * Defaults automatically based on `mediaType`.
+     */
+    accept?: string;
+    /**
+     * Maximum allowed file size in bytes per file.
+     * @default 5242880 (5MB) for images, 52428800 (50MB) for videos
+     */
+    maxSizeBytes?: number;
+    /**
+     * Label rendered above the upload dropzone.
+     */
+    label?: string;
+    /**
+     * Subtitle / helper instructions rendered below the dropzone.
+     */
+    helperText?: string;
+    /**
+     * Error message to display.
+     */
+    error?: string;
+    /**
+     * Aspect ratio of the dropzone / preview cards.
+     * @default "auto"
+     */
+    aspectRatio?: ImageUploadAspectRatio;
+    /**
+     * Grid columns for multiple image previews.
+     * @default 4 (responsive 2-4 columns)
+     */
+    gridCols?: 2 | 3 | 4 | 5;
+    /**
+     * Layout mode for multiple image previews.
+     * - 'grid': Responsive multi-column wrap grid (default)
+     * - 'scroll': Sleek horizontal scroll strip with snap points
+     * @default "grid"
+     */
+    layout?: 'grid' | 'scroll';
+    /**
+     * Whether to enable the inline full-screen media lightbox popup.
+     * @default true
+     */
+    enablePreviewModal?: boolean;
+}
+//# sourceMappingURL=ImageUpload.types.d.ts.map

package/dist/components/ImageUpload/ImageUpload.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUpload.types.d.ts","sourceRoot":"","sources":["../../../src/components/ImageUpload/ImageUpload.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,MAAM,sBAAsB,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1E,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;AAE7D,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;CACnC;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,eAAe,CAAC;AAExD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EACtE,WAAW;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,GAAG,IAAI,CAAC;IAErD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAC;IAEjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAEjD;;OAEG;IACH,QAAQ,CAAC,EAAE,CACT,IAAI,EAAE,IAAI,KACP,OAAO,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,MAAM,CAAC,CAAC;IAEpE;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,eAAe,GAAG,MAAM,KAAK,IAAI,CAAC;IAErE;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,WAAW,CAAC,EAAE,sBAAsB,CAAC;IAErC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAEzB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAE3B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B"}

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

@@ -0,0 +1,6 @@
+export * from './ImageUpload';
+export * from './ImageUpload.types';
+export * from './ImageUpload.styles';
+export * from './ImageUpload.helpers';
+export * from './subcomponents';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ImageUpload/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ImageUpload/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC"}

package/dist/components/ImageUpload/subcomponents/ImageUploadDropzone.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { ImageUploadAspectRatio, ImageUploadMediaType } from '../ImageUpload.types';
+export interface ImageUploadDropzoneProps {
+    disabled?: boolean;
+    isUploading?: boolean;
+    loadingText?: string;
+    isDragging: boolean;
+    isError: boolean;
+    aspectRatio: ImageUploadAspectRatio;
+    size?: 'default' | 'compact';
+    mediaType: ImageUploadMediaType;
+    maxSizeBytes: number;
+    maxFiles?: number;
+    multiple?: boolean;
+    hasItems?: boolean;
+    shouldAnimate?: boolean;
+    motionClass?: string;
+    onClick: () => void;
+    onDragEnter: (e: React.DragEvent) => void;
+    onDragOver: (e: React.DragEvent) => void;
+    onDragLeave: (e: React.DragEvent) => void;
+    onDrop: (e: React.DragEvent) => void;
+}
+export declare const ImageUploadDropzone: React.FC<ImageUploadDropzoneProps>;
+//# sourceMappingURL=ImageUploadDropzone.d.ts.map

package/dist/components/ImageUpload/subcomponents/ImageUploadDropzone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploadDropzone.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageUpload/subcomponents/ImageUploadDropzone.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EACV,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,sBAAsB,CAAC;AAE9B,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,sBAAsB,CAAC;IACpC,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B,SAAS,EAAE,oBAAoB,CAAC;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IAC1C,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACzC,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAqIlE,CAAC"}