@photoroom/ui 0.1.395 → 0.1.397

package/index.mjs

@@ -50600,7 +50600,7 @@ var x5 = ({ variant: e = "default", label: r, isActive: i, activeIcon: a, icon:
 		className: U("flex w-full flex-row items-center gap-3 py-[10px] pe-3", "group-focus-visible:ring-misc-focus-indicator group-focus-visible:misc-border-size-focus-ring group-disabled:opacity-30", "rounded-500 cursor-pointer outline-hidden transition duration-200", {
 			"text-content-primary": !i && e === "default",
 			"text-content-positive": !i && e === "positive",
-			"hover:bg-background-subdued-hover active:bg-background-subdued-down group-focus-visible:bg-background-subdued-hover bg-transparent": !i,
+			"hover:bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down group-focus-visible:bg-background-borderless-subdued-hover bg-transparent": !i,
 			"bg-background-subdued text-content-primary": i,
 			"ps-[10px]": s,
 			"ps-3": !s
@@ -50849,7 +50849,7 @@ A5.displayName = "ToolMenuButton";
 var j5 = ({ size: e = "default", label: r, showProBadge: i, icon: a, className: o, ref: s, ...c }) => /* @__PURE__ */ n("button", {
 	ref: s,
 	type: "button",
-	className: U("relative shrink-0", "flex flex-col items-center justify-center gap-0.5", "size-h-700 px-2", "rounded-500 outline-hidden", "whitespace-nowrap", "hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "transition-colors", {
+	className: U("relative shrink-0", "flex flex-col items-center justify-center gap-0.5", "size-h-700 px-2", "rounded-500 outline-hidden", "whitespace-nowrap", "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", "transition-colors", {
 		"aspect-square": e === "small",
 		"min-w-[80px]": e === "default"
 	}, o),
@@ -50968,39 +50968,23 @@ var $ve = G([
 	"relative cursor-pointer select-none",
 	"inline-flex flex-row items-center gap-2",
 	"w-full px-4 py-3",
-	"rounded-500 border outline-hidden",
+	"rounded-500 outline-hidden",
 	"has-focus-visible:ring-misc-focus-indicator has-focus-visible:misc-border-size-focus-ring",
 	"transition-all"
 ], {
-	variants: {
-		variant: {
-			filled: "bg-background-subdued border-transparent",
-			outlined: "border-hairline-emphasized bg-transparent"
-		},
-		selected: {
-			true: "border-content-primary",
-			false: ""
-		}
-	},
-	compoundVariants: [{
-		variant: "filled",
-		selected: !1,
-		class: "has-active:bg-background-subdued-down hover:bg-background-subdued-hover has-focus-visible:bg-background-subdued-hover"
-	}, {
-		variant: "outlined",
-		selected: !1,
-		class: "has-active:border-content-secondary hover:border-content-tertiary has-focus-visible:border-content-tertiary"
-	}],
-	defaultVariants: {
-		variant: "filled",
-		selected: !1
-	}
-}), I5 = ({ label: e, icon: r, description: i, variant: a, selected: o, className: s, children: c, ...l }) => /* @__PURE__ */ n("label", {
-	...l,
-	className: W($ve({
-		variant: a,
-		selected: o
-	}), s),
+	variants: { selected: {
+		true: "shadow-[inset_0_0_0_2px_var(--color-content-primary)]",
+		false: [
+			"shadow-[inset_0_0_0_1px_var(--color-misc-border)]",
+			"hover:shadow-[inset_0_0_0_1px_var(--color-misc-border-hover)]",
+			"has-focus-visible:shadow-[inset_0_0_0_1px_var(--color-misc-border-hover)]",
+			"has-active:shadow-[inset_0_0_0_1px_var(--color-misc-border-down)]"
+		]
+	} },
+	defaultVariants: { selected: !1 }
+}), I5 = ({ label: e, icon: r, description: i, selected: a, className: o, children: s, ...c }) => /* @__PURE__ */ n("label", {
+	...c,
+	className: W($ve({ selected: a }), o),
 	children: [/* @__PURE__ */ n("span", {
 		className: "flex grow flex-col text-start",
 		children: [/* @__PURE__ */ n("span", {
@@ -51010,23 +50994,27 @@ var $ve = G([
 			className: "component-400 text-content-secondary truncate",
 			children: i
 		})]
-	}), c]
+	}), s]
 }), L5 = ({ label: e, icon: r, description: i, className: a, children: o, onToggleCb: s, ref: c, ...l }) => {
-	let { checkboxProps: u } = cz(), d = u(l), [f, p] = B.useState(!1), m = (e) => {
+	let { groupValue: u, checkboxProps: d } = cz(), f = d(l), [p, m] = B.useState(!1), [h, g] = B.useState(f.defaultChecked === !0), _ = (f.checked ?? u?.includes(l.value) ?? h) === !0, v = (e) => {
 		e.preventDefault();
 	};
 	return /* @__PURE__ */ n(I5, {
 		label: e,
 		icon: r,
 		description: i,
+		selected: _,
 		className: W(a, "flex flex-wrap"),
 		children: [/* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(N4, {
-			...d,
+			...f,
+			onCheckedChange: (e) => {
+				g(e === !0), f.onCheckedChange?.(e);
+			},
 			ref: c,
 			"aria-label": e,
 			className: "group inline-flex shrink-0 appearance-none outline-hidden",
 			onClick: () => {
-				p(!f), s?.(f);
+				m(!p), s?.(p);
 			},
 			children: /* @__PURE__ */ t(F4, {
 				asChild: !0,
@@ -51034,9 +51022,9 @@ var $ve = G([
 				children: /* @__PURE__ */ t(n3, { variant: "square" })
 			})
 		}) }), /* @__PURE__ */ t("div", {
-			className: U("basis-full", f ? "flex" : "hidden"),
+			className: U("basis-full", p ? "flex" : "hidden"),
 			onClick: (e) => {
-				m(e);
+				v(e);
 			},
 			children: o
 		})]
@@ -51046,14 +51034,18 @@ L5.displayName = "ListChoiceMultipleExpandTile";
 //#endregion
 //#region src/components/onboarding/ChoiceGroup/ChoiceMultiple/ListChoiceMultipleTile.tsx
 var R5 = ({ label: e, icon: n, description: r, className: i, ref: a, ...o }) => {
-	let { checkboxProps: s } = cz();
+	let { groupValue: s, checkboxProps: c } = cz(), l = c(o), [u, d] = je(l.defaultChecked === !0);
 	return /* @__PURE__ */ t(I5, {
 		label: e,
 		icon: n,
 		description: r,
+		selected: (l.checked ?? s?.includes(o.value) ?? u) === !0,
 		className: i,
 		children: /* @__PURE__ */ t(N4, {
-			...s(o),
+			...l,
+			onCheckedChange: (e) => {
+				d(e === !0), l.onCheckedChange?.(e);
+			},
 			ref: a,
 			"aria-label": e,
 			className: "group inline-flex shrink-0 appearance-none outline-hidden",
@@ -51094,7 +51086,12 @@ var eye = G([
 ], {
 	variants: { selected: {
 		true: "shadow-[inset_0_0_0_2px_var(--color-content-primary)]",
-		false: ["shadow-[inset_0_0_0_0.5px_var(--color-misc-hairline-emphasized)]", "has-active:bg-background-borderless-subdued-down hover:bg-background-borderless-subdued-hover has-focus-visible:bg-background-borderless-subdued-hover"]
+		false: [
+			"shadow-[inset_0_0_0_1px_var(--color-misc-border)]",
+			"hover:shadow-[inset_0_0_0_1px_var(--color-misc-border-hover)]",
+			"has-focus-visible:shadow-[inset_0_0_0_1px_var(--color-misc-border-hover)]",
+			"has-active:shadow-[inset_0_0_0_1px_var(--color-misc-border-down)]"
+		]
 	} },
 	defaultVariants: { selected: !1 }
 }), tye = ({ label: e, icon: r, selected: i, className: a, children: o, ...s }) => /* @__PURE__ */ n("label", {

package/package.json

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

package/theme.css

@@ -270,6 +270,13 @@
   --radius-450: 9px;
   --radius-500: 10px;
   --radius-600: 12px;
+  /*
+   * Concentric rounding — inner radius of a padded element inside a rounded
+   * container: reference radius minus the padding (name: <reference>-<padding>),
+   * so nested corners stay visually parallel.
+   * https://www.figma.com/design/cHgANa7dtzDDGXk7dKuAOQ/Prism?node-id=74340-16292
+   */
+  --radius-concentric-500-4px: calc(var(--radius-500) - 4px);
   --radius-area-500: 18px;
   --radius-area-600: 34px;
   --radius-full: 9999px;