@timmbr/ui 1.0.0-beta → 1.2.0

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"}

package/dist/components/ImageUpload/subcomponents/ImageUploadDropzone.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '@timmbr/utils';
+import { Plus } from '@timmbr/icons';
+import { imageUploadZoneVariants } from '../ImageUpload.styles.js';
+import { UploadCloudIcon, ImageIcon, FilmIcon } from './ImageUploadIcons.js';
+import { Spinner } from '../../Spinner/Spinner.js';
+
+const ImageUploadDropzone = ({
+  disabled,
+  isUploading,
+  loadingText,
+  isDragging,
+  isError,
+  aspectRatio,
+  size = "default",
+  mediaType,
+  maxSizeBytes,
+  maxFiles,
+  multiple: _multiple = false,
+  hasItems = false,
+  shouldAnimate = true,
+  motionClass,
+  onClick,
+  onDragEnter,
+  onDragOver,
+  onDragLeave,
+  onDrop
+}) => {
+  const maxMb = Math.round(maxSizeBytes / (1024 * 1024));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      onClick,
+      onKeyDown: (e) => {
+        if ((e.key === "Enter" || e.key === " ") && !disabled && !isUploading) {
+          onClick();
+        }
+      },
+      onDragEnter,
+      onDragOver,
+      onDragLeave,
+      onDrop,
+      style: aspectRatio === "square" ? {
+        width: "120px",
+        height: "120px",
+        minWidth: "120px",
+        minHeight: "120px",
+        maxWidth: "120px",
+        maxHeight: "120px"
+      } : void 0,
+      className: cn(
+        imageUploadZoneVariants({
+          aspectRatio,
+          size,
+          isDragging,
+          isError,
+          isDisabled: disabled
+        }),
+        !shouldAnimate && "transition-none",
+        motionClass
+      ),
+      children: isUploading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2", children: [
+        /* @__PURE__ */ jsx(Spinner, { size: "md" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: loadingText })
+      ] }) : size === "compact" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-1.5 text-center pointer-events-none", children: [
+        /* @__PURE__ */ jsx("div", { className: "size-8 rounded-lg bg-white dark:bg-grey-800 border border-grey-200 dark:border-grey-700 shadow-xs flex items-center justify-center text-primary", children: isDragging ? /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-4 text-primary animate-bounce" }) : /* @__PURE__ */ jsx(Plus, { className: "size-4 text-primary" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-foreground", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-primary underline font-semibold", children: hasItems ? "Add more files" : "Click to upload" }),
+            " ",
+            "or drag & drop"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted", children: [
+            mediaType === "video" ? `MP4, WEBM, MOV (Max ${maxMb}MB)` : mediaType === "all" ? `Images & Videos (Max ${maxMb}MB each)` : `PNG, JPG, WEBP (Max ${maxMb}MB each)`,
+            maxFiles && ` • Up to ${maxFiles} items`
+          ] })
+        ] })
+      ] }) : aspectRatio === "square" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-1.5 text-center pointer-events-none p-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "size-8 rounded-lg bg-white dark:bg-grey-800 border border-grey-200 dark:border-grey-700 shadow-xs flex items-center justify-center text-primary", children: isDragging ? /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-4 text-primary animate-bounce" }) : /* @__PURE__ */ jsx(ImageIcon, { className: "size-4 text-primary" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-primary underline", children: "Upload" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted", children: [
+            "Max ",
+            maxMb,
+            "MB"
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 text-center pointer-events-none", children: [
+        /* @__PURE__ */ jsx("div", { className: "size-10 rounded-xl bg-white dark:bg-grey-800 border border-grey-200 dark:border-grey-700 shadow-xs flex items-center justify-center text-primary", children: isDragging ? /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-5 text-primary animate-bounce" }) : mediaType === "video" ? /* @__PURE__ */ jsx(FilmIcon, { className: "size-5 text-primary" }) : /* @__PURE__ */ jsx(ImageIcon, { className: "size-5 text-primary" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-foreground", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-primary underline font-semibold", children: "Click to upload" }),
+            " or drag and drop"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted", children: mediaType === "video" ? `MP4, WEBM, MOV (Max ${maxMb}MB)` : mediaType === "all" ? `PNG, JPG, WEBP, MP4 (Max ${maxMb}MB)` : `PNG, JPG, or WEBP (Max ${maxMb}MB)` })
+        ] })
+      ] })
+    }
+  );
+};
+ImageUploadDropzone.displayName = "ImageUploadDropzone";
+
+export { ImageUploadDropzone };

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare const UploadCloudIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+export declare const ImageIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+export declare const PlayIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+export declare const FilmIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+//# sourceMappingURL=ImageUploadIcons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploadIcons.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageUpload/subcomponents/ImageUploadIcons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAcnE,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAc7D,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAI5D,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAmB5D,CAAC"}

