@photoroom/ui 0.1.772 → 0.1.774

package/index.mjs

@@ -54619,13 +54619,23 @@ function F8(e, t) {
 T8(F8, "makeContentId");
 //#endregion
 //#region src/components/navigation/TabNavigation/TabNavigationItem.tsx
-var I8 = ({ value: e, children: t, className: n, ref: r, ...i }) => /* @__PURE__ */ L(M8, {
-	ref: r,
-	value: e,
-	className: W("relative flex shrink-0 items-center", "px-2 py-3", "outline-hidden", "component-semi-strong-500", "text-content-secondary hover:text-content-primary", "data-[state=active]:text-content-primary", "interaction-transition transition-colors", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "after:pointer-events-none after:absolute after:inset-x-2 after:bottom-0 after:h-0.5", "after:bg-content-primary after:opacity-0", "after:transition-opacity after:duration-200", "data-[state=active]:after:opacity-100", n),
-	...i,
-	children: t
-});
+var I8 = ({ value: e, children: t, badge: n, className: r, ref: i, ...a }) => {
+	let [o, s] = Pe(!1);
+	return /* @__PURE__ */ R(M8, {
+		ref: i,
+		value: e,
+		"data-pointer-focused": o || void 0,
+		onPointerDown: () => s(!0),
+		onBlur: () => s(!1),
+		className: W("relative -mx-2 flex h-10 shrink-0 items-center gap-1 px-2", "outline-hidden", "component-semi-strong-500", "text-content-secondary hover:text-content-primary", "data-[state=active]:text-content-primary", "interaction-transition transition-colors", "before:rounded-400 before:pointer-events-none before:absolute before:inset-x-0 before:inset-y-1 before:ring-inset", "focus-visible:not-data-pointer-focused:before:ring-misc-focus-indicator", "focus-visible:not-data-pointer-focused:before:misc-border-size-focus-ring", "after:pointer-events-none after:absolute after:inset-x-2 after:bottom-0 after:h-0.5", "after:bg-content-primary after:opacity-0", "after:transition-opacity after:duration-200", "data-[state=active]:after:opacity-100", r),
+		...a,
+		children: [t, n && /* @__PURE__ */ L(VF, {
+			size: "small",
+			variant: "moon-grape",
+			children: n
+		})]
+	});
+};
 I8.displayName = "TabNavigationItem";
 //#endregion
 //#region src/components/navigation/TabNavigation/TabNavigation.tsx
@@ -54637,7 +54647,7 @@ var L8 = ({ className: e, ref: t, ...n }) => /* @__PURE__ */ L(A8, {
 L8.displayName = "TabNavigation";
 var R8 = ({ className: e, ref: t, ...n }) => /* @__PURE__ */ L(j8, {
 	ref: t,
-	className: W("flex w-full items-stretch gap-2", e),
+	className: W("flex w-full items-stretch gap-6", e),
 	...n
 });
 R8.displayName = "TabNavigation.List";
@@ -59211,35 +59221,34 @@ var wTe = ({ titleBlock: e, children: t, className: n, ...r }) => /* @__PURE__ *
 			className: "size-6 text-white"
 		})
 	});
-}, O7 = {}, k7 = ({ variant: e, className: t, cssBackgroundColor: n, children: r, isHiddenSessionKey: i, closeLabel: a, closeButtonVariant: o = "secondary-on-dark", forceShow: s, ...c }) => {
-	let [l, u] = Pe(() => i ? O7[i] ?? !0 : !1), d = !s && l;
+}, O7 = {}, k7 = ({ variant: e, className: t, children: n, isHiddenSessionKey: r, closeLabel: i, closeButtonVariant: a = "secondary-on-dark", forceShow: o, ...s }) => {
+	let [c, l] = Pe(() => r ? O7[r] ?? !0 : !1), u = !o && c;
 	De(() => {
-		if (!i) return;
+		if (!r) return;
 		let e;
 		try {
-			let t = sessionStorage.getItem(i);
+			let t = sessionStorage.getItem(r);
 			e = t ? !!JSON.parse(t) : !1;
 		} catch {
 			e = !1;
 		}
-		O7[i] = e, u(e);
-	}, [i]);
-	let f = V(() => {
-		s || (u(!0), i && (sessionStorage.setItem(i, JSON.stringify(!0)), O7[i] = !0));
-	}, [i, s]);
-	return d ? null : /* @__PURE__ */ R("div", {
-		className: U("relative text-white", "ps-4 pe-16 sm:ps-6 md:ps-8 lg:px-16", !n && e === "black" && "bg-black", !n && e === "neutral" && "bg-neutral-800", t),
-		style: n ? { backgroundColor: n } : void 0,
-		...c,
+		O7[r] = e, l(e);
+	}, [r]);
+	let d = V(() => {
+		o || (l(!0), r && (sessionStorage.setItem(r, JSON.stringify(!0)), O7[r] = !0));
+	}, [r, o]);
+	return u ? null : /* @__PURE__ */ R("div", {
+		className: U("relative text-white", "ps-4 pe-16 sm:ps-6 md:ps-8 lg:px-16", e === "dark" ? "bg-neutral-900" : "bg-neutral-800", t),
+		...s,
 		children: [/* @__PURE__ */ L("div", {
-			className: "mx-auto flex min-h-[64px] max-w-[1200px] items-center md:justify-center",
-			children: r
+			className: U("mx-auto flex max-w-[1200px] items-center lg:justify-center", e === "dark" ? "min-h-14" : "min-h-16"),
+			children: n
 		}), /* @__PURE__ */ L(sd, {
-			"aria-label": a || "Close",
-			className: "absolute end-5 top-5",
-			variant: o,
+			"aria-label": i || "Close",
+			className: U("absolute end-5", e === "dark" ? "top-4" : "top-5"),
+			variant: a,
 			size: "small",
-			onClick: f
+			onClick: d
 		})]
 	});
 }, kTe = ({ title: e, backgroundColor: t, bgImageDesktop: n, bgImageMobile: r, className: i, ...a }) => /* @__PURE__ */ R("div", {
@@ -60619,41 +60628,35 @@ var TEe = Object.assign(J7, {
 			}, e.id))
 		]
 	});
