@photoroom/ui 0.1.844 → 0.1.845

package/components/website/VideoExamplesBlock/VideoExampleTile.d.ts

@@ -3,7 +3,10 @@ export type VideoExampleTileProps = Readonly<{
     posterSrc?: string;
     productImageSrc?: string;
     productImageAlt?: string;
+    href?: string;
+    label?: string;
+    actionLabel?: string;
     className?: string;
 }>;
-export declare const VideoExampleTile: ({ videoSrc, posterSrc, productImageSrc, productImageAlt, className, }: VideoExampleTileProps) => import("react").JSX.Element;
+export declare const VideoExampleTile: ({ videoSrc, posterSrc, productImageSrc, productImageAlt, href, label, actionLabel, className, }: VideoExampleTileProps) => import("react").JSX.Element;
 //# sourceMappingURL=VideoExampleTile.d.ts.map

package/components/website/VideoExamplesBlock/VideoExampleTile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoExampleTile.d.ts","sourceRoot":"","sources":["../../../../src/components/website/VideoExamplesBlock/VideoExampleTile.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC;IAC3C,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAIH,eAAO,MAAM,gBAAgB,0EAM1B,qBAAqB,gCA2FvB,CAAC"}
+{"version":3,"file":"VideoExampleTile.d.ts","sourceRoot":"","sources":["../../../../src/components/website/VideoExamplesBlock/VideoExampleTile.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC;IAC3C,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAIH,eAAO,MAAM,gBAAgB,oGAS1B,qBAAqB,gCA4GvB,CAAC"}

package/components/website/VideoExamplesBlock/VideoExamplesBlock.d.ts

@@ -4,6 +4,8 @@ export type VideoExample = Readonly<{
     posterSrc?: string;
     productImageSrc?: string;
     productImageAlt?: string;
+    href?: string;
+    label?: string;
 }>;
 export type VideoExamplesCategory = Readonly<{
     id: string;
@@ -16,7 +18,8 @@ export type VideoExamplesBlockProps = Readonly<{
     /** Opens this tab and moves it right after the first tab. Falls back to the first category. */
     defaultCategoryId?: string;
     tabListLabel?: string;
+    tileActionLabel?: string;
     footer: React.ReactNode;
 }> & React.ComponentProps<"section">;
-export declare const VideoExamplesBlock: ({ titleBlock, categories, defaultCategoryId, tabListLabel, footer, className, ...rest }: VideoExamplesBlockProps) => import("react").JSX.Element;
+export declare const VideoExamplesBlock: ({ titleBlock, categories, defaultCategoryId, tabListLabel, tileActionLabel, footer, className, ...rest }: VideoExamplesBlockProps) => import("react").JSX.Element;
 //# sourceMappingURL=VideoExamplesBlock.d.ts.map

package/components/website/VideoExamplesBlock/VideoExamplesBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoExamplesBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/website/VideoExamplesBlock/VideoExamplesBlock.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,YAAY,EAAE,CAAC;CACnC,CAAC,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC7C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,UAAU,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC7C,+FAA+F;IAC/F,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC,GACA,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;AAgBlC,eAAO,MAAM,kBAAkB,4FAQ5B,uBAAuB,gCA8DzB,CAAC"}
+{"version":3,"file":"VideoExamplesBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/website/VideoExamplesBlock/VideoExamplesBlock.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,YAAY,EAAE,CAAC;CACnC,CAAC,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC7C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,UAAU,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC7C,+FAA+F;IAC/F,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC,GACA,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;AAgBlC,eAAO,MAAM,kBAAkB,6GAS5B,uBAAuB,gCAiEzB,CAAC"}

package/index.mjs

@@ -62762,41 +62762,53 @@ var WDe = ({ title: e, logos: t, className: n, ...r }) => {
 			})]
 		})]
 	});
-}, XDe = "(prefers-reduced-motion: reduce)", m9 = ({ videoSrc: e, posterSrc: t, productImageSrc: n, productImageAlt: r = "", className: i }) => {
-	let a = H(null);
+}, XDe = "(prefers-reduced-motion: reduce)", m9 = ({ videoSrc: e, posterSrc: t, productImageSrc: n, productImageAlt: r = "", href: i, label: a, actionLabel: o, className: s }) => {
+	let c = H(null);
 	return Me(() => {
-		let n = a.current;
+		let n = c.current;
 		if (!n || !("IntersectionObserver" in window)) return;
-		let r = window.matchMedia(XDe), i = !1, o = () => {
+		let r = window.matchMedia(XDe), i = !1, a = () => {
 			n.hasAttribute("src") && (n.removeAttribute("src"), n.load());
-		}, s = () => {
-			!i || r.matches ? o() : (n.getAttribute("src") !== e && n.setAttribute("src", e), n.play().catch(() => void 0));
-		}, c = new IntersectionObserver((e) => {
-			i = !!e[e.length - 1]?.isIntersecting, i && t && !n.hasAttribute("poster") && n.setAttribute("poster", t), s();
+		}, o = () => {
+			!i || r.matches ? a() : (n.getAttribute("src") !== e && n.setAttribute("src", e), n.play().catch(() => void 0));
+		}, s = new IntersectionObserver((e) => {
+			i = !!e[e.length - 1]?.isIntersecting, i && t && !n.hasAttribute("poster") && n.setAttribute("poster", t), o();
 		}, { rootMargin: "200px" });
-		return c.observe(n), r.addEventListener("change", s), () => {
-			c.disconnect(), r.removeEventListener("change", s), o();
+		return s.observe(n), r.addEventListener("change", o), () => {
+			s.disconnect(), r.removeEventListener("change", o), a();
 		};
-	}, [e, t]), /* @__PURE__ */ R("div", {
-		className: W("rounded-500 bg-background-subdued relative aspect-9/16 w-full overflow-hidden", "after:rounded-500 after:pointer-events-none after:absolute after:inset-0", "after:border-misc-hairline-emphasized after:misc-border-size-hairline", i),
-		children: [/* @__PURE__ */ L("video", {
-			ref: a,
-			loop: !0,
-			muted: !0,
-			playsInline: !0,
-			disablePictureInPicture: !0,
-			preload: "none",
-			className: "size-full object-cover"
-		}), n && /* @__PURE__ */ L("div", {
-			className: U("absolute start-1.5 bottom-1.5 size-700 overflow-hidden", "rounded-300 bg-surface-primary shadow-500", "border-content-white-primary border-[1.5px]"),
-			children: /* @__PURE__ */ L("img", {
-				src: n,
-				alt: r,
-				loading: "lazy",
-				decoding: "async",
+	}, [e, t]), /* @__PURE__ */ R(i ? "a" : "div", {
+		...i ? {
+			href: i,
+			"aria-label": a
+		} : {},
+		className: W("group rounded-500 bg-background-subdued relative block aspect-9/16 w-full overflow-hidden", "after:rounded-500 after:pointer-events-none after:absolute after:inset-0", "after:border-misc-hairline-emphasized after:misc-border-size-hairline", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring outline-hidden", s),
+		children: [
+			/* @__PURE__ */ L("video", {
+				ref: c,
+				loop: !0,
+				muted: !0,
+				playsInline: !0,
+				disablePictureInPicture: !0,
+				preload: "none",
 				className: "size-full object-cover"
+			}),
+			n && /* @__PURE__ */ L("div", {
+				className: U("absolute start-1.5 bottom-1.5 size-700 overflow-hidden", "rounded-300 bg-surface-primary shadow-500", "border-content-white-primary border-[1.5px]"),
+				children: /* @__PURE__ */ L("img", {
+					src: n,
+					alt: r,
+					loading: "lazy",
+					decoding: "async",
+					className: "size-full object-cover"
+				})
+			}),
+			i && /* @__PURE__ */ L("span", {
+				"aria-hidden": !0,
+				className: U("absolute inset-0 flex items-center justify-center px-4 text-center", "bg-black-alpha-500 component-500 text-content-white-primary font-600", "opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 group-active:opacity-100"),
+				children: o
 			})
-		})]
+		]
 	});
 }, ZDe = 12, QDe = (e, t) => {
 	let [n, ...r] = e;
@@ -62805,26 +62817,26 @@ var WDe = ({ title: e, logos: t, className: n, ...r }) => {
 		t,
 		...r.filter((e) => e !== t)
 	];
-}, $De = ({ titleBlock: e, categories: t, defaultCategoryId: n, tabListLabel: r, footer: i, className: a, ...o }) => {
-	let s = t.find((e) => e.id === n), c = QDe(t, s), l = (s ?? t[0])?.id;
+}, $De = ({ titleBlock: e, categories: t, defaultCategoryId: n, tabListLabel: r, tileActionLabel: i, footer: a, className: o, ...s }) => {
+	let c = t.find((e) => e.id === n), l = QDe(t, c), u = (c ?? t[0])?.id;
 	return /* @__PURE__ */ L("section", {
-		className: W("pt-e700 pb-e1000 px-4 sm:px-6 md:px-8 xl:px-10", a),
-		...o,
+		className: W("pt-e700 pb-e1000 px-4 sm:px-6 md:px-8 xl:px-10", o),
+		...s,
 		children: /* @__PURE__ */ R("div", {
 			className: "gap-i500 mx-auto flex w-full max-w-300 flex-col",
 			children: [/* @__PURE__ */ R("div", {
 				className: "gap-i400 flex flex-col",
 				children: [e, t.length > 0 && /* @__PURE__ */ R(K8, {
-					defaultValue: l,
+					defaultValue: u,
 					className: "flex flex-col gap-4",
 					children: [/* @__PURE__ */ L(K8.List, {
 						"aria-label": r,
 						className: "-mx-2 w-auto scrollbar-none overflow-x-auto px-2",
-						children: c.map((e) => /* @__PURE__ */ L(K8.Item, {
+						children: l.map((e) => /* @__PURE__ */ L(K8.Item, {
 							value: e.id,
 							children: e.label
 						}, e.id))
-					}), c.map((e) => /* @__PURE__ */ L(K8.Content, {
+					}), l.map((e) => /* @__PURE__ */ L(K8.Content, {
 						value: e.id,
 						children: /* @__PURE__ */ L("ul", {
 							role: "list",
@@ -62835,15 +62847,18 @@ var WDe = ({ title: e, logos: t, className: n, ...r }) => {
 									videoSrc: e.videoSrc,
 									posterSrc: e.posterSrc,
 									productImageSrc: e.productImageSrc,
-									productImageAlt: e.productImageAlt
+									productImageAlt: e.productImageAlt,
+									href: e.href,
+									label: e.label,
+									actionLabel: i
 								})
 							}, e.id))
 						})
 					}, e.id))]
-				}, l)]
+				}, u)]
 			}), /* @__PURE__ */ L("div", {
 				className: "flex",
-				children: i
+				children: a
 			})]
 		})
 	});

package/package.json

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