@photoroom/ui 0.1.803 → 0.1.804

package/components/editor/ObjectItem/ObjectItem.d.ts

@@ -8,12 +8,14 @@ export type ObjectItemProps = {
     thumbnailUrl?: string;
     thumbnailCheckerboard?: boolean;
     thumbnailCover?: boolean;
+    /** A thumbnail its owner draws in place of `thumbnailUrl`. */
+    thumbnail?: React.ReactNode;
     loading?: boolean;
     dragHandleProps?: React.ComponentProps<"span">;
     buttonProps?: React.ComponentProps<"button">;
     bottomRightIcon?: React.ReactNode;
 } & Omit<React.ComponentProps<"li">, "children">;
-export declare function ObjectItem({ label, labelTestId, subtitle, isHidden: value, defaultIsHidden: defaultValue, onIsHiddenChange: onValueChange, thumbnailUrl, thumbnailCheckerboard, thumbnailCover, loading, dragHandleProps, buttonProps, className, bottomRightIcon, ref, ...rest }: ObjectItemProps): import("react").JSX.Element;
+export declare function ObjectItem({ label, labelTestId, subtitle, isHidden: value, defaultIsHidden: defaultValue, onIsHiddenChange: onValueChange, thumbnailUrl, thumbnailCheckerboard, thumbnailCover, thumbnail, loading, dragHandleProps, buttonProps, className, bottomRightIcon, ref, ...rest }: ObjectItemProps): import("react").JSX.Element;
 export declare namespace ObjectItem {
     var displayName: string;
 }

package/components/editor/ObjectItem/ObjectItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectItem.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/ObjectItem/ObjectItem.tsx"],"names":[],"mappings":"AAQA,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC/C,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC7C,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;mCAEtB,EACzB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EAAE,KAAK,EACf,eAAe,EAAE,YAAY,EAC7B,gBAAgB,EAAE,aAAa,EAC/B,YAAY,EACZ,qBAAqB,EACrB,cAAc,EACd,OAAO,EACP,eAAe,EACf,WAAW,EACX,SAAS,EACT,eAAe,EACf,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe"}
+{"version":3,"file":"ObjectItem.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/ObjectItem/ObjectItem.tsx"],"names":[],"mappings":"AAQA,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC/C,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC7C,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;mCAEtB,EACzB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EAAE,KAAK,EACf,eAAe,EAAE,YAAY,EAC7B,gBAAgB,EAAE,aAAa,EAC/B,YAAY,EACZ,qBAAqB,EACrB,cAAc,EACd,SAAS,EACT,OAAO,EACP,eAAe,EACf,WAAW,EACX,SAAS,EACT,eAAe,EACf,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe"}

package/components/editor/ObjectPreview/ObjectPreview.d.ts

@@ -4,6 +4,8 @@ export type ObjectPreviewProps = React.HTMLAttributes<HTMLDivElement> & {
     imageUrl?: string;
     loading?: boolean;
     bottomRightIcon?: React.ReactNode;
+    /** A picture its owner draws in place of `imageUrl`, filling the box. */
+    media?: React.ReactNode;
 };
-export declare const ObjectPreview: ({ checkerboard, cover, imageUrl, loading, bottomRightIcon, ...rest }: ObjectPreviewProps) => import("react").JSX.Element;
+export declare const ObjectPreview: ({ checkerboard, cover, imageUrl, loading, bottomRightIcon, media, ...rest }: ObjectPreviewProps) => import("react").JSX.Element;
 //# sourceMappingURL=ObjectPreview.d.ts.map

package/components/editor/ObjectPreview/ObjectPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectPreview.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/ObjectPreview/ObjectPreview.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACtE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,aAAa,yEAOvB,kBAAkB,gCA0BpB,CAAC"}
+{"version":3,"file":"ObjectPreview.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/ObjectPreview/ObjectPreview.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACtE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,yEAAyE;IACzE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,aAAa,gFAQvB,kBAAkB,gCA2BpB,CAAC"}

package/index.mjs

@@ -34829,22 +34829,29 @@ var SG = G([
 CG.displayName = "ColorSwatch";
 //#endregion
 //#region src/components/editor/ObjectPreview/ObjectPreview.tsx
-var wG = ({ checkerboard: t, cover: n, imageUrl: r, loading: i, bottomRightIcon: a, ...o }) => {
-	let s = r ? `url(${r})` : void 0;
+var wG = ({ checkerboard: t, cover: n, imageUrl: r, loading: i, bottomRightIcon: a, media: o, ...s }) => {
+	let c = r ? `url(${r})` : void 0;
 	return /* @__PURE__ */ R("div", {
-		...o,
-		className: W("rounded-200 border-misc-divider relative h-10 w-10 shrink-0 border bg-center bg-no-repeat", n ? "bg-cover" : "bg-contain", i && "bg-surface-primary", t && "bg-damier-checker", o.className),
+		...s,
+		className: W("rounded-200 border-misc-divider relative h-10 w-10 shrink-0 border bg-center bg-no-repeat", n ? "bg-cover" : "bg-contain", i && "bg-surface-primary", t && "bg-damier-checker", s.className),
 		style: {
-			backgroundImage: i ? void 0 : s,
-			...o.style
+			backgroundImage: i ? void 0 : c,
+			...s.style
 		},
-		children: [i && /* @__PURE__ */ L("div", {
-			className: "absolute inset-0 flex items-center justify-center",
-			children: /* @__PURE__ */ L(e, { className: "text-content-accent icon-size-500" })
-		}), a && /* @__PURE__ */ L("div", {
-			className: "absolute -end-1 -bottom-1",
-			children: a
-		})]
+		children: [
+			o && /* @__PURE__ */ L("div", {
+				className: "absolute inset-0",
+				children: o
+			}),
+			i && /* @__PURE__ */ L("div", {
+				className: "absolute inset-0 flex items-center justify-center",
+				children: /* @__PURE__ */ L(e, { className: "text-content-accent icon-size-500" })
+			}),
+			a && /* @__PURE__ */ L("div", {
+				className: "absolute -end-1 -bottom-1",
+				children: a
+			})
+		]
 	});
 }, TG = 6, EG = ({ assetThumbnailPath: e, colors: n, onAdd: r }) => {
 	let i = Ne(() => e ? 5 : TG, [e]);
@@ -39665,34 +39672,35 @@ var PX = "outline-content-accent outline-1 outline-solid", nhe = ({ className: e
 FX.displayName = "ListItem";
 //#endregion
 //#region src/components/editor/ObjectItem/ObjectItem.tsx
-var IX = ({ label: e, labelTestId: t, subtitle: n, isHidden: r, defaultIsHidden: i, onIsHiddenChange: a, thumbnailUrl: o, thumbnailCheckerboard: s, thumbnailCover: c, loading: l, dragHandleProps: u, buttonProps: d, className: f, bottomRightIcon: p, ref: m, ...h }) => {
-	let [g, _] = lV({
+var IX = ({ label: e, labelTestId: t, subtitle: n, isHidden: r, defaultIsHidden: i, onIsHiddenChange: a, thumbnailUrl: o, thumbnailCheckerboard: s, thumbnailCover: c, thumbnail: l, loading: u, dragHandleProps: d, buttonProps: f, className: p, bottomRightIcon: m, ref: h, ...g }) => {
+	let [_, v] = lV({
 		value: r,
 		defaultValue: i,
 		onValueChange: a
-	}), v = r !== void 0 || i !== void 0 || a !== void 0;
+	}), y = r !== void 0 || i !== void 0 || a !== void 0;
 	return /* @__PURE__ */ R("li", {
-		...h,
-		ref: m,
-		className: W("group/object-item relative", f),
+		...g,
+		ref: h,
+		className: W("group/object-item relative", p),
 		children: [
 			/* @__PURE__ */ R("button", {
-				...d,
+				...f,
 				type: "button",
-				className: W("flex items-center gap-3", "w-full p-2", (v || u) && "pe-25", "rounded-500 bg-background-subdued outline-hidden", "group-hover/object-item:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down", "focus-visible:ring-misc-focus-indicator", "focus-visible:misc-border-size-focus-ring", "text-500", "transition-colors", d?.className),
+				className: W("flex items-center gap-3", "w-full p-2", (y || d) && "pe-25", "rounded-500 bg-background-subdued outline-hidden", "group-hover/object-item:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down", "focus-visible:ring-misc-focus-indicator", "focus-visible:misc-border-size-focus-ring", "text-500", "transition-colors", f?.className),
 				children: [/* @__PURE__ */ L(wG, {
 					imageUrl: o,
 					checkerboard: s,
 					cover: c,
-					className: U("transition-opacity", { "opacity-30": g }),
-					bottomRightIcon: p,
-					loading: l
+					className: U("transition-opacity", { "opacity-30": _ }),
+					bottomRightIcon: m,
+					media: l,
+					loading: u
 				}), /* @__PURE__ */ R("div", {
 					className: "flex w-full flex-col items-start justify-start overflow-hidden text-start",
 					children: [/* @__PURE__ */ L("span", {
 						className: U("component-500 w-full truncate transition-colors", {
-							"text-content-secondary": g,
-							"text-content-primary": !g
+							"text-content-secondary": _,
+							"text-content-primary": !_
 						}),
 						"data-testid": t,
 						children: e
@@ -39702,10 +39710,10 @@ var IX = ({ label: e, labelTestId: t, subtitle: n, isHidden: r, defaultIsHidden:
 					})]
 				})]
 			}),
-			v && /* @__PURE__ */ L(yI, {
-				checked: g,
-				onCheckedChange: _,
-				disabled: d?.disabled,
+			y && /* @__PURE__ */ L(yI, {
+				checked: _,
+				onCheckedChange: v,
+				disabled: f?.disabled,
 				"data-focusable": !0,
 				icons: {
 					active: k,
@@ -39714,9 +39722,9 @@ var IX = ({ label: e, labelTestId: t, subtitle: n, isHidden: r, defaultIsHidden:
 				className: "absolute inset-e-12 top-1/2 -translate-y-1/2"
 			}),
 			/* @__PURE__ */ L("span", {
-				...u,
+				...d,
 				tabIndex: -1,
-				className: W("group cursor-move outline-hidden", "absolute inset-e-0 top-0 bottom-0", "ps-3 pe-5", "flex items-center justify-center", "text-content-primary", { invisible: !u || d?.disabled }, u?.className),
+				className: W("group cursor-move outline-hidden", "absolute inset-e-0 top-0 bottom-0", "ps-3 pe-5", "flex items-center justify-center", "text-content-primary", { invisible: !d || f?.disabled }, d?.className),
 				children: /* @__PURE__ */ L(x, { className: "icon-size-400" })
 			})
 		]

package/package.json

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