@photoroom/ui 0.1.555 → 0.1.557

package/index.mjs

@@ -6906,7 +6906,7 @@ var dd = W("focus-visible:misc-border-size-focus-ring relative inline-flex w-fit
 			accent: "bg-content-accent hover:bg-accent-400 focus-visible:bg-accent-400 focus-visible:ring-misc-focus-indicator active:bg-accent-600 text-white",
 			"secondary-accent": "bg-accent-alpha-100 text-content-accent hover:bg-accent-alpha-200 focus-visible:bg-accent-alpha-300 focus-visible:ring-misc-focus-indicator active:bg-accent-alpha-300",
 			"borderless-accent": "text-content-accent hover:bg-accent-alpha-200 focus-visible:bg-accent-alpha-300 focus-visible:ring-misc-focus-indicator active:bg-accent-alpha-300 bg-transparent",
-			primary: "bg-background-default text-content-white-primary-inverted hover:bg-background-hover focus-visible:bg-background-hover focus-visible:ring-misc-focus-indicator active:bg-background-down",
+			primary: "bg-background-default text-content-white-inverted-primary hover:bg-background-hover focus-visible:bg-background-hover focus-visible:ring-misc-focus-indicator active:bg-background-down",
 			secondary: "bg-background-subdued text-content-primary hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover focus-visible:ring-misc-focus-indicator active:bg-background-subdued-down",
 			borderless: "text-content-primary hover:bg-background-borderless-subdued-hover focus-visible:bg-background-borderless-subdued-hover focus-visible:ring-misc-focus-indicator active:bg-background-borderless-subdued-down",
 			"secondary-outline": "border-misc-border misc-border-size-default text-content-primary hover:bg-background-borderless-subdued-hover focus-visible:bg-background-borderless-subdued-hover focus-visible:ring-misc-focus-indicator active:bg-background-borderless-subdued-down bg-transparent",
@@ -7152,7 +7152,7 @@ var Bre = ({ open: e, onClose: t, closeLabel: n, text: r, inlineAction: i, child
 }) }), vd = (({ as: e = "button", icon: t, label: n, className: r, ref: i, ...a }) => /* @__PURE__ */ L(e, {
 	ref: i,
 	...a,
-	className: H("inline-flex items-center justify-center gap-1.5", "size-h-500 shrink-0 ps-2.5 pe-3", "rounded-500 border-misc-border misc-border-size-default", "bg-background-default hover:bg-background-hover focus-visible:bg-background-hover active:bg-background-down", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring focus-visible:outline-hidden", "component-500 text-content-white-primary-inverted", "interaction-transition transition-colors", r),
+	className: H("inline-flex items-center justify-center gap-1.5", "size-h-500 shrink-0 ps-2.5 pe-3", "rounded-500 border-misc-border misc-border-size-default", "bg-background-default hover:bg-background-hover focus-visible:bg-background-hover active:bg-background-down", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring focus-visible:outline-hidden", "component-500 text-content-white-inverted-primary", "interaction-transition transition-colors", r),
 	children: [/* @__PURE__ */ I(t, { className: "icon-size-400" }), n]
 }));
 vd.displayName = "AppButton";
@@ -7202,7 +7202,7 @@ var Vre = ({ as: e }) => e ? /* @__PURE__ */ I(e, {
 				"hover:bg-background-hover",
 				"focus-visible:bg-background-hover",
 				"active:bg-background-down",
-				"text-content-white-primary-inverted"
+				"text-content-white-inverted-primary"
 			],
 			secondary: [
 				"bg-background-subdued",
@@ -7320,7 +7320,7 @@ var Cd = ({ className: e, ...t }) => /* @__PURE__ */ I("button", {
 				className: H("bg-content-primary flex shrink-0 items-center justify-center rounded-full", s ? "h-4 w-4" : "h-5 w-5"),
 				children: /* @__PURE__ */ I("span", {
 					"data-testid": n,
-					className: "component-400 text-content-white-primary-inverted font-semibold",
+					className: "component-400 text-content-white-inverted-primary font-semibold",
 					children: t
 				})
 			}) : void 0,
@@ -11255,7 +11255,7 @@ var Jh = W([
 					alt: a || ""
 				}),
 				/* @__PURE__ */ I(Uh, {
-					className: "text-content-white-primary-inverted relative z-1 flex h-full w-full items-center justify-center rounded-[inherit]",
+					className: "text-content-white-inverted-primary relative z-1 flex h-full w-full items-center justify-center rounded-[inherit]",
 					delayMs: i ? 400 : 0,
 					children: d ? /* @__PURE__ */ I("span", {
 						className: Yh({ size: n }),
@@ -11319,7 +11319,7 @@ var tg = (({ as: t = "button", type: n = "button", className: r, variant: a = "a
 		"bg-content-accent bg-background-pro hover:bg-background-pro-hover focus-visible:ring-misc-focus-indicator focus-visible:bg-background-pro-hover active:bg-background-pro-down": a === "pro",
 		"bg-background-flash hover:bg-background-flash-hover focus-visible:bg-background-flash-hover active:bg-background-flash-down": a === "flash",
 		"text-content-white-primary": ["accent", "pro"].includes(a),
-		"text-content-white-primary-inverted": a === "primary",
+		"text-content-white-inverted-primary": a === "primary",
 		"text-content-black-primary": ["on-dark", "flash"].includes(a),
 		"focus-visible:ring-misc-focus-indicator": [
 			"accent",
@@ -12165,7 +12165,7 @@ var Zg = /* @__PURE__ */ function(e) {
 			[Zg.Apple]: ["bg-background-subdued text-content-primary hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down"],
 			[Zg.Facebook]: ["bg-background-subdued text-content-primary hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down"],
 			[Zg.Email]: ["bg-background-subdued text-content-primary hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down"],
-			[Zg.Google]: ["bg-background-default text-content-white-primary-inverted hover:bg-background-hover focus-visible:bg-background-hover active:bg-background-down"]
+			[Zg.Google]: ["bg-background-default text-content-white-inverted-primary hover:bg-background-hover focus-visible:bg-background-hover active:bg-background-down"]
 		},
 		size: {
 			default: ["grid min-h-[48px] w-full grid-cols-[48px_auto_48px] items-center"],
@@ -12285,7 +12285,7 @@ var n_ = W("group flex w-full flex-col items-center justify-center gap-0.5 outli
 	}
 }), i_ = W("icon-size-500", {
 	variants: { toggled: {
-		true: "text-content-white-primary-inverted",
+		true: "text-content-white-inverted-primary",
 		false: "text-content-primary"
 	} },
 	defaultVariants: { toggled: !1 }
@@ -32488,7 +32488,7 @@ var NW = ({ className: e, title: t, description: n, image: r, badge: i, ...a })
 		className: U("rounded-500 flex w-full cursor-pointer items-center gap-3 p-3", "bg-background-subdued hover:bg-background-subdued-hover focus-visible:bg-background-subdued active:bg-background-subdued-down", "focus:ring-misc-focus-indicator focus:misc-border-size-focus-ring transition-all", e),
 		children: [
 			/* @__PURE__ */ I("figure", {
-				className: "bg-content-accent-subdued rounded-200 relative h-12 w-12 shrink-0 overflow-hidden",
+				className: "bg-background-accent-subdued rounded-200 relative h-12 w-12 shrink-0 overflow-hidden",
 				children: r
 			}),
 			/* @__PURE__ */ L("div", {
@@ -32668,7 +32668,7 @@ var GW = ({ indeterminate: e, defaultIndeterminate: t, onIndeterminateChange: n,
 			className: "pointer-events-none relative h-0.5 w-2.5 rounded-[2px] bg-white"
 		}) : /* @__PURE__ */ I(xP, {
 			"aria-hidden": "true",
-			className: H("shadow-500 pointer-events-none absolute inline-block rounded-full ring-0", d ? "inset-s-px h-3.5 w-3.5" : "inset-s-[2px] h-4 w-4", u ? "bg-content-white-primary-inverted" : "bg-white", "transition-transform duration-200 ease-in-out", {
+			className: H("shadow-500 pointer-events-none absolute inline-block rounded-full ring-0", d ? "inset-s-px h-3.5 w-3.5" : "inset-s-[2px] h-4 w-4", u ? "bg-content-white-inverted-primary" : "bg-white", "transition-transform duration-200 ease-in-out", {
 				"group-radix-state-checked/switch:translate-x-[10px] group-radix-state-checked/switch:rtl:translate-x-[-10px]": d,
 				"group-radix-state-checked/switch:translate-x-3 group-radix-state-checked/switch:rtl:-translate-x-3": !d
 			})
@@ -33951,7 +33951,7 @@ var LK = (({ as: e = "button", layout: t = "fixedHeight128", aspectRatio: n = "1
 	type: e === "button" ? "button" : void 0,
 	...g,
 	children: [/* @__PURE__ */ L("div", {
-		className: U("relative isolate overflow-hidden", "rounded-400 bg-surface-default", "group-focus-visible/tile:ring-misc-focus-indicator group-focus-visible/tile:misc-border-size-focus-ring", "interaction-transition transition-shadow", "before:pointer-events-none before:absolute before:inset-0 before:z-8 before:content-['']", "before:interaction-transition before:transition-colors", "after:pointer-events-none after:absolute after:inset-0 after:z-9 after:content-['']", "after:border-misc-border after:misc-border-size-default after:rounded-[inherit]", "after:interaction-transition after:transition-all", "group-data-[checked=true]/tile:after:border-content-accent group-data-[checked=true]/tile:after:misc-border-size-selection", "group-data-[checked=true]/tile:after:shadow-[inset_0_0_0_1px_var(--color-content-white-primary-inverted)]", {
+		className: U("relative isolate overflow-hidden", "rounded-400 bg-surface-default", "group-focus-visible/tile:ring-misc-focus-indicator group-focus-visible/tile:misc-border-size-focus-ring", "interaction-transition transition-shadow", "before:pointer-events-none before:absolute before:inset-0 before:z-8 before:content-['']", "before:interaction-transition before:transition-colors", "after:pointer-events-none after:absolute after:inset-0 after:z-9 after:content-['']", "after:border-misc-border after:misc-border-size-default after:rounded-[inherit]", "after:interaction-transition after:transition-all", "group-data-[checked=true]/tile:after:border-content-accent group-data-[checked=true]/tile:after:misc-border-size-selection", "group-data-[checked=true]/tile:after:shadow-[inset_0_0_0_1px_var(--color-content-white-inverted-primary)]", {
 			"w-full min-w-21": t === "fluidWidth",
 			"h-32": t === "fixedHeight128",
 			"group-hover/tile:before:bg-misc-visual-hover": u,
@@ -34502,7 +34502,7 @@ var Oq = ({ children: e, className: t }) => /* @__PURE__ */ I("div", {
 	"aria-label": "close dialog",
 	"data-testid": "dialog-close-button",
 	...n,
-	children: /* @__PURE__ */ I(h, { className: "text-content-white-primary-inverted h-4 w-4" })
+	children: /* @__PURE__ */ I(h, { className: "text-content-white-inverted-primary h-4 w-4" })
 });
 jq.displayName = "DialogCloseButton";
 //#endregion
@@ -35034,9 +35034,11 @@ Gq.displayName = "DropdownMenuSingleSelectionItem";
 var Kq = (e) => /* @__PURE__ */ I(zH, {
 	className: "border-misc-divider mx-3 my-1 border-t",
 	...e
-}), qq = ({ selected: e, className: t, children: n, ...r }) => /* @__PURE__ */ L(PH, {
-	className: U("group component-500 misc-dropdown-inner-rounding relative flex h-10 w-16 cursor-pointer items-center justify-center px-3 outline-none select-none", "text-content-primary", "hover:bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down", "focus-visible:bg-background-borderless-subdued-hover", "disabled:pointer-events-none disabled:opacity-30 aria-disabled:pointer-events-none aria-disabled:opacity-30", e && "bg-background-borderless-subdued-hover", t),
+}), qq = ({ selected: e, className: t, children: n, ...r }) => /* @__PURE__ */ L("button", {
 	...r,
+	type: "button",
+	className: U("group component-500 misc-dropdown-inner-rounding relative flex h-10 w-16 cursor-pointer items-center justify-center px-3 outline-none select-none", "text-content-primary", "hover:bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down", "focus-visible:bg-background-borderless-subdued-hover", "disabled:pointer-events-none disabled:opacity-30", e && "bg-background-borderless-subdued-hover", t),
+	"aria-current": e || void 0,
 	children: [n, /* @__PURE__ */ I("div", { className: "border-misc-focus-indicator misc-dropdown-inner-rounding pointer-events-none absolute inset-0 hidden border-[3px] group-focus-visible:block" })]
 });
 qq.displayName = "DropdownMenuNumberItem";
@@ -36743,7 +36745,7 @@ var eX = W([
 				"focus-visible:bg-background-borderless-subdued-hover"
 			],
 			true: [
-				"bg-background-default text-content-white-primary-inverted",
+				"bg-background-default text-content-white-inverted-primary",
 				"hover:bg-background-hover",
 				"active:bg-background-down",
 				"focus-visible:bg-background-hover"
@@ -47732,7 +47734,7 @@ var e3 = (e, t) => (n) => 100 * (n - e) / (t - e), t3 = [
 	type: "button",
 	"aria-pressed": t,
 	onClick: n,
-	className: H("component-400 flex h-6 items-center justify-center rounded-[6px] px-2 pb-px whitespace-nowrap", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring focus-visible:outline-hidden", t ? "bg-background-default text-content-white-primary-inverted" : "border-misc-border-default text-content-secondary hover:bg-background-borderless-subdued-hover focus-visible:bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down border"),
+	className: H("component-400 flex h-6 items-center justify-center rounded-[6px] px-2 pb-px whitespace-nowrap", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring focus-visible:outline-hidden", t ? "bg-background-default text-content-white-inverted-primary" : "border-misc-border-default text-content-secondary hover:bg-background-borderless-subdued-hover focus-visible:bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down border"),
 	children: e
 }), nge = ({ label: e, valueLabel: t, enabled: n, onEnabledChange: r, value: i, min: a = 0, max: o = 100, step: s = 1, onValueChange: c, onPointerDown: l, onPointerUp: u, onValueCommit: d, tags: f, selectedTagValue: p, onTagSelect: m, className: h, "data-testid": g }) => {
 	let _ = ke(), v = ke();
@@ -48192,7 +48194,7 @@ var g3 = ({ icon: e, className: t, ref: n, ...r }) => /* @__PURE__ */ I("button"
 	ref: n,
 	type: "button",
 	...r,
-	className: U("flex h-6 w-6 items-center justify-center", "bg-background-default text-content-white-primary-inverted rounded-full", "interaction-transition outline-hidden transition-all", "hover:bg-background-hover active:bg-background-down", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", t),
+	className: U("flex h-6 w-6 items-center justify-center", "bg-background-default text-content-white-inverted-primary rounded-full", "interaction-transition outline-hidden transition-all", "hover:bg-background-hover active:bg-background-down", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", t),
 	children: /* @__PURE__ */ I(e, { className: "icon-size-300" })
 });
 g3.displayName = "ImageWidgetButton";
@@ -48957,7 +48959,7 @@ var L3 = ({ value: e, onChange: t, placeholder: n, options: r = [], leadingSlot:
 				disabled: s,
 				"aria-label": "Submit",
 				"data-testid": "panel-standard-input-submit",
-				className: "[&>button]:bg-background-default [&>button]:text-content-white-primary-inverted active:[&>button]:bg-background-default hover:[&>button]:bg-neutral-800"
+				className: "[&>button]:bg-background-default [&>button]:text-content-white-inverted-primary active:[&>button]:bg-background-default hover:[&>button]:bg-neutral-800"
 			})]
 		})]
 	});
@@ -50949,7 +50951,7 @@ var P_e = ({ label: e, description: t, avatar: n, trailingElement: r, className:
 		title: t,
 		className: "h-auto gap-1.5",
 		leading: /* @__PURE__ */ I("span", {
-			className: "component-semi-strong-300 bg-content-primary text-content-white-primary-inverted flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full px-0.5 pb-px",
+			className: "component-semi-strong-300 bg-content-primary text-content-white-inverted-primary flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full px-0.5 pb-px",
 			children: e
 		})
 	}), n && /* @__PURE__ */ I("p", {
@@ -52063,7 +52065,7 @@ var aye = W([
 	"disabled:opacity-30"
 ], {
 	variants: { isSelected: {
-		true: ["bg-background-default text-content-white-primary-inverted"],
+		true: ["bg-background-default text-content-white-inverted-primary"],
 		false: [
 			"bg-background-subdued text-content-primary",
 			"hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover",
@@ -52183,7 +52185,7 @@ var $8 = (({ selected: e, children: t, className: n, as: r = "button", ref: i, .
 		"hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down": !e
 	}, {
 		"text-content-secondary": !e,
-		"text-content-white-primary-inverted": e
+		"text-content-white-inverted-primary": e
 	}, "interaction-transition transition-[color,background-color,box-shadow]", n),
 	...a,
 	children: t
@@ -52841,7 +52843,7 @@ var hye = W("flex size-300 shrink-0 items-center justify-center rounded-full", {
 		className: hye({ type: t }),
 		children: /* @__PURE__ */ I(n, {
 			"aria-hidden": "true",
-			className: "text-content-white-primary-inverted icon-size-400"
+			className: "text-content-white-inverted-primary icon-size-400"
 		})
 	});
 }, _ye = (e) => /* @__PURE__ */ I("span", {
@@ -53606,13 +53608,13 @@ function O5({ label: e, status: t = "pending", stepNumber: n, value: r, classNam
 O5.displayName = "ProgressStep";
 //#endregion
 //#region src/components/status/ToastProgress/ToastProgress.tsx
-var k5 = H("absolute inset-0 z-1", "flex h-full items-center gap-1.5 p-1 ps-5", "transition-all duration-200 ease-[cubic-bezier(0.2,0.82,0.61,1)]"), A5 = "min-w-0 grow overflow-hidden text-ellipsis whitespace-nowrap text-start", j5 = H("shrink-0 appearance-none outline-hidden", "flex h-full items-center px-4", "hover:bg-black-alpha-200 rounded-full", "focus-visible:bg-black-alpha-200 active:bg-black-alpha-300", "text-content-white-primary-inverted", "transition-colors duration-200");
+var k5 = H("absolute inset-0 z-1", "flex h-full items-center gap-1.5 p-1 ps-5", "transition-all duration-200 ease-[cubic-bezier(0.2,0.82,0.61,1)]"), A5 = "min-w-0 grow overflow-hidden text-ellipsis whitespace-nowrap text-start", j5 = H("shrink-0 appearance-none outline-hidden", "flex h-full items-center px-4", "hover:bg-black-alpha-200 rounded-full", "focus-visible:bg-black-alpha-200 active:bg-black-alpha-300", "text-content-white-inverted-primary", "transition-colors duration-200");
 function qye({ className: e, inProgressLabel: t, completedLabel: n, actionLabel: r, cancelLabel: i, onAction: a, onCancel: s, ...c }) {
 	let l = Math.min(100, Math.max(0, c.value ?? 0)), u = l === 100, d = ke();
 	return /* @__PURE__ */ L(DK, {
 		...c,
 		"aria-labelledby": d,
-		className: U("relative overflow-hidden", "h-12 w-full min-w-0", "shadow-400 rounded-full bg-neutral-800", "component-500 text-content-white-primary-inverted", e),
+		className: U("relative overflow-hidden", "h-12 w-full min-w-0", "shadow-400 rounded-full bg-neutral-800", "component-500 text-content-white-inverted-primary", e),
 		children: [
 			/* @__PURE__ */ I(OK, {
 				className: "bg-background-default pointer-events-none h-full -translate-x-(--progress-offset) transition-transform rtl:translate-x-(--progress-offset)",
@@ -54754,14 +54756,12 @@ var h7 = {
 	}, [t]), /* @__PURE__ */ I("ul", {
 		ref: r,
 		className: "max-h-80 w-[var(--radix-popover-trigger-width)] min-w-[80px] overflow-auto p-1",
-		children: e.map((e, r) => /* @__PURE__ */ I("li", {
-			className: H("component-500 misc-dropdown-inner-rounding flex h-10 w-full items-center justify-center outline-hidden", "cursor-pointer outline-hidden select-none", "text-content-primary truncate px-2", "hover:bg-background-borderless-subdued-hover", "active:bg-background-borderless-subdued-down", t === r && "bg-background-borderless-subdued-hover"),
-			children: /* @__PURE__ */ I("button", {
-				className: "h-full flex-1",
-				onClick: () => n(e),
-				children: e
-			})
-		}, e))
+		children: e.map((e, r) => /* @__PURE__ */ I("li", { children: /* @__PURE__ */ I(qq, {
+			selected: t === r,
+			onClick: () => n(e),
+			className: "w-full",
+			children: e
+		}) }, e))
 	});
 }, Abe = 120, jbe = 200, Mbe = ({ value: e, onChange: n, min: r = -Infinity, max: i = Infinity, step: a = 1, disabled: o, options: s, className: c, size: l = "default", ...u }) => {
 	let d = l === "compact", f = V(!1), p = V(null), m = V(null), [h, g] = Pe(e.toString()), _ = V(h), v = V(!1), y = V(null), [b, x] = Pe(null), S = V(null), C = B((e) => {

package/package.json

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

package/theme.css

@@ -203,10 +203,10 @@
   --color-content-white-secondary: var(--color-content-white-secondary);
   --color-content-black-primary: var(--color-content-black-primary);
   --color-content-black-secondary: var(--color-content-black-secondary);
-  --color-content-white-primary-inverted: var(--color-content-white-primary-inverted);
-  --color-content-white-subdued-primary-inverted: var(
-    --color-content-white-subdued-primary-inverted
-  );
+  --color-content-white-inverted-primary: var(--color-content-white-inverted-primary);
+  --color-content-white-inverted-secondary: var(--color-content-white-inverted-secondary);
+  --color-content-black-inverted-primary: var(--color-content-black-inverted-primary);
+  --color-content-black-inverted-secondary: var(--color-content-black-inverted-secondary);
 
   /* Structure */
   --color-misc-divider: var(--color-misc-divider);