@photoroom/ui 0.1.519 → 0.1.520

package/index.mjs

@@ -32606,7 +32606,7 @@ var YK = ({ label: e, onClick: n }) => /* @__PURE__ */ t("button", {
 QK.displayName = "PreviewBox";
 //#endregion
 //#region src/components/content/VisualToolTile/VisualToolTile.tsx
-var $K = W(H("rounded-400 relative flex w-full overflow-hidden text-start outline-hidden", "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:shadow-[inset_0_0_0_0.5px_var(--color-misc-hairline-emphasized)] after:content-['']", "hover:bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down", "focus-visible:bg-background-borderless-subdued-hover focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring"), {
+var $K = W(H("rounded-400 relative flex w-full overflow-hidden text-start outline-hidden", "transition-transform duration-200 ease-out", "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:shadow-[inset_0_0_0_0.5px_var(--color-misc-hairline-emphasized)] after:content-['']", "hover:bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down", "focus-visible:bg-background-borderless-subdued-hover focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring"), {
 	variants: { density: {
 		compact: "items-center gap-2 py-2 ps-4 pe-2",
 		regular: "items-center gap-2 ps-6",
@@ -32634,13 +32634,13 @@ var $K = W(H("rounded-400 relative flex w-full overflow-hidden text-start outlin
 		className: "component-400 text-content-secondary line-clamp-2",
 		children: r
 	}) : null]
-}), nq = ({ onClick: r, label: i, imageSrc: a, videoSrc: o, posterSrc: s, subtitle: c, badgeLabel: l, badgeVariant: u = "pro", density: d = "regular", className: f, ...p }) => /* @__PURE__ */ n("button", {
+}), nq = ({ onClick: r, label: i, imageSrc: a, videoSrc: o, posterSrc: s, subtitle: c, badgeLabel: l, badgeVariant: u = "pro", dropLabel: d, isDropTarget: f, density: p = "regular", className: m, ...h }) => /* @__PURE__ */ n("button", {
 	type: "button",
-	className: U($K({ density: d }), f),
+	className: U($K({ density: p }), f && "z-10 scale-[1.03]", m),
 	onClick: r,
-	...p,
+	...h,
 	children: [
-		d === "compact" && /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("span", {
+		p === "compact" && /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("span", {
 			className: "component-500 text-content-primary line-clamp-2 min-w-0 flex-1",
 			children: i
 		}), /* @__PURE__ */ t(eq, {
@@ -32649,7 +32649,7 @@ var $K = W(H("rounded-400 relative flex w-full overflow-hidden text-start outlin
 			posterSrc: s,
 			className: "rounded-200 size-16 shrink-0"
 		})] }),
-		d === "regular" && /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(tq, {
+		p === "regular" && /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(tq, {
 			label: i,
 			subtitle: c,
 			className: "flex-1"
@@ -32659,7 +32659,7 @@ var $K = W(H("rounded-400 relative flex w-full overflow-hidden text-start outlin
 			posterSrc: s,
 			className: "size-36 shrink-0 mask-[linear-gradient(to_right,transparent,black_66%)]"
 		})] }),
-		d === "spacious" && /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("div", {
+		p === "spacious" && /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("div", {
 			className: "min-h-0 w-full flex-1",
 			children: /* @__PURE__ */ t(eq, {
 				imageSrc: a,
@@ -32677,6 +32677,13 @@ var $K = W(H("rounded-400 relative flex w-full overflow-hidden text-start outlin
 			size: "medium",
 			className: "absolute inset-e-1 top-1 z-10 shrink-0",
 			children: l
+		}),
+		f && /* @__PURE__ */ n("span", {
+			className: H("bg-background-accent-fixed text-content-white-primary pointer-events-none absolute inset-0 z-20 flex items-center justify-center rounded-[inherit] p-4", p === "compact" ? "flex-row gap-2" : "flex-col gap-3"),
+			children: [/* @__PURE__ */ t(w, { className: H("shrink-0", p === "compact" ? "size-8" : "size-10") }), /* @__PURE__ */ t("span", {
+				className: "component-700 line-clamp-2 text-center",
+				children: d
+			})]
 		})
 	]
 }), rq = Object.defineProperty, iq = (e, t) => rq(e, "name", {

package/package.json

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

package/theme.css

@@ -145,6 +145,7 @@
   --color-background-accent-subdued: var(--color-background-accent-subdued);
   --color-background-accent-subdued-hover: var(--color-background-accent-subdued-hover);
   --color-background-accent-subdued-down: var(--color-background-accent-subdued-down);
+  --color-background-accent-fixed: var(--color-background-accent-fixed);
   --color-background-positive: var(--color-background-positive);
   --color-background-positive-hover: var(--color-background-positive-hover);
   --color-background-positive-down: var(--color-background-positive-down);