@photoroom/ui 0.1.529 → 0.1.531

package/components/navigation/SideNavigation/SideNavigationItem/SideNavigationItem.d.ts

@@ -5,6 +5,7 @@ export type SideNavigationItemProps = Readonly<{
     isSelected?: boolean;
     icon?: React.ComponentType<React.ComponentProps<"svg">> | React.ReactElement;
     activeIcon?: React.ComponentType<React.ComponentProps<"svg">> | React.ReactElement;
+    trailingElement?: React.ReactNode;
 }>;
 export declare const SideNavigationItem: PolymorphicComponent<"button", SideNavigationItemProps>;
 //# sourceMappingURL=SideNavigationItem.d.ts.map

package/components/navigation/SideNavigation/SideNavigationItem/SideNavigationItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavigationItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SideNavigation/SideNavigationItem/SideNavigationItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,oBAAoB,EAAoB,MAAM,sBAAsB,CAAC;AAE9E,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC7E,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC;CACpF,CAAC,CAAC;AAEH,eAAO,MAAM,kBAAkB,EA4CzB,oBAAoB,CAAC,QAAQ,EAAE,uBAAuB,CAAC,CAAC"}
+{"version":3,"file":"SideNavigationItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SideNavigation/SideNavigationItem/SideNavigationItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,oBAAoB,EAAoB,MAAM,sBAAsB,CAAC;AAE9E,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC7E,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IACnF,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC,CAAC,CAAC;AAEH,eAAO,MAAM,kBAAkB,EA8CzB,oBAAoB,CAAC,QAAQ,EAAE,uBAAuB,CAAC,CAAC"}

package/index.mjs

@@ -49934,54 +49934,62 @@ var Nhe = W(["rounded-400 flex flex-1 grow flex-col items-center justify-center
 x5.displayName = "SideNavigationHeader";
 //#endregion
 //#region src/components/navigation/SideNavigation/SideNavigationItem/SideNavigationItem.tsx
-var S5 = (({ isSelected: e = !1, label: n, variant: r = "default", disabled: i, icon: a, activeIcon: o = a, as: s, className: c, ref: l, ...u }) => {
-	let d = {
+var S5 = (({ isSelected: e = !1, label: n, variant: r = "default", disabled: i, icon: a, activeIcon: o = a, trailingElement: s, as: c, className: l, ref: u, ...d }) => {
+	let f = {
 		variant: r,
 		label: n,
 		activeIcon: o,
-		icon: a
+		icon: a,
+		trailingElement: s
 	};
-	return s === void 0 ? /* @__PURE__ */ t("button", {
-		ref: l,
-		className: U("group flex w-full outline-hidden", i && "opacity-30", c),
-		...u,
+	return c === void 0 ? /* @__PURE__ */ t("button", {
+		ref: u,
+		className: U("group flex w-full outline-hidden", i && "opacity-30", l),
+		...d,
 		children: /* @__PURE__ */ t(C5, {
-			...d,
+			...f,
 			isActive: e
 		})
-	}) : /* @__PURE__ */ t(s, {
-		ref: l,
-		className: U("group flex w-full outline-hidden", i && "opacity-30", c),
-		...u,
+	}) : /* @__PURE__ */ t(c, {
+		ref: u,
+		className: U("group flex w-full outline-hidden", i && "opacity-30", l),
+		...d,
 		children: ({ isActive: n }) => /* @__PURE__ */ t(C5, {
-			...d,
+			...f,
 			isActive: n || e
 		})
 	});
 });
 S5.displayName = "SideNavigationItem";
-var C5 = ({ variant: e = "default", label: r, isActive: i, activeIcon: a, icon: o }) => {
-	let s = i ? a : o;
+var C5 = ({ variant: e = "default", label: r, isActive: i, activeIcon: a, icon: o, trailingElement: s }) => {
+	let c = i ? a : o;
 	return /* @__PURE__ */ n("span", {
 		className: H("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-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
+			"ps-[10px]": c,
+			"ps-3": !c
 		}),
-		children: [!!s && (be(s) ? /* @__PURE__ */ t("span", {
-			className: "flex h-5 w-5 shrink-0 items-center justify-center",
-			children: s
-		}) : /* @__PURE__ */ t(s, { className: H("h-5 w-5 shrink-0 transition duration-200", {
-			"fill-content-secondary": !i && e === "default",
-			"fill-content-positive": !i && e === "positive",
-			"fill-content-primary": i
-		}) })), /* @__PURE__ */ t("span", {
-			className: "component-500 text-start",
-			children: r
-		})]
+		children: [
+			!!c && (be(c) ? /* @__PURE__ */ t("span", {
+				className: "flex h-5 w-5 shrink-0 items-center justify-center",
+				children: c
+			}) : /* @__PURE__ */ t(c, { className: H("h-5 w-5 shrink-0 transition duration-200", {
+				"fill-content-secondary": !i && e === "default",
+				"fill-content-positive": !i && e === "positive",
+				"fill-content-primary": i
+			}) })),
+			/* @__PURE__ */ t("span", {
+				className: "component-500 min-w-0 text-start",
+				children: r
+			}),
+			!!s && /* @__PURE__ */ t("span", {
+				className: "ms-auto flex shrink-0 items-center",
+				children: s
+			})
+		]
 	});
 }, Ihe = W(["h-5"], { variants: { size: {
 	small: "w-[75px]",

package/package.json

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