@photoroom/ui 0.1.831 → 0.1.833

package/index.mjs

@@ -12787,17 +12787,34 @@ var Kg = ({ href: e, title: t, size: n = "default", icon: r, iconElement: i, cla
 		"icon-size-800": n === "default",
 		"icon-size-600": n === "small"
 	}) }) : i
-}), qg = G(U("inline-flex max-w-full min-w-24 flex-col items-center justify-center gap-0.5 px-1 py-2.5", "rounded-500 appearance-none outline-hidden", "focus-visible:misc-border-size-focus-ring", "disabled:pointer-events-none disabled:opacity-30", "interaction-transition transition-all"), {
-	variants: { variant: Od },
-	defaultVariants: { variant: "accent" }
-}), Jg = ({ icon: e, variant: t, type: n = "button", className: r, children: i, ref: a, ...o }) => /* @__PURE__ */ R("button", {
-	...o,
-	ref: a,
-	type: n,
-	className: W(qg({ variant: t }), r),
-	children: [wd(e) ? /* @__PURE__ */ L(Yg, { as: e }) : e, /* @__PURE__ */ L("span", {
-		className: "component-400 max-w-full truncate",
-		children: i
+}), qg = G(U("relative inline-flex max-w-full min-w-24 flex-col items-center justify-center gap-0.5 px-1 py-2.5", "rounded-500 appearance-none outline-hidden", "focus-visible:misc-border-size-focus-ring", "disabled:pointer-events-none", "interaction-transition transition-all"), {
+	variants: {
+		variant: Od,
+		loading: {
+			true: "",
+			false: "disabled:opacity-30"
+		}
+	},
+	defaultVariants: {
+		variant: "accent",
+		loading: !1
+	}
+}), Jg = ({ icon: t, variant: n, loading: r = !1, type: i = "button", className: a, children: o, ref: s, ...c }) => /* @__PURE__ */ R("button", {
+	"aria-busy": r,
+	...c,
+	ref: s,
+	type: i,
+	className: W(qg({
+		variant: n,
+		loading: r
+	}), a),
+	disabled: r || c.disabled,
+	children: [r && /* @__PURE__ */ L(e, { className: "icon-size-500 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" }), /* @__PURE__ */ R("span", {
+		className: U("contents", r && "*:opacity-0"),
+		children: [wd(t) ? /* @__PURE__ */ L(Yg, { as: t }) : t, /* @__PURE__ */ L("span", {
+			className: "component-400 max-w-full truncate",
+			children: o
+		})]
 	})]
 });
 Jg.displayName = "StackButton";
@@ -33564,7 +33581,7 @@ var NU = ({ triggerProps: e, children: t, className: n, withPortal: r, open: i,
 				collisionPadding: a,
 				onClick: (e) => e.stopPropagation(),
 				children: p ? /* @__PURE__ */ R(Hl.div, {
-					className: W("flex flex-col overflow-hidden", "bg-surface-primary-elevated shadow-700 misc-dropdown-rounding misc-outer-border outline-hidden", "max-h-[inherit] max-w-[100vw]"),
+					className: U("flex flex-col overflow-hidden", "bg-surface-primary-elevated shadow-700 misc-dropdown-rounding misc-outer-border outline-hidden", "max-h-[inherit] max-w-[100vw]"),
 					...PU,
 					children: [
 						/* @__PURE__ */ L(TU, {
@@ -36881,7 +36898,7 @@ function jq({ messages: e, totalExpectedDuration: t, generationStartedAt: n, loa
 	return /* @__PURE__ */ R("div", {
 		className: W("rounded-b-400 absolute inset-x-0 bottom-0 z-6 h-[148px] overflow-hidden", i),
 		children: [/* @__PURE__ */ L("div", {
-			className: W("rounded-b-400 absolute inset-0", !r && "backdrop-blur-[10px]"),
+			className: U("rounded-b-400 absolute inset-0", !r && "backdrop-blur-[10px]"),
 			style: {
 				backgroundImage: "linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 15.9%, rgba(0,0,0,0.1) 34.1%, rgba(0,0,0,0.5) 100%)",
 				maskImage: r ? void 0 : "linear-gradient(to top, black 50%, transparent 100%)"
@@ -36894,7 +36911,7 @@ function jq({ messages: e, totalExpectedDuration: t, generationStartedAt: n, loa
 					children: g.map((e, t) => {
 						let n = t === g.length - 1;
 						return /* @__PURE__ */ L("p", {
-							className: W("truncate", {
+							className: U("truncate", {
 								"progress-timer-shimmer text-content-white-primary": n,
 								"text-white-alpha-500": t === g.length - 2,
 								"text-white-alpha-300": t < g.length - 2
@@ -36944,7 +36961,7 @@ function Mq({ contentStyle: e, label: t, showLabel: n, sizeLabel: r, children: i
 		}) : void 0),
 		children: [
 			/* @__PURE__ */ L("div", {
-				className: W("absolute inset-0", y && c && "blur-[10px]"),
+				className: U("absolute inset-0", y && c && "blur-[10px]"),
 				children: i
 			}),
 			!y && g && /* @__PURE__ */ L("div", {
@@ -38113,7 +38130,7 @@ var tY = ({ open: e, defaultOpen: t, onOpenChange: n, trigger: r, title: i, side
 				children: s
 			}) : null,
 			o ? /* @__PURE__ */ L("div", {
-				className: W("pointer-events-none absolute flex items-center justify-center", t === "default" ? "left-1/2 -translate-x-1/2" : "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"),
+				className: U("pointer-events-none absolute flex items-center justify-center", t === "default" ? "left-1/2 -translate-x-1/2" : "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"),
 				style: t === "default" ? {
 					width: d,
 					height: d,
@@ -58517,6 +58534,7 @@ var _7 = {
 					density: "spacious",
 					icon: t || P,
 					onClick: h,
+					disabled: i,
 					children: n?.cta || "Select a picture"
 				})]
 			}),
@@ -58644,7 +58662,7 @@ var Jwe = ({ title: e, date: t, className: n }) => /* @__PURE__ */ R("div", {
 		animate: { opacity: 1 },
 		transition: { duration: .3 },
 		className: "pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
-		children: /* @__PURE__ */ L(e, { className: "icon-size-800 text-white" })
+		children: /* @__PURE__ */ L(e, { className: "icon-size-800 text-content-primary" })
 	}) })]
 }) }), Zwe = (e) => /* @__PURE__ */ R("svg", {
 	width: "40",
@@ -58783,7 +58801,7 @@ var Jwe = ({ title: e, date: t, className: n }) => /* @__PURE__ */ R("div", {
 			className: "mx-auto flex w-full max-w-[1200px] flex-col items-center",
 			children: [
 				!!e && /* @__PURE__ */ L("div", {
-					className: W("w-full", t.length > 1 ? "pb-i500" : "pb-i600"),
+					className: U("w-full", t.length > 1 ? "pb-i500" : "pb-i600"),
 					children: e
 				}),
 				t.length > 1 && /* @__PURE__ */ L("div", {
@@ -58802,14 +58820,14 @@ var Jwe = ({ title: e, date: t, className: n }) => /* @__PURE__ */ R("div", {
 					})
 				}),
 				/* @__PURE__ */ L("div", {
-					className: W("w-full", n ? "flex flex-col gap-12" : "grid grid-cols-1 grid-rows-1 overflow-x-clip"),
+					className: U("w-full", n ? "flex flex-col gap-12" : "grid grid-cols-1 grid-rows-1 overflow-x-clip"),
 					children: t.map((e, t) => {
 						let r = t === s, i = _e.toArray(e.cards);
 						return /* @__PURE__ */ R("div", {
 							"aria-hidden": !n && !r,
 							inert: !n && !r,
 							style: n ? void 0 : { transform: `translateX(${(t - s) * 1}rem)` },
-							className: W("flex flex-col gap-6", n ? "opacity-100" : [
+							className: U("flex flex-col gap-6", n ? "opacity-100" : [
 								"col-start-1 row-start-1",
 								"transition-[opacity,transform] duration-200 ease-out motion-reduce:transition-none",
 								r ? "opacity-100" : "opacity-0"
@@ -62164,7 +62182,7 @@ var hDe = ({ titleBlock: e, children: t, className: n, ...r }) => {
 		className: "body-light-600 sm:body-light-700 w-full max-w-[560px]",
 		children: e
 	}), !!t && /* @__PURE__ */ L("div", {
-		className: W("body-light-500 mt-6 w-full max-w-[560px]", wDe),
+		className: U("body-light-500 mt-6 w-full max-w-[560px]", wDe),
 		children: t
 	})]
 }), o9 = 24, EDe = ({ title: e, children: t, background: n = "neutral-50", className: r, ...i }) => {
@@ -63316,7 +63334,7 @@ function W9({ children: e, className: t, label: n = "Main" }) {
 		}), /* @__PURE__ */ L(fOe, {
 			ref: f,
 			style: { insetInlineStart: _Oe },
-			className: W("bg-surface-primary shadow-700 rounded-500 ring-misc-border-default absolute top-full z-50 mt-3 ring-[0.5px]", "h-[var(--radix-navigation-menu-viewport-height,0px)] w-[var(--radix-navigation-menu-viewport-width,0px)]", "max-w-[calc(100vw-2rem)] origin-top overflow-hidden", "duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]", a ? "transition-[opacity,transform,width,height,inset-inline-start]" : "transition-[opacity,transform]", l ? "translate-y-0 opacity-100" : "-translate-y-3 opacity-0", "data-[state=closed]:animate-nav-content-fade-out")
+			className: U("bg-surface-primary shadow-700 rounded-500 ring-misc-border-default absolute top-full z-50 mt-3 ring-[0.5px]", "h-[var(--radix-navigation-menu-viewport-height,0px)] w-[var(--radix-navigation-menu-viewport-width,0px)]", "max-w-[calc(100vw-2rem)] origin-top overflow-hidden", "duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]", a ? "transition-[opacity,transform,width,height,inset-inline-start]" : "transition-[opacity,transform]", l ? "translate-y-0 opacity-100" : "-translate-y-3 opacity-0", "data-[state=closed]:animate-nav-content-fade-out")
 		})]
 	}) : /* @__PURE__ */ L("nav", {
 		"aria-label": n,

package/package.json

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