@photoroom/ui 0.1.450 → 0.1.451

package/components/collections/CommonMenu/MenuItemButton.d.ts

@@ -2,16 +2,18 @@ import { VariantProps } from "class-variance-authority";
 import React from "react";
 import { Merge, PolymorphicComponent } from "../../polymorphic";
 declare const menuItemCva: (props?: ({
-    withIcon?: boolean | null | undefined;
+    leadingSlot?: "icon" | "none" | "statusDot" | null | undefined;
     variant?: "default" | "negative" | "positive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type MenuItemCvaProps = VariantProps<typeof menuItemCva>;
+type MenuItemCvaProps = Pick<VariantProps<typeof menuItemCva>, "variant">;
 type MenuItemButtonOwnProps = Readonly<{
     avatar?: React.ReactElement;
     objectPreview?: React.ReactElement;
     icon?: React.ComponentType<React.ComponentPropsWithoutRef<"svg">>;
     leading?: React.ReactNode;
     hideIcon?: boolean;
+    /** Semantic color token className for an 8px leading status dot, e.g. "bg-content-accent". */
+    statusDot?: `bg-content-${string}` | `bg-background-${string}`;
     rightElement?: React.ReactNode;
     trailingLabel?: string;
     description?: string;

package/components/collections/CommonMenu/MenuItemButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemButton.d.ts","sourceRoot":"","sources":["../../../../src/components/collections/CommonMenu/MenuItemButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,KAAgD,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,KAAK,EAAE,oBAAoB,EAAoB,MAAM,mBAAmB,CAAC;AAGlF,QAAA,MAAM,WAAW;;;8EAuBhB,CAAC;AAcF,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AAEzD,KAAK,sBAAsB,GAAG,QAAQ,CAAC;IACrC,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC;IAClE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC,GACA,gBAAgB,CAAC;AAKnB,MAAM,MAAM,mBAAmB,GAAG,KAAK,CACrC,KAAK,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EACrC,sBAAsB,CACvB,CAAC;AAEF,eAAO,MAAM,cAAc,EA4FrB,oBAAoB,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAC"}
+{"version":3,"file":"MenuItemButton.d.ts","sourceRoot":"","sources":["../../../../src/components/collections/CommonMenu/MenuItemButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,KAAgD,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,KAAK,EAAE,oBAAoB,EAAoB,MAAM,mBAAmB,CAAC;AAGlF,QAAA,MAAM,WAAW;;;8EAyBhB,CAAC;AAcF,KAAK,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,WAAW,CAAC,EAAE,SAAS,CAAC,CAAC;AAE1E,KAAK,sBAAsB,GAAG,QAAQ,CAAC;IACrC,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC;IAClE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8FAA8F;IAC9F,SAAS,CAAC,EAAE,cAAc,MAAM,EAAE,GAAG,iBAAiB,MAAM,EAAE,CAAC;IAC/D,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC,GACA,gBAAgB,CAAC;AAKnB,MAAM,MAAM,mBAAmB,GAAG,KAAK,CACrC,KAAK,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EACrC,sBAAsB,CACvB,CAAC;AAEF,eAAO,MAAM,cAAc,EAoGrB,oBAAoB,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAC"}

package/index.mjs

@@ -29621,15 +29621,16 @@ XB.displayName = "MenuContent";
 //#endregion
 //#region src/components/collections/CommonMenu/MenuItemButton.tsx
 var ZB = G([
-	"component-500 misc-dropdown-inner-rounding flex w-full cursor-pointer gap-3 pe-3 outline-hidden",
+	"component-500 misc-dropdown-inner-rounding flex w-full cursor-pointer pe-3 outline-hidden",
 	"hover:bg-background-borderless-subdued-hover focus-visible:bg-background-borderless-subdued-hover active:bg-background-borderless-subdued-down",
 	"disabled:pointer-events-none disabled:opacity-30 disabled:select-none",
 	"aria-disabled:pointer-events-none aria-disabled:opacity-30 aria-disabled:select-none"
 ], {
 	variants: {
-		withIcon: {
-			true: "ps-2.5",
-			false: "ps-3"
+		leadingSlot: {
+			none: "gap-3 ps-3",
+			icon: "gap-3 ps-2.5",
+			statusDot: "gap-1.5 ps-1.5"
 		},
 		variant: {
 			default: "text-content-primary",
@@ -29637,7 +29638,10 @@ var ZB = G([
 			negative: "text-content-negative"
 		}
 	},
-	defaultVariants: { variant: "default" }
+	defaultVariants: {
+		variant: "default",
+		leadingSlot: "none"
+	}
 }), QB = G(["icon-size-500 mt-2.5"], { variants: { variant: {
 	default: "text-content-secondary",
 	positive: "text-content-positive",
@@ -29646,52 +29650,57 @@ var ZB = G([
 	hs,
 	bs,
 	xs
-], eV = (({ as: e = "button", avatar: r, objectPreview: i, icon: a, leading: o, hideIcon: s, children: c, description: l, variant: u = "default", noWrap: d = !1, rightElement: f, trailingLabel: p, className: m, ref: h, ...g }) => {
-	let _ = ke(() => r ? he(r, {
+], eV = (({ as: e = "button", avatar: r, objectPreview: i, icon: a, leading: o, hideIcon: s, statusDot: c, children: l, description: u, variant: d = "default", noWrap: f = !1, rightElement: p, trailingLabel: m, className: h, ref: g, ..._ }) => {
+	let v = ke(() => r ? he(r, {
 		className: U("pointer-events-none ms-auto mt-2", r.props.className),
 		size: 24
-	}) : null, [r]), v = ke(() => i ? he(i, { className: U("bg-background-asset pointer-events-none ms-auto mt-2 h-6 w-6", i.props.className) }) : null, [i]);
+	}) : null, [r]), y = ke(() => i ? he(i, { className: U("bg-background-asset pointer-events-none ms-auto mt-2 h-6 w-6", i.props.className) }) : null, [i]);
 	return /* @__PURE__ */ n(e, {
-		ref: h,
+		ref: g,
 		className: ZB({
-			variant: u,
-			withIcon: !!a || !!o || !!s,
-			class: m
+			variant: d,
+			leadingSlot: c ? "statusDot" : a || o || s ? "icon" : "none",
+			class: h
 		}),
-		...g,
+		..._,
 		children: [
-			_,
 			v,
-			a && /* @__PURE__ */ t(a, {
-				className: QB({ variant: u }),
+			y,
+			c && /* @__PURE__ */ t("span", {
+				className: "icon-size-500 mt-2.5 flex items-center justify-center",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ t("span", { className: U("size-2 rounded-full", c) })
+			}),
+			!c && a && /* @__PURE__ */ t(a, {
+				className: QB({ variant: d }),
 				"aria-hidden": "true"
 			}),
-			!a && o && /* @__PURE__ */ t("span", {
+			!c && !a && o && /* @__PURE__ */ t("span", {
 				className: "icon-size-500 mt-2.5 flex items-center justify-center",
 				"aria-hidden": "true",
 				children: o
 			}),
-			!a && !o && s && /* @__PURE__ */ t("span", {
+			!c && !a && !o && s && /* @__PURE__ */ t("span", {
 				className: "icon-size-500 mt-2.5",
 				"aria-hidden": "true"
 			}),
 			/* @__PURE__ */ n("div", {
-				className: U("flex flex-1 flex-col gap-0.5 py-[11px] text-start", d && "truncate"),
+				className: U("flex flex-1 flex-col gap-0.5 py-[11px] text-start", f && "truncate"),
 				children: [/* @__PURE__ */ t("div", {
-					className: U(d && "truncate"),
-					children: c
-				}), !r && l && /* @__PURE__ */ t("div", {
-					className: U("component-300 text-content-tertiary", d && "truncate"),
+					className: U(f && "truncate"),
 					children: l
+				}), !r && u && /* @__PURE__ */ t("div", {
+					className: U("component-300 text-content-tertiary", f && "truncate"),
+					children: u
 				})]
 			}),
-			f && /* @__PURE__ */ t("div", {
-				className: U("ms-auto", ye(f) && $B.includes(f.type) ? "mt-2.5" : "mt-2"),
-				children: f
+			p && /* @__PURE__ */ t("div", {
+				className: U("ms-auto", ye(p) && $B.includes(p.type) ? "mt-2.5" : "mt-2"),
+				children: p
 			}),
-			p && /* @__PURE__ */ t("span", {
+			m && /* @__PURE__ */ t("span", {
 				className: "text-content-secondary shrink-0 self-center whitespace-nowrap",
-				children: p
+				children: m
 			})
 		]
 	});

package/package.json

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