@photoroom/ui 0.1.221 → 0.1.223

package/index.mjs

@@ -54774,26 +54774,53 @@ var e_e = ({ title: e, date: t, className: n }) => /* @__PURE__ */ D("div", {
 			]
 		})
 	})
-}), o_e = ({ title: e, children: t, className: r, ...i }) => {
-	let a = n.toArray(t);
+}), o_e = ({ title: e, tabs: t, className: r, ...i }) => {
+	let [a, o] = C(0), s = Math.min(a, Math.max(0, t.length - 1));
 	return /* @__PURE__ */ E("section", {
 		className: H("pt-e700 pb-e1000 w-full px-4 sm:px-6 md:px-8 xl:px-10", r),
 		...i,
 		children: /* @__PURE__ */ D("div", {
 			className: "mx-auto flex w-full max-w-[1200px] flex-col items-center",
-			children: [!!e && /* @__PURE__ */ E("div", {
-				className: "pb-i600 w-full",
-				children: e
-			}), /* @__PURE__ */ D("div", {
-				className: "flex w-full flex-col gap-6",
-				children: [/* @__PURE__ */ E("div", {
-					className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-[minmax(0,1fr)_minmax(0,400px)]",
-					children: a.slice(0, 2)
-				}), a.length > 2 && /* @__PURE__ */ E("div", {
-					className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-[minmax(0,400px)_minmax(0,1fr)]",
-					children: a.slice(2, 4)
-				})]
-			})]
+			children: [
+				!!e && /* @__PURE__ */ E("div", {
+					className: H("w-full", t.length > 1 ? "pb-i500" : "pb-i600"),
+					children: e
+				}),
+				t.length > 1 && /* @__PURE__ */ E("div", {
+					className: "pb-i400 flex w-full justify-center",
+					children: /* @__PURE__ */ E(C5, {
+						className: "w-full max-w-[600px]",
+						value: String(s),
+						onValueChange: (e) => {
+							e && o(Number(e));
+						},
+						children: t.map((e, t) => /* @__PURE__ */ E(C5.Item, {
+							value: String(t),
+							className: "px-4 py-1 text-center text-balance",
+							children: e.label
+						}, t))
+					})
+				}),
+				/* @__PURE__ */ E("div", {
+					className: "grid w-full grid-cols-1 grid-rows-1",
+					children: t.map((e, t) => {
+						let r = t === s, i = n.toArray(e.cards);
+						return /* @__PURE__ */ D("div", {
+							"aria-hidden": !r,
+							inert: !r,
+							style: { transform: `translateX(${(t - s) * 1}rem)` },
+							className: H("col-start-1 row-start-1 flex flex-col gap-6", "transition-[opacity,transform] duration-200 ease-out motion-reduce:transition-none", r ? "opacity-100" : "opacity-0"),
+							children: [/* @__PURE__ */ E("div", {
+								className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-[minmax(0,1fr)_minmax(0,400px)]",
+								children: i.slice(0, 2)
+							}), i.length > 2 && /* @__PURE__ */ E("div", {
+								className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-[minmax(0,400px)_minmax(0,1fr)]",
+								children: i.slice(2, 4)
+							})]
+						}, t);
+					})
+				})
+			]
 		})
 	});
 }, s_e = ({ preview: e, title: t, subtitle: n, cta: r, className: i, ...a }) => /* @__PURE__ */ D("div", {
@@ -55738,7 +55765,7 @@ var y9 = {}, b9 = ({ variant: e, className: t, cssBackgroundColor: n, children:
 	className: H("py-e400 px-4 sm:px-6 md:px-8 xl:px-10", r),
 	...i,
 	children: /* @__PURE__ */ D("div", {
-		className: "bg-sand-50 rounded-500 mx-auto flex w-full max-w-[1200px] flex-col gap-6 overflow-hidden p-3 lg:flex-row lg:items-stretch",
+		className: "bg-sand-50 rounded-500 mx-auto flex w-full max-w-[1200px] flex-col-reverse gap-6 overflow-hidden p-3 lg:flex-row lg:items-stretch",
 		children: [/* @__PURE__ */ D("div", {
 			className: "flex w-full flex-col items-start gap-4 p-3 lg:w-[320px] lg:shrink-0 lg:justify-between",
 			children: [/* @__PURE__ */ E("div", {
@@ -55748,7 +55775,10 @@ var y9 = {}, b9 = ({ variant: e, className: t, cssBackgroundColor: n, children:
 		}), /* @__PURE__ */ E("div", {
 			className: V("grid w-full flex-1 grid-cols-3 gap-3 sm:grid-cols-6 md:gap-[10px]", "lg:grid-cols-4 lg:gap-3 xl:grid-cols-6"),
 			children: n.map((e, t) => /* @__PURE__ */ E("div", {
-				className: "bg-surface-default rounded-300 flex aspect-3/2 items-center justify-center overflow-hidden p-1",
+				className: V("bg-surface-default rounded-300 aspect-3/2 items-center justify-center overflow-hidden p-1", {
+					flex: t < 6,
+					"hidden sm:flex": t >= 6
+				}),
 				children: /* @__PURE__ */ E("div", {
 					className: "relative aspect-video max-w-[100px] min-w-px flex-1",
 					children: e

package/package.json

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