@timmbr/ui 1.0.0-beta → 1.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,oFAEjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,oFAEjC,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,eAAO,MAAM,mBAAmB,oFAE/B,CAAC;AAEF,eAAO,MAAM,yBAAyB,oFAErC,CAAC"}
+{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,oFAEjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,oFAEjC,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,eAAO,MAAM,kBAAkB,oFAE9B,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,eAAO,MAAM,mBAAmB,oFAE/B,CAAC;AAEF,eAAO,MAAM,yBAAyB,oFAErC,CAAC"}

package/dist/components/Dialog/Dialog.styles.js

@@ -4,13 +4,16 @@ const dialogOverlayVariants = cva(
   "fixed inset-0 z-50 bg-black/60 backdrop-blur-xs transition-opacity duration-200 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out"
 );
 const dialogContentVariants = cva(
-  "relative pointer-events-auto grid w-full max-w-lg gap-4 rounded-xl border border-grey-200 dark:border-grey-800 bg-white dark:bg-grey-900 p-6 shadow-xl font-sans text-foreground data-[state=open]:animate-dialog-scale-in data-[state=closed]:animate-dialog-scale-out"
+  "relative pointer-events-auto flex flex-col w-full max-w-lg max-h-[calc(100vh-2rem)] sm:max-h-[calc(100vh-4rem)] rounded-xl border border-grey-200 dark:border-grey-800 bg-white dark:bg-grey-900 shadow-xl font-sans text-foreground overflow-hidden data-[state=open]:animate-dialog-scale-in data-[state=closed]:animate-dialog-scale-out"
 );
 const dialogHeaderVariants = cva(
-  "flex flex-col space-y-1.5 text-left"
+  "flex flex-col space-y-1.5 text-left p-6 pb-4 border-b border-grey-100 dark:border-grey-800/60 shrink-0 bg-white dark:bg-grey-900 pr-12"
+);
+const dialogBodyVariants = cva(
+  "flex-1 overflow-y-auto p-6 min-h-0"
 );
 const dialogFooterVariants = cva(
-  "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-2 mt-4"
+  "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-2 p-6 pt-4 border-t border-grey-100 dark:border-grey-800/60 shrink-0 bg-white dark:bg-grey-900"
 );
 const dialogTitleVariants = cva(
   "text-xl font-display font-semibold leading-none tracking-tight text-foreground"
@@ -19,4 +22,4 @@ const dialogDescriptionVariants = cva(
   "text-sm text-muted-foreground font-sans leading-relaxed"
 );
 
-export { dialogContentVariants, dialogDescriptionVariants, dialogFooterVariants, dialogHeaderVariants, dialogOverlayVariants, dialogTitleVariants };
+export { dialogBodyVariants, dialogContentVariants, dialogDescriptionVariants, dialogFooterVariants, dialogHeaderVariants, dialogOverlayVariants, dialogTitleVariants };

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

@@ -1,16 +1,14 @@
 import type * as React from 'react';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import type { MotionProp } from '../../types/motion';
-export interface DialogProps extends DialogPrimitive.DialogProps {
-}
+export type DialogProps = DialogPrimitive.DialogProps;
 export interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
     /**
      * Motion transition control.
      */
     motion?: MotionProp;
 }
-export interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-}
-export interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
-}
+export type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+export type DialogBodyProps = React.HTMLAttributes<HTMLDivElement>;
+export type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
 //# sourceMappingURL=Dialog.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,WAAY,SAAQ,eAAe,CAAC,WAAW;CAAG;AAEnE,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC;IACtE;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAClF,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG"}
+{"version":3,"file":"Dialog.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,WAAW,CAAC;AAEtD,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC;IACtE;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AACrE,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AACnE,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC"}

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

@@ -3,7 +3,7 @@ export declare const dividerVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
     variant?: "dashed" | "dotted" | "solid" | null | undefined;
     thickness?: "default" | "thick" | "thin" | null | undefined;
