@photoroom/ui 0.1.364 → 0.1.366

package/index.mjs

@@ -33014,13 +33014,13 @@ var cq = G(U("relative flex w-full overflow-hidden text-start outline-hidden", "
 		className: "component-400 text-content-secondary line-clamp-2",
 		children: r
 	}) : null]
-}), dq = ({ onClick: r, label: i, imageSrc: a, videoSrc: o, posterSrc: s, subtitle: c, badgeLabel: l, density: u = "regular", className: d, ...f }) => /* @__PURE__ */ n("button", {
+}), dq = ({ 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", {
 	type: "button",
-	className: W(cq({ density: u }), d),
+	className: W(cq({ density: d }), f),
 	onClick: r,
-	...f,
+	...p,
 	children: [
-		u === "compact" && /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("span", {
+		d === "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(lq, {
@@ -33029,7 +33029,7 @@ var cq = G(U("relative flex w-full overflow-hidden text-start outline-hidden", "
 			posterSrc: s,
 			className: "rounded-200 size-16 shrink-0"
 		})] }),
-		u === "regular" && /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(uq, {
+		d === "regular" && /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(uq, {
 			label: i,
 			subtitle: c,
 			className: "flex-1"
@@ -33039,7 +33039,7 @@ var cq = G(U("relative flex w-full overflow-hidden text-start outline-hidden", "
 			posterSrc: s,
 			className: "size-36 shrink-0 mask-[linear-gradient(to_right,transparent,black_66%)]"
 		})] }),
-		u === "spacious" && /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("div", {
+		d === "spacious" && /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("div", {
 			className: "min-h-0 w-full flex-1",
 			children: /* @__PURE__ */ t(lq, {
 				imageSrc: a,
@@ -33053,9 +33053,9 @@ var cq = G(U("relative flex w-full overflow-hidden text-start outline-hidden", "
 			className: "w-full p-6"
 		})] }),
 		l && /* @__PURE__ */ t(zc, {
-			variant: "pro",
+			variant: u,
 			size: "medium",
-			className: U("absolute z-10 shrink-0", u === "spacious" ? "inset-e-2 top-2" : "inset-e-1 top-1"),
+			className: U("absolute z-10 shrink-0", d === "spacious" ? "inset-e-2 top-2" : "inset-e-1 top-1"),
 			children: l
 		})
 	]
@@ -35204,9 +35204,9 @@ var ZY = ({ color: e, onChange: r, label: i }) => {
 }), oX = ({ className: e, label: r, icon: i, trailing: a, ref: o, ...s }) => /* @__PURE__ */ t("button", {
 	...s,
 	ref: o,
-	className: W("group w-full appearance-none", "border-misc-divider border-b", "focus-visible:outline-hidden", "disabled:cursor-not-allowed disabled:opacity-30", e),
+	className: W("group w-full appearance-none", "focus-visible:outline-hidden", "disabled:cursor-not-allowed disabled:opacity-30", e),
 	children: /* @__PURE__ */ n("div", {
-		className: U("flex justify-between gap-1", "rounded-500", "hover:bg-background-subdued-hover group-focus-visible:bg-background-subdued-hover group-active:bg-background-subdued-down", "group-focus-visible:ring-misc-focus-indicator group-focus-visible:misc-border-size-focus-ring", "interaction-transition transition-colors"),
+		className: U("flex justify-between gap-1", "rounded-500", "hover:bg-background-borderless-subdued-hover group-focus-visible:bg-background-borderless-subdued-hover group-active:bg-background-borderless-subdued-down", "group-focus-visible:ring-misc-focus-indicator group-focus-visible:misc-border-size-focus-ring", "interaction-transition transition-colors"),
 		children: [/* @__PURE__ */ n("div", {
 			className: "flex items-center gap-3 px-3 py-2.5",
 			children: [!!i && /* @__PURE__ */ t("span", {
@@ -35298,7 +35298,7 @@ var cX = ({ icon: r, label: i, className: a, chevron: o = !1, tooltip: s, ref: c
 		...l,
 		ref: c,
 		"aria-label": l["aria-label"] ?? (u ? s : void 0),
-		className: U("group shrink-0 cursor-pointer outline-hidden", "inline-flex items-center justify-center", "rounded-300", "hover:bg-background-subdued-hover", "active:bg-background-subdued-down", "focus-visible:bg-background-subdued-hover", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "text-content-primary", "disabled:cursor-not-allowed disabled:opacity-30", "interaction-transition transition-all", u && !o && "size-400", u && o && "size-h-400 content-to-edge-ps-250 content-to-edge-pe-150 gap-1", d && !o && "content-to-edge-px-400 size-h-400", d && o && "content-to-edge-ps-400 content-to-edge-pe-250 size-h-400 gap-1", f && !o && "content-to-edge-pe-400 icon-to-edge-ps-400 size-h-400 gap-2", f && o && "icon-to-edge-ps-400 content-to-edge-pe-250 size-h-400 gap-1", a),
+		className: U("group shrink-0 cursor-pointer outline-hidden", "inline-flex items-center justify-center", "rounded-300", "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", "text-content-primary", "disabled:cursor-not-allowed disabled:opacity-30", "interaction-transition transition-all", u && !o && "size-400", u && o && "size-h-400 content-to-edge-ps-250 content-to-edge-pe-150 gap-1", d && !o && "content-to-edge-px-400 size-h-400", d && o && "content-to-edge-ps-400 content-to-edge-pe-250 size-h-400 gap-1", f && !o && "content-to-edge-pe-400 icon-to-edge-ps-400 size-h-400 gap-2", f && o && "icon-to-edge-ps-400 content-to-edge-pe-250 size-h-400 gap-1", a),
 		children: o ? /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("span", {
 			className: "flex items-center gap-2",
 			children: m
@@ -35339,9 +35339,9 @@ var uX = G([
 		active: {
 			false: [
 				"text-content-primary",
-				"hover:bg-background-subdued-hover",
-				"active:bg-background-subdued-down",
-				"focus-visible:bg-background-subdued-hover"
+				"hover:bg-background-borderless-subdued-hover",
+				"active:bg-background-borderless-subdued-down",
+				"focus-visible:bg-background-borderless-subdued-hover"
 			],
 			true: [
 				"bg-background-default text-content-white-primary-inverted",
@@ -53387,7 +53387,7 @@ var n9 = {
 }), r9 = ({ size: e = "default", className: n, children: r, ...i }) => /* @__PURE__ */ t("button", {
 	...i,
 	type: "button",
-	className: W("bg-surface-high flex w-10 items-center justify-center outline-hidden", e === "compact" ? "size-h-400" : "size-h-500", "border-misc-border-box border", "first:rounded-s-500 first:border-e-0", "last:rounded-e-500 last:border-s-0", "hover:bg-background-subdued-hover", "active:bg-background-subdued-down", "group-hover:border-misc-border-box-hover", "group-focus-visible:border-misc-border-box-hover", "disabled:pointer-events-none", "group", n),
+	className: W("bg-surface-high flex w-10 items-center justify-center outline-hidden", e === "compact" ? "size-h-400" : "size-h-500", "border-misc-border-box border", "first:rounded-s-500 first:border-e-0", "last:rounded-e-500 last:border-s-0", "hover:bg-background-borderless-subdued-hover", "active:bg-background-borderless-subdued-down", "group-hover:border-misc-border-box-hover", "group-focus-visible:border-misc-border-box-hover", "disabled:pointer-events-none", "group", n),
 	tabIndex: -1,
 	children: /* @__PURE__ */ t("span", {
 		className: "group-disabled:opacity-30",
@@ -53401,7 +53401,7 @@ var n9 = {
 		ref: i,
 		className: "max-h-80 w-[var(--radix-popover-trigger-width)] min-w-[80px] overflow-auto p-1",
 		children: e.map((e, i) => /* @__PURE__ */ t("li", {
-			className: U("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-subdued-hover", "active:bg-background-subdued-down", n === i && "bg-background-subdued-hover"),
+			className: U("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", n === i && "bg-background-borderless-subdued-hover"),
 			children: /* @__PURE__ */ t("button", {
 				className: "h-full flex-1",
 				onClick: () => r(e),

package/package.json

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