@photoroom/ui 0.1.580 → 0.1.581

package/components/input/DropZone/DropZone.d.ts

@@ -1,12 +1,34 @@
 import { ReactNode } from "react";
+import type { FolderGroup } from "../../unsorted/FileUploader";
 export type DropZoneProps = Readonly<({
     density?: "compact";
     ctaLabel?: never;
+    allowFolders?: never;
+    folderCtaLabel?: never;
 } | {
     density: "regular";
     ctaLabel: string;
+    allowFolders?: false;
+    folderCtaLabel?: never;
+}
+/**
+ * Folder mode: a second CTA opens the OS folder picker and dropped directories
+ * are traversed. Regular density only — compact has no CTA to sit beside — and
+ * it owns its content, so `children` is unavailable.
+ */
+ | {
+    density: "regular";
+    ctaLabel: string;
+    allowFolders: true;
+    folderCtaLabel: string;
+    children?: never;
 }) & {
-    onFileChange: (files: FileList) => void;
+    /**
+     * Receives the picked or dropped files. `isFolder` marks a directory import
+     * and `folders` carries its top-level subfolder groups — both undefined
+     * unless `allowFolders` is set.
+     */
+    onFileChange: (files: FileList, isShiftPressed?: boolean, isFolder?: boolean, folders?: FolderGroup[]) => void;
     onClick?: () => void;
     /** Side-effect hook fired right before the picker opens; does not replace it. Ignored when `onClick` is set. */
     onOpenFilePicker?: () => void;
@@ -18,5 +40,5 @@ export type DropZoneProps = Readonly<({
     testId?: string;
     autoFocus?: boolean;
 }>;
-export declare const DropZone: ({ onFileChange, onClick, onOpenFilePicker, multiple, children, title, dropTitle, density, ctaLabel, className, testId, autoFocus, }: DropZoneProps) => import("react").JSX.Element;
+export declare const DropZone: ({ onFileChange, onClick, onOpenFilePicker, multiple, children, title, dropTitle, density, ctaLabel, allowFolders, folderCtaLabel, className, testId, autoFocus, }: DropZoneProps) => import("react").JSX.Element;
 //# sourceMappingURL=DropZone.d.ts.map

package/components/input/DropZone/DropZone.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropZone.d.ts","sourceRoot":"","sources":["../../../../src/components/input/DropZone/DropZone.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAM/C,MAAM,MAAM,aAAa,GAAG,QAAQ,CAClC,CAAC;IAAE,OAAO,CAAC,EAAE,SAAS,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,OAAO,EAAE,SAAS,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC,GAAG;IACvF,YAAY,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gHAAgH;IAChH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CACF,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,qIAatB,aAAa,gCA8Ff,CAAC"}
+{"version":3,"file":"DropZone.d.ts","sourceRoot":"","sources":["../../../../src/components/input/DropZone/DropZone.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAI/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAG/D,MAAM,MAAM,aAAa,GAAG,QAAQ,CAClC,CACI;IAAE,OAAO,CAAC,EAAE,SAAS,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAAC,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,cAAc,CAAC,EAAE,KAAK,CAAA;CAAE,GACvF;IAAE,OAAO,EAAE,SAAS,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,cAAc,CAAC,EAAE,KAAK,CAAA;CAAE;AACxF;;;;GAIG;GACD;IACE,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,IAAI,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CACJ,GAAG;IACF;;;;OAIG;IACH,YAAY,EAAE,CACZ,KAAK,EAAE,QAAQ,EACf,cAAc,CAAC,EAAE,OAAO,EACxB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,WAAW,EAAE,KACpB,IAAI,CAAC;IACV,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gHAAgH;IAChH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CACF,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,mKAetB,aAAa,gCA8If,CAAC"}

package/index.mjs

@@ -48228,69 +48228,108 @@ var l3 = (e) => e.isFile === !0, u3 = (e) => e.isDirectory === !0, Mge = new Int
 		waitForFiles: p,
 		waitForFile: m
 	};
-}, Fge = ({ onFileChange: e, onClick: t, onOpenFilePicker: n, multiple: r, children: i, title: a, dropTitle: o, density: s = "compact", ctaLabel: c, className: l, testId: u, autoFocus: d }) => {
-	let { isDragging: f, inputRef: p, openFilePicker: m, handleChange: h, handleDragEnter: g, handleDragLeave: _, handleDragOver: v, handleDrop: y } = m3({ onFileChange: e }), b = B(() => {
+}, Fge = ({ onFileChange: e, onClick: t, onOpenFilePicker: n, multiple: r, children: i, title: a, dropTitle: o, density: s = "compact", ctaLabel: c, allowFolders: l, folderCtaLabel: u, className: d, testId: f, autoFocus: p }) => {
+	let { isDragging: m, inputRef: h, folderInputRef: g, openFilePicker: _, openFolderPicker: v, handleChange: y, handleFolderChange: b, handleDragEnter: x, handleDragLeave: S, handleDragOver: C, handleDrop: w } = m3({
+		onFileChange: e,
+		allowFolders: l
+	}), T = B(() => {
 		if (typeof t == "function") {
 			t();
 			return;
 		}
-		n?.(), m();
+		n?.(), _();
 	}, [
 		t,
 		n,
-		m
-	]);
+		_
+	]), E = B(() => {
+		n?.(), v();
+	}, [n, v]);
 	return /* @__PURE__ */ L("div", {
-		className: U("interaction-transition", "relative", l),
-		"data-testid": u,
-		children: [/* @__PURE__ */ I(a3, {
-			showOverlay: f,
-			onDragEnter: g,
-			onDragLeave: _,
-			onDragOver: v,
-			onDrop: y,
-			overlay: /* @__PURE__ */ I("div", {
-				className: "absolute inset-0 flex bg-white",
-				children: /* @__PURE__ */ I("div", {
-					className: H("interaction-transition", "rounded-500 border-content-accent border", "flex flex-1 flex-col items-center justify-center p-6", "component-500 bg-background-accent-subdued text-content-accent"),
-					children: o
-				})
-			}),
-			children: /* @__PURE__ */ I("button", {
-				type: "button",
-				onClick: b,
-				autoFocus: d,
-				className: H("interaction-transition", "group/dropzone", "rounded-500", "border-neutral-alpha-400 border border-dashed", "w-full appearance-none select-none", "hover:bg-background-borderless-subdued-hover focus-visible:bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring outline-hidden", "disabled:pointer-events-none disabled:opacity-30"),
-				children: i || (s === "compact" ? /* @__PURE__ */ L("div", {
-					className: "flex items-center justify-center gap-2 p-6",
-					children: [/* @__PURE__ */ I(me, { className: "text-content-tertiary size-5 shrink-0" }), /* @__PURE__ */ I("span", {
-						className: "component-500 text-content-secondary text-start",
-						children: a
-					})]
-				}) : /* @__PURE__ */ I("div", {
-					className: "flex items-center justify-center px-4 py-10",
+		className: U("interaction-transition", "relative", d),
+		"data-testid": f,
+		children: [
+			/* @__PURE__ */ I(a3, {
+				showOverlay: m,
+				onDragEnter: x,
+				onDragLeave: S,
+				onDragOver: C,
+				onDrop: w,
+				overlay: /* @__PURE__ */ I("div", {
+					className: "absolute inset-0 flex bg-white",
+					children: /* @__PURE__ */ I("div", {
+						className: H("interaction-transition", "rounded-500 border-content-accent border", "flex flex-1 flex-col items-center justify-center p-6", "component-500 bg-background-accent-subdued text-content-accent"),
+						children: o
+					})
+				}),
+				children: l ? /* @__PURE__ */ I("div", {
+					className: H("interaction-transition", "rounded-500", "border-neutral-alpha-400 border border-dashed", "w-full select-none"),
 					children: /* @__PURE__ */ L("div", {
-						className: "flex flex-col items-center justify-center gap-2",
-						children: [/* @__PURE__ */ I(yd, {
-							as: "span",
-							variant: "secondary",
-							density: "regular",
-							icon: me,
-							tabIndex: -1,
-							className: H("group-active/dropzone:bg-background-subdued-down", "pointer-events-none"),
-							children: c
+						className: "flex flex-col items-center justify-center gap-2 px-4 py-10",
+						children: [/* @__PURE__ */ L("div", {
+							className: "flex flex-wrap items-center justify-center gap-2",
+							children: [/* @__PURE__ */ I(yd, {
+								variant: "secondary",
+								density: "regular",
+								icon: me,
+								onClick: T,
+								autoFocus: p,
+								children: c
+							}), /* @__PURE__ */ I(yd, {
+								variant: "secondary",
+								density: "regular",
+								icon: A,
+								onClick: E,
+								children: u
+							})]
 						}), /* @__PURE__ */ I("span", {
 							className: "component-500 text-content-secondary text-center",
 							children: a
 						})]
 					})
-				}))
+				}) : /* @__PURE__ */ I("button", {
+					type: "button",
+					onClick: T,
+					autoFocus: p,
+					className: H("interaction-transition", "group/dropzone", "rounded-500", "border-neutral-alpha-400 border border-dashed", "w-full appearance-none select-none", "hover:bg-background-borderless-subdued-hover focus-visible:bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring outline-hidden", "disabled:pointer-events-none disabled:opacity-30"),
+					children: i || (s === "compact" ? /* @__PURE__ */ L("div", {
+						className: "flex items-center justify-center gap-2 p-6",
+						children: [/* @__PURE__ */ I(me, { className: "text-content-tertiary size-5 shrink-0" }), /* @__PURE__ */ I("span", {
+							className: "component-500 text-content-secondary text-start",
+							children: a
+						})]
+					}) : /* @__PURE__ */ I("div", {
+						className: "flex items-center justify-center px-4 py-10",
+						children: /* @__PURE__ */ L("div", {
+							className: "flex flex-col items-center justify-center gap-2",
+							children: [/* @__PURE__ */ I(yd, {
+								as: "span",
+								variant: "secondary",
+								density: "regular",
+								icon: me,
+								tabIndex: -1,
+								className: H("group-active/dropzone:bg-background-subdued-down", "pointer-events-none"),
+								children: c
+							}), /* @__PURE__ */ I("span", {
+								className: "component-500 text-content-secondary text-center",
+								children: a
+							})]
+						})
+					}))
+				})
+			}),
+			/* @__PURE__ */ I(c3, {
+				multiple: r,
+				onChange: y,
+				ref: h
+			}),
+			l === !0 && /* @__PURE__ */ I(c3, {
+				multiple: !0,
+				onChange: b,
+				ref: g,
+				directory: !0
 			})
-		}), /* @__PURE__ */ I(c3, {
-			multiple: r,
-			onChange: h,
-			ref: p
-		})]
+		]
 	});
 }, h3 = ({ label: e, icon: t, additionalContent: n, className: r, disabled: i, ref: a, ...o }) => /* @__PURE__ */ L("button", {
 	ref: a,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photoroom/ui",
-  "version": "0.1.580",
+  "version": "0.1.581",
   "private": false,
   "description": "Photoroom design system components",
   "sideEffects": [