package/dist/components/ImageUpload/subcomponents/ImageUploadIcons.js

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const UploadCloudIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 12v9" }),
+      /* @__PURE__ */ jsx("path", { d: "m16 16-4-4-4 4" })
+    ]
+  }
+);
+const ImageIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+      /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+    ]
+  }
+);
+const PlayIcon = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", stroke: "none", ...props, children: /* @__PURE__ */ jsx("polygon", { points: "6 3 20 12 6 21 6 3" }) });
+const FilmIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("rect", { width: "20", height: "20", x: "2", y: "2", rx: "2.18", ry: "2.18" }),
+      /* @__PURE__ */ jsx("line", { x1: "7", x2: "7", y1: "2", y2: "22" }),
+      /* @__PURE__ */ jsx("line", { x1: "17", x2: "17", y1: "2", y2: "22" }),
+      /* @__PURE__ */ jsx("line", { x1: "2", x2: "22", y1: "12", y2: "12" }),
+      /* @__PURE__ */ jsx("line", { x1: "2", x2: "7", y1: "7", y2: "7" }),
+      /* @__PURE__ */ jsx("line", { x1: "2", x2: "7", y1: "17", y2: "17" }),
+      /* @__PURE__ */ jsx("line", { x1: "17", x2: "22", y1: "17", y2: "17" }),
+      /* @__PURE__ */ jsx("line", { x1: "17", x2: "22", y1: "7", y2: "7" })
+    ]
+  }
+);
+
+export { FilmIcon, ImageIcon, PlayIcon, UploadCloudIcon };

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { ImageUploadItem } from '../ImageUpload.types';
+export interface ImageUploadModalProps {
+    isOpen: boolean;
+    activeIndex: number | null;
+    items: ImageUploadItem[];
+    shouldAnimate?: boolean;
+    onClose: () => void;
+    onNavigate: (newIndex: number) => void;
+}
+export declare const ImageUploadModal: React.FC<ImageUploadModalProps>;
+//# sourceMappingURL=ImageUploadModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploadModal.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageUpload/subcomponents/ImageUploadModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAyI5D,CAAC"}

package/dist/components/ImageUpload/subcomponents/ImageUploadModal.js

@@ -0,0 +1,137 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { X, ChevronLeft, ChevronRight } from '@timmbr/icons';
+import { AnimatePresence, motion, getTransition } from '@timmbr/motion';
+import { isVideoMedia } from '../ImageUpload.helpers.js';
+
+const ImageUploadModal = ({
+  isOpen,
+  activeIndex,
+  items,
+  shouldAnimate = true,
+  onClose,
+  onNavigate
+}) => {
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const activeItem = activeIndex !== null && items[activeIndex] ? items[activeIndex] : null;
+  React.useEffect(() => {
+    if (!isOpen || activeIndex === null) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      } else if (e.key === "ArrowLeft" && items.length > 1) {
+        onNavigate(activeIndex > 0 ? activeIndex - 1 : items.length - 1);
+      } else if (e.key === "ArrowRight" && items.length > 1) {
+        onNavigate(activeIndex < items.length - 1 ? activeIndex + 1 : 0);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [activeIndex, isOpen, items.length, onClose, onNavigate]);
+  if (!mounted) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && activeItem && activeIndex !== null && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: shouldAnimate ? { opacity: 0 } : false,
+        animate: shouldAnimate ? { opacity: 1 } : void 0,
+        exit: shouldAnimate ? { opacity: 0 } : void 0,
+        transition: getTransition("fast"),
+        className: "fixed inset-0 z-[100] flex flex-col items-center justify-center p-4 sm:p-6 bg-black/60 backdrop-blur-xs",
+        onClick: onClose,
+        children: /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: shouldAnimate ? { scale: 0.95, opacity: 0 } : false,
+            animate: shouldAnimate ? { scale: 1, opacity: 1 } : void 0,
+            exit: shouldAnimate ? { scale: 0.95, opacity: 0 } : void 0,
+            transition: getTransition("spring"),
+            className: "relative max-w-2xl max-h-[85vh] w-full bg-white dark:bg-grey-950 border border-grey-200 dark:border-grey-800 rounded-2xl overflow-hidden shadow-2xl flex flex-col",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-3 border-b border-grey-200 dark:border-grey-800 bg-grey-50/80 dark:bg-grey-900/80 backdrop-blur-xs select-none", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-foreground tracking-wide truncate max-w-xs sm:max-w-md", children: activeItem.name || `Media Item #${activeIndex + 1}` }),
+                  activeIndex === 0 && /* @__PURE__ */ jsx("span", { className: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border border-emerald-500/20 text-[10px] font-semibold px-2 py-0.5 rounded-full", children: "Cover" }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted", children: [
+                    "(",
+                    activeIndex + 1,
+                    " of ",
+                    items.length,
+                    ")"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    className: "size-7 rounded-full bg-grey-200/70 hover:bg-grey-300 dark:bg-grey-800 dark:hover:bg-grey-700 text-foreground flex items-center justify-center transition-colors cursor-pointer",
+                    title: "Close preview (Esc)",
+                    children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "relative flex-1 flex items-center justify-center p-4 min-h-[260px] max-h-[70vh] bg-grey-100/50 dark:bg-black/50 overflow-hidden", children: [
+                isVideoMedia(activeItem) ? /* @__PURE__ */ jsx(
+                  "video",
+                  {
+                    src: activeItem.url,
+                    controls: true,
+                    autoPlay: true,
+                    playsInline: true,
+                    className: "max-w-full max-h-[65vh] rounded-lg shadow-md"
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: activeItem.url,
+                    alt: activeItem.name || "Preview full size",
+                    className: "max-w-full max-h-[65vh] object-contain rounded-lg shadow-md select-none"
+                  }
+                ),
+                items.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onNavigate(activeIndex > 0 ? activeIndex - 1 : items.length - 1);
+                      },
+                      className: "absolute left-3 top-1/2 -translate-y-1/2 size-9 rounded-full bg-white/90 hover:bg-white dark:bg-grey-800/90 dark:hover:bg-grey-800 border border-grey-200 dark:border-grey-700 text-foreground flex items-center justify-center transition-all backdrop-blur-xs cursor-pointer shadow-md",
+                      title: "Previous (Left Arrow)",
+                      children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onNavigate(activeIndex < items.length - 1 ? activeIndex + 1 : 0);
+                      },
+                      className: "absolute right-3 top-1/2 -translate-y-1/2 size-9 rounded-full bg-white/90 hover:bg-white dark:bg-grey-800/90 dark:hover:bg-grey-800 border border-grey-200 dark:border-grey-700 text-foreground flex items-center justify-center transition-all backdrop-blur-xs cursor-pointer shadow-md",
+                      title: "Next (Right Arrow)",
+                      children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        )
+      }
+    ) }),
+    document.body
+  );
+};
+ImageUploadModal.displayName = "ImageUploadModal";
+
+export { ImageUploadModal };

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { ImageUploadItem, ImageUploadAspectRatio } from '../ImageUpload.types';
+export interface ImageUploadSinglePreviewProps {
+    item: ImageUploadItem;
+    aspectRatio: ImageUploadAspectRatio;
+    disabled?: boolean;
+    isUploading?: boolean;
+    enablePreviewModal?: boolean;
+    onReplace: () => void;
+    onRemove: (e: React.MouseEvent) => void;
+    onPreview: (e: React.MouseEvent) => void;
+}
+export declare const ImageUploadSinglePreview: React.FC<ImageUploadSinglePreviewProps>;
+//# sourceMappingURL=ImageUploadSinglePreview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploadSinglePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageUpload/subcomponents/ImageUploadSinglePreview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EACV,eAAe,EACf,sBAAsB,EACvB,MAAM,sBAAsB,CAAC;AAE9B,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,eAAe,CAAC;IACtB,WAAW,EAAE,sBAAsB,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAqI5E,CAAC"}