-}, Y7 = "is-promo-banner-hidden", jEe = ({ contextLabel: e, closeAriaLabel: t, cssBackgroundColor: n, thumbnail: r, cta: i, linkAs: a = "a", description: o, forceShow: s, ...c }) => /* @__PURE__ */ L(k7, {
-	variant: "black",
-	cssBackgroundColor: n,
+}, Y7 = "is-promo-banner-hidden", jEe = ({ contextLabel: e, closeAriaLabel: t, cta: n, linkAs: r = "a", description: i, forceShow: a, ...o }) => /* @__PURE__ */ L(k7, {
+	variant: "dark",
 	isHiddenSessionKey: Y7,
 	closeLabel: t,
 	closeButtonVariant: "borderless-on-dark",
-	forceShow: s,
-	...c,
+	forceShow: a,
+	...o,
 	children: /* @__PURE__ */ R("div", {
-		className: "flex flex-wrap items-center gap-x-4 gap-y-2 py-4",
-		children: [e && /* @__PURE__ */ L("div", {
-			className: "component-semi-strong-500 shrink-0",
-			children: e
-		}), /* @__PURE__ */ R("div", {
-			className: "flex flex-wrap items-center gap-x-4 gap-y-2",
-			children: [/* @__PURE__ */ R("div", {
-				className: "flex items-center gap-2",
-				children: [r && /* @__PURE__ */ L("div", {
-					className: "relative size-8 shrink-0 overflow-hidden rounded",
-					children: r
-				}), /* @__PURE__ */ L("span", {
-					className: "component-light-500 [&_a]:underline [&>p]:inline",
-					children: o
-				})]
-			}), i && /* @__PURE__ */ L(td, {
-				as: a,
-				href: i.href,
+		className: "flex flex-col items-start gap-3 py-4 lg:flex-row lg:items-center lg:gap-4 lg:py-3",
+		children: [
+			e && /* @__PURE__ */ R("div", {
+				className: "component-semi-strong-500 flex shrink-0 items-center gap-2.5",
+				children: [/* @__PURE__ */ L("span", { className: "from-brand-blue to-brand-purple size-2.5 shrink-0 rounded-full bg-linear-to-r" }), e]
+			}),
+			/* @__PURE__ */ L("span", {
+				className: "component-light-500 [&_a]:underline [&>p]:inline",
+				children: i
+			}),
+			n && /* @__PURE__ */ L(td, {
+				as: r,
+				href: n.href,
 				variant: "secondary-on-dark",
 				size: "medium",
 				density: "compact",
 				className: "shrink-0",
-				...i.extraAttrs,
-				children: i.label
-			})]
-		})]
+				...n.extraAttrs,
+				children: n.label
+			})
+		]
 	})
 }), MEe = ({ title: e, visualElement: t, largeVisualAsset: n, widget: r, widgetLabel: i, background: a = "neutral-50", bgColor: o, ...s }) => /* @__PURE__ */ L(h7, {
 	as: "div",

package/package.json

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