@clubmed/trident-ui 2.0.0-beta.75 → 2.0.0-beta.77

package/examples/chapters-demo.d.ts

@@ -0,0 +1 @@
+export default function ChaptersDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/chapters-demo.js

@@ -0,0 +1,46 @@
+"use client";
+import { Chapters as e } from "../ui/Chapters/Chapters.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region lib/examples/chapters-demo.tsx
+function n() {
+	return /* @__PURE__ */ t(e, {
+		chapters: [
+			{
+				title: "All-inclusive experience",
+				content: /* @__PURE__ */ t("div", {
+					className: "min-h-screen p-40",
+					children: /* @__PURE__ */ t("p", {
+						className: "text-body max-w-prose",
+						children: "From sunrise yoga to late-night entertainment, every moment is included. Fine dining, premium beverages, world-class facilities — yours without a second thought."
+					})
+				})
+			},
+			{
+				title: "Sports & activities",
+				content: /* @__PURE__ */ t("div", {
+					className: "min-h-screen p-40",
+					children: /* @__PURE__ */ t("p", {
+						className: "text-body max-w-prose",
+						children: "Surf, dive, sail, climb — over 60 land and water sports await you. Our certified instructors guide guests of all levels, from first-timers to seasoned athletes."
+					})
+				})
+			},
+			{
+				title: "Kids clubs",
+				content: /* @__PURE__ */ t("div", {
+					className: "min-h-screen p-40",
+					children: /* @__PURE__ */ t("p", {
+						className: "text-body max-w-prose",
+						children: "Dedicated clubs for every age from 4 months to 17 years. Supervised activities, creative workshops, and adventure programmes tailored to each stage of childhood."
+					})
+				})
+			}
+		],
+		theme: "coreRange",
+		className: "w-full"
+	});
+}
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=chapters-demo.js.map