-    color?: "default" | "primary" | "brand" | "muted" | null | undefined;
+    color?: "default" | "primary" | "muted" | "brand" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type DividerVariants = VariantProps<typeof dividerVariants>;
 //# sourceMappingURL=Divider.styles.d.ts.map

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

@@ -2,16 +2,13 @@ import type * as React from 'react';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import type { DrawerContentVariants } from './Drawer.styles';
 import type { MotionProp } from '../../types/motion';
-export interface DrawerProps extends DialogPrimitive.DialogProps {
-}
+export type DrawerProps = DialogPrimitive.DialogProps;
 export interface DrawerContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, DrawerContentVariants {
     /**
      * Motion transition control.
      */
     motion?: MotionProp;
 }
-export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-}
-export interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {
-}
+export type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+export type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;
 //# sourceMappingURL=Drawer.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.types.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,WAAY,SAAQ,eAAe,CAAC,WAAW;CAAG;AAEnE,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EACpE,qBAAqB;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAClF,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG"}
+{"version":3,"file":"Drawer.types.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,WAAW,CAAC;AAEtD,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EACpE,qBAAqB;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AACrE,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC"}

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

@@ -1,8 +1,7 @@
 import type * as React from 'react';
 import type * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import type { MotionProp } from '../../types/motion';
-export interface DropdownMenuProps extends DropdownMenuPrimitive.DropdownMenuProps {
-}
+export type DropdownMenuProps = DropdownMenuPrimitive.DropdownMenuProps;
 export interface DropdownMenuContentProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
     /**
      * Motion transition control.

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,qBAAqB,MAAM,+BAA+B,CAAC;AAC5E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,iBAAkB,SAAQ,qBAAqB,CAAC,iBAAiB;CAAG;AAErF,MAAM,WAAW,wBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,qBAAqB,CAAC,OAAO,CAAC;IAC5E;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC;IACzE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB"}
+{"version":3,"file":"Dropdown.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,qBAAqB,MAAM,+BAA+B,CAAC;AAC5E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,iBAAiB,CAAC;AAExE,MAAM,WAAW,wBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,qBAAqB,CAAC,OAAO,CAAC;IAC5E;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC;IACzE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB"}

package/dist/components/FormField/FormField.js

@@ -39,12 +39,12 @@ const FormField = React.forwardRef(
             {
               id: `${id}-desc`,
               className: cn(
-                "text-xs mt-0.5 flex items-center gap-1.5",
+                "text-xs mt-1 flex items-center gap-1.5",
                 isError ? "text-destructive font-medium" : "text-muted"
               ),
               children: [
                 isError ? /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Info, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx("span", { children: errorMessage || helperText })
+                /* @__PURE__ */ jsx("span", { className: "leading-normal", children: errorMessage || helperText })
               ]
             }
           )

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

