@clubmed/trident-ui 2.0.0-beta.9 → 2.0.0

package/ui/PageNavigation.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPropsWithoutRef, FunctionComponent } from 'react';
+import { IconicNames } from '@clubmed/trident-icons';
+export interface PageNavigationItem {
+    id: string;
+    label: string;
+    href: string;
+    icon?: IconicNames;
+}
+export interface PageNavigationProps extends ComponentPropsWithoutRef<'nav'> {
+    items: PageNavigationItem[];
+    activeItem: string;
+}
+export declare const PageNavigation: FunctionComponent<PageNavigationProps>;

package/ui/PageNavigation.js

@@ -0,0 +1,71 @@
+"use client";
+import { t as e } from "../chunks/clsx.js";
+import { useCallback as t, useRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Icon as a } from "@clubmed/trident-icons";
+//#region lib/ui/PageNavigation.tsx
+var o = {
+	positionAnchor: "--page-nav-active",
+	top: "anchor(top)",
+	bottom: "anchor(bottom)",
+	left: "anchor(left)",
+	right: "anchor(right)",
+	position: "absolute"
+}, s = { anchorName: "--page-nav-active" }, c = /* @__PURE__ */ r("span", {
+	"aria-hidden": "true",
+	className: "pointer-events-none absolute rounded-pill bg-black transition-all duration-300 [position-anchor:--page-nav-active]",
+	style: o
+}), l = ({ items: o, activeItem: l, className: u, ...d }) => {
+	let f = n(null), p = t((e) => {
+		let t = Array.from(f.current?.querySelectorAll("a") ?? []), n = t.indexOf(document.activeElement);
+		if (n === -1) return;
+		let r = n;
+		if (e.key === "ArrowRight") r = (n + 1) % t.length;
+		else if (e.key === "ArrowLeft") r = (n - 1 + t.length) % t.length;
+		else if (e.key === "Home") r = 0;
+		else if (e.key === "End") r = t.length - 1;
+		else return;
+		e.preventDefault(), t[r].focus();
+	}, []);
+	return /* @__PURE__ */ r("nav", {
+		"aria-label": "Page navigation",
+		...d,
+		className: e("flex items-center", u),
+		children: /* @__PURE__ */ i("ul", {
+			ref: f,
+			onKeyDown: p,
+			className: "relative flex items-center gap-4 md:gap-16",
+			role: "list",
+			children: [c, o.map((t) => {
+				let n = t.id === l;
+				return /* @__PURE__ */ r("li", {
+					className: "relative",
+					children: /* @__PURE__ */ i("a", {
+						href: t.href,
+						"aria-current": n ? "page" : void 0,
+						style: n ? s : void 0,
+						className: e("relative z-10 grid items-center justify-center gap-2 rounded-pill", "font-sans text-b3 font-semibold focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 outline-none", n ? "[@supports(not(anchor-name:--x))]:bg-black" : "focus:bg-pearl", n ? "px-20 py-12" : "md:px-20 md:py-12", n ? "text-white" : "text-black"),
+						children: [t.icon && /* @__PURE__ */ r("div", {
+							className: e("row-start-1 row-end-1 col-start-1 col-end-1 flex items-center justify-center transition-opacity duration-300 md:hidden", "md:opacity-0 transition-opacity mx-auto", n && "opacity-0"),
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ r(a, {
+								name: t.icon,
+								width: "30px"
+							})
+						}), /* @__PURE__ */ r("span", {
+							className: e("row-start-1 row-end-1 col-start-1 col-end-1 grid grid-cols-[0fr] md:grid-cols-[1fr] overflow-hidden transition-all opacity-0 duration-300 md:opacity-100 text-center", n && "grid-cols-[1fr] opacity-100"),
+							children: /* @__PURE__ */ r("span", {
+								className: "overflow-hidden mx-auto",
+								children: t.label
+							})
+						})]
+					})
+				}, t.id);
+			})]
+		})
+	});
+};
+//#endregion
+export { l as PageNavigation };
+
+//# sourceMappingURL=PageNavigation.js.map

