@photoroom/ui 0.1.689 → 0.1.691

package/index.mjs

@@ -34871,7 +34871,8 @@ var tK = W("rounded-300 component-semi-strong-300 inline-flex h-5 w-fit items-ce
 	draft: "bg-content-camera-accent",
 	active: "bg-content-positive",
 	archived: "bg-misc-stack-layer-1",
-	unlisted: "bg-misc-ai-image"
+	unlisted: "bg-misc-ai-image",
+	unpublished: "misc-border-size-default border-content-tertiary"
 }, cK = ({ status: e, label: t }) => {
 	let n = e === "none";
 	return /* @__PURE__ */ L("div", {
@@ -34902,71 +34903,64 @@ var tK = W("rounded-300 component-semi-strong-300 inline-flex h-5 w-fit items-ce
 		onKeyDown: f,
 		children: [/* @__PURE__ */ L("div", {
 			className: "flex items-center px-4 pt-3",
-			children: [
-				c && /* @__PURE__ */ I("span", {
-					className: "flex h-10 w-9 shrink-0 items-center justify-center",
-					onClick: p,
-					onKeyDown: p,
-					children: /* @__PURE__ */ I(KG, {
-						checked: c.selected,
-						onCheckedChange: (e) => c.onSelectedChange(e === !0),
-						"aria-label": c.selectionLabel
-					})
-				}),
-				c && /* @__PURE__ */ I("span", {
-					className: "w-5 shrink-0",
-					"aria-hidden": "true"
-				}),
-				/* @__PURE__ */ L("div", {
-					className: H("flex min-w-0 flex-1 items-center", c && "ps-3"),
-					children: [
-						/* @__PURE__ */ L("div", {
-							className: "flex min-w-60 flex-1 items-center gap-4 ps-3",
-							children: [/* @__PURE__ */ I(oK, {
-								size: "small",
-								bordered: !0,
-								imageUrl: t,
-								alt: e
-							}), /* @__PURE__ */ L("div", {
-								className: "flex min-w-0 flex-col items-start justify-center",
-								children: [/* @__PURE__ */ I("p", {
-									className: "component-500 font-600 text-content-primary line-clamp-2 max-w-full wrap-anywhere",
-									children: e
-								}), a != null && /* @__PURE__ */ I(nK, {
-									background: !1,
-									children: a
-								})]
+			children: [c && /* @__PURE__ */ I("span", {
+				className: "flex h-10 w-9 shrink-0 items-center justify-center",
+				onClick: p,
+				onKeyDown: p,
+				children: /* @__PURE__ */ I(KG, {
+					checked: c.selected,
+					onCheckedChange: (e) => c.onSelectedChange(e === !0),
+					"aria-label": c.selectionLabel
+				})
+			}), /* @__PURE__ */ L("div", {
+				className: "flex min-w-0 flex-1 items-center",
+				children: [
+					/* @__PURE__ */ L("div", {
+						className: H("flex flex-1 items-center gap-4", c ? "min-w-68 ps-2" : "min-w-60 ps-3"),
+						children: [/* @__PURE__ */ I(oK, {
+							size: "small",
+							bordered: !0,
+							imageUrl: t,
+							alt: e
+						}), /* @__PURE__ */ L("div", {
+							className: "flex min-w-0 flex-col items-start justify-center",
+							children: [/* @__PURE__ */ I("p", {
+								className: "component-500 text-content-primary line-clamp-2 max-w-full wrap-anywhere",
+								children: e
+							}), a != null && /* @__PURE__ */ I(nK, {
+								background: !1,
+								children: a
 							})]
-						}),
-						/* @__PURE__ */ I("span", {
-							className: "component-500 text-content-tertiary w-[245px] min-w-40 truncate ps-3",
-							children: n
-						}),
-						/* @__PURE__ */ I(cK, {
-							status: r,
-							label: i
-						}),
-						/* @__PURE__ */ I("div", {
-							className: "w-[245px] min-w-40 ps-3",
-							children: o ? /* @__PURE__ */ I(eK, { ...o }) : /* @__PURE__ */ I("span", {
-								className: "component-500 text-content-tertiary",
-								"aria-label": s,
-								children: "-"
-							})
+						})]
+					}),
+					/* @__PURE__ */ I("span", {
+						className: "component-500 text-content-tertiary w-[245px] min-w-40 truncate ps-3",
+						children: n
+					}),
+					/* @__PURE__ */ I(cK, {
+						status: r,
+						label: i
+					}),
+					/* @__PURE__ */ I("div", {
+						className: "w-[245px] min-w-40 ps-3",
+						children: o ? /* @__PURE__ */ I(eK, { ...o }) : /* @__PURE__ */ I("span", {
+							className: "component-500 text-content-tertiary",
+							"aria-label": s,
+							children: "-"
 						})
-					]
-				})
-			]
+					})
+				]
+			})]
 		}), /* @__PURE__ */ I(ZH, {})]
 	});
-}, uK = ({ label: e, onClick: n, className: r, ref: i, ...a }) => /* @__PURE__ */ I("button", {
+}, uK = ({ label: e, reserveSelection: n, onClick: r, className: i, ref: a, ...o }) => /* @__PURE__ */ I("button", {
 	type: "button",
-	onClick: n,
-	...a,
-	ref: i,
-	className: U("group bg-surface-primary-elevated flex w-full items-center py-3 ps-4 text-start", "border-b border-transparent", "cursor-pointer outline-hidden transition-colors", "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", "disabled:pointer-events-none disabled:opacity-30", r),
+	onClick: r,
+	...o,
+	ref: a,
+	className: U("group bg-surface-primary-elevated flex w-full items-center py-3 ps-4 text-start", "border-b border-transparent", "cursor-pointer outline-hidden transition-colors", "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", "disabled:pointer-events-none disabled:opacity-30", i),
 	children: /* @__PURE__ */ L("span", {
-		className: "flex items-center gap-4 ps-3",
+		className: H("flex items-center gap-4", n ? "ps-11" : "ps-3"),
 		children: [/* @__PURE__ */ I("span", {
 			className: H("rounded-300 flex size-16 shrink-0 items-center justify-center transition-colors", "bg-background-subdued group-hover:bg-background-subdued-hover group-focus-visible:bg-background-subdued-hover", "group-active:bg-background-subdued-down"),
 			children: /* @__PURE__ */ I(t, { className: "icon-size-600 text-content-tertiary" })
@@ -60950,44 +60944,46 @@ var fDe = Object.assign(Q7, {
 			})
 		]
 	})
-}), TDe = function({ placement: e = "default", variant: t = "default", title: n, subtitle: r, overline: i, cta: a, className: o, ...s }) {
-	let c = e === "side" || !!a, l = t === "on-dark", u = Te(r) ? !!r.props?.children : !!r;
+}), TDe = function({ placement: e = "default", variant: t = "default", emphasis: n = "regular", title: r, subtitle: i, overline: a, cta: o, className: s, ...c }) {
+	let l = e === "side" || !!o, u = t === "on-dark", d = Te(i) ? !!i.props?.children : !!i;
 	return /* @__PURE__ */ L("div", {
 		className: U("mx-auto w-full max-w-[1200px]", "flex flex-col gap-4", {
-			"items-center text-center": !c,
-			"items-start text-start": c,
-			"text-content-white-primary": l
-		}, o),
-		...s,
+			"items-center text-center": !l,
+			"items-start text-start": l,
+			"text-content-white-primary": u
+		}, s),
+		...c,
 		children: [/* @__PURE__ */ L("div", {
 			className: H("flex w-full flex-col gap-1", {
-				"items-center": !c,
-				"items-start": c
+				"items-center": !l,
+				"items-start": l
 			}),
-			children: [!!i && /* @__PURE__ */ I("div", {
+			children: [!!a && /* @__PURE__ */ I("div", {
 				className: H("component-700 max-w-[760px]", {
-					"text-content-accent": !l,
-					"text-accent-300": l
+					"text-content-accent": !u,
+					"text-accent-300": u
 				}),
-				children: i
+				children: a
 			}), /* @__PURE__ */ L("div", {
-				className: H("flex w-full items-start gap-4", "heading-thin-800 sm:heading-extra-thin-900", {
-					"justify-center": !c,
-					"justify-between": c
+				className: H("flex w-full items-start gap-4", "heading-thin-800", {
+					"sm:heading-extra-thin-900": n === "regular",
+					"sm:heading-extra-thin-1100 lg:text-1500 lg:leading-none lg:-tracking-[0.0414em]": n === "high",
+					"justify-center": !l,
+					"justify-between": l
 				}),
 				children: [/* @__PURE__ */ I("h2", {
-					className: "w-full max-w-[760px] text-balance",
-					children: n
-				}), !!a && /* @__PURE__ */ I("div", {
+					className: "w-full max-w-[760px] text-balance wrap-break-word",
+					children: r
+				}), !!o && /* @__PURE__ */ I("div", {
 					className: "hidden h-lh items-center lg:inline-flex",
-					children: a
+					children: o
 				})]
 			})]
-		}), u && /* @__PURE__ */ I("div", {
-			className: H("w-full max-w-[760px]", { "mx-auto flex justify-center": !c }),
+		}), d && /* @__PURE__ */ I("div", {
+			className: H("w-full max-w-[760px]", { "mx-auto flex justify-center": !l }),
 			children: /* @__PURE__ */ I("div", {
-				className: H("body-light-600 sm:body-light-700 w-[clamp(80%,512px,100%)] text-pretty", l ? "text-content-white-secondary" : "text-content-secondary"),
-				children: r
+				className: H("body-light-600 sm:body-light-700 w-[clamp(80%,512px,100%)] text-pretty", u ? "text-content-white-secondary" : "text-content-secondary"),
+				children: i
 			})
 		})]
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photoroom/ui",
-  "version": "0.1.689",
+  "version": "0.1.691",
   "private": false,
   "description": "Photoroom design system components",
   "sideEffects": [
@@ -46,7 +46,6 @@
     "@radix-ui/react-dialog": "1.1.23",
     "@radix-ui/react-direction": "1.1.4",
     "@radix-ui/react-dropdown-menu": "2.1.24",
-    "@radix-ui/react-menu": "2.1.24",
     "@radix-ui/react-navigation-menu": "1.2.22",
     "@radix-ui/react-popover": "1.1.23",
     "@radix-ui/react-progress": "1.1.16",