@@ -2,8 +2,8 @@ import { type VariantProps } from 'class-variance-authority';
 export declare const headingVariants: (props?: ({
     level?: 1 | 2 | 3 | 4 | 5 | 6 | null | undefined;
     font?: "title" | "display" | null | undefined;
-    foreground?: "default" | "inherit" | "white" | "subtle" | "primary" | "secondary" | "destructive" | "muted" | null | undefined;
-    weight?: "bold" | "light" | "normal" | "medium" | "semibold" | null | undefined;
+    foreground?: "default" | "destructive" | "inherit" | "white" | "subtle" | "primary" | "secondary" | "muted" | null | undefined;
+    weight?: "bold" | "normal" | "medium" | "light" | "semibold" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type HeadingVariants = VariantProps<typeof headingVariants>;
 //# sourceMappingURL=Heading.styles.d.ts.map

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

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const iconVariants: (props?: ({
     size?: "sm" | "lg" | "md" | "xl" | "xs" | null | undefined;
-    foreground?: "default" | "inherit" | "white" | "subtle" | "primary" | "secondary" | "destructive" | "muted" | null | undefined;
+    foreground?: "default" | "destructive" | "inherit" | "white" | "subtle" | "primary" | "secondary" | "muted" | null | undefined;
     clickable?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type IconVariants = VariantProps<typeof iconVariants>;

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { ImageUploadProps } from './ImageUpload.types';
+export declare const ImageUpload: React.ForwardRefExoticComponent<ImageUploadProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ImageUpload.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUpload.d.ts","sourceRoot":"","sources":["../../../src/components/ImageUpload/ImageUpload.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAwB/B,OAAO,KAAK,EACV,gBAAgB,EAEjB,MAAM,qBAAqB,CAAC;AAS7B,eAAO,MAAM,WAAW,yFAoZvB,CAAC"}

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

@@ -0,0 +1,30 @@
+import type { ImageUploadItem, ImageUploadValue } from './ImageUpload.types';
+export declare const DEFAULT_IMAGE_ACCEPT = "image/png, image/jpeg, image/webp, image/gif";
+export declare const DEFAULT_VIDEO_ACCEPT = "video/mp4, video/webm, video/quicktime, video/ogg";
+export declare const DEFAULT_ALL_ACCEPT = "image/png, image/jpeg, image/webp, image/gif, video/mp4, video/webm, video/quicktime, video/ogg";
+export declare const DEFAULT_IMAGE_MAX_SIZE: number;
+export declare const DEFAULT_VIDEO_MAX_SIZE: number;
+export declare const VIDEO_EXTENSIONS: RegExp;
+export declare const GRID_COLS_MAP: Record<number, string>;
+/**
+ * Checks whether an item, URL, or filename corresponds to a video file.
+ */
+export declare function isVideoMedia(item?: ImageUploadItem | string | null): boolean;
+/**
+ * Normalizes single or array value props into an array of ImageUploadItem.
+ */
+export declare function normalizeUploadItems(value?: ImageUploadValue | ImageUploadValue[] | null): ImageUploadItem[];
+/**
+ * Validates files against acceptance criteria (MIME/ext, max files, and size).
+ */
+export declare function validateUploadFiles({ files, accept, maxSizeBytes, maxFiles, currentCount, }: {
+    files: File[];
+    accept: string;
+    maxSizeBytes: number;
+    maxFiles?: number;
+    currentCount: number;
+}): {
+    validFiles: File[];
+    errorMessage: string | null;
+};
+//# sourceMappingURL=ImageUpload.helpers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUpload.helpers.d.ts","sourceRoot":"","sources":["../../../src/components/ImageUpload/ImageUpload.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,gBAAgB,EACjB,MAAM,qBAAqB,CAAC;AAE7B,eAAO,MAAM,oBAAoB,iDAAiD,CAAC;AACnF,eAAO,MAAM,oBAAoB,sDAAsD,CAAC;AACxF,eAAO,MAAM,kBAAkB,oGAAqD,CAAC;AAErF,eAAO,MAAM,sBAAsB,QAAkB,CAAC;AACtD,eAAO,MAAM,sBAAsB,QAAmB,CAAC;AAEvD,eAAO,MAAM,gBAAgB,QAA2C,CAAC;AAEzE,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAKhD,CAAC;AAEF;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,CAAC,EAAE,eAAe,GAAG,MAAM,GAAG,IAAI,GAAG,OAAO,CAS5E;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,CAAC,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,GAAG,IAAI,GACnD,eAAe,EAAE,CAenB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,YAAY,GACb,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;CACtB,GAAG;IAAE,UAAU,EAAE,IAAI,EAAE,CAAC;IAAC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CA0DtD"}

package/dist/components/ImageUpload/ImageUpload.helpers.js

@@ -0,0 +1,95 @@
+const DEFAULT_IMAGE_ACCEPT = "image/png, image/jpeg, image/webp, image/gif";
+const DEFAULT_VIDEO_ACCEPT = "video/mp4, video/webm, video/quicktime, video/ogg";
+const DEFAULT_ALL_ACCEPT = `${DEFAULT_IMAGE_ACCEPT}, ${DEFAULT_VIDEO_ACCEPT}`;
+const DEFAULT_IMAGE_MAX_SIZE = 5 * 1024 * 1024;
+const DEFAULT_VIDEO_MAX_SIZE = 50 * 1024 * 1024;
+const VIDEO_EXTENSIONS = /\.(mp4|webm|mov|m4v|ogg|ogv|avi|mkv)$/i;
+const GRID_COLS_MAP = {
+  2: "grid-cols-2",
+  3: "grid-cols-2 sm:grid-cols-3",
+  4: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4",
+  5: "grid-cols-2 sm:grid-cols-3 md:grid-cols-5"
+};
+function isVideoMedia(item) {
+  if (!item) return false;
+  if (typeof item === "string") {
+    return VIDEO_EXTENSIONS.test(item) || item.startsWith("data:video/");
+  }
+  if (item.type === "video" || item.type && item.type.startsWith("video/")) {
+    return true;
+  }
+  return VIDEO_EXTENSIONS.test(item.url || "") || VIDEO_EXTENSIONS.test(item.name || "");
+}
+function normalizeUploadItems(value) {
+  if (!value) return [];
+  const rawArray = Array.isArray(value) ? value : [value];
+  return rawArray.map((v) => {
+    if (typeof v === "string") {
+      return {
+        url: v,
+        type: isVideoMedia(v) ? "video" : "image"
+      };
+    }
+    return {
+      ...v,
+      type: v.type || (isVideoMedia(v) ? "video" : "image")
+    };
+  });
+}
+function validateUploadFiles({
+  files,
+  accept,
+  maxSizeBytes,
+  maxFiles,
+  currentCount
+}) {
+  if (files.length === 0) {
+    return { validFiles: [], errorMessage: null };
+  }
+  if (maxFiles) {
+    const availableSlots = Math.max(0, maxFiles - currentCount);
+    if (availableSlots <= 0) {
+      return {
+        validFiles: [],
+        errorMessage: `Maximum limit of ${maxFiles} item${maxFiles > 1 ? "s" : ""} already reached.`
+      };
+    }
+    if (files.length > availableSlots) {
+      return {
+        validFiles: [],
+        errorMessage: `You can only upload up to ${maxFiles} items. Selected ${files.length} files (${availableSlots} slot${availableSlots > 1 ? "s" : ""} available).`
+      };
+    }
+  }
+  const acceptedTypes = accept.split(",").map((t) => t.trim().toLowerCase());
+  const validFiles = [];
+  for (const file of files) {
+    const fileExt = `.${file.name.split(".").pop()?.toLowerCase()}`;
+    const isValidType = acceptedTypes.some((type) => {
+      if (type.startsWith(".")) {
+        return fileExt === type;
+      }
+      if (type.endsWith("/*")) {
+        return file.type.startsWith(type.replace("/*", ""));
+      }
+      return file.type.toLowerCase() === type;
+    });
+    if (!isValidType) {
+      return {
+        validFiles: [],
+        errorMessage: `File "${file.name}" has an unsupported format. Accepted: ${accept}.`
+      };
+    }
+    if (file.size > maxSizeBytes) {
+      const maxMb = Math.round(maxSizeBytes / (1024 * 1024));
+      return {
+        validFiles: [],
+        errorMessage: `File "${file.name}" exceeds the ${maxMb}MB size limit.`
+      };
+    }
+    validFiles.push(file);
+  }
+  return { validFiles, errorMessage: null };
+}
+
+export { DEFAULT_ALL_ACCEPT, DEFAULT_IMAGE_ACCEPT, DEFAULT_IMAGE_MAX_SIZE, DEFAULT_VIDEO_ACCEPT, DEFAULT_VIDEO_MAX_SIZE, GRID_COLS_MAP, VIDEO_EXTENSIONS, isVideoMedia, normalizeUploadItems, validateUploadFiles };

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