package/ui/PageNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageNavigation.js","names":[],"sources":["../../lib/ui/PageNavigation.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  ComponentPropsWithoutRef,\n  CSSProperties,\n  FunctionComponent,\n  KeyboardEvent,\n} from 'react';\nimport { useCallback, useRef } from 'react';\nimport clsx from 'clsx';\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\n\nexport interface PageNavigationItem {\n  id: string;\n  label: string;\n  href: string;\n  icon?: IconicNames;\n}\n\nexport interface PageNavigationProps extends ComponentPropsWithoutRef<'nav'> {\n  items: PageNavigationItem[];\n  activeItem: string;\n}\n\n// Static — hoisted outside component so it's not recreated on every render\nconst PILL_STYLE: CSSProperties = {\n  positionAnchor: '--page-nav-active',\n  top: 'anchor(top)',\n  bottom: 'anchor(bottom)',\n  left: 'anchor(left)',\n  right: 'anchor(right)',\n  position: 'absolute',\n};\n\nconst ACTIVE_ANCHOR_STYLE: CSSProperties = { anchorName: '--page-nav-active' };\n\nconst PILL = (\n  <span\n    aria-hidden=\"true\"\n    className=\"pointer-events-none absolute rounded-pill bg-black transition-all duration-300 [position-anchor:--page-nav-active]\"\n    style={PILL_STYLE}\n  />\n);\n\nexport const PageNavigation: FunctionComponent<PageNavigationProps> = ({\n  items,\n  activeItem,\n  className,\n  ...attrs\n}) => {\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLUListElement>) => {\n    const links = Array.from(listRef.current?.querySelectorAll<HTMLAnchorElement>('a') ?? []);\n    const focused = links.indexOf(document.activeElement as HTMLAnchorElement);\n    if (focused === -1) return;\n\n    let next = focused;\n    if (e.key === 'ArrowRight') next = (focused + 1) % links.length;\n    else if (e.key === 'ArrowLeft') next = (focused - 1 + links.length) % links.length;\n    else if (e.key === 'Home') next = 0;\n    else if (e.key === 'End') next = links.length - 1;\n    else return;\n\n    e.preventDefault();\n    links[next].focus();\n  }, []);\n\n  return (\n    <nav aria-label=\"Page navigation\" {...attrs} className={clsx('flex items-center', className)}>\n      <ul\n        ref={listRef}\n        onKeyDown={handleKeyDown}\n        className=\"relative flex items-center gap-4 md:gap-16\"\n        role=\"list\"\n      >\n        {PILL}\n\n        {items.map((item) => {\n          const isActive = item.id === activeItem;\n\n          return (\n            <li key={item.id} className=\"relative\">\n              <a\n                href={item.href}\n                aria-current={isActive ? 'page' : undefined}\n                style={isActive ? ACTIVE_ANCHOR_STYLE : undefined}\n                className={clsx(\n                  'relative z-10 grid items-center justify-center gap-2 rounded-pill',\n                  'font-sans text-b3 font-semibold focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 outline-none',\n                  isActive ? '[@supports(not(anchor-name:--x))]:bg-black' : 'focus:bg-pearl',\n                  isActive ? 'px-20 py-12' : 'md:px-20 md:py-12',\n                  isActive ? 'text-white' : 'text-black',\n                )}\n              >\n                {item.icon && (\n                  <div\n                    className={clsx(\n                      'row-start-1 row-end-1 col-start-1 col-end-1 flex items-center justify-center transition-opacity duration-300 md:hidden',\n                      'md:opacity-0 transition-opacity mx-auto',\n                      isActive && 'opacity-0',\n                    )}\n                    aria-hidden=\"true\"\n                  >\n                    <Icon name={item.icon} width=\"30px\" />\n                  </div>\n                )}\n\n                <span\n                  className={clsx(\n                    'row-start-1 row-end-1 col-start-1 col-end-1 grid grid-cols-[0fr] md:grid-cols-[1fr] overflow-hidden transition-all opacity-0 duration-300 md:opacity-100 text-center',\n                    isActive && 'grid-cols-[1fr] opacity-100',\n                  )}\n                >\n                  <span className=\"overflow-hidden mx-auto\">{item.label}</span>\n                </span>\n              </a>\n            </li>\n          );\n        })}\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;AAyBA,IAAM,IAA4B;CAChC,gBAAgB;CAChB,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACP,UAAU;CACX,EAEK,IAAqC,EAAE,YAAY,qBAAqB,EAExE,IACJ,kBAAC,QAAD;CACE,eAAY;CACZ,WAAU;CACV,OAAO;CACP,CAAA,EAGS,KAA0D,EACrE,UACA,eACA,cACA,GAAG,QACC;CACJ,IAAM,IAAU,EAAyB,KAAK,EAExC,IAAgB,GAAa,MAAuC;EACxE,IAAM,IAAQ,MAAM,KAAK,EAAQ,SAAS,iBAAoC,IAAI,IAAI,EAAE,CAAC,EACnF,IAAU,EAAM,QAAQ,SAAS,cAAmC;AAC1E,MAAI,MAAY,GAAI;EAEpB,IAAI,IAAO;AACX,MAAI,EAAE,QAAQ,aAAc,MAAQ,IAAU,KAAK,EAAM;WAChD,EAAE,QAAQ,YAAa,MAAQ,IAAU,IAAI,EAAM,UAAU,EAAM;WACnE,EAAE,QAAQ,OAAQ,KAAO;WACzB,EAAE,QAAQ,MAAO,KAAO,EAAM,SAAS;MAC3C;AAGL,EADA,EAAE,gBAAgB,EAClB,EAAM,GAAM,OAAO;IAClB,EAAE,CAAC;AAEN,QACE,kBAAC,OAAD;EAAK,cAAW;EAAkB,GAAI;EAAO,WAAW,EAAK,qBAAqB,EAAU;YAC1F,kBAAC,MAAD;GACE,KAAK;GACL,WAAW;GACX,WAAU;GACV,MAAK;aAJP,CAMG,GAEA,EAAM,KAAK,MAAS;IACnB,IAAM,IAAW,EAAK,OAAO;AAE7B,WACE,kBAAC,MAAD;KAAkB,WAAU;eAC1B,kBAAC,KAAD;MACE,MAAM,EAAK;MACX,gBAAc,IAAW,SAAS,KAAA;MAClC,OAAO,IAAW,IAAsB,KAAA;MACxC,WAAW,EACT,qEACA,0HACA,IAAW,+CAA+C,kBAC1D,IAAW,gBAAgB,qBAC3B,IAAW,eAAe,aAC3B;gBAVH,CAYG,EAAK,QACJ,kBAAC,OAAD;OACE,WAAW,EACT,0HACA,2CACA,KAAY,YACb;OACD,eAAY;iBAEZ,kBAAC,GAAD;QAAM,MAAM,EAAK;QAAM,OAAM;QAAS,CAAA;OAClC,CAAA,EAGR,kBAAC,QAAD;OACE,WAAW,EACT,wKACA,KAAY,8BACb;iBAED,kBAAC,QAAD;QAAM,WAAU;kBAA2B,EAAK;QAAa,CAAA;OACxD,CAAA,CAAA;;KAEN,EAnCI,EAAK,GAmCT;KAEP,CAAA;;EAEA,CAAA"}

package/ui/Pagination.js

@@ -3,40 +3,40 @@ import { t as e } from "../chunks/clsx.js";
 import { Button as t } from "./buttons/Button.js";
 import { generatePagination as n, hidePageButtonForMobile as r, showMobileEllipsis as i } from "./Pagination.helper.js";
 import { Fragment as a } from "react";
-import { Icon as o } from "@clubmed/trident-icons";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Icon as c } from "@clubmed/trident-icons";
 //#region lib/ui/Pagination.tsx
-var l = () => /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s("div", {
+var l = () => /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o("div", {
 	"aria-controls": "page-content",
 	className: "text-base mx-8 ml-4 hidden size-48 items-center justify-center text-b3 font-semibold text-black md:flex",
 	children: "…"
-}) }, "desktop-ellipsis"), u = () => /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s("div", {
+}) }, "desktop-ellipsis"), u = () => /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o("div", {
 	"aria-controls": "page-content",
 	className: "text-base mx-8 ml-4 flex size-48 items-center justify-center text-b3 font-semibold text-black md:hidden",
 	children: "…"
 }) }, "mobile-ellipsis"), d = ({ defaultPage: d, buttonClassName: f = "md:mr-32", buttonLabelClassName: p = "md:flex", className: m, labels: h = {}, onChange: g, paginationFactory: _ = n, count: v, ...y }) => {
 	let b = _(d, v);
-	return /* @__PURE__ */ s("nav", {
+	return /* @__PURE__ */ o("nav", {
 		...y,
 		"data-name": "Pagination",
 		role: "navigation",
 		"aria-label": "pagination navigation",
 		className: e("flex justify-center border-t-sand", m),
-		children: /* @__PURE__ */ s("ul", {
+		children: /* @__PURE__ */ o("ul", {
 			className: "mt-12 flex",
 			children: b.map((n, m) => {
 				switch (n.type) {
-					case "pageNumber": return /* @__PURE__ */ c(a, { children: [
-						n.value === v && i(n.value, d, v) && /* @__PURE__ */ s(u, {}),
-						/* @__PURE__ */ s("li", {
+					case "pageNumber": return /* @__PURE__ */ s(a, { children: [
+						n.value === v && i(n.value, d, v) && /* @__PURE__ */ o(u, {}),
+						/* @__PURE__ */ o("li", {
 							className: e("mr-2", { "hidden md:flex": r(n.value, d, v) }),
-							children: n.value === d ? /* @__PURE__ */ s(t, {
+							children: n.value === d ? /* @__PURE__ */ o(t, {
 								"aria-current": "page",
 								className: "text-white",
 								color: "black",
 								variant: "circle",
 								children: n.value.toString()
-							}) : /* @__PURE__ */ s(t, {
+							}) : /* @__PURE__ */ o(t, {
 								className: e("size-48 items-center", { "mx-8 flex shrink-0 cursor-pointer justify-center self-start": m === b.length - 1 }),
 								onClick: () => g(n.value),
 								color: "white",
@@ -44,42 +44,42 @@ var l = () => /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s("div", {
 								children: n.value.toString()
 							})
 						}),
-						n.value === 1 && i(n.value, d, v) && /* @__PURE__ */ s(u, {})
+						n.value === 1 && i(n.value, d, v) && /* @__PURE__ */ o(u, {})
 					] }, `pagination-pageNumber-${m}`);
-					case "ellipsis": return /* @__PURE__ */ s(l, {}, `pagination-ellipsis-${m}`);
-					case "previousButton": return /* @__PURE__ */ s("li", {
+					case "ellipsis": return /* @__PURE__ */ o(l, {}, `pagination-ellipsis-${m}`);
+					case "previousButton": return /* @__PURE__ */ o("li", {
 						className: e(f),
-						children: /* @__PURE__ */ c("button", {
+						children: /* @__PURE__ */ s("button", {
 							"data-action": "previous",
 							"aria-controls": "page-content",
 							"aria-label": `page ${d - 1}`,
-							className: e("text:black text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active", { "pointer-events-none disabled:text-grey": n.disabled }),
+							className: e("text:black text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", { "pointer-events-none disabled:text-grey": n.disabled }),
 							disabled: n.disabled,
 							onClick: () => g(d - 1),
 							type: "button",
-							children: [/* @__PURE__ */ s(o, {
+							children: [/* @__PURE__ */ o(c, {
 								name: "ArrowDefaultLeft",
 								width: "30px"
-							}), /* @__PURE__ */ s("span", {
+							}), /* @__PURE__ */ o("span", {
 								className: e("ml-4 hidden border-b", { "border-black": !n.disabled }, p),
 								children: h.previous
 							})]
 						})
 					}, "pagination-labels.previous");
-					case "nextButton": return /* @__PURE__ */ s("li", {
+					case "nextButton": return /* @__PURE__ */ o("li", {
 						className: e(f),
-						children: /* @__PURE__ */ c("button", {
+						children: /* @__PURE__ */ s("button", {
 							"aria-controls": "page-content",
 							"aria-label": `page ${d + 1}`,
-							className: e("text:black mb-5 text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active", { "pointer-events-none disabled:text-grey": n.disabled }),
+							className: e("text:black mb-5 text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", { "pointer-events-none disabled:text-grey": n.disabled }),
 							"data-action": "next",
 							disabled: n.disabled,
 							onClick: () => g(d + 1),
 							type: "button",
-							children: [/* @__PURE__ */ s("span", {
+							children: [/* @__PURE__ */ o("span", {
 								className: e("ml-4 hidden border-b", { "border-black": !n.disabled }, p),
 								children: h.next
-							}), /* @__PURE__ */ s(o, {
+							}), /* @__PURE__ */ o(c, {
 								name: "ArrowDefaultRight",
 								width: "30px"
 							})]

package/ui/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":[],"sources":["../../lib/ui/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { Fragment, type FunctionComponent, type HTMLAttributes } from 'react';\n\nimport {\n  showMobileEllipsis,\n  generatePagination,\n  hidePageButtonForMobile,\n} from './Pagination.helper';\nimport { Button } from './buttons/Button';\nimport { Icon } from '@clubmed/trident-icons';\nimport type { ScrollerLabels } from './types/ScrollerLabels';\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /**\n   * The current page number (must be >= 1)\n   */\n  defaultPage: number;\n  /**\n   * The total pages number\n   */\n  count: number;\n  /**\n   * A callback function to handle page changes.\n   */\n  onChange: (page: number) => void;\n  /**\n   * Additional class names for the previous & next buttons\n   */\n  buttonClassName?: string;\n  /**\n   * Additional class names for the label of the previous & next buttons\n   */\n  buttonLabelClassName?: string;\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * UI Labels\n   */\n  labels: ScrollerLabels;\n  /**\n   * A pagination factory to generate an array of Pagination elements (pageNumber, ellipsis, next button, previous button).\n   */\n  paginationFactory?: typeof generatePagination;\n}\n\nconst EllipsisDesktop = () => {\n  return (\n    <li key=\"desktop-ellipsis\">\n      <div\n        aria-controls=\"page-content\"\n        className=\"text-base mx-8 ml-4 hidden size-48 items-center justify-center text-b3 font-semibold text-black md:flex\"\n      >\n        &#8230;\n      </div>\n    </li>\n  );\n};\n\nconst EllipsisMobile = () => {\n  return (\n    <li key=\"mobile-ellipsis\">\n      <div\n        aria-controls=\"page-content\"\n        className=\"text-base mx-8 ml-4 flex size-48 items-center justify-center text-b3 font-semibold text-black md:hidden\"\n      >\n        &#8230;\n      </div>\n    </li>\n  );\n};\n\nexport const Pagination: FunctionComponent<PaginationProps> = ({\n  defaultPage,\n  buttonClassName = 'md:mr-32',\n  buttonLabelClassName = 'md:flex',\n  className,\n  labels = {},\n  onChange,\n  paginationFactory = generatePagination,\n  count,\n  ...props\n}) => {\n  const pagination = paginationFactory(defaultPage, count);\n\n  return (\n    <nav\n      {...props}\n      data-name=\"Pagination\"\n      role=\"navigation\"\n      aria-label=\"pagination navigation\"\n      className={clsx('flex justify-center border-t-sand', className)}\n    >\n      <ul className=\"mt-12 flex\">\n        {pagination.map((page, index) => {\n          switch (page.type) {\n            case 'pageNumber':\n              return (\n                <Fragment key={`pagination-pageNumber-${index}`}>\n                  {page.value === count && showMobileEllipsis(page.value, defaultPage, count) && (\n                    <EllipsisMobile />\n                  )}\n                  <li\n                    className={clsx('mr-2', {\n                      'hidden md:flex': hidePageButtonForMobile(page.value, defaultPage, count),\n                    })}\n                  >\n                    {page.value === defaultPage ? (\n                      <Button\n                        aria-current=\"page\"\n                        className=\"text-white\"\n                        color=\"black\"\n                        variant=\"circle\"\n                      >\n                        {page.value.toString()}\n                      </Button>\n                    ) : (\n                      <Button\n                        className={clsx('size-48 items-center', {\n                          'mx-8 flex shrink-0 cursor-pointer justify-center self-start':\n                            index === pagination.length - 1,\n                        })}\n                        onClick={() => onChange(page.value)}\n                        color=\"white\"\n                        variant=\"circle\"\n                      >\n                        {page.value.toString()}\n                      </Button>\n                    )}\n                  </li>\n                  {page.value === 1 && showMobileEllipsis(page.value, defaultPage, count) && (\n                    <EllipsisMobile />\n                  )}\n                </Fragment>\n              );\n\n            case 'ellipsis':\n              return <EllipsisDesktop key={`pagination-ellipsis-${index}`} />;\n\n            case 'previousButton':\n              return (\n                <li key=\"pagination-labels.previous\" className={clsx(buttonClassName)}>\n                  <button\n                    data-action=\"previous\"\n                    aria-controls=\"page-content\"\n                    aria-label={`page ${defaultPage - 1}`}\n                    className={clsx(\n                      'text:black text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active',\n                      {\n                        'pointer-events-none disabled:text-grey': page.disabled,\n                      },\n                    )}\n                    disabled={page.disabled}\n                    onClick={() => onChange(defaultPage - 1)}\n                    type=\"button\"\n                  >\n                    <Icon name=\"ArrowDefaultLeft\" width=\"30px\" />\n                    <span\n                      className={clsx(\n                        'ml-4 hidden border-b',\n                        { 'border-black': !page.disabled },\n                        buttonLabelClassName,\n                      )}\n                    >\n                      {labels.previous}\n                    </span>\n                  </button>\n                </li>\n              );\n\n            case 'nextButton':\n              return (\n                <li className={clsx(buttonClassName)} key=\"pagination-labels.next\">\n                  <button\n                    aria-controls=\"page-content\"\n                    aria-label={`page ${defaultPage + 1}`}\n                    className={clsx(\n                      'text:black mb-5 text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active',\n                      {\n                        'pointer-events-none disabled:text-grey': page.disabled,\n                      },\n                    )}\n                    data-action=\"next\"\n                    disabled={page.disabled}\n                    onClick={() => onChange(defaultPage + 1)}\n                    type=\"button\"\n                  >\n                    <span\n                      className={clsx(\n                        'ml-4 hidden border-b',\n                        { 'border-black': !page.disabled },\n                        buttonLabelClassName,\n                      )}\n                    >\n                      {labels.next}\n                    </span>\n                    <Icon name=\"ArrowDefaultRight\" width=\"30px\" />\n                  </button>\n                </li>\n              );\n\n            default:\n              return null;\n          }\n        })}\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;AAiDA,IAAM,UAEF,kBAAC,MAAD,EAAA,UACE,kBAAC,OAAD;CACE,iBAAc;CACd,WAAU;WACX;CAEK,CAAA,EACH,EAPG,mBAOH,EAIH,UAEF,kBAAC,MAAD,EAAA,UACE,kBAAC,OAAD;CACE,iBAAc;CACd,WAAU;WACX;CAEK,CAAA,EACH,EAPG,kBAOH,EAII,KAAkD,EAC7D,gBACA,qBAAkB,YAClB,0BAAuB,WACvB,cACA,YAAS,EAAE,EACX,aACA,uBAAoB,GACpB,UACA,GAAG,QACC;CACJ,IAAM,IAAa,EAAkB,GAAa,EAAM;AAExD,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,MAAK;EACL,cAAW;EACX,WAAW,EAAK,qCAAqC,EAAU;YAE/D,kBAAC,MAAD;GAAI,WAAU;aACX,EAAW,KAAK,GAAM,MAAU;AAC/B,YAAQ,EAAK,MAAb;KACE,KAAK,aACH,QACE,kBAAC,GAAD,EAAA,UAAA;MACG,EAAK,UAAU,KAAS,EAAmB,EAAK,OAAO,GAAa,EAAM,IACzE,kBAAC,GAAD,EAAkB,CAAA;MAEpB,kBAAC,MAAD;OACE,WAAW,EAAK,QAAQ,EACtB,kBAAkB,EAAwB,EAAK,OAAO,GAAa,EAAM,EAC1E,CAAC;iBAED,EAAK,UAAU,IACd,kBAAC,GAAD;QACE,gBAAa;QACb,WAAU;QACV,OAAM;QACN,SAAQ;kBAEP,EAAK,MAAM,UAAA;QACL,CAAA,GAET,kBAAC,GAAD;QACE,WAAW,EAAK,wBAAwB,EACtC,+DACE,MAAU,EAAW,SAAS,GACjC,CAAC;QACF,eAAe,EAAS,EAAK,MAAM;QACnC,OAAM;QACN,SAAQ;kBAEP,EAAK,MAAM,UAAA;QACL,CAAA;OAER,CAAA;MACJ,EAAK,UAAU,KAAK,EAAmB,EAAK,OAAO,GAAa,EAAM,IACrE,kBAAC,GAAD,EAAkB,CAAA;MAEX,EAAA,EAnCI,yBAAyB,IAmC7B;KAGf,KAAK,WACH,QAAO,kBAAC,GAAD,EAAwD,EAAlC,uBAAuB,IAAW;KAEjE,KAAK,iBACH,QACE,kBAAC,MAAD;MAAqC,WAAW,EAAK,EAAgB;gBACnE,kBAAC,UAAD;OACE,eAAY;OACZ,iBAAc;OACd,cAAY,QAAQ,IAAc;OAClC,WAAW,EACT,iLACA,EACE,0CAA0C,EAAK,UAChD,CACF;OACD,UAAU,EAAK;OACf,eAAe,EAAS,IAAc,EAAE;OACxC,MAAK;iBAZP,CAcE,kBAAC,GAAD;QAAM,MAAK;QAAmB,OAAM;QAAS,CAAA,EAC7C,kBAAC,QAAD;QACE,WAAW,EACT,wBACA,EAAE,gBAAgB,CAAC,EAAK,UAAU,EAClC,EACD;kBAEA,EAAO;QACH,CAAA,CAAA;;MAEN,EA1BG,6BA0BH;KAGT,KAAK,aACH,QACE,kBAAC,MAAD;MAAI,WAAW,EAAK,EAAgB;gBAClC,kBAAC,UAAD;OACE,iBAAc;OACd,cAAY,QAAQ,IAAc;OAClC,WAAW,EACT,sLACA,EACE,0CAA0C,EAAK,UAChD,CACF;OACD,eAAY;OACZ,UAAU,EAAK;OACf,eAAe,EAAS,IAAc,EAAE;OACxC,MAAK;iBAZP,CAcE,kBAAC,QAAD;QACE,WAAW,EACT,wBACA,EAAE,gBAAgB,CAAC,EAAK,UAAU,EAClC,EACD;kBAEA,EAAO;QACH,CAAA,EACP,kBAAC,GAAD;QAAM,MAAK;QAAoB,OAAM;QAAS,CAAA,CAAA;;MAE7C,EA1BqC,yBA0BrC;KAGT,QACE,QAAO;;;GAGV,CAAA;EACD,CAAA"}
+{"version":3,"file":"Pagination.js","names":[],"sources":["../../lib/ui/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { Fragment, type FunctionComponent, type HTMLAttributes } from 'react';\n\nimport {\n  showMobileEllipsis,\n  generatePagination,\n  hidePageButtonForMobile,\n} from './Pagination.helper';\nimport { Button } from './buttons/Button';\nimport { Icon } from '@clubmed/trident-icons';\nimport type { ScrollerLabels } from './types/ScrollerLabels';\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /**\n   * The current page number (must be >= 1)\n   */\n  defaultPage: number;\n  /**\n   * The total pages number\n   */\n  count: number;\n  /**\n   * A callback function to handle page changes.\n   */\n  onChange: (page: number) => void;\n  /**\n   * Additional class names for the previous & next buttons\n   */\n  buttonClassName?: string;\n  /**\n   * Additional class names for the label of the previous & next buttons\n   */\n  buttonLabelClassName?: string;\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * UI Labels\n   */\n  labels: ScrollerLabels;\n  /**\n   * A pagination factory to generate an array of Pagination elements (pageNumber, ellipsis, next button, previous button).\n   */\n  paginationFactory?: typeof generatePagination;\n}\n\nconst EllipsisDesktop = () => {\n  return (\n    <li key=\"desktop-ellipsis\">\n      <div\n        aria-controls=\"page-content\"\n        className=\"text-base mx-8 ml-4 hidden size-48 items-center justify-center text-b3 font-semibold text-black md:flex\"\n      >\n        &#8230;\n      </div>\n    </li>\n  );\n};\n\nconst EllipsisMobile = () => {\n  return (\n    <li key=\"mobile-ellipsis\">\n      <div\n        aria-controls=\"page-content\"\n        className=\"text-base mx-8 ml-4 flex size-48 items-center justify-center text-b3 font-semibold text-black md:hidden\"\n      >\n        &#8230;\n      </div>\n    </li>\n  );\n};\n\nexport const Pagination: FunctionComponent<PaginationProps> = ({\n  defaultPage,\n  buttonClassName = 'md:mr-32',\n  buttonLabelClassName = 'md:flex',\n  className,\n  labels = {},\n  onChange,\n  paginationFactory = generatePagination,\n  count,\n  ...props\n}) => {\n  const pagination = paginationFactory(defaultPage, count);\n\n  return (\n    <nav\n      {...props}\n      data-name=\"Pagination\"\n      role=\"navigation\"\n      aria-label=\"pagination navigation\"\n      className={clsx('flex justify-center border-t-sand', className)}\n    >\n      <ul className=\"mt-12 flex\">\n        {pagination.map((page, index) => {\n          switch (page.type) {\n            case 'pageNumber':\n              return (\n                <Fragment key={`pagination-pageNumber-${index}`}>\n                  {page.value === count && showMobileEllipsis(page.value, defaultPage, count) && (\n                    <EllipsisMobile />\n                  )}\n                  <li\n                    className={clsx('mr-2', {\n                      'hidden md:flex': hidePageButtonForMobile(page.value, defaultPage, count),\n                    })}\n                  >\n                    {page.value === defaultPage ? (\n                      <Button\n                        aria-current=\"page\"\n                        className=\"text-white\"\n                        color=\"black\"\n                        variant=\"circle\"\n                      >\n                        {page.value.toString()}\n                      </Button>\n                    ) : (\n                      <Button\n                        className={clsx('size-48 items-center', {\n                          'mx-8 flex shrink-0 cursor-pointer justify-center self-start':\n                            index === pagination.length - 1,\n                        })}\n                        onClick={() => onChange(page.value)}\n                        color=\"white\"\n                        variant=\"circle\"\n                      >\n                        {page.value.toString()}\n                      </Button>\n                    )}\n                  </li>\n                  {page.value === 1 && showMobileEllipsis(page.value, defaultPage, count) && (\n                    <EllipsisMobile />\n                  )}\n                </Fragment>\n              );\n\n            case 'ellipsis':\n              return <EllipsisDesktop key={`pagination-ellipsis-${index}`} />;\n\n            case 'previousButton':\n              return (\n                <li key=\"pagination-labels.previous\" className={clsx(buttonClassName)}>\n                  <button\n                    data-action=\"previous\"\n                    aria-controls=\"page-content\"\n                    aria-label={`page ${defaultPage - 1}`}\n                    className={clsx(\n                      'text:black text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n                      {\n                        'pointer-events-none disabled:text-grey': page.disabled,\n                      },\n                    )}\n                    disabled={page.disabled}\n                    onClick={() => onChange(defaultPage - 1)}\n                    type=\"button\"\n                  >\n                    <Icon name=\"ArrowDefaultLeft\" width=\"30px\" />\n                    <span\n                      className={clsx(\n                        'ml-4 hidden border-b',\n                        { 'border-black': !page.disabled },\n                        buttonLabelClassName,\n                      )}\n                    >\n                      {labels.previous}\n                    </span>\n                  </button>\n                </li>\n              );\n\n            case 'nextButton':\n              return (\n                <li className={clsx(buttonClassName)} key=\"pagination-labels.next\">\n                  <button\n                    aria-controls=\"page-content\"\n                    aria-label={`page ${defaultPage + 1}`}\n                    className={clsx(\n                      'text:black mb-5 text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n                      {\n                        'pointer-events-none disabled:text-grey': page.disabled,\n                      },\n                    )}\n                    data-action=\"next\"\n                    disabled={page.disabled}\n                    onClick={() => onChange(defaultPage + 1)}\n                    type=\"button\"\n                  >\n                    <span\n                      className={clsx(\n                        'ml-4 hidden border-b',\n                        { 'border-black': !page.disabled },\n                        buttonLabelClassName,\n                      )}\n                    >\n                      {labels.next}\n                    </span>\n                    <Icon name=\"ArrowDefaultRight\" width=\"30px\" />\n                  </button>\n                </li>\n              );\n\n            default:\n              return null;\n          }\n        })}\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;AAiDA,IAAM,UAEF,kBAAC,MAAD,EAAA,UACE,kBAAC,OAAD;CACE,iBAAc;CACd,WAAU;WACX;CAEK,CAAA,EACH,EAPG,mBAOH,EAIH,UAEF,kBAAC,MAAD,EAAA,UACE,kBAAC,OAAD;CACE,iBAAc;CACd,WAAU;WACX;CAEK,CAAA,EACH,EAPG,kBAOH,EAII,KAAkD,EAC7D,gBACA,qBAAkB,YAClB,0BAAuB,WACvB,cACA,YAAS,EAAE,EACX,aACA,uBAAoB,GACpB,UACA,GAAG,QACC;CACJ,IAAM,IAAa,EAAkB,GAAa,EAAM;AAExD,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,MAAK;EACL,cAAW;EACX,WAAW,EAAK,qCAAqC,EAAU;YAE/D,kBAAC,MAAD;GAAI,WAAU;aACX,EAAW,KAAK,GAAM,MAAU;AAC/B,YAAQ,EAAK,MAAb;KACE,KAAK,aACH,QACE,kBAAC,GAAD,EAAA,UAAA;MACG,EAAK,UAAU,KAAS,EAAmB,EAAK,OAAO,GAAa,EAAM,IACzE,kBAAC,GAAD,EAAkB,CAAA;MAEpB,kBAAC,MAAD;OACE,WAAW,EAAK,QAAQ,EACtB,kBAAkB,EAAwB,EAAK,OAAO,GAAa,EAAM,EAC1E,CAAC;iBAED,EAAK,UAAU,IACd,kBAAC,GAAD;QACE,gBAAa;QACb,WAAU;QACV,OAAM;QACN,SAAQ;kBAEP,EAAK,MAAM,UAAA;QACL,CAAA,GAET,kBAAC,GAAD;QACE,WAAW,EAAK,wBAAwB,EACtC,+DACE,MAAU,EAAW,SAAS,GACjC,CAAC;QACF,eAAe,EAAS,EAAK,MAAM;QACnC,OAAM;QACN,SAAQ;kBAEP,EAAK,MAAM,UAAA;QACL,CAAA;OAER,CAAA;MACJ,EAAK,UAAU,KAAK,EAAmB,EAAK,OAAO,GAAa,EAAM,IACrE,kBAAC,GAAD,EAAkB,CAAA;MAEX,EAAA,EAnCI,yBAAyB,IAmC7B;KAGf,KAAK,WACH,QAAO,kBAAC,GAAD,EAAwD,EAAlC,uBAAuB,IAAW;KAEjE,KAAK,iBACH,QACE,kBAAC,MAAD;MAAqC,WAAW,EAAK,EAAgB;gBACnE,kBAAC,UAAD;OACE,eAAY;OACZ,iBAAc;OACd,cAAY,QAAQ,IAAc;OAClC,WAAW,EACT,wQACA,EACE,0CAA0C,EAAK,UAChD,CACF;OACD,UAAU,EAAK;OACf,eAAe,EAAS,IAAc,EAAE;OACxC,MAAK;iBAZP,CAcE,kBAAC,GAAD;QAAM,MAAK;QAAmB,OAAM;QAAS,CAAA,EAC7C,kBAAC,QAAD;QACE,WAAW,EACT,wBACA,EAAE,gBAAgB,CAAC,EAAK,UAAU,EAClC,EACD;kBAEA,EAAO;QACH,CAAA,CAAA;;MAEN,EA1BG,6BA0BH;KAGT,KAAK,aACH,QACE,kBAAC,MAAD;MAAI,WAAW,EAAK,EAAgB;gBAClC,kBAAC,UAAD;OACE,iBAAc;OACd,cAAY,QAAQ,IAAc;OAClC,WAAW,EACT,6QACA,EACE,0CAA0C,EAAK,UAChD,CACF;OACD,eAAY;OACZ,UAAU,EAAK;OACf,eAAe,EAAS,IAAc,EAAE;OACxC,MAAK;iBAZP,CAcE,kBAAC,QAAD;QACE,WAAW,EACT,wBACA,EAAE,gBAAgB,CAAC,EAAK,UAAU,EAClC,EACD;kBAEA,EAAO;QACH,CAAA,EACP,kBAAC,GAAD;QAAM,MAAK;QAAoB,OAAM;QAAS,CAAA,CAAA;;MAE7C,EA1BqC,yBA0BrC;KAGT,QACE,QAAO;;;GAGV,CAAA;EACD,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/Scrollbar.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+interface ScrollbarProps {
+    children: React.ReactNode;
+    timelineName?: string;
+    scrollbarWidth?: string;
+    variant?: 'light' | 'dark';
+    className?: string;
+    scrollerClassName?: string;
+    scrollbarClassName?: string;
+    'aria-label'?: string;
+}
+declare function Scrollbar({ children, timelineName, scrollbarWidth, variant, className, scrollerClassName, scrollbarClassName, 'aria-label': ariaLabel, }: ScrollbarProps): import("react/jsx-runtime").JSX.Element;
+export { Scrollbar };
+export type { ScrollbarProps };