package/examples/chapters-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chapters-demo.js","names":[],"sources":["../../lib/examples/chapters-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Chapters } from '@/ui/Chapters/Chapters';\n\nexport default function ChaptersDemo() {\n  return (\n    <Chapters\n      chapters={[\n        {\n          title: 'All-inclusive experience',\n          content: (\n            <div className=\"min-h-screen p-40\">\n              <p className=\"text-body max-w-prose\">\n                From sunrise yoga to late-night entertainment, every moment is included. Fine\n                dining, premium beverages, world-class facilities — yours without a second thought.\n              </p>\n            </div>\n          ),\n        },\n        {\n          title: 'Sports & activities',\n          content: (\n            <div className=\"min-h-screen p-40\">\n              <p className=\"text-body max-w-prose\">\n                Surf, dive, sail, climb — over 60 land and water sports await you. Our certified\n                instructors guide guests of all levels, from first-timers to seasoned athletes.\n              </p>\n            </div>\n          ),\n        },\n        {\n          title: 'Kids clubs',\n          content: (\n            <div className=\"min-h-screen p-40\">\n              <p className=\"text-body max-w-prose\">\n                Dedicated clubs for every age from 4 months to 17 years. Supervised activities,\n                creative workshops, and adventure programmes tailored to each stage of childhood.\n              </p>\n            </div>\n          ),\n        },\n      ]}\n      theme=\"coreRange\"\n      className=\"w-full\"\n    />\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAe;AACrC,QACE,kBAAC,GAAD;EACE,UAAU;GACR;IACE,OAAO;IACP,SACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,KAAD;MAAG,WAAU;gBAAwB;MAGjC,CAAA;KACA,CAAA;IAET;GACD;IACE,OAAO;IACP,SACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,KAAD;MAAG,WAAU;gBAAwB;MAGjC,CAAA;KACA,CAAA;IAET;GACD;IACE,OAAO;IACP,SACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,KAAD;MAAG,WAAU;gBAAwB;MAGjC,CAAA;KACA,CAAA;;GAGX;EACD,OAAM;EACN,WAAU;EACV,CAAA"}

package/examples/promises-demo.d.ts

@@ -0,0 +1 @@
+export default function PromisesDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/promises-demo.js

@@ -0,0 +1,50 @@
+"use client";
+import { Promises as e } from "../ui/Promises/Promises.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region lib/examples/promises-demo.tsx
+function n() {
+	return /* @__PURE__ */ t(e, {
+		className: "min-h-500 w-full",
+		items: [
+			{
+				title: "The most beautiful destinations",
+				href: "#",
+				image: {
+					src: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400",
+					alt: "Beautiful beach destination"
+				}
+			},
+			{
+				title: "Kids club starting from 4 months",
+				href: "#",
+				image: {
+					src: "https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=400",
+					alt: "Kids playing at the club"
+				}
+			},
+			{
+				title: "The best restaurants on the coast",
+				href: "#",
+				image: {
+					src: "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400",
+					alt: "Fine dining restaurant"
+				}
+			}
+		],
+		labels: {
+			anchor: { continue: "Discover" },
+			layer: {
+				close: "Close menu",
+				open: "Open menu"
+			},
+			scroller: {
+				previous: "Previous",
+				next: "Next"
+			}
+		}
+	});
+}
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=promises-demo.js.map

package/examples/promises-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"promises-demo.js","names":[],"sources":["../../lib/examples/promises-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Promises } from '@/ui/Promises/Promises';\n\nexport default function PromisesDemo() {\n  return (\n    <Promises\n      className=\"min-h-500 w-full\"\n      items={[\n        {\n          title: 'The most beautiful destinations',\n          href: '#',\n          image: {\n            src: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400',\n            alt: 'Beautiful beach destination',\n          },\n        },\n        {\n          title: 'Kids club starting from 4 months',\n          href: '#',\n          image: {\n            src: 'https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=400',\n            alt: 'Kids playing at the club',\n          },\n        },\n        {\n          title: 'The best restaurants on the coast',\n          href: '#',\n          image: {\n            src: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400',\n            alt: 'Fine dining restaurant',\n          },\n        },\n      ]}\n      labels={{\n        anchor: { continue: 'Discover' },\n        layer: { close: 'Close menu', open: 'Open menu' },\n        scroller: { previous: 'Previous', next: 'Next' },\n      }}\n    />\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAe;AACrC,QACE,kBAAC,GAAD;EACE,WAAU;EACV,OAAO;GACL;IACE,OAAO;IACP,MAAM;IACN,OAAO;KACL,KAAK;KACL,KAAK;;IAER;GACD;IACE,OAAO;IACP,MAAM;IACN,OAAO;KACL,KAAK;KACL,KAAK;;IAER;GACD;IACE,OAAO;IACP,MAAM;IACN,OAAO;KACL,KAAK;KACL,KAAK;;;GAGV;EACD,QAAQ;GACN,QAAQ,EAAE,UAAU,YAAY;GAChC,OAAO;IAAE,OAAO;IAAc,MAAM;IAAa;GACjD,UAAU;IAAE,UAAU;IAAY,MAAM;;;EAE1C,CAAA"}

package/examples/sparkle-wrapper-demo.d.ts

@@ -0,0 +1 @@
+export default function SparkleWrapperDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/sparkle-wrapper-demo.js

@@ -0,0 +1,34 @@
+"use client";
+import { SparkleWrapper as e } from "../ui/SparkleWrapper.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region lib/examples/sparkle-wrapper-demo.tsx
+function i() {
+	let [i, a] = t(0);
+	return /* @__PURE__ */ r("div", {
+		className: "flex flex-col items-center gap-48 p-48",
+		children: [
+			/* @__PURE__ */ n(e, {
+				count: 3,
+				children: /* @__PURE__ */ n("div", {
+					className: "bg-saffron text-black font-bold px-20 py-12 rounded-pill text-b3",
+					children: "✨ New feature"
+				})
+			}, i),
+			/* @__PURE__ */ n(e, { children: /* @__PURE__ */ n("span", {
+				className: "text-h4 font-bold",
+				children: "🎉 Congratulations!"
+			}) }, `b-${i}`),
+			/* @__PURE__ */ n("button", {
+				type: "button",
+				onClick: () => a((e) => e + 1),
+				className: "px-20 py-10 rounded-pill border-2 border-black font-semibold text-b3 hover:bg-black hover:text-white transition-colors cursor-pointer",
+				children: "Replay animation"
+			})
+		]
+	});
+}
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=sparkle-wrapper-demo.js.map

package/examples/sparkle-wrapper-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sparkle-wrapper-demo.js","names":[],"sources":["../../lib/examples/sparkle-wrapper-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { SparkleWrapper } from '@/ui/SparkleWrapper';\n\nexport default function SparkleWrapperDemo() {\n  const [key, setKey] = useState(0);\n\n  return (\n    <div className=\"flex flex-col items-center gap-48 p-48\">\n      <SparkleWrapper count={3} key={key}>\n        <div className=\"bg-saffron text-black font-bold px-20 py-12 rounded-pill text-b3\">\n          ✨ New feature\n        </div>\n      </SparkleWrapper>\n\n      <SparkleWrapper key={`b-${key}`}>\n        <span className=\"text-h4 font-bold\">🎉 Congratulations!</span>\n      </SparkleWrapper>\n\n      <button\n        type=\"button\"\n        onClick={() => setKey((k) => k + 1)}\n        className=\"px-20 py-10 rounded-pill border-2 border-black font-semibold text-b3 hover:bg-black hover:text-white transition-colors cursor-pointer\"\n      >\n        Replay animation\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAqB;CAC3C,IAAM,CAAC,GAAK,KAAU,EAAS,EAAE;AAEjC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IAAgB,OAAO;cACrB,kBAAC,OAAD;KAAK,WAAU;eAAmE;KAE5E,CAAA;IACS,EAJc,EAId;GAEjB,kBAAC,GAAD,EAAA,UACE,kBAAC,QAAD;IAAM,WAAU;cAAoB;IAA0B,CAAA,EAC/C,EAFI,KAAK,IAET;GAEjB,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,GAAQ,MAAM,IAAI,EAAE;IACnC,WAAU;cACX;IAEQ,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "2.0.0-beta.75",
+  "version": "2.0.0-beta.77",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [

package/styles/animate.css

@@ -299,3 +299,22 @@
     transform: translateX(0px);
   }
 }
+
+@keyframes sparkle-fly {
+  0% {
+    opacity: 1;
+    transform: translate(
+        calc(-50% + var(--sparkle-start-x, 0px)),
+        calc(-50% + var(--sparkle-start-y, 0px))
+      )
+      scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(
+        calc(-50% + var(--sparkle-end-x, 0px)),
+        calc(-50% + var(--sparkle-end-y, 0px))
+      )
+      scale(0);
+  }
+}

package/styles/theme.css

@@ -174,4 +174,5 @@
   --animate-zoom-in: zoom-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
   --animate-zoom-out: zoom-out 180ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
   --animate-wiggle: wiggle 0.75s ease-in-out;
+  --animate-sparkle-fly: sparkle-fly 900ms ease-out both;
 }

package/ui/Chapters/Chapter.d.ts

@@ -0,0 +1,7 @@
+import { FunctionComponent, PropsWithChildren } from 'react';
+interface Props {
+    index: number;
+    setActiveChapter: (index: number) => void;
+}
+export declare const Chapter: FunctionComponent<PropsWithChildren<Props>>;
+export {};

package/ui/Chapters/Chapter.js

@@ -0,0 +1,36 @@
+"use client";
+import { useEffect as e, useRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+var r = (() => {
+	let e = [];
+	for (let t = 0; t <= 1; t += .03) e.push(parseFloat(t.toFixed(2)));
+	return e;
+})(), i = (e) => {
+	let t = e.boundingClientRect.height <= window.innerHeight / 2 && e.intersectionRect.height > window.innerHeight / 3, n = e.boundingClientRect.height <= window.innerHeight / 2 && e.boundingClientRect.height === e.intersectionRect.height, r = e.boundingClientRect.height > window.innerHeight / 2 && e.intersectionRect.height > window.innerHeight / 2;
+	return t || n || r;
+}, a = ({ children: a, index: o, setActiveChapter: s }) => {
+	let c = t(null);
+	return e(() => {
+		let e = c.current;
+		if (e) {
+			let t = new IntersectionObserver(([e]) => {
+				i(e) && s(o);
+			}, {
+				threshold: r,
+				rootMargin: "0px 0px 0px 0px"
+			});
+			return t.observe(e), () => t.unobserve(e);
+		}
+	}, [
+		c,
+		o,
+		s
+	]), /* @__PURE__ */ n("section", {
+		ref: c,
+		children: a
+	});
+};
+//#endregion
+export { a as Chapter };
+
+//# sourceMappingURL=Chapter.js.map

package/ui/Chapters/Chapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chapter.js","names":[],"sources":["../../../lib/ui/Chapters/Chapter.tsx"],"sourcesContent":["'use client';\nimport { useEffect, useRef, type FunctionComponent, type PropsWithChildren } from 'react';\n\ninterface Props {\n  index: number;\n  setActiveChapter: (index: number) => void;\n}\n\nconst generateThreshold = () => {\n  const threshold: number[] = [];\n\n  for (let i = 0; i <= 1; i += 0.03) {\n    threshold.push(parseFloat(i.toFixed(2)));\n  }\n\n  return threshold;\n};\n\nconst THRESHOLD = generateThreshold();\n\nconst isChapterActive = (entry: IntersectionObserverEntry) => {\n  const isHalfHeightAndOneThirdVisible =\n    entry.boundingClientRect.height <= window.innerHeight / 2 &&\n    entry.intersectionRect.height > window.innerHeight / 3;\n\n  const isHalfHeightAndFullyVisible =\n    entry.boundingClientRect.height <= window.innerHeight / 2 &&\n    entry.boundingClientRect.height === entry.intersectionRect.height;\n\n  const isMoreThanHalfHeightAndHalfVisible =\n    entry.boundingClientRect.height > window.innerHeight / 2 &&\n    entry.intersectionRect.height > window.innerHeight / 2;\n\n  return (\n    isHalfHeightAndOneThirdVisible ||\n    isHalfHeightAndFullyVisible ||\n    isMoreThanHalfHeightAndHalfVisible\n  );\n};\n\nexport const Chapter: FunctionComponent<PropsWithChildren<Props>> = ({\n  children,\n  index,\n  setActiveChapter,\n}) => {\n  const element = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const current = element.current;\n\n    if (current) {\n      const observer = new IntersectionObserver(\n        ([entry]) => {\n          if (isChapterActive(entry)) {\n            setActiveChapter(index);\n          }\n        },\n        {\n          threshold: THRESHOLD,\n          rootMargin: '0px 0px 0px 0px',\n        },\n      );\n\n      observer.observe(current);\n\n      return () => observer.unobserve(current);\n    }\n  }, [element, index, setActiveChapter]);\n\n  return <section ref={element}>{children}</section>;\n};\n"],"mappings":";;;AAkBA,IAAM,WAV0B;CAC9B,IAAM,IAAsB,EAAE;AAE9B,MAAK,IAAI,IAAI,GAAG,KAAK,GAAG,KAAK,IAC3B,GAAU,KAAK,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC;AAG1C,QAAO;IAG4B,EAE/B,KAAmB,MAAqC;CAC5D,IAAM,IACJ,EAAM,mBAAmB,UAAU,OAAO,cAAc,KACxD,EAAM,iBAAiB,SAAS,OAAO,cAAc,GAEjD,IACJ,EAAM,mBAAmB,UAAU,OAAO,cAAc,KACxD,EAAM,mBAAmB,WAAW,EAAM,iBAAiB,QAEvD,IACJ,EAAM,mBAAmB,SAAS,OAAO,cAAc,KACvD,EAAM,iBAAiB,SAAS,OAAO,cAAc;AAEvD,QACE,KACA,KACA;GAIS,KAAwD,EACnE,aACA,UACA,0BACI;CACJ,IAAM,IAAU,EAAuB,KAAK;AAwB5C,QAtBA,QAAgB;EACd,IAAM,IAAU,EAAQ;AAExB,MAAI,GAAS;GACX,IAAM,IAAW,IAAI,sBAClB,CAAC,OAAW;AACX,IAAI,EAAgB,EAAM,IACxB,EAAiB,EAAM;MAG3B;IACE,WAAW;IACX,YAAY;IACb,CACF;AAID,UAFA,EAAS,QAAQ,EAAQ,QAEZ,EAAS,UAAU,EAAQ;;IAEzC;EAAC;EAAS;EAAO;EAAiB,CAAC,EAE/B,kBAAC,WAAD;EAAS,KAAK;EAAU;EAAmB,CAAA"}

package/ui/Chapters/ChapterTitle.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps, FunctionComponent, PropsWithChildren } from 'react';
+import { Heading } from '../heading/Heading';
+import { Theme } from '../types/Theme';
+interface Props {
+    className?: string;
+    hasNext?: boolean;
+    hLevel?: ComponentProps<typeof Heading>['level'];
+    index: number;
+    isActive?: boolean;
+    onClick?: () => void;
+    theme?: Theme;
+}
+export declare const ChapterTitle: FunctionComponent<PropsWithChildren<Props>>;
+export {};

package/ui/Chapters/ChapterTitle.js

@@ -0,0 +1,35 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { Heading as t } from "../heading/Heading.js";
+import { getTheme as n } from "./Chapters.themes.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Icon as a } from "@clubmed/trident-icons";
+//#region lib/ui/Chapters/ChapterTitle.tsx
+var o = ({ children: o, className: s, hasNext: c = !1, hLevel: l = 2, index: u, isActive: d = !1, onClick: f, theme: p = "coreRange" }) => {
+	let { thTitle: m, thTitleUnActive: h } = n(p);
+	return /* @__PURE__ */ i(t, {
+		className: e("text-h5 @md:text-h2 sticky top-0 z-1 flex justify-between gap-x-8 p-20 font-serif transition-colors duration-300 @md:static @md:bg-transparent @md:p-0", m, s),
+		id: `chapter${u}`,
+		level: l,
+		children: [/* @__PURE__ */ i("a", {
+			className: e("flex-1", { [h]: !d }),
+			href: `#chapter${u}`,
+			onClick: f,
+			children: [/* @__PURE__ */ i("span", {
+				className: "@md:hidden",
+				children: [u + 1, " - "]
+			}), o]
+		}), c && /* @__PURE__ */ r("a", {
+			className: "@md:hidden",
+			href: `#chapter${u + 1}`,
+			children: /* @__PURE__ */ r(a, {
+				name: "ArrowTailDown",
+				width: "24px"
+			})
+		})]
+	});
+};
+//#endregion
+export { o as ChapterTitle };
+
+//# sourceMappingURL=ChapterTitle.js.map

package/ui/Chapters/ChapterTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChapterTitle.js","names":[],"sources":["../../../lib/ui/Chapters/ChapterTitle.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { ComponentProps, FunctionComponent, PropsWithChildren } from 'react';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport { Heading } from '../heading/Heading';\nimport type { Theme } from '../types/Theme';\n\nimport { getTheme } from './Chapters.themes';\n\ninterface Props {\n  className?: string;\n  hasNext?: boolean;\n  hLevel?: ComponentProps<typeof Heading>['level'];\n  index: number;\n  isActive?: boolean;\n  onClick?: () => void;\n  theme?: Theme;\n}\n\nexport const ChapterTitle: FunctionComponent<PropsWithChildren<Props>> = ({\n  children,\n  className,\n  hasNext = false,\n  hLevel = 2,\n  index,\n  isActive = false,\n  onClick,\n  theme = 'coreRange',\n}) => {\n  const { thTitle, thTitleUnActive } = getTheme(theme);\n\n  return (\n    <Heading\n      className={clsx(\n        'text-h5 @md:text-h2 sticky top-0 z-1 flex justify-between gap-x-8 p-20 font-serif transition-colors duration-300 @md:static @md:bg-transparent @md:p-0',\n        thTitle,\n        className,\n      )}\n      id={`chapter${index}`}\n      level={hLevel}\n    >\n      <a\n        className={clsx('flex-1', {\n          [thTitleUnActive]: !isActive,\n        })}\n        href={`#chapter${index}`}\n        onClick={onClick}\n      >\n        <span className=\"@md:hidden\">{index + 1} - </span>\n        {children}\n      </a>\n      {hasNext && (\n        <a className=\"@md:hidden\" href={`#chapter${index + 1}`}>\n          <Icon name=\"ArrowTailDown\" width=\"24px\" />\n        </a>\n      )}\n    </Heading>\n  );\n};\n"],"mappings":";;;;;;;AAoBA,IAAa,KAA6D,EACxE,aACA,cACA,aAAU,IACV,YAAS,GACT,UACA,cAAW,IACX,YACA,WAAQ,kBACJ;CACJ,IAAM,EAAE,YAAS,uBAAoB,EAAS,EAAM;AAEpD,QACE,kBAAC,GAAD;EACE,WAAW,EACT,0JACA,GACA,EACD;EACD,IAAI,UAAU;EACd,OAAO;YAPT,CASE,kBAAC,KAAD;GACE,WAAW,EAAK,UAAU,GACvB,IAAkB,CAAC,GACrB,CAAC;GACF,MAAM,WAAW;GACR;aALX,CAOE,kBAAC,QAAD;IAAM,WAAU;cAAhB,CAA8B,IAAQ,GAAE,MAAA;OACvC,EAAA;MAEF,KACC,kBAAC,KAAD;GAAG,WAAU;GAAa,MAAM,WAAW,IAAQ;aACjD,kBAAC,GAAD;IAAM,MAAK;IAAgB,OAAM;IAAS,CAAA;GACxC,CAAA,CAAA"}

package/ui/Chapters/Chapters.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef, FunctionComponent, ReactNode } from 'react';
+import { IconicNames } from '@clubmed/trident-icons';
+import { Theme } from '../types/Theme';
+export interface ChapterItem {
+    content: ReactNode;
+    title: string;
+}
+export interface ChaptersProps extends Omit<ComponentPropsWithoutRef<'section'>, 'onClick' | 'children'> {
+    chapters: ChapterItem[];
+    hLevel?: 2 | 3 | 4;
+    icon?: IconicNames;
+    onClick?: (chapter: ChapterItem) => void;
+    theme?: Theme;
+}
+export declare const Chapters: FunctionComponent<ChaptersProps>;

package/ui/Chapters/Chapters.js

@@ -0,0 +1,42 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { Chapter as t } from "./Chapter.js";
+import { ChapterTitle as n } from "./ChapterTitle.js";
+import { ChaptersSummary as r } from "./ChaptersSummary.js";
+import { useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region lib/ui/Chapters/Chapters.tsx
+var s = ({ chapters: s, className: c, hLevel: l = 2, icon: u, onClick: d, theme: f = "coreRange", ...p }) => {
+	let [m, h] = i(0);
+	return /* @__PURE__ */ o("section", {
+		...p,
+		className: e(c, "flex @container/chapters"),
+		children: [/* @__PURE__ */ a(r, {
+			activeChapter: m,
+			chapters: s,
+			className: "hidden w-3/10 @md:block @xl:w-[calc(50%-380px)]",
+			icon: u,
+			onClick: d,
+			theme: f
+		}), /* @__PURE__ */ a("div", {
+			className: e("relative isolate w-full flex-1 @md:max-w-7/10 @xl:max-w-[calc(50%+380px)]", "@md:ps-20 @lg:ps-40 @xl:ps-120"),
+			children: s.map((e, r) => /* @__PURE__ */ o(t, {
+				index: r,
+				setActiveChapter: h,
+				children: [/* @__PURE__ */ a(n, {
+					hasNext: r < s.length - 1,
+					hLevel: l,
+					index: r,
+					isActive: r === m,
+					onClick: () => d?.(e),
+					theme: f,
+					children: e.title
+				}), e.content]
+			}, e.title))
+		})]
+	});
+};
+//#endregion
+export { s as Chapters };
+
+//# sourceMappingURL=Chapters.js.map

package/ui/Chapters/Chapters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chapters.js","names":[],"sources":["../../../lib/ui/Chapters/Chapters.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport {\n  useState,\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n  type ReactNode,\n} from 'react';\n\nimport type { IconicNames } from '@clubmed/trident-icons';\nimport type { Theme } from '../types/Theme';\n\nimport { Chapter } from './Chapter';\nimport { ChapterTitle } from './ChapterTitle';\nimport { ChaptersSummary } from './ChaptersSummary';\n\nexport interface ChapterItem {\n  content: ReactNode;\n  title: string;\n}\n\nexport interface ChaptersProps\n  extends Omit<ComponentPropsWithoutRef<'section'>, 'onClick' | 'children'> {\n  chapters: ChapterItem[];\n  hLevel?: 2 | 3 | 4;\n  icon?: IconicNames;\n  onClick?: (chapter: ChapterItem) => void;\n  theme?: Theme;\n}\n\nexport const Chapters: FunctionComponent<ChaptersProps> = ({\n  chapters,\n  className,\n  hLevel = 2,\n  icon,\n  onClick,\n  theme = 'coreRange',\n  ...attrs\n}) => {\n  const [activeChapter, setActiveChapter] = useState(0);\n\n  return (\n    <section {...attrs} className={clsx(className, 'flex @container/chapters')}>\n      <ChaptersSummary\n        activeChapter={activeChapter}\n        chapters={chapters}\n        className=\"hidden w-3/10 @md:block @xl:w-[calc(50%-380px)]\"\n        icon={icon}\n        onClick={onClick}\n        theme={theme}\n      />\n\n      <div\n        className={clsx(\n          'relative isolate w-full flex-1 @md:max-w-7/10 @xl:max-w-[calc(50%+380px)]',\n          '@md:ps-20 @lg:ps-40 @xl:ps-120',\n        )}\n      >\n        {chapters.map((chapter, index) => (\n          <Chapter index={index} key={chapter.title} setActiveChapter={setActiveChapter}>\n            <ChapterTitle\n              hasNext={index < chapters.length - 1}\n              hLevel={hLevel}\n              index={index}\n              isActive={index === activeChapter}\n              onClick={() => onClick?.(chapter)}\n              theme={theme}\n            >\n              {chapter.title}\n            </ChapterTitle>\n            {chapter.content}\n          </Chapter>\n        ))}\n      </div>\n    </section>\n  );\n};\n"],"mappings":";;;;;;;;AA8BA,IAAa,KAA8C,EACzD,aACA,cACA,YAAS,GACT,SACA,YACA,WAAQ,aACR,GAAG,QACC;CACJ,IAAM,CAAC,GAAe,KAAoB,EAAS,EAAE;AAErD,QACE,kBAAC,WAAD;EAAS,GAAI;EAAO,WAAW,EAAK,GAAW,2BAA2B;YAA1E,CACE,kBAAC,GAAD;GACiB;GACL;GACV,WAAU;GACJ;GACG;GACF;GACP,CAAA,EAEF,kBAAC,OAAD;GACE,WAAW,EACT,6EACA,iCACD;aAEA,EAAS,KAAK,GAAS,MACtB,kBAAC,GAAD;IAAgB;IAA6C;cAA7D,CACE,kBAAC,GAAD;KACE,SAAS,IAAQ,EAAS,SAAS;KAC3B;KACD;KACP,UAAU,MAAU;KACpB,eAAe,IAAU,EAAQ;KAC1B;eAEN,EAAQ;KACI,CAAA,EACd,EAAQ,QAAA;MAXiB,EAAQ,MAY1B,CAAA;GAER,CAAA,CAAA"}

package/ui/Chapters/Chapters.themes.d.ts

@@ -0,0 +1,9 @@
+import { Theme } from '../types/Theme';
+export declare const getTheme: (theme: Theme) => {
+    thSummary: string;
+    thSummaryIcon: string;
+    thSummaryIconName: string;
+    thSummaryIconWidth: string;
+    thTitle: string;
+    thTitleUnActive: string;
+};

package/ui/Chapters/Chapters.themes.js

@@ -0,0 +1,65 @@
+//#region lib/ui/Chapters/Chapters.themes.ts
+var e = {
+	BLACK: {
+		thSummary: "bg-black text-white",
+		thSummaryIcon: "text-white max-w-140",
+		thSummaryIconName: "Trident",
+		thSummaryIconWidth: "100%",
+		thTitle: "bg-black text-white",
+		thTitleUnActive: "max-md:text-white/50"
+	},
+	CORE_RANGE: {
+		thSummary: "bg-lightSand text-black",
+		thSummaryIcon: "text-sand max-w-140",
+		thSummaryIconName: "Trident",
+		thSummaryIconWidth: "100%",
+		thTitle: "bg-lightSand text-black",
+		thTitleUnActive: "max-md:text-black/50"
+	},
+	EXCLUSIVE_COLLECTION: {
+		thSummary: "bg-ultramarine text-white",
+		thSummaryIcon: "text-white max-w-220",
+		thSummaryIconName: "ExclusiveCollection",
+		thSummaryIconWidth: "100%",
+		thTitle: "bg-ultramarine text-white md:text-black",
+		thTitleUnActive: "max-md:text-white/50"
+	},
+	HAPPY_TO_CARE: {
+		thSummary: "bg-verdigris text-black",
+		thSummaryIcon: "text-black max-w-220",
+		thSummaryIconName: "HappyToCare",
+		thSummaryIconWidth: "100%",
+		thTitle: "bg-verdigris text-black",
+		thTitleUnActive: "max-md:text-black/50"
+	},
+	SIENNA: {
+		thSummary: "bg-sienna text-white",
+		thSummaryIcon: "text-white max-w-140",
+		thSummaryIconName: "Trident",
+		thSummaryIconWidth: "100%",
+		thTitle: "bg-sienna text-white md:text-black",
+		thTitleUnActive: "max-md:text-white/50"
+	},
+	WHITE: {
+		thSummary: "bg-white text-black",
+		thSummaryIcon: "text-sand max-w-140",
+		thSummaryIconName: "Trident",
+		thSummaryIconWidth: "100%",
+		thTitle: "bg-white text-black",
+		thTitleUnActive: "max-md:text-black/50"
+	}
+}, t = (t) => {
+	switch (t) {
+		case "black": return e.BLACK;
+		case "dark":
+		case "exclusiveCollection": return e.EXCLUSIVE_COLLECTION;
+		case "happyToCare": return e.HAPPY_TO_CARE;
+		case "sienna": return e.SIENNA;
+		case "white": return e.WHITE;
+		default: return e.CORE_RANGE;
+	}
+};
+//#endregion
+export { t as getTheme };
+
+//# sourceMappingURL=Chapters.themes.js.map

package/ui/Chapters/Chapters.themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chapters.themes.js","names":[],"sources":["../../../lib/ui/Chapters/Chapters.themes.ts"],"sourcesContent":["import type { Theme } from '../types/Theme';\n\nconst THEMES = {\n  BLACK: {\n    thSummary: 'bg-black text-white',\n    thSummaryIcon: 'text-white max-w-140',\n    thSummaryIconName: 'Trident',\n    thSummaryIconWidth: '100%',\n    thTitle: 'bg-black text-white',\n    thTitleUnActive: 'max-md:text-white/50',\n  },\n  CORE_RANGE: {\n    thSummary: 'bg-lightSand text-black',\n    thSummaryIcon: 'text-sand max-w-140',\n    thSummaryIconName: 'Trident',\n    thSummaryIconWidth: '100%',\n    thTitle: 'bg-lightSand text-black',\n    thTitleUnActive: 'max-md:text-black/50',\n  },\n  EXCLUSIVE_COLLECTION: {\n    thSummary: 'bg-ultramarine text-white',\n    thSummaryIcon: 'text-white max-w-220',\n    thSummaryIconName: 'ExclusiveCollection',\n    thSummaryIconWidth: '100%',\n    thTitle: 'bg-ultramarine text-white md:text-black',\n    thTitleUnActive: 'max-md:text-white/50',\n  },\n  HAPPY_TO_CARE: {\n    thSummary: 'bg-verdigris text-black',\n    thSummaryIcon: 'text-black max-w-220',\n    thSummaryIconName: 'HappyToCare',\n    thSummaryIconWidth: '100%',\n    thTitle: 'bg-verdigris text-black',\n    thTitleUnActive: 'max-md:text-black/50',\n  },\n  SIENNA: {\n    thSummary: 'bg-sienna text-white',\n    thSummaryIcon: 'text-white max-w-140',\n    thSummaryIconName: 'Trident',\n    thSummaryIconWidth: '100%',\n    thTitle: 'bg-sienna text-white md:text-black',\n    thTitleUnActive: 'max-md:text-white/50',\n  },\n  WHITE: {\n    thSummary: 'bg-white text-black',\n    thSummaryIcon: 'text-sand max-w-140',\n    thSummaryIconName: 'Trident',\n    thSummaryIconWidth: '100%',\n    thTitle: 'bg-white text-black',\n    thTitleUnActive: 'max-md:text-black/50',\n  },\n};\n\nexport const getTheme = (theme: Theme) => {\n  switch (theme) {\n    case 'black':\n      return THEMES.BLACK;\n    case 'dark':\n    case 'exclusiveCollection':\n      return THEMES.EXCLUSIVE_COLLECTION;\n    case 'happyToCare':\n      return THEMES.HAPPY_TO_CARE;\n    case 'sienna':\n      return THEMES.SIENNA;\n    case 'white':\n      return THEMES.WHITE;\n    case 'light':\n    case 'coreRange':\n    default:\n      return THEMES.CORE_RANGE;\n  }\n};\n"],"mappings":";AAEA,IAAM,IAAS;CACb,OAAO;EACL,WAAW;EACX,eAAe;EACf,mBAAmB;EACnB,oBAAoB;EACpB,SAAS;EACT,iBAAiB;EAClB;CACD,YAAY;EACV,WAAW;EACX,eAAe;EACf,mBAAmB;EACnB,oBAAoB;EACpB,SAAS;EACT,iBAAiB;EAClB;CACD,sBAAsB;EACpB,WAAW;EACX,eAAe;EACf,mBAAmB;EACnB,oBAAoB;EACpB,SAAS;EACT,iBAAiB;EAClB;CACD,eAAe;EACb,WAAW;EACX,eAAe;EACf,mBAAmB;EACnB,oBAAoB;EACpB,SAAS;EACT,iBAAiB;EAClB;CACD,QAAQ;EACN,WAAW;EACX,eAAe;EACf,mBAAmB;EACnB,oBAAoB;EACpB,SAAS;EACT,iBAAiB;EAClB;CACD,OAAO;EACL,WAAW;EACX,eAAe;EACf,mBAAmB;EACnB,oBAAoB;EACpB,SAAS;EACT,iBAAiB;EAClB;CACF,EAEY,KAAY,MAAiB;AACxC,SAAQ,GAAR;EACE,KAAK,QACH,QAAO,EAAO;EAChB,KAAK;EACL,KAAK,sBACH,QAAO,EAAO;EAChB,KAAK,cACH,QAAO,EAAO;EAChB,KAAK,SACH,QAAO,EAAO;EAChB,KAAK,QACH,QAAO,EAAO;EAGhB,QACE,QAAO,EAAO"}

package/ui/Chapters/ChaptersSummary.d.ts

@@ -0,0 +1,17 @@
+import { FunctionComponent, ReactNode } from 'react';
+import { IconicNames } from '@clubmed/trident-icons';
+import { Theme } from '../types/Theme';
+interface ChapterSummaryItem {
+    content: ReactNode;
+    title: string;
+}
+interface Props {
+    activeChapter: number;
+    chapters: ChapterSummaryItem[];
+    className?: string;
+    icon?: IconicNames;
+    onClick?: (chapter: ChapterSummaryItem) => void;
+    theme?: Theme;
+}
+export declare const ChaptersSummary: FunctionComponent<Props>;
+export {};

package/ui/Chapters/ChaptersSummary.js

@@ -0,0 +1,29 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { getTheme as t } from "./Chapters.themes.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Icon as i } from "@clubmed/trident-icons";
+//#region lib/ui/Chapters/ChaptersSummary.tsx
+var a = { HappyToCareFRCA: "translate-y-[28px]" }, o = ({ activeChapter: o, chapters: s, className: c, icon: l, onClick: u, theme: d = "coreRange" }) => {
+	let { thSummary: f, thSummaryIcon: p, thSummaryIconName: m, thSummaryIconWidth: h } = t(d), g = l ?? m, _ = a[g];
+	return /* @__PURE__ */ n("div", {
+		className: e("rounded-e-16", f, c),
+		children: /* @__PURE__ */ r("nav", {
+			className: "sticky top-0 ms-auto flex w-full max-w-380 flex-col gap-y-20 p-40",
+			children: [s.map((t, r) => /* @__PURE__ */ n("a", {
+				className: e("text-h5 block font-serif", { "opacity-50": r !== o }),
+				href: `#chapter${r}`,
+				onClick: () => u?.(t),
+				children: t.title
+			}, t.title)), /* @__PURE__ */ n(i, {
+				className: e("mt-90 self-center", p, _),
+				name: g,
+				width: h
+			})]
+		})
+	});
+};
+//#endregion
+export { o as ChaptersSummary };
+
+//# sourceMappingURL=ChaptersSummary.js.map

package/ui/Chapters/ChaptersSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChaptersSummary.js","names":[],"sources":["../../../lib/ui/Chapters/ChaptersSummary.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { FunctionComponent, ReactNode } from 'react';\n\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport type { Theme } from '../types/Theme';\n\nimport { getTheme } from './Chapters.themes';\n\nconst ICON_VERTICAL_OFFSET_CLASS: Partial<Record<IconicNames, string>> = {\n  // FR-CA asset has an intrinsic Y offset; compensate to match EN-CA visual alignment.\n  HappyToCareFRCA: 'translate-y-[28px]',\n};\n\ninterface ChapterSummaryItem {\n  content: ReactNode;\n  title: string;\n}\n\ninterface Props {\n  activeChapter: number;\n  chapters: ChapterSummaryItem[];\n  className?: string;\n  icon?: IconicNames;\n  onClick?: (chapter: ChapterSummaryItem) => void;\n  theme?: Theme;\n}\n\nexport const ChaptersSummary: FunctionComponent<Props> = ({\n  activeChapter,\n  chapters,\n  className,\n  icon,\n  onClick,\n  theme = 'coreRange',\n}) => {\n  const { thSummary, thSummaryIcon, thSummaryIconName, thSummaryIconWidth } = getTheme(theme);\n  const summaryIconName = (icon ?? thSummaryIconName) as IconicNames;\n  const iconVerticalOffsetClass = ICON_VERTICAL_OFFSET_CLASS[summaryIconName];\n\n  return (\n    <div className={clsx('rounded-e-16', thSummary, className)}>\n      <nav className=\"sticky top-0 ms-auto flex w-full max-w-380 flex-col gap-y-20 p-40\">\n        {chapters.map((chapter, index) => (\n          <a\n            className={clsx('text-h5 block font-serif', {\n              'opacity-50': index !== activeChapter,\n            })}\n            href={`#chapter${index}`}\n            key={chapter.title}\n            onClick={() => onClick?.(chapter)}\n          >\n            {chapter.title}\n          </a>\n        ))}\n        <Icon\n          className={clsx('mt-90 self-center', thSummaryIcon, iconVerticalOffsetClass)}\n          name={summaryIconName}\n          width={thSummaryIconWidth}\n        />\n      </nav>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AASA,IAAM,IAAmE,EAEvE,iBAAiB,sBAClB,EAgBY,KAA6C,EACxD,kBACA,aACA,cACA,SACA,YACA,WAAQ,kBACJ;CACJ,IAAM,EAAE,cAAW,kBAAe,sBAAmB,0BAAuB,EAAS,EAAM,EACrF,IAAmB,KAAQ,GAC3B,IAA0B,EAA2B;AAE3D,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,gBAAgB,GAAW,EAAU;YACxD,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,EAAS,KAAK,GAAS,MACtB,kBAAC,KAAD;IACE,WAAW,EAAK,4BAA4B,EAC1C,cAAc,MAAU,GACzB,CAAC;IACF,MAAM,WAAW;IAEjB,eAAe,IAAU,EAAQ;cAEhC,EAAQ;IACP,EAJG,EAAQ,MAIX,CACJ,EACF,kBAAC,GAAD;IACE,WAAW,EAAK,qBAAqB,GAAe,EAAwB;IAC5E,MAAM;IACN,OAAO;IACP,CAAA,CAAA;;EAEA,CAAA"}

package/ui/Promises/Promises.d.ts

@@ -0,0 +1,26 @@
+import { ComponentPropsWithoutRef, FunctionComponent } from 'react';
+import { ImageProps } from '../Image';
+export interface PromisesItem {
+    href: string;
+    id?: string;
+    image: ImageProps;
+    title: string;
+}
+export interface PromisesLabels {
+    anchor: {
+        continue: string;
+    };
+    layer: {
+        close: string;
+        open: string;
+    };
+    scroller: {
+        previous: string;
+        next: string;
+    };
+}
+export interface PromisesProps extends ComponentPropsWithoutRef<'div'> {
+    items: PromisesItem[];
+    labels: PromisesLabels;
+}
+export declare const Promises: FunctionComponent<PromisesProps>;

package/ui/Promises/Promises.js

@@ -0,0 +1,42 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { PromisesMedia as t } from "./PromisesMedia.js";
+import { PromisesMenu as n } from "./PromisesMenu.js";
+import { useCallback as r, useEffect as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region lib/ui/Promises/Promises.tsx
+var c = 1e4, l = ({ className: l, items: u, labels: d, ...f }) => {
+	let [p, m] = a(0), [h, g] = a(0), _ = r(() => {
+		m((e) => (e - 1 + u.length) % u.length);
+	}, [u.length]), v = r(() => {
+		m((e) => (e + 1) % u.length);
+	}, [u.length]), y = r((e) => {
+		m(e), g((e) => e + 1);
+	}, []);
+	return i(() => {
+		let e = setInterval(() => {
+			v();
+		}, c);
+		return () => clearInterval(e);
+	}, [v, h]), /* @__PURE__ */ s("div", {
+		...f,
+		className: e("relative isolate flex gap-x-20 @container/promises", l),
+		children: [/* @__PURE__ */ o(t, {
+			activeIndex: p,
+			items: u,
+			labels: d,
+			onClickMenu: (e) => m(e),
+			onNext: v,
+			onPrevious: _
+		}), /* @__PURE__ */ o(n, {
+			activeIndex: p,
+			items: u,
+			labels: d,
+			onClickMenu: (e) => y(e)
+		})]
+	});
+};
+//#endregion
+export { l as Promises };
+
+//# sourceMappingURL=Promises.js.map

package/ui/Promises/Promises.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Promises.js","names":[],"sources":["../../../lib/ui/Promises/Promises.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport type { ImageProps } from '../Image';\n\nimport { PromisesMedia } from './PromisesMedia';\nimport { PromisesMenu } from './PromisesMenu';\n\nconst INTERVAL_IN_MS = 10000;\n\nexport interface PromisesItem {\n  href: string;\n  id?: string;\n  image: ImageProps;\n  title: string;\n}\n\nexport interface PromisesLabels {\n  anchor: { continue: string };\n  layer: { close: string; open: string };\n  scroller: { previous: string; next: string };\n}\n\nexport interface PromisesProps extends ComponentPropsWithoutRef<'div'> {\n  items: PromisesItem[];\n  labels: PromisesLabels;\n}\n\nexport const Promises: FunctionComponent<PromisesProps> = ({\n  className,\n  items,\n  labels,\n  ...attrs\n}) => {\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [intervalKey, setIntervalKey] = useState(0);\n\n  const previousActiveIndex = useCallback(() => {\n    setActiveIndex((state) => (state - 1 + items.length) % items.length);\n  }, [items.length]);\n\n  const nextActiveIndex = useCallback(() => {\n    setActiveIndex((state) => (state + 1) % items.length);\n  }, [items.length]);\n\n  const goToIndex = useCallback((index: number) => {\n    setActiveIndex(index);\n    setIntervalKey((k) => k + 1);\n  }, []);\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      nextActiveIndex();\n    }, INTERVAL_IN_MS);\n\n    return () => clearInterval(interval);\n  }, [nextActiveIndex, intervalKey]);\n\n  return (\n    <div\n      {...attrs}\n      className={clsx('relative isolate flex gap-x-20 @container/promises', className)}\n    >\n      <PromisesMedia\n        activeIndex={activeIndex}\n        items={items}\n        labels={labels}\n        onClickMenu={(i) => setActiveIndex(i)}\n        onNext={nextActiveIndex}\n        onPrevious={previousActiveIndex}\n      />\n      <PromisesMenu\n        activeIndex={activeIndex}\n        items={items}\n        labels={labels}\n        onClickMenu={(i) => goToIndex(i)}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAUA,IAAM,IAAiB,KAoBV,KAA8C,EACzD,cACA,UACA,WACA,GAAG,QACC;CACJ,IAAM,CAAC,GAAa,KAAkB,EAAS,EAAE,EAC3C,CAAC,GAAa,KAAkB,EAAS,EAAE,EAE3C,IAAsB,QAAkB;AAC5C,KAAgB,OAAW,IAAQ,IAAI,EAAM,UAAU,EAAM,OAAO;IACnE,CAAC,EAAM,OAAO,CAAC,EAEZ,IAAkB,QAAkB;AACxC,KAAgB,OAAW,IAAQ,KAAK,EAAM,OAAO;IACpD,CAAC,EAAM,OAAO,CAAC,EAEZ,IAAY,GAAa,MAAkB;AAE/C,EADA,EAAe,EAAM,EACrB,GAAgB,MAAM,IAAI,EAAE;IAC3B,EAAE,CAAC;AAUN,QARA,QAAgB;EACd,IAAM,IAAW,kBAAkB;AACjC,MAAiB;KAChB,EAAe;AAElB,eAAa,cAAc,EAAS;IACnC,CAAC,GAAiB,EAAY,CAAC,EAGhC,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,EAAK,sDAAsD,EAAU;YAFlF,CAIE,kBAAC,GAAD;GACe;GACN;GACC;GACR,cAAc,MAAM,EAAe,EAAE;GACrC,QAAQ;GACR,YAAY;GACZ,CAAA,EACF,kBAAC,GAAD;GACe;GACN;GACC;GACR,cAAc,MAAM,EAAU,EAAA;GAC9B,CAAA,CAAA"}

package/ui/Promises/PromisesMedia.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef, FunctionComponent } from 'react';
+import { PromisesItem, PromisesLabels } from './Promises';
+interface Props extends ComponentPropsWithoutRef<'div'> {
+    activeIndex: number;
+    items: PromisesItem[];
+    labels: PromisesLabels;
+    onClickMenu: (index: number) => void;
+    onNext: () => void;
+    onPrevious: () => void;
+}
+export declare const PromisesMedia: FunctionComponent<Props>;
+export {};

package/ui/Promises/PromisesMedia.js

@@ -0,0 +1,64 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { Arrows as t } from "../arrows/Arrows.js";
+import { Image as n } from "../Image.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/ui/Promises/PromisesMedia.tsx
+var a = ({ activeIndex: a, items: o, labels: s, onClickMenu: c, onNext: l, onPrevious: u, ...d }) => /* @__PURE__ */ i("div", {
+	...d,
+	className: "rounded-16 relative isolate w-full shrink-0 overflow-hidden @3xl/promises:max-w-380",
+	children: [
+		/* @__PURE__ */ r("div", {
+			className: "relative isolate grid",
+			children: o.map(({ id: t, image: i, title: o }, s) => {
+				let c = s === a;
+				return /* @__PURE__ */ r("article", {
+					"aria-hidden": !c,
+					className: e("aspect-vertical-video rounded-16 relative isolate col-start-1 row-start-1 w-full origin-top overflow-hidden opacity-0 transition-opacity duration-500", { "opacity-100": c }),
+					inert: !c,
+					children: /* @__PURE__ */ r(n, {
+						...i,
+						className: "size-full object-cover",
+						lazyLoad: !0,
+						sizes: "(min-width: 768px) 380px, 100vw"
+					})
+				}, t ?? `${o}-${s}`);
+			})
+		}),
+		/* @__PURE__ */ r(t, {
+			iconType: "ArrowDefault",
+			isDisabledHidden: !0,
+			isNextDisabled: a === o.length - 1,
+			isPrevDisabled: a === 0,
+			labels: {
+				next: s.scroller.next,
+				previous: s.scroller.previous
+			},
+			size: "small",
+			className: "absolute inset-0 -mx-12 !w-[calc(100%_+_24px)] @3xl/promises:hidden",
+			onNext: l,
+			onPrev: u
+		}),
+		/* @__PURE__ */ r("ul", {
+			className: "absolute inset-x-0 top-0 flex list-none gap-2 p-20",
+			children: o.map(({ id: t, title: n }, i) => /* @__PURE__ */ r("li", {
+				className: "w-full flex items-start",
+				children: /* @__PURE__ */ r("button", {
+					"aria-current": i === a,
+					"aria-label": n,
+					className: e("rounded-pill h-4 w-full overflow-hidden", {
+						"bg-white": i < a,
+						"bg-white/40": i >= a
+					}),
+					onClick: () => c(i),
+					type: "button",
+					children: i === a && /* @__PURE__ */ r("span", { className: "animate-filling block h-full w-full origin-left bg-white rtl:origin-right" })
+				})
+			}, t ?? i))
+		})
+	]
+});
+//#endregion
+export { a as PromisesMedia };
+
+//# sourceMappingURL=PromisesMedia.js.map

package/ui/Promises/PromisesMedia.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromisesMedia.js","names":[],"sources":["../../../lib/ui/Promises/PromisesMedia.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\nimport { Image } from '../Image';\nimport { Arrows } from '../arrows/Arrows';\nimport type { PromisesItem, PromisesLabels } from './Promises';\n\ninterface Props extends ComponentPropsWithoutRef<'div'> {\n  activeIndex: number;\n  items: PromisesItem[];\n  labels: PromisesLabels;\n  onClickMenu: (index: number) => void;\n  onNext: () => void;\n  onPrevious: () => void;\n}\n\nexport const PromisesMedia: FunctionComponent<Props> = ({\n  activeIndex,\n  items,\n  labels,\n  onClickMenu,\n  onNext,\n  onPrevious,\n  ...attrs\n}) => {\n  return (\n    <div\n      {...attrs}\n      className=\"rounded-16 relative isolate w-full shrink-0 overflow-hidden @3xl/promises:max-w-380\"\n    >\n      <div className=\"relative isolate grid\">\n        {items.map(({ id, image, title }, index) => {\n          const isActive = index === activeIndex;\n\n          return (\n            <article\n              aria-hidden={!isActive}\n              key={id ?? `${title}-${index}`}\n              className={clsx(\n                'aspect-vertical-video rounded-16 relative isolate col-start-1 row-start-1 w-full origin-top overflow-hidden opacity-0 transition-opacity duration-500',\n                { 'opacity-100': isActive },\n              )}\n              inert={!isActive}\n            >\n              <Image\n                {...image}\n                className=\"size-full object-cover\"\n                lazyLoad\n                sizes=\"(min-width: 768px) 380px, 100vw\"\n              />\n            </article>\n          );\n        })}\n      </div>\n\n      <Arrows\n        iconType=\"ArrowDefault\"\n        isDisabledHidden={true}\n        isNextDisabled={activeIndex === items.length - 1}\n        isPrevDisabled={activeIndex === 0}\n        labels={{\n          next: labels.scroller.next,\n          previous: labels.scroller.previous,\n        }}\n        size=\"small\"\n        className=\"absolute inset-0 -mx-12 !w-[calc(100%_+_24px)] @3xl/promises:hidden\"\n        onNext={onNext}\n        onPrev={onPrevious}\n      />\n\n      <ul className=\"absolute inset-x-0 top-0 flex list-none gap-2 p-20\">\n        {items.map(({ id, title }, index) => (\n          <li key={id ?? index} className=\"w-full flex items-start\">\n            <button\n              aria-current={index === activeIndex}\n              aria-label={title}\n              className={clsx('rounded-pill h-4 w-full overflow-hidden', {\n                'bg-white': index < activeIndex,\n                'bg-white/40': index >= activeIndex,\n              })}\n              onClick={() => onClickMenu(index)}\n              type=\"button\"\n            >\n              {index === activeIndex && (\n                <span className=\"animate-filling block h-full w-full origin-left bg-white rtl:origin-right\" />\n              )}\n            </button>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAiBA,IAAa,KAA2C,EACtD,gBACA,UACA,WACA,gBACA,WACA,eACA,GAAG,QAGD,kBAAC,OAAD;CACE,GAAI;CACJ,WAAU;WAFZ;EAIE,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAM,KAAK,EAAE,OAAI,UAAO,YAAS,MAAU;IAC1C,IAAM,IAAW,MAAU;AAE3B,WACE,kBAAC,WAAD;KACE,eAAa,CAAC;KAEd,WAAW,EACT,yJACA,EAAE,eAAe,GAAU,CAC5B;KACD,OAAO,CAAC;eAER,kBAAC,GAAD;MACE,GAAI;MACJ,WAAU;MACV,UAAA;MACA,OAAM;MACN,CAAA;KACM,EAbH,KAAM,GAAG,EAAM,GAAG,IAaf;;GAGV,CAAA;EAEN,kBAAC,GAAD;GACE,UAAS;GACT,kBAAkB;GAClB,gBAAgB,MAAgB,EAAM,SAAS;GAC/C,gBAAgB,MAAgB;GAChC,QAAQ;IACN,MAAM,EAAO,SAAS;IACtB,UAAU,EAAO,SAAS;IAC3B;GACD,MAAK;GACL,WAAU;GACF;GACR,QAAQ;GACR,CAAA;EAEF,kBAAC,MAAD;GAAI,WAAU;aACX,EAAM,KAAK,EAAE,OAAI,YAAS,MACzB,kBAAC,MAAD;IAAsB,WAAU;cAC9B,kBAAC,UAAD;KACE,gBAAc,MAAU;KACxB,cAAY;KACZ,WAAW,EAAK,2CAA2C;MACzD,YAAY,IAAQ;MACpB,eAAe,KAAS;MACzB,CAAC;KACF,eAAe,EAAY,EAAM;KACjC,MAAK;eAEJ,MAAU,KACT,kBAAC,QAAD,EAAM,WAAU,6EAA8E,CAAA;KAEzF,CAAA;IACN,EAfI,KAAM,EAeV,CAAA;GAEJ,CAAA"}

package/ui/Promises/PromisesMenu.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent } from 'react';
+import { PromisesItem, PromisesLabels } from './Promises';
+interface Props {
+    activeIndex: number;
+    className?: string;
+    items: PromisesItem[];
+    labels: PromisesLabels;
+    onClickMenu: (index: number) => void;
+}
+export declare const PromisesMenu: FunctionComponent<Props>;
+export {};

package/ui/Promises/PromisesMenu.js

@@ -0,0 +1,154 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { Button as t } from "../buttons/Button.js";
+import { n } from "../../chunks/Carousel.context.js";
+import { Carousel as r } from "../carousel/Carousel.js";
+import { CarouselBody as i } from "../carousel/CarouselBody.js";
+import { CarouselItem as a } from "../carousel/CarouselItem.js";
+import { useEffect as o, useId as s, useLayoutEffect as c, useMemo as l, useRef as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region lib/ui/Promises/PromisesMenu.tsx
+var m = ({ anchorLabel: n, anchorName: r, isActive: i, labelNode: a }) => {
+	let o = u(null), s = u(null);
+	return c(() => {
+		if (!o.current || !s.current) return;
+		let e = new ResizeObserver(() => {
+			s.current && o.current && (s.current.style.height = `${o.current.offsetHeight}px`);
+		});
+		return e.observe(o.current), () => e.disconnect();
+	}, []), /* @__PURE__ */ f("li", {
+		className: e("relative isolate transition-[opacity,height,margin-inline-start] ms-0 duration-300 overflow-hidden rounded-32 bg-white p-20", { "@3xl/promises:ms-52": !i }),
+		children: /* @__PURE__ */ p("div", {
+			ref: s,
+			className: "flex justify-between items-start overflow-hidden",
+			style: { anchorName: r },
+			children: [/* @__PURE__ */ f("div", {
+				ref: o,
+				className: "pe-40",
+				children: a
+			}), i && /* @__PURE__ */ f(t, {
+				"aria-hidden": !0,
+				className: "opacity-0 pointer-events-none",
+				icon: "ArrowDefaultRight",
+				inert: !0,
+				tabIndex: -1,
+				variant: "pill",
+				children: n
+			})]
+		})
+	});
+}, h = ({ activeIndex: e, onSelect: t }) => {
+	let { api: r, snapped: i } = n(), a = u(t);
+	a.current = t;
+	let s = i[0];
+	return o(() => {
+		s !== void 0 && a.current(s);
+	}, [s]), o(() => {
+		r?.scrollTo(e);
+	}, [r, e]), null;
+}, g = ({ activeIndex: t, className: n, onSelect: o, sliderItems: s }) => {
+	let c = u(t), m = l(() => ({
+		active: s.length > 1,
+		align: "center",
+		startIndex: c.current
+	}), [s.length]);
+	return /* @__PURE__ */ f(d, { children: /* @__PURE__ */ p(r, {
+		className: e("relative isolate flex h-full items-center", n),
+		options: m,
+		children: [/* @__PURE__ */ f(h, {
+			activeIndex: t,
+			onSelect: o
+		}), /* @__PURE__ */ f(i, {
+			className: "w-full px-20",
+			scrollClassName: "gap-12 md:gap-40 auto-cols-full",
+			children: s.map((t, n) => /* @__PURE__ */ f(a, {
+				index: n,
+				children: /* @__PURE__ */ f("div", {
+					"aria-label": `${n + 1}/${s.length}`,
+					className: e("rounded-16 overflow-hidden bg-white"),
+					children: t
+				})
+			}, n))
+		})]
+	}) });
+}, _ = ({ activeIndex: n, className: r, items: i, labels: a, onClickMenu: o }) => {
+	let c = s(), u = c.replace(/[^a-zA-Z0-9_-]/g, ""), { menuItems: h, sliderItems: _ } = l(() => {
+		let r = i.map(({ href: t, id: r, title: i }, a) => {
+			let s = a === n, l = r ?? `${c}_${a}`;
+			return {
+				anchorName: `--promises-${u}-${a}`,
+				href: t,
+				id: r,
+				isActive: s,
+				itemId: l,
+				labelNode: /* @__PURE__ */ f("button", {
+					id: l,
+					"aria-label": i,
+					className: e("text-start hover:underline text-h4 text-center font-serif @3xl/promises:text-h4 @5xl/promises:text-h2 @6xl/promises:text-h1 @3xl/promises:text-start"),
+					onClick: () => o(a),
+					type: "button",
+					children: i
+				}),
+				title: i
+			};
+		});
+		return {
+			menuItems: r,
+			sliderItems: r.map(({ labelNode: e, href: n, itemId: r }) => /* @__PURE__ */ p("div", {
+				className: "rounded-32 p-16 flex flex-col items-start gap-8",
+				children: [e, /* @__PURE__ */ f(t, {
+					"aria-describedby": r,
+					"aria-label": a.anchor.continue,
+					href: n,
+					icon: "ArrowDefaultRight",
+					variant: "pill",
+					children: a.anchor.continue
+				})]
+			}))
+		};
+	}, [
+		n,
+		i,
+		a,
+		c,
+		o,
+		u
+	]), v = h[n];
+	return /* @__PURE__ */ p(d, { children: [
+		/* @__PURE__ */ f("ul", {
+			className: e("hidden @3xl/promises:block", "absolute bottom-0 inset-x-0 overflow-hidden @3xl/promises:-ms-52 text-black w-full", "@3xl/promises:pointer-events-auto @3xl/promises:static @3xl/promises:p-0 @3xl/promises:pt-40", r),
+			children: h.map(({ anchorName: e, id: t, isActive: n, labelNode: r, title: i }, o) => /* @__PURE__ */ f(m, {
+				anchorLabel: a.anchor.continue,
+				anchorName: e,
+				isActive: n,
+				labelNode: r
+			}, t ?? `${i}-${o}`))
+		}),
+		v && /* @__PURE__ */ f(t, {
+			"aria-describedby": v.itemId,
+			"aria-label": a.anchor.continue,
+			className: "hidden @3xl/promises:inline-flex transition-[top] duration-200 ease-out-quad absolute z-1",
+			href: v.href,
+			icon: "ArrowDefaultRight",
+			style: {
+				positionAnchor: v.anchorName,
+				top: "anchor(top)",
+				right: "anchor(right)"
+			},
+			variant: "pill",
+			children: a.anchor.continue
+		}),
+		/* @__PURE__ */ f("div", {
+			className: "@3xl/promises:hidden absolute inset-x-0 bottom-20",
+			children: /* @__PURE__ */ f(g, {
+				activeIndex: n,
+				onSelect: o,
+				sliderItems: _
+			})
+		})
+	] });
+};
+//#endregion
+export { _ as PromisesMenu };
+
+//# sourceMappingURL=PromisesMenu.js.map

package/ui/Promises/PromisesMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromisesMenu.js","names":[],"sources":["../../../lib/ui/Promises/PromisesMenu.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { FunctionComponent, ReactNode } from 'react';\nimport { useEffect, useId, useMemo, useRef, useLayoutEffect } from 'react';\nimport { useCarousel } from '../carousel/Carousel.context';\n\nimport { Carousel } from '../carousel/Carousel';\nimport { CarouselBody } from '../carousel/CarouselBody';\nimport { CarouselItem } from '../carousel/CarouselItem';\nimport { Button } from '../buttons/Button';\nimport type { PromisesItem, PromisesLabels } from './Promises';\n\ninterface MenuItemProps {\n  anchorLabel: string;\n  anchorName: string;\n  isActive: boolean;\n  labelNode: ReactNode;\n}\n\nconst PromisesMenuItem: FunctionComponent<MenuItemProps> = ({\n  anchorLabel,\n  anchorName,\n  isActive,\n  labelNode,\n}) => {\n  const labelRef = useRef<HTMLDivElement>(null);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    if (!labelRef.current || !containerRef.current) return;\n    const resizeObserver = new ResizeObserver(() => {\n      if (containerRef.current && labelRef.current) {\n        containerRef.current.style.height = `${labelRef.current.offsetHeight}px`;\n      }\n    });\n    resizeObserver.observe(labelRef.current);\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  return (\n    <li\n      className={clsx(\n        'relative isolate transition-[opacity,height,margin-inline-start] ms-0 duration-300 overflow-hidden rounded-32 bg-white p-20',\n        { '@3xl/promises:ms-52': !isActive },\n      )}\n    >\n      <div\n        ref={containerRef}\n        className=\"flex justify-between items-start overflow-hidden\"\n        style={{ anchorName } as unknown as React.CSSProperties}\n      >\n        <div ref={labelRef} className=\"pe-40\">\n          {labelNode}\n        </div>\n        {isActive && (\n          <Button\n            aria-hidden\n            className=\"opacity-0 pointer-events-none\"\n            icon=\"ArrowDefaultRight\"\n            inert\n            tabIndex={-1}\n            variant=\"pill\"\n          >\n            {anchorLabel}\n          </Button>\n        )}\n      </div>\n    </li>\n  );\n};\n\ninterface Props {\n  activeIndex: number;\n  className?: string;\n  items: PromisesItem[];\n  labels: PromisesLabels;\n  onClickMenu: (index: number) => void;\n}\n\ninterface PromisesItemSliderProps {\n  activeIndex: number;\n  className?: string;\n  onSelect: (index: number) => void;\n  sliderItems: ReactNode[];\n}\n\nconst CarouselSync: FunctionComponent<{\n  activeIndex: number;\n  onSelect: (index: number) => void;\n}> = ({ activeIndex, onSelect }) => {\n  const { api, snapped } = useCarousel();\n  const onSelectRef = useRef(onSelect);\n  onSelectRef.current = onSelect;\n\n  const snappedIndex = snapped[0];\n  useEffect(() => {\n    if (snappedIndex !== undefined) onSelectRef.current(snappedIndex);\n  }, [snappedIndex]);\n\n  useEffect(() => {\n    api?.scrollTo(activeIndex);\n  }, [api, activeIndex]);\n\n  return null;\n};\n\nconst PromisesItemSlider: FunctionComponent<PromisesItemSliderProps> = ({\n  activeIndex,\n  className,\n  onSelect,\n  sliderItems,\n}) => {\n  const initialIndex = useRef(activeIndex);\n  const carouselOptions = useMemo(\n    () => ({\n      active: sliderItems.length > 1,\n      align: 'center' as const,\n      startIndex: initialIndex.current,\n    }),\n    [sliderItems.length],\n  );\n\n  return (\n    <>\n      <Carousel\n        className={clsx('relative isolate flex h-full items-center', className)}\n        options={carouselOptions}\n      >\n        <CarouselSync activeIndex={activeIndex} onSelect={onSelect} />\n        <CarouselBody className=\"w-full px-20\" scrollClassName=\"gap-12 md:gap-40 auto-cols-full\">\n          {sliderItems.map((item, i) => (\n            <CarouselItem index={i} key={i}>\n              <div\n                aria-label={`${i + 1}/${sliderItems.length}`}\n                className={clsx('rounded-16 overflow-hidden bg-white')}\n              >\n                {item}\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselBody>\n      </Carousel>\n    </>\n  );\n};\n\nexport const PromisesMenu: FunctionComponent<Props> = ({\n  activeIndex,\n  className,\n  items,\n  labels,\n  onClickMenu,\n}) => {\n  const menuId = useId();\n  const safeMenuId = menuId.replace(/[^a-zA-Z0-9_-]/g, '');\n\n  const { menuItems, sliderItems } = useMemo(() => {\n    const mItems = items.map(({ href, id, title }, index) => {\n      const isActive = index === activeIndex;\n      const itemId = id ?? `${menuId}_${index}`;\n      const anchorName = `--promises-${safeMenuId}-${index}`;\n\n      const labelNode = (\n        <button\n          id={itemId}\n          aria-label={title}\n          className={clsx(\n            'text-start hover:underline text-h4 text-center font-serif @3xl/promises:text-h4 @5xl/promises:text-h2 @6xl/promises:text-h1 @3xl/promises:text-start',\n          )}\n          onClick={() => onClickMenu(index)}\n          type=\"button\"\n        >\n          {title}\n        </button>\n      );\n\n      return { anchorName, href, id, isActive, itemId, labelNode, title };\n    });\n\n    const sItems = mItems.map(({ labelNode, href, itemId }) => (\n      <div className=\"rounded-32 p-16 flex flex-col items-start gap-8\">\n        {labelNode}\n        <Button\n          aria-describedby={itemId}\n          aria-label={labels.anchor.continue}\n          href={href}\n          icon=\"ArrowDefaultRight\"\n          variant=\"pill\"\n        >\n          {labels.anchor.continue}\n        </Button>\n      </div>\n    ));\n\n    return { menuItems: mItems, sliderItems: sItems };\n  }, [activeIndex, items, labels, menuId, onClickMenu, safeMenuId]);\n\n  const activeItem = menuItems[activeIndex];\n\n  return (\n    <>\n      <ul\n        className={clsx(\n          'hidden @3xl/promises:block',\n          'absolute bottom-0 inset-x-0 overflow-hidden @3xl/promises:-ms-52 text-black w-full',\n          '@3xl/promises:pointer-events-auto @3xl/promises:static @3xl/promises:p-0 @3xl/promises:pt-40',\n          className,\n        )}\n      >\n        {menuItems.map(({ anchorName, id, isActive, labelNode, title }, index) => (\n          <PromisesMenuItem\n            anchorLabel={labels.anchor.continue}\n            anchorName={anchorName}\n            isActive={isActive}\n            key={id ?? `${title}-${index}`}\n            labelNode={labelNode}\n          />\n        ))}\n      </ul>\n      {activeItem && (\n        <Button\n          aria-describedby={activeItem.itemId}\n          aria-label={labels.anchor.continue}\n          className=\"hidden @3xl/promises:inline-flex transition-[top] duration-200 ease-out-quad absolute z-1\"\n          href={activeItem.href}\n          icon=\"ArrowDefaultRight\"\n          style={\n            {\n              positionAnchor: activeItem.anchorName,\n              top: 'anchor(top)',\n              right: 'anchor(right)',\n            } as React.CSSProperties\n          }\n          variant=\"pill\"\n        >\n          {labels.anchor.continue}\n        </Button>\n      )}\n      <div className=\"@3xl/promises:hidden absolute inset-x-0 bottom-20\">\n        <PromisesItemSlider\n          activeIndex={activeIndex}\n          onSelect={onClickMenu}\n          sliderItems={sliderItems}\n        />\n      </div>\n    </>\n  );\n};\n"],"mappings":"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"}

package/ui/SidebarLayout.js

@@ -141,7 +141,7 @@ var m = ({ items: i, children: a, className: o, activeIndex: l = 0, isCollapsed:
 					style: { positionAnchor: `--sidebar-item-${l}` },
 					children: /* @__PURE__ */ s(f, { isCollapsed: g })
 				}), /* @__PURE__ */ s("nav", {
-					className: t("max-md:divide-y-1 p-8 max-md:h-full max-md:overflow-auto md:gap-y-20 grid overflow-hidden text-b3 font-semibold relative transition-grid-template-columns duration-300 ease-in-out", g ? "grid-cols-[48px_0fr]" : "grid-cols-[48px_1fr]"),
+					className: t("max-md:divide-y-1 p-8 max-md:h-full max-md:overflow-auto md:flex-1 md:min-h-0 md:overflow-y-auto md:overflow-x-hidden md:gap-y-20 grid overflow-hidden text-b3 font-semibold relative transition-grid-template-columns duration-300 ease-in-out", g ? "grid-cols-[48px_0fr]" : "grid-cols-[48px_1fr]"),
 					children: i.map((e, t) => /* @__PURE__ */ s(d, {
 						item: e,
 						isActive: t === l,

package/ui/SidebarLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarLayout.js","names":[],"sources":["../../lib/ui/SidebarLayout.tsx"],"sourcesContent":["import { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport clsx from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type Dispatch,\n  type PropsWithChildren,\n  type ReactNode,\n  type SetStateAction,\n  type MouseEvent,\n  useCallback,\n  useRef,\n  useState,\n} from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { HamburgerIcon } from './HamburgerIcon';\nimport { useSlots } from '@/ui/hooks/useSlots';\n\ntype SidebarSubItem = {\n  label: string;\n  href: string;\n} & ComponentPropsWithoutRef<'a'>;\n\ntype SidebarItem = {\n  label: string;\n  icon: IconicNames;\n  items?: SidebarSubItem[];\n} & ((ComponentPropsWithoutRef<'a'> & { href: string }) | ComponentPropsWithoutRef<'button'>);\n\ninterface SidebarItemProps {\n  item: SidebarItem;\n  isActive?: boolean;\n  isCollapsed?: boolean;\n  anchorName: string;\n  onItemClick?: () => void;\n}\n\nfunction Cta(item: PropsWithChildren<SidebarItem>) {\n  if ('href' in item) {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { children, icon, label, ...attrs } = item;\n\n    return (\n      <a\n        {...attrs}\n        className=\"flex whitespace-nowrap items-center text-white hover:text-saffron transition-colors outline-none focus-visible:bg-white/20 rounded-pill relative group/sidebar-item\"\n      >\n        {children}\n      </a>\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { children, icon, label, ...attrs } = item;\n\n  return (\n    <button\n      {...attrs}\n      className=\"flex whitespace-nowrap items-center text-white outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 rounded-pill relative group/sidebar-item\"\n    >\n      {children}\n    </button>\n  );\n}\n\nconst SidebarItem = ({\n  item,\n  isActive = false,\n  isCollapsed = false,\n  anchorName,\n  onItemClick,\n}: SidebarItemProps) => {\n  const hasSubItems = item.items && item.items.length > 0;\n\n  return (\n    <div className=\"col-start-1 col-end-3\">\n      <Cta\n        {...item}\n        onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          if (hasSubItems && onItemClick) {\n            e.preventDefault();\n            onItemClick();\n          }\n        }}\n        style={{ anchorName: `--${anchorName}` } as CSSProperties}\n      >\n        <div className=\"relative\">\n          <div\n            className={twMerge('aspect-square w-48 rounded-full flex items-center justify-center')}\n          >\n            <Icon name={item.icon} className=\"w-24 text-white\" />\n          </div>\n          <div className=\"absolute inset-0 pointer-events-none\" aria-hidden=\"true\" inert>\n            <div\n              className={twMerge(\n                'max-md:hidden aspect-square w-48 rounded-full flex items-center justify-center bg-lightSand text-black',\n                '[clip-path:circle(var(--sidebarItem_clipCircle))] transition-all duration-200 delay-100 ease-in-out group-focus-visible/sidebar-item:ring-4 group-focus-visible/sidebar-item:ring-black group-focus-visible/sidebar-item:ring-offset-2',\n                isActive ? '[--sidebarItem_clipCircle:100%]' : '[--sidebarItem_clipCircle:0%]',\n                'group-hover/sidebar-item:[--sidebarItem_clipCircle:100%] group-focus-within/sidebar-item:[--sidebarItem_clipCircle:100%]',\n                !isActive &&\n                  'group-hover/sidebar-item:bg-lightSand/80 group-focus-within/sidebar-item:bg-lightSand/80',\n              )}\n            >\n              <Icon name={item.icon} className=\"w-24\" />\n            </div>\n          </div>\n        </div>\n        <span\n          className={twMerge(\n            'transition-all duration-300 ease-in-out whitespace-nowrap ps-8 pe-12 truncate md:max-w-240',\n            isCollapsed ? 'opacity-0' : 'opacity-100',\n          )}\n        >\n          {item.label}\n        </span>\n      </Cta>\n      {hasSubItems && (\n        <div\n          className={twMerge(\n            'grid transition-[grid-template-rows,opacity] duration-300 ease-in-out overflow-hidden max-md:grid-rows-[1fr] max-md:opacity-100',\n            isCollapsed ? 'grid-rows-[0fr] opacity-0' : 'grid-rows-[1fr] opacity-100 pb-12',\n          )}\n          inert={isCollapsed}\n        >\n          <div className=\"outline-none relative overflow-hidden flex flex-col gap-8 ps-48 font-normal\">\n            {item.items!.map((subItem, subIndex) => (\n              <a\n                key={subIndex}\n                href={subItem.href}\n                className=\"text-white hover:text-saffron transition-colors text-b4 whitespace-nowrap outline-none focus-visible:bg-white/20 ps-8 pe-16 rounded-pill\"\n              >\n                {subItem.label}\n              </a>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const CollapseIndicatorSVG = ({ isCollapsed }: { isCollapsed: boolean }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"48\">\n    <g fill=\"none\" fillRule=\"nonzero\">\n      <path\n        fill=\"#FFF\"\n        d=\"M10.008 48v-1.829c0-4.116-1.722-8.045-4.75-10.835-6.331-5.837-6.331-15.835 0-21.672a14.736 14.736 0 0 0 4.75-10.835V0h27.417v48H10.008Z\"\n      />\n      <g\n        className={twMerge(\n          'transition-transform duration-500 ease-in-out origin-center [transform-box:fill-box]',\n          isCollapsed ? 'rotate-180' : 'rotate-0',\n        )}\n      >\n        <path\n          fill=\"#1E2643\"\n          d=\"M19.686 12.547c6.617 0 12 5.383 12 12s-5.383 12-12 12-12-5.383-12-12 5.383-12 12-12Zm0 1.986c-5.522 0-10.015 4.492-10.015 10.014 0 5.523 4.493 10.015 10.016 10.015 5.52 0 10.012-4.492 10.012-10.015 0-5.522-4.492-10.014-10.012-10.014Zm-2.097 4.382c.376-.366 1.032-.366 1.409 0l5.037 4.895a.948.948 0 0 1 0 1.37l-5.037 4.894a1.002 1.002 0 0 1-.705.285 1 1 0 0 1-.704-.285.947.947 0 0 1 0-1.369l4.332-4.21-4.332-4.21a.95.95 0 0 1 0-1.37Z\"\n        />\n      </g>\n    </g>\n  </svg>\n);\n\nexport interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {\n  items: SidebarItem[];\n  children: ReactNode;\n  activeIndex?: number;\n  isCollapsed?: boolean;\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n}\n\nfunction useSidebarLayout({\n  isCollapsed: initialCollapsedValue,\n  onCollapsedChange,\n}: {\n  isCollapsed?: boolean;\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n}) {\n  const [isCollapsed, setIsCollapsedState] = useState(() => initialCollapsedValue ?? true);\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  const setIsCollapsed = useCallback<Dispatch<SetStateAction<boolean>>>(\n    (value) => {\n      setIsCollapsedState((previousState) => {\n        const nextState = typeof value === 'function' ? value(previousState) : value;\n        if (nextState !== previousState) {\n          onCollapsedChange?.(nextState);\n        }\n        return nextState;\n      });\n    },\n    [onCollapsedChange],\n  );\n\n  const handleToggleCollapse = useCallback(() => {\n    setIsCollapsed((prev) => !prev);\n  }, [setIsCollapsed]);\n\n  return {\n    isCollapsed,\n    setIsCollapsed,\n    overlayRef,\n    handleToggleCollapse,\n  };\n}\n\nexport const SidebarLayout = ({\n  items,\n  children: initialChildren,\n  className,\n  activeIndex = 0,\n  isCollapsed: initialCollapsedValue,\n  onCollapsedChange,\n  ...attrs\n}: SidebarLayoutProps) => {\n  const { isCollapsed, setIsCollapsed, handleToggleCollapse } = useSidebarLayout({\n    isCollapsed: initialCollapsedValue,\n    onCollapsedChange,\n  });\n  const {\n    'header-logo': headerLogo,\n    header,\n    ['header-actions']: headerActions,\n    children,\n  } = useSlots(initialChildren, ['header-logo', 'header', 'header-actions']);\n\n  return (\n    <div\n      data-name=\"SidebarLayout\"\n      className={clsx('h-screen overflow-clip flex flex-col bg-ultramarine', className)}\n      {...attrs}\n    >\n      {/* Header */}\n      <header className=\"bg-ultramarine h-64 flex items-center justify-between gap-8 p-8 ps-20 md:px-24 text-white shrink-0\">\n        {headerLogo}\n        {header}\n        {headerActions}\n        <button\n          className=\"md:hidden w-48 h-48 focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 rounded-full flex items-center justify-center text-white transition-opacity outline-none\"\n          aria-label={isCollapsed ? 'Open the navigation menu' : 'Close the navigation menu'}\n          onClick={handleToggleCollapse}\n        >\n          <HamburgerIcon isActive={!isCollapsed} />\n        </button>\n      </header>\n\n      {/* Main container with sidebar and content */}\n      <div className=\"flex h-full overflow-x-clip overflow-y-hidden\">\n        {/* Sidebar */}\n        <aside\n          className={twMerge(\n            'z-10 max-md:absolute max-md:top-64 max-md:h-[calc(100dvh-64px)] max-md:w-screen flex bg-ultramarine px-8 md:py-16 md:ps-28 md:pe-16 text-white flex-col gap-24 transition-all duration-300 ease-in-out relative h-full shrink-0',\n            isCollapsed ? 'max-md:-translate-x-full' : 'md:pe-24',\n          )}\n        >\n          {/* Indicator */}\n          <button\n            className=\"hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]\"\n            onClick={handleToggleCollapse}\n            aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n            style={\n              {\n                positionAnchor: `--sidebar-item-${activeIndex}`,\n              } as CSSProperties\n            }\n          >\n            <CollapseIndicatorSVG isCollapsed={isCollapsed} />\n          </button>\n\n          <nav\n            className={twMerge(\n              'max-md:divide-y-1 p-8 max-md:h-full max-md:overflow-auto md:gap-y-20 grid overflow-hidden text-b3 font-semibold relative transition-grid-template-columns duration-300 ease-in-out',\n              isCollapsed ? 'grid-cols-[48px_0fr]' : 'grid-cols-[48px_1fr]',\n            )}\n          >\n            {items.map((item, index) => (\n              <SidebarItem\n                key={index}\n                item={item}\n                isActive={index === activeIndex}\n                isCollapsed={isCollapsed}\n                anchorName={`sidebar-item-${index}`}\n                onItemClick={() => {\n                  if (item.items && item.items.length > 0) {\n                    setIsCollapsed((prev) => (prev ? false : prev));\n                  }\n                }}\n              />\n            ))}\n          </nav>\n        </aside>\n\n        <main className=\"w-full md:min-w-0 md:w-[calc(100%-108px)] bg-white p-24 overflow-auto md:rounded-ss-16 h-full shrink-0\">\n          {children}\n        </main>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"SidebarLayout.js","names":[],"sources":["../../lib/ui/SidebarLayout.tsx"],"sourcesContent":["import { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport clsx from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type Dispatch,\n  type PropsWithChildren,\n  type ReactNode,\n  type SetStateAction,\n  type MouseEvent,\n  useCallback,\n  useRef,\n  useState,\n} from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { HamburgerIcon } from './HamburgerIcon';\nimport { useSlots } from '@/ui/hooks/useSlots';\n\ntype SidebarSubItem = {\n  label: string;\n  href: string;\n} & ComponentPropsWithoutRef<'a'>;\n\ntype SidebarItem = {\n  label: string;\n  icon: IconicNames;\n  items?: SidebarSubItem[];\n} & ((ComponentPropsWithoutRef<'a'> & { href: string }) | ComponentPropsWithoutRef<'button'>);\n\ninterface SidebarItemProps {\n  item: SidebarItem;\n  isActive?: boolean;\n  isCollapsed?: boolean;\n  anchorName: string;\n  onItemClick?: () => void;\n}\n\nfunction Cta(item: PropsWithChildren<SidebarItem>) {\n  if ('href' in item) {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { children, icon, label, ...attrs } = item;\n\n    return (\n      <a\n        {...attrs}\n        className=\"flex whitespace-nowrap items-center text-white hover:text-saffron transition-colors outline-none focus-visible:bg-white/20 rounded-pill relative group/sidebar-item\"\n      >\n        {children}\n      </a>\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { children, icon, label, ...attrs } = item;\n\n  return (\n    <button\n      {...attrs}\n      className=\"flex whitespace-nowrap items-center text-white outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 rounded-pill relative group/sidebar-item\"\n    >\n      {children}\n    </button>\n  );\n}\n\nconst SidebarItem = ({\n  item,\n  isActive = false,\n  isCollapsed = false,\n  anchorName,\n  onItemClick,\n}: SidebarItemProps) => {\n  const hasSubItems = item.items && item.items.length > 0;\n\n  return (\n    <div className=\"col-start-1 col-end-3\">\n      <Cta\n        {...item}\n        onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          if (hasSubItems && onItemClick) {\n            e.preventDefault();\n            onItemClick();\n          }\n        }}\n        style={{ anchorName: `--${anchorName}` } as CSSProperties}\n      >\n        <div className=\"relative\">\n          <div\n            className={twMerge('aspect-square w-48 rounded-full flex items-center justify-center')}\n          >\n            <Icon name={item.icon} className=\"w-24 text-white\" />\n          </div>\n          <div className=\"absolute inset-0 pointer-events-none\" aria-hidden=\"true\" inert>\n            <div\n              className={twMerge(\n                'max-md:hidden aspect-square w-48 rounded-full flex items-center justify-center bg-lightSand text-black',\n                '[clip-path:circle(var(--sidebarItem_clipCircle))] transition-all duration-200 delay-100 ease-in-out group-focus-visible/sidebar-item:ring-4 group-focus-visible/sidebar-item:ring-black group-focus-visible/sidebar-item:ring-offset-2',\n                isActive ? '[--sidebarItem_clipCircle:100%]' : '[--sidebarItem_clipCircle:0%]',\n                'group-hover/sidebar-item:[--sidebarItem_clipCircle:100%] group-focus-within/sidebar-item:[--sidebarItem_clipCircle:100%]',\n                !isActive &&\n                  'group-hover/sidebar-item:bg-lightSand/80 group-focus-within/sidebar-item:bg-lightSand/80',\n              )}\n            >\n              <Icon name={item.icon} className=\"w-24\" />\n            </div>\n          </div>\n        </div>\n        <span\n          className={twMerge(\n            'transition-all duration-300 ease-in-out whitespace-nowrap ps-8 pe-12 truncate md:max-w-240',\n            isCollapsed ? 'opacity-0' : 'opacity-100',\n          )}\n        >\n          {item.label}\n        </span>\n      </Cta>\n      {hasSubItems && (\n        <div\n          className={twMerge(\n            'grid transition-[grid-template-rows,opacity] duration-300 ease-in-out overflow-hidden max-md:grid-rows-[1fr] max-md:opacity-100',\n            isCollapsed ? 'grid-rows-[0fr] opacity-0' : 'grid-rows-[1fr] opacity-100 pb-12',\n          )}\n          inert={isCollapsed}\n        >\n          <div className=\"outline-none relative overflow-hidden flex flex-col gap-8 ps-48 font-normal\">\n            {item.items!.map((subItem, subIndex) => (\n              <a\n                key={subIndex}\n                href={subItem.href}\n                className=\"text-white hover:text-saffron transition-colors text-b4 whitespace-nowrap outline-none focus-visible:bg-white/20 ps-8 pe-16 rounded-pill\"\n              >\n                {subItem.label}\n              </a>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const CollapseIndicatorSVG = ({ isCollapsed }: { isCollapsed: boolean }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"48\">\n    <g fill=\"none\" fillRule=\"nonzero\">\n      <path\n        fill=\"#FFF\"\n        d=\"M10.008 48v-1.829c0-4.116-1.722-8.045-4.75-10.835-6.331-5.837-6.331-15.835 0-21.672a14.736 14.736 0 0 0 4.75-10.835V0h27.417v48H10.008Z\"\n      />\n      <g\n        className={twMerge(\n          'transition-transform duration-500 ease-in-out origin-center [transform-box:fill-box]',\n          isCollapsed ? 'rotate-180' : 'rotate-0',\n        )}\n      >\n        <path\n          fill=\"#1E2643\"\n          d=\"M19.686 12.547c6.617 0 12 5.383 12 12s-5.383 12-12 12-12-5.383-12-12 5.383-12 12-12Zm0 1.986c-5.522 0-10.015 4.492-10.015 10.014 0 5.523 4.493 10.015 10.016 10.015 5.52 0 10.012-4.492 10.012-10.015 0-5.522-4.492-10.014-10.012-10.014Zm-2.097 4.382c.376-.366 1.032-.366 1.409 0l5.037 4.895a.948.948 0 0 1 0 1.37l-5.037 4.894a1.002 1.002 0 0 1-.705.285 1 1 0 0 1-.704-.285.947.947 0 0 1 0-1.369l4.332-4.21-4.332-4.21a.95.95 0 0 1 0-1.37Z\"\n        />\n      </g>\n    </g>\n  </svg>\n);\n\nexport interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {\n  items: SidebarItem[];\n  children: ReactNode;\n  activeIndex?: number;\n  isCollapsed?: boolean;\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n}\n\nfunction useSidebarLayout({\n  isCollapsed: initialCollapsedValue,\n  onCollapsedChange,\n}: {\n  isCollapsed?: boolean;\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n}) {\n  const [isCollapsed, setIsCollapsedState] = useState(() => initialCollapsedValue ?? true);\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  const setIsCollapsed = useCallback<Dispatch<SetStateAction<boolean>>>(\n    (value) => {\n      setIsCollapsedState((previousState) => {\n        const nextState = typeof value === 'function' ? value(previousState) : value;\n        if (nextState !== previousState) {\n          onCollapsedChange?.(nextState);\n        }\n        return nextState;\n      });\n    },\n    [onCollapsedChange],\n  );\n\n  const handleToggleCollapse = useCallback(() => {\n    setIsCollapsed((prev) => !prev);\n  }, [setIsCollapsed]);\n\n  return {\n    isCollapsed,\n    setIsCollapsed,\n    overlayRef,\n    handleToggleCollapse,\n  };\n}\n\nexport const SidebarLayout = ({\n  items,\n  children: initialChildren,\n  className,\n  activeIndex = 0,\n  isCollapsed: initialCollapsedValue,\n  onCollapsedChange,\n  ...attrs\n}: SidebarLayoutProps) => {\n  const { isCollapsed, setIsCollapsed, handleToggleCollapse } = useSidebarLayout({\n    isCollapsed: initialCollapsedValue,\n    onCollapsedChange,\n  });\n  const {\n    'header-logo': headerLogo,\n    header,\n    ['header-actions']: headerActions,\n    children,\n  } = useSlots(initialChildren, ['header-logo', 'header', 'header-actions']);\n\n  return (\n    <div\n      data-name=\"SidebarLayout\"\n      className={clsx('h-screen overflow-clip flex flex-col bg-ultramarine', className)}\n      {...attrs}\n    >\n      {/* Header */}\n      <header className=\"bg-ultramarine h-64 flex items-center justify-between gap-8 p-8 ps-20 md:px-24 text-white shrink-0\">\n        {headerLogo}\n        {header}\n        {headerActions}\n        <button\n          className=\"md:hidden w-48 h-48 focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 rounded-full flex items-center justify-center text-white transition-opacity outline-none\"\n          aria-label={isCollapsed ? 'Open the navigation menu' : 'Close the navigation menu'}\n          onClick={handleToggleCollapse}\n        >\n          <HamburgerIcon isActive={!isCollapsed} />\n        </button>\n      </header>\n\n      {/* Main container with sidebar and content */}\n      <div className=\"flex h-full overflow-x-clip overflow-y-hidden\">\n        {/* Sidebar */}\n        <aside\n          className={twMerge(\n            'z-10 max-md:absolute max-md:top-64 max-md:h-[calc(100dvh-64px)] max-md:w-screen flex bg-ultramarine px-8 md:py-16 md:ps-28 md:pe-16 text-white flex-col gap-24 transition-all duration-300 ease-in-out relative h-full shrink-0',\n            isCollapsed ? 'max-md:-translate-x-full' : 'md:pe-24',\n          )}\n        >\n          {/* Indicator */}\n          <button\n            className=\"hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]\"\n            onClick={handleToggleCollapse}\n            aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n            style={\n              {\n                positionAnchor: `--sidebar-item-${activeIndex}`,\n              } as CSSProperties\n            }\n          >\n            <CollapseIndicatorSVG isCollapsed={isCollapsed} />\n          </button>\n\n          <nav\n            className={twMerge(\n              'max-md:divide-y-1 p-8 max-md:h-full max-md:overflow-auto md:flex-1 md:min-h-0 md:overflow-y-auto md:overflow-x-hidden md:gap-y-20 grid overflow-hidden text-b3 font-semibold relative transition-grid-template-columns duration-300 ease-in-out',\n              isCollapsed ? 'grid-cols-[48px_0fr]' : 'grid-cols-[48px_1fr]',\n            )}\n          >\n            {items.map((item, index) => (\n              <SidebarItem\n                key={index}\n                item={item}\n                isActive={index === activeIndex}\n                isCollapsed={isCollapsed}\n                anchorName={`sidebar-item-${index}`}\n                onItemClick={() => {\n                  if (item.items && item.items.length > 0) {\n                    setIsCollapsed((prev) => (prev ? false : prev));\n                  }\n                }}\n              />\n            ))}\n          </nav>\n        </aside>\n\n        <main className=\"w-full md:min-w-0 md:w-[calc(100%-108px)] bg-white p-24 overflow-auto md:rounded-ss-16 h-full shrink-0\">\n          {children}\n        </main>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/ui/SparkleWrapper.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export interface SparkleWrapperProps extends HTMLAttributes<HTMLDivElement> {
+    count?: number;
+}
+export declare function SparkleWrapper({ children, className, count, ...props }: PropsWithChildren<SparkleWrapperProps>): import("react/jsx-runtime").JSX.Element;

package/ui/SparkleWrapper.js

@@ -0,0 +1,56 @@
+"use client";
+import { t as e } from "../chunks/clsx.js";
+import { useLayoutEffect as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Icon as o } from "@clubmed/trident-icons";
+//#region lib/ui/SparkleWrapper.tsx
+function s(e, t) {
+	return e + Math.random() * (t - e);
+}
+function c(e) {
+	return Array.from({ length: e }, () => ({
+		angle: Math.random() * 360,
+		distance: s(60, 110),
+		delay: Math.round(s(0, 150)),
+		size: Math.round(s(8, 20))
+	}));
+}
+function l(e, t, n, r) {
+	return Math.abs(e) < 1e-6 ? r / Math.abs(t) : Math.abs(t) < 1e-6 ? n / Math.abs(e) : Math.min(n / Math.abs(e), r / Math.abs(t));
+}
+function u({ children: u, className: d, count: f = 7, ...p }) {
+	let m = n(null), [h, g] = r([0, 0]), [_] = r(() => c(Math.round(s(f, f + 3))));
+	return t(() => {
+		if (!m.current) return;
+		let { width: e, height: t } = m.current.getBoundingClientRect();
+		g([e / 2, t / 2]);
+	}, []), /* @__PURE__ */ a("div", {
+		...p,
+		className: e("relative inline-flex items-center justify-center", d),
+		children: [_.map(({ angle: e, distance: t, delay: n, size: r }, a) => {
+			let s = e * Math.PI / 180, c = Math.cos(s), u = Math.sin(s), [d, f] = h, p = d > 0 || f > 0 ? l(c, u, d, f) : 0;
+			return /* @__PURE__ */ i(o, {
+				name: "Diamond",
+				"aria-hidden": "true",
+				className: "absolute top-1/2 left-1/2 animate-sparkle-fly pointer-events-none",
+				style: {
+					"--sparkle-start-x": `${Math.round(c * p)}px`,
+					"--sparkle-start-y": `${Math.round(u * p)}px`,
+					"--sparkle-end-x": `${Math.round(c * (p + t))}px`,
+					"--sparkle-end-y": `${Math.round(u * (p + t))}px`,
+					animationDelay: `${n}ms`,
+					width: `${r}px`,
+					height: `${r}px`
+				}
+			}, a);
+		}), /* @__PURE__ */ i("div", {
+			ref: m,
+			className: "relative z-10 animate-bounce-enter",
+			children: u
+		})]
+	});
+}
+//#endregion
+export { u as SparkleWrapper };
+
+//# sourceMappingURL=SparkleWrapper.js.map

package/ui/SparkleWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparkleWrapper.js","names":[],"sources":["../../lib/ui/SparkleWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport type { HTMLAttributes, PropsWithChildren } from 'react';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nfunction randomBetween(min: number, max: number) {\n  return min + Math.random() * (max - min);\n}\n\nfunction generateSparkles(count: number) {\n  return Array.from({ length: count }, () => ({\n    angle: Math.random() * 360,\n    distance: randomBetween(60, 110),\n    delay: Math.round(randomBetween(0, 150)),\n    size: Math.round(randomBetween(8, 20)),\n  }));\n}\n\nfunction edgeT(cos: number, sin: number, hw: number, hh: number): number {\n  if (Math.abs(cos) < 1e-6) return hh / Math.abs(sin);\n  if (Math.abs(sin) < 1e-6) return hw / Math.abs(cos);\n  return Math.min(hw / Math.abs(cos), hh / Math.abs(sin));\n}\n\nexport interface SparkleWrapperProps extends HTMLAttributes<HTMLDivElement> {\n  count?: number;\n}\n\nexport function SparkleWrapper({\n  children,\n  className,\n  count = 7,\n  ...props\n}: PropsWithChildren<SparkleWrapperProps>) {\n  const childRef = useRef<HTMLDivElement>(null);\n  const [halfSize, setHalfSize] = useState<[number, number]>([0, 0]);\n  const [sparkles] = useState(() => generateSparkles(Math.round(randomBetween(count, count + 3))));\n\n  useLayoutEffect(() => {\n    if (!childRef.current) return;\n    const { width, height } = childRef.current.getBoundingClientRect();\n    setHalfSize([width / 2, height / 2]);\n  }, []);\n\n  return (\n    <div {...props} className={clsx('relative inline-flex items-center justify-center', className)}>\n      {sparkles.map(({ angle, distance, delay, size }, i) => {\n        const rad = (angle * Math.PI) / 180;\n        const cos = Math.cos(rad);\n        const sin = Math.sin(rad);\n        const [hw, hh] = halfSize;\n        const t = hw > 0 || hh > 0 ? edgeT(cos, sin, hw, hh) : 0;\n\n        return (\n          <Icon\n            key={i}\n            name=\"Diamond\"\n            aria-hidden=\"true\"\n            className=\"absolute top-1/2 left-1/2 animate-sparkle-fly pointer-events-none\"\n            style={\n              {\n                '--sparkle-start-x': `${Math.round(cos * t)}px`,\n                '--sparkle-start-y': `${Math.round(sin * t)}px`,\n                '--sparkle-end-x': `${Math.round(cos * (t + distance))}px`,\n                '--sparkle-end-y': `${Math.round(sin * (t + distance))}px`,\n                animationDelay: `${delay}ms`,\n                width: `${size}px`,\n                height: `${size}px`,\n              } as React.CSSProperties\n            }\n          />\n        );\n      })}\n      <div ref={childRef} className=\"relative z-10 animate-bounce-enter\">\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAOA,SAAS,EAAc,GAAa,GAAa;AAC/C,QAAO,IAAM,KAAK,QAAQ,IAAI,IAAM;;AAGtC,SAAS,EAAiB,GAAe;AACvC,QAAO,MAAM,KAAK,EAAE,QAAQ,GAAO,SAAS;EAC1C,OAAO,KAAK,QAAQ,GAAG;EACvB,UAAU,EAAc,IAAI,IAAI;EAChC,OAAO,KAAK,MAAM,EAAc,GAAG,IAAI,CAAC;EACxC,MAAM,KAAK,MAAM,EAAc,GAAG,GAAG,CAAA;EACtC,EAAE;;AAGL,SAAS,EAAM,GAAa,GAAa,GAAY,GAAoB;AAGvE,QAFI,KAAK,IAAI,EAAI,GAAG,OAAa,IAAK,KAAK,IAAI,EAAI,GAC/C,KAAK,IAAI,EAAI,GAAG,OAAa,IAAK,KAAK,IAAI,EAAI,GAC5C,KAAK,IAAI,IAAK,KAAK,IAAI,EAAI,EAAE,IAAK,KAAK,IAAI,EAAI,CAAC;;AAOzD,SAAgB,EAAe,EAC7B,aACA,cACA,WAAQ,GACR,GAAG,KACsC;CACzC,IAAM,IAAW,EAAuB,KAAK,EACvC,CAAC,GAAU,KAAe,EAA2B,CAAC,GAAG,EAAE,CAAC,EAC5D,CAAC,KAAY,QAAe,EAAiB,KAAK,MAAM,EAAc,GAAO,IAAQ,EAAE,CAAC,CAAC,CAAC;AAQhG,QANA,QAAsB;AACpB,MAAI,CAAC,EAAS,QAAS;EACvB,IAAM,EAAE,UAAO,cAAW,EAAS,QAAQ,uBAAuB;AAClE,IAAY,CAAC,IAAQ,GAAG,IAAS,EAAE,CAAC;IACnC,EAAE,CAAC,EAGJ,kBAAC,OAAD;EAAK,GAAI;EAAO,WAAW,EAAK,oDAAoD,EAAU;YAA9F,CACG,EAAS,KAAK,EAAE,UAAO,aAAU,UAAO,WAAQ,MAAM;GACrD,IAAM,IAAO,IAAQ,KAAK,KAAM,KAC1B,IAAM,KAAK,IAAI,EAAI,EACnB,IAAM,KAAK,IAAI,EAAI,EACnB,CAAC,GAAI,KAAM,GACX,IAAI,IAAK,KAAK,IAAK,IAAI,EAAM,GAAK,GAAK,GAAI,EAAG,GAAG;AAEvD,UACE,kBAAC,GAAD;IAEE,MAAK;IACL,eAAY;IACZ,WAAU;IACV,OACE;KACE,qBAAqB,GAAG,KAAK,MAAM,IAAM,EAAE,CAAC;KAC5C,qBAAqB,GAAG,KAAK,MAAM,IAAM,EAAE,CAAC;KAC5C,mBAAmB,GAAG,KAAK,MAAM,KAAO,IAAI,GAAU,CAAC;KACvD,mBAAmB,GAAG,KAAK,MAAM,KAAO,IAAI,GAAU,CAAC;KACvD,gBAAgB,GAAG,EAAM;KACzB,OAAO,GAAG,EAAK;KACf,QAAQ,GAAG,EAAK;;IAGpB,EAfK,EAeL;IAEJ,EACF,kBAAC,OAAD;GAAK,KAAK;GAAU,WAAU;GAC3B;GACG,CAAA,CAAA"}