@clubmed/trident-ui 2.0.0-beta.7 → 2.0.0-beta.74

package/ui/ChatWindowQuote.js

@@ -0,0 +1,141 @@
+"use client";
+import { Button as e } from "./buttons/Button.js";
+import { twMerge as t } from "./helpers/twMerge.js";
+import { Scrollbar as n } from "./Scrollbar.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/ui/ChatWindowQuote.tsx
+function a({ quote: t, onCtaClick: n }) {
+	return /* @__PURE__ */ i("article", {
+		"aria-label": t.resortName,
+		className: "flex flex-col bg-white border border-lightGrey rounded-32 shadow-[0px_2px_14px_0px_rgba(0,0,0,0.25)] overflow-hidden p-24 gap-16",
+		children: [/* @__PURE__ */ i("div", {
+			className: "relative h-210 w-full overflow-hidden rounded-16",
+			children: [
+				/* @__PURE__ */ r("img", {
+					src: t.imageUrl,
+					alt: "",
+					className: "absolute inset-0 size-full object-cover"
+				}),
+				/* @__PURE__ */ r("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent from-50% to-[rgba(36,36,36,0.4)]" }),
+				/* @__PURE__ */ i("div", {
+					className: "absolute bottom-20 inset-x-0 flex flex-col items-center text-white text-center px-20",
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-b2 font-semibold",
+						children: t.resortName
+					}), /* @__PURE__ */ r("p", {
+						className: "text-b3",
+						children: t.country
+					})]
+				})
+			]
+		}), /* @__PURE__ */ i("div", {
+			className: "flex flex-col gap-16 items-center",
+			children: [
+				/* @__PURE__ */ i("p", {
+					className: "text-b4 font-semibold text-black text-center",
+					children: [
+						t.resortName,
+						", ",
+						t.dateRange,
+						", ",
+						t.pax
+					]
+				}),
+				/* @__PURE__ */ r(e, {
+					color: "saffron",
+					onClick: () => n?.(t),
+					children: t.ctaLabel ?? "See prices"
+				}),
+				t.packageIncludes && t.packageIncludes.length > 0 && /* @__PURE__ */ i("div", {
+					className: "flex flex-col gap-4 w-full",
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-b3 font-semibold text-black",
+						children: "Your All-Inclusive package includes:"
+					}), /* @__PURE__ */ r("ul", {
+						className: "flex flex-col gap-2",
+						children: t.packageIncludes.map((e) => /* @__PURE__ */ i("li", {
+							className: "text-b3 text-black",
+							children: ["• ", e]
+						}, e))
+					})]
+				}),
+				t.additionalInfo && /* @__PURE__ */ r("p", {
+					className: "text-b3 text-black",
+					children: t.additionalInfo
+				})
+			]
+		})]
+	});
+}
+function o({ quote: t, onCtaClick: n }) {
+	return /* @__PURE__ */ i("article", {
+		"aria-label": t.resortName,
+		className: "flex flex-col gap-12 items-center shrink-0 w-200",
+		children: [/* @__PURE__ */ i("div", {
+			className: "relative size-200 rounded-16 overflow-hidden",
+			children: [
+				/* @__PURE__ */ r("img", {
+					src: t.imageUrl,
+					alt: "",
+					className: "absolute inset-0 size-full object-cover"
+				}),
+				/* @__PURE__ */ r("div", { className: "absolute inset-0 rounded-16 bg-gradient-to-b from-transparent from-50% to-[rgba(36,36,36,0.4)]" }),
+				/* @__PURE__ */ i("div", {
+					className: "absolute bottom-20 inset-x-0 flex flex-col items-center text-white text-center px-8",
+					children: [/* @__PURE__ */ r("p", {
+						className: "text-b4 font-semibold",
+						children: t.resortName
+					}), /* @__PURE__ */ r("p", {
+						className: "text-b5",
+						children: t.country
+					})]
+				})
+			]
+		}), /* @__PURE__ */ i("div", {
+			className: "flex flex-col gap-8 items-center",
+			children: [/* @__PURE__ */ i("p", {
+				className: "text-b5 font-semibold text-black text-center",
+				children: [
+					t.resortName,
+					/* @__PURE__ */ r("br", {}),
+					t.dateRange,
+					",",
+					/* @__PURE__ */ r("br", {}),
+					t.pax
+				]
+			}), /* @__PURE__ */ r(e, {
+				color: "black",
+				onClick: () => n?.(t),
+				children: t.ctaLabel ?? "See prices"
+			})]
+		})]
+	});
+}
+function s({ quotes: e, onCtaClick: i, className: s }) {
+	return e.length === 0 ? null : e.length === 1 ? /* @__PURE__ */ r("div", {
+		className: t(s),
+		children: /* @__PURE__ */ r(a, {
+			quote: e[0],
+			onCtaClick: i
+		})
+	}) : /* @__PURE__ */ r("div", {
+		className: t("flex flex-col gap-8", s),
+		children: /* @__PURE__ */ r(n, {
+			timelineName: "--chat-quote-scroller",
+			scrollerClassName: "pb-24",
+			scrollbarWidth: "60%",
+			"aria-label": "Quote options",
+			children: /* @__PURE__ */ r("div", {
+				className: "flex gap-12",
+				children: e.map((e) => /* @__PURE__ */ r(o, {
+					quote: e,
+					onCtaClick: i
+				}, e.id))
+			})
+		})
+	});
+}
+//#endregion
+export { s as ChatWindowQuote };
+
+//# sourceMappingURL=ChatWindowQuote.js.map

package/ui/ChatWindowQuote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindowQuote.js","names":[],"sources":["../../lib/ui/ChatWindowQuote.tsx"],"sourcesContent":["'use client';\n\nimport { twMerge } from './helpers/twMerge';\nimport { Button } from './buttons/Button';\nimport { Scrollbar } from './Scrollbar';\n\nexport interface ChatWindowQuoteItem {\n  id: string;\n  resortName: string;\n  country: string;\n  imageUrl: string;\n  /** Date range, e.g. \"15 June 2026 to 24 June 2026\" */\n  dateRange: string;\n  /** Pax info, e.g. \"for 2 adults 2 children\" */\n  pax: string;\n  /** CTA button label. Defaults to \"See prices\" */\n  ctaLabel?: string;\n  /** Bullet-point package items. Shown in single-quote inline mode only */\n  packageIncludes?: string[];\n  /** Free-text paragraph shown in single-quote inline mode only */\n  additionalInfo?: string;\n}\n\nexport interface ChatWindowQuoteProps {\n  quotes: ChatWindowQuoteItem[];\n  onCtaClick?: (quote: ChatWindowQuoteItem) => void;\n  className?: string;\n}\n\ninterface QuoteCardProps {\n  quote: ChatWindowQuoteItem;\n  onCtaClick?: (quote: ChatWindowQuoteItem) => void;\n}\n\nfunction SingleQuoteCard({ quote, onCtaClick }: QuoteCardProps) {\n  return (\n    <article\n      aria-label={quote.resortName}\n      className=\"flex flex-col bg-white border border-lightGrey rounded-32 shadow-[0px_2px_14px_0px_rgba(0,0,0,0.25)] overflow-hidden p-24 gap-16\"\n    >\n      <div className=\"relative h-210 w-full overflow-hidden rounded-16\">\n        <img src={quote.imageUrl} alt=\"\" className=\"absolute inset-0 size-full object-cover\" />\n        <div className=\"absolute inset-0 bg-gradient-to-b from-transparent from-50% to-[rgba(36,36,36,0.4)]\" />\n        <div className=\"absolute bottom-20 inset-x-0 flex flex-col items-center text-white text-center px-20\">\n          <p className=\"text-b2 font-semibold\">{quote.resortName}</p>\n          <p className=\"text-b3\">{quote.country}</p>\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-16 items-center\">\n        <p className=\"text-b4 font-semibold text-black text-center\">\n          {quote.resortName}, {quote.dateRange}, {quote.pax}\n        </p>\n        <Button color=\"saffron\" onClick={() => onCtaClick?.(quote)}>\n          {quote.ctaLabel ?? 'See prices'}\n        </Button>\n        {quote.packageIncludes && quote.packageIncludes.length > 0 && (\n          <div className=\"flex flex-col gap-4 w-full\">\n            <p className=\"text-b3 font-semibold text-black\">Your All-Inclusive package includes:</p>\n            <ul className=\"flex flex-col gap-2\">\n              {quote.packageIncludes.map((item) => (\n                <li key={item} className=\"text-b3 text-black\">\n                  • {item}\n                </li>\n              ))}\n            </ul>\n          </div>\n        )}\n        {quote.additionalInfo && <p className=\"text-b3 text-black\">{quote.additionalInfo}</p>}\n      </div>\n    </article>\n  );\n}\n\nfunction CompactQuoteCard({ quote, onCtaClick }: QuoteCardProps) {\n  return (\n    <article\n      aria-label={quote.resortName}\n      className=\"flex flex-col gap-12 items-center shrink-0 w-200\"\n    >\n      <div className=\"relative size-200 rounded-16 overflow-hidden\">\n        <img src={quote.imageUrl} alt=\"\" className=\"absolute inset-0 size-full object-cover\" />\n        <div className=\"absolute inset-0 rounded-16 bg-gradient-to-b from-transparent from-50% to-[rgba(36,36,36,0.4)]\" />\n        <div className=\"absolute bottom-20 inset-x-0 flex flex-col items-center text-white text-center px-8\">\n          <p className=\"text-b4 font-semibold\">{quote.resortName}</p>\n          <p className=\"text-b5\">{quote.country}</p>\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-8 items-center\">\n        <p className=\"text-b5 font-semibold text-black text-center\">\n          {quote.resortName}\n          <br />\n          {quote.dateRange},\n          <br />\n          {quote.pax}\n        </p>\n        <Button color=\"black\" onClick={() => onCtaClick?.(quote)}>\n          {quote.ctaLabel ?? 'See prices'}\n        </Button>\n      </div>\n    </article>\n  );\n}\n\nexport function ChatWindowQuote({ quotes, onCtaClick, className }: ChatWindowQuoteProps) {\n  if (quotes.length === 0) return null;\n\n  if (quotes.length === 1) {\n    return (\n      <div className={twMerge(className)}>\n        <SingleQuoteCard quote={quotes[0]} onCtaClick={onCtaClick} />\n      </div>\n    );\n  }\n\n  return (\n    <div className={twMerge('flex flex-col gap-8', className)}>\n      <Scrollbar\n        timelineName=\"--chat-quote-scroller\"\n        scrollerClassName=\"pb-24\"\n        scrollbarWidth=\"60%\"\n        aria-label=\"Quote options\"\n      >\n        <div className=\"flex gap-12\">\n          {quotes.map((quote) => (\n            <CompactQuoteCard key={quote.id} quote={quote} onCtaClick={onCtaClick} />\n          ))}\n        </div>\n      </Scrollbar>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAkCA,SAAS,EAAgB,EAAE,UAAO,iBAA8B;AAC9D,QACE,kBAAC,WAAD;EACE,cAAY,EAAM;EAClB,WAAU;YAFZ,CAIE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,KAAK,EAAM;KAAU,KAAI;KAAG,WAAU;KAA4C,CAAA;IACvF,kBAAC,OAAD,EAAK,WAAU,uFAAwF,CAAA;IACvG,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,KAAD;MAAG,WAAU;gBAAyB,EAAM;MAAe,CAAA,EAC3D,kBAAC,KAAD;MAAG,WAAU;gBAAW,EAAM;MAAY,CAAA,CAAA;;;MAG9C,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,KAAD;KAAG,WAAU;eAAb;MACG,EAAM;MAAW;MAAG,EAAM;MAAU;MAAG,EAAM;;;IAEhD,kBAAC,GAAD;KAAQ,OAAM;KAAU,eAAe,IAAa,EAAM;eACvD,EAAM,YAAY;KACZ,CAAA;IACR,EAAM,mBAAmB,EAAM,gBAAgB,SAAS,KACvD,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,KAAD;MAAG,WAAU;gBAAmC;MAAwC,CAAA,EACxF,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAM,gBAAgB,KAAK,MAC1B,kBAAC,MAAD;OAAe,WAAU;iBAAzB,CAA8C,MACzC,EAAA;SADI,EAEJ,CAAA;MAEJ,CAAA,CAAA;;IAGR,EAAM,kBAAkB,kBAAC,KAAD;KAAG,WAAU;eAAsB,EAAM;KAAmB,CAAA;;;;;AAM7F,SAAS,EAAiB,EAAE,UAAO,iBAA8B;AAC/D,QACE,kBAAC,WAAD;EACE,cAAY,EAAM;EAClB,WAAU;YAFZ,CAIE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,KAAK,EAAM;KAAU,KAAI;KAAG,WAAU;KAA4C,CAAA;IACvF,kBAAC,OAAD,EAAK,WAAU,kGAAmG,CAAA;IAClH,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,KAAD;MAAG,WAAU;gBAAyB,EAAM;MAAe,CAAA,EAC3D,kBAAC,KAAD;MAAG,WAAU;gBAAW,EAAM;MAAY,CAAA,CAAA;;;MAG9C,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,KAAD;IAAG,WAAU;cAAb;KACG,EAAM;KACP,kBAAC,MAAD,EAAM,CAAA;KACL,EAAM;KAAU;KACjB,kBAAC,MAAD,EAAM,CAAA;KACL,EAAM;;OAET,kBAAC,GAAD;IAAQ,OAAM;IAAQ,eAAe,IAAa,EAAM;cACrD,EAAM,YAAY;IACZ,CAAA,CAAA;;;;AAMjB,SAAgB,EAAgB,EAAE,WAAQ,eAAY,gBAAmC;AAWvF,QAVI,EAAO,WAAW,IAAU,OAE5B,EAAO,WAAW,IAElB,kBAAC,OAAD;EAAK,WAAW,EAAQ,EAAU;YAChC,kBAAC,GAAD;GAAiB,OAAO,EAAO;GAAgB;GAAc,CAAA;EACzD,CAAA,GAKR,kBAAC,OAAD;EAAK,WAAW,EAAQ,uBAAuB,EAAU;YACvD,kBAAC,GAAD;GACE,cAAa;GACb,mBAAkB;GAClB,gBAAe;GACf,cAAW;aAEX,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAO,KAAK,MACX,kBAAC,GAAD;KAAwC;KAAmB;KAAc,EAAlD,EAAM,GAA4C,CAAA;IAEvE,CAAA;GACI,CAAA;EACR,CAAA"}

package/ui/Chip.js

@@ -1,15 +1,15 @@
 import { t as e } from "../chunks/clsx.js";
 import { getTheme as t } from "./Chip.themes.js";
-import { Icon as n } from "@clubmed/trident-icons";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Icon as i } from "@clubmed/trident-icons";
 //#region lib/ui/Chip.tsx
 var a = ({ className: a, color: o = "sienna", icon: s, iconWidth: c = "24px", rotation: l, size: u = "size-32", theme: d = "solid", children: f, ...p }) => {
 	let { thRoot: m } = t(d, { color: o });
-	return /* @__PURE__ */ i("span", {
+	return /* @__PURE__ */ r("span", {
 		...p,
 		className: e("inline-flex aspect-square shrink-0 items-center justify-center overflow-hidden rounded-full border", u, m, a),
 		"data-name": "Chip",
-		children: [f && f, s && /* @__PURE__ */ r(n, {
+		children: [f && f, s && /* @__PURE__ */ n(i, {
 			name: s,
 			rotation: l,
 			width: c

package/ui/ChoiceExpander.js

@@ -2,8 +2,8 @@
 import { t as e } from "../chunks/clsx.js";
 import { getBgColor as t, getTextColor as n } from "./helpers/colors/colors.js";
 import { useCallback as r, useEffect as i, useId as a, useRef as o, useState as s } from "react";
-import { Icon as c } from "@clubmed/trident-icons";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Icon as u } from "@clubmed/trident-icons";
 //#region lib/ui/ChoiceExpander.tsx
 var d = ({ label: d, showCheckIcon: f = !1, children: p, expanded: m, defaultExpanded: h = !1, onExpandedChange: g, disabled: _ = !1, ariaLabel: v, buttonBgColor: y = "black", buttonTextColor: b = "white", collapseLabel: x, expandLabel: S, className: C, ...w }) => {
 	let [T, E] = s(h), D = a(), O = o(null), k = o(null), A = o(null), j = o(!1), M = m === void 0 ? T : m, N = r(() => {
@@ -31,7 +31,7 @@ var d = ({ label: d, showCheckIcon: f = !1, children: p, expanded: m, defaultExp
 			O.current && !O.current.contains(e.target) && N();
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [M, N]), /* @__PURE__ */ l("div", {
+	}, [M, N]), /* @__PURE__ */ c("div", {
 		className: e("relative flex items-center justify-center", C),
 		"data-name": "ChoiceExpander",
 		"data-testid": "choice-expander",
@@ -40,10 +40,10 @@ var d = ({ label: d, showCheckIcon: f = !1, children: p, expanded: m, defaultExp
 			height: 48
 		},
 		...w,
-		children: /* @__PURE__ */ u("div", {
+		children: /* @__PURE__ */ l("div", {
 			ref: O,
 			className: e("absolute top-0 grid transition-all duration-500", !M && [
-				"w-240 rounded-pill border-transparent",
+				"w-240 rounded-pill-transitionable border-transparent",
 				t(y),
 				n(b)
 			], M && [
@@ -51,7 +51,7 @@ var d = ({ label: d, showCheckIcon: f = !1, children: p, expanded: m, defaultExp
 				"z-10",
 				_ && "opacity-50"
 			]),
-			children: [/* @__PURE__ */ u("button", {
+			children: [/* @__PURE__ */ l("button", {
 				ref: A,
 				type: "button",
 				"data-testid": "choice-expander-button",
@@ -60,25 +60,25 @@ var d = ({ label: d, showCheckIcon: f = !1, children: p, expanded: m, defaultExp
 				"aria-label": v || d,
 				disabled: _,
 				onClick: N,
-				className: e("flex items-center justify-center w-240 mx-auto relative gap-20 transition-opacity duration-200", "rounded-pill focus-visible:ring focus-visible:ring-8 focus-visible:ring-lavender/20 outline-none px-20 py-12 ", _ ? "opacity-50 cursor-not-allowed" : "cursor-pointer", "[@supports(anchor-name:_--label-anchor)]:[--anchorSupport:1]"),
+				className: e("flex items-center justify-center w-240 mx-auto relative gap-20 transition-opacity duration-200", "rounded-pill focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 outline-none px-20 py-12 ", _ ? "opacity-50 cursor-not-allowed" : "cursor-pointer", "[@supports(anchor-name:_--label-anchor)]:[--anchorSupport:1]"),
 				children: [
-					/* @__PURE__ */ l("div", {
+					/* @__PURE__ */ c("div", {
 						"aria-hidden": "true",
 						className: "absolute h-24 w-24 mx-auto pointer-events-none",
 						style: { anchorName: "--middle-anchor" }
 					}),
-					/* @__PURE__ */ u("span", {
+					/* @__PURE__ */ l("span", {
 						className: "text-b3 flex items-center font-semibold",
 						children: [
-							/* @__PURE__ */ l("span", {
+							/* @__PURE__ */ c("span", {
 								className: e("transition-opacity duration-200 pe-8", M && "opacity-0"),
 								children: d
 							}),
-							/* @__PURE__ */ l("div", {
+							/* @__PURE__ */ c("div", {
 								className: "h-24 w-24",
 								style: { anchorName: "--label-anchor" },
 								"aria-hidden": "true",
-								children: /* @__PURE__ */ l(c, {
+								children: /* @__PURE__ */ c(u, {
 									name: "ArrowDefaultDown",
 									width: "24px",
 									"aria-hidden": "true",
@@ -89,13 +89,13 @@ var d = ({ label: d, showCheckIcon: f = !1, children: p, expanded: m, defaultExp
 									}
 								})
 							}),
-							/* @__PURE__ */ l("span", {
+							/* @__PURE__ */ c("span", {
 								className: "sr-only",
 								children: M ? x : S
 							})
 						]
 					}),
-					/* @__PURE__ */ l(c, {
+					/* @__PURE__ */ c(u, {
 						name: "ArrowDefaultDown",
 						width: "24px",
 						"aria-hidden": "true",
@@ -107,18 +107,18 @@ var d = ({ label: d, showCheckIcon: f = !1, children: p, expanded: m, defaultExp
 							transition: "left 0.3s, rotate 0.3s"
 						}
 					}),
-					f && /* @__PURE__ */ l(c, {
+					f && /* @__PURE__ */ c(u, {
 						name: "CheckDefault",
 						width: "24px",
 						"aria-hidden": "true",
 						className: e("transition-opacity duration-200", M && "opacity-0")
 					})
 				]
-			}), /* @__PURE__ */ l("div", {
+			}), /* @__PURE__ */ c("div", {
 				className: e("grid overflow-hidden transition-[grid-template-rows,opacity] duration-500", M ? "grid-rows-[1fr]" : "grid-rows-[0fr] opacity-0"),
-				children: /* @__PURE__ */ l("div", {
+				children: /* @__PURE__ */ c("div", {
 					className: "overflow-hidden",
-					children: /* @__PURE__ */ l("div", {
+					children: /* @__PURE__ */ c("div", {
 						className: "px-8 pb-8",
 						id: D,
 						children: p

package/ui/ChoiceExpander.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceExpander.js","names":[],"sources":["../../lib/ui/ChoiceExpander.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport { getBgColor, getTextColor } from './helpers/colors/colors';\nimport type { Colors } from './types/Colors';\n\nexport interface ChoiceExpanderProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Text shown when collapsed (e.g., \"From $255\")\n   */\n  label: string;\n\n  /**\n   * Show check icon in collapsed state (selected variant)\n   */\n  showCheckIcon?: boolean;\n\n  /**\n   * Content shown when expanded\n   */\n  children: ReactNode;\n\n  /**\n   * Controlled state - if provided, component is controlled\n   */\n  expanded?: boolean;\n\n  /**\n   * Initial state for uncontrolled mode\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Callback when expanded state changes\n   */\n  onExpandedChange?: (isExpanded: boolean) => void;\n\n  /**\n   * Disable interaction\n   */\n  disabled?: boolean;\n\n  /**\n   * Custom aria-label for button\n   */\n  ariaLabel?: string;\n\n  /**\n   * Background color for unexpanded button state\n   */\n  buttonBgColor?: Colors;\n\n  /**\n   * Text color for unexpanded button state\n   */\n  buttonTextColor?: Colors;\n\n  /**\n   * collapse label for screen readers\n   */\n  collapseLabel: string;\n\n  /**\n   * expand label for screen readers\n   */\n  expandLabel: string;\n}\n\nexport const ChoiceExpander: FunctionComponent<ChoiceExpanderProps> = ({\n  label,\n  showCheckIcon = false,\n  children,\n  expanded,\n  defaultExpanded = false,\n  onExpandedChange,\n  disabled = false,\n  ariaLabel,\n  buttonBgColor = 'black',\n  buttonTextColor = 'white',\n  collapseLabel,\n  expandLabel,\n  className,\n  ...props\n}) => {\n  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n  const contentId = useId();\n  const morphContainerRef = useRef<HTMLDivElement>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const hasInteractedRef = useRef(false);\n\n  const isExpanded = expanded !== undefined ? expanded : internalExpanded;\n\n  const handleToggle = useCallback(() => {\n    if (disabled) return;\n\n    hasInteractedRef.current = true;\n    const newState = !isExpanded;\n\n    if (expanded === undefined) {\n      setInternalExpanded(newState);\n    }\n\n    onExpandedChange?.(newState);\n  }, [disabled, isExpanded, expanded, onExpandedChange]);\n\n  useEffect(() => {\n    if (!isExpanded) return;\n\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        handleToggle();\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape);\n    return () => document.removeEventListener('keydown', handleEscape);\n  }, [isExpanded, handleToggle]);\n\n  useEffect(() => {\n    if (isExpanded && closeButtonRef.current) {\n      closeButtonRef.current.focus();\n    } else if (!isExpanded && hasInteractedRef.current && triggerButtonRef.current) {\n      triggerButtonRef.current.focus();\n    }\n  }, [isExpanded]);\n\n  useEffect(() => {\n    if (!isExpanded) return;\n\n    const handleClickOutside = (event: MouseEvent) => {\n      if (morphContainerRef.current && !morphContainerRef.current.contains(event.target as Node)) {\n        handleToggle();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [isExpanded, handleToggle]);\n\n  return (\n    <div\n      className={clsx('relative flex items-center justify-center', className)}\n      data-name=\"ChoiceExpander\"\n      data-testid=\"choice-expander\"\n      style={{ width: '240px', height: 48 }}\n      {...props}\n    >\n      <div\n        ref={morphContainerRef}\n        className={clsx(\n          'absolute top-0 grid transition-all duration-500',\n          !isExpanded && [\n            'w-240 rounded-pill border-transparent',\n            getBgColor(buttonBgColor),\n            getTextColor(buttonTextColor),\n          ],\n          isExpanded && [\n            'w-324 rounded-16 bg-white text-black border border-gray-900',\n            'z-10',\n            disabled && 'opacity-50',\n          ],\n        )}\n      >\n        <button\n          ref={triggerButtonRef}\n          type=\"button\"\n          data-testid=\"choice-expander-button\"\n          aria-expanded={isExpanded}\n          aria-controls={contentId}\n          aria-label={ariaLabel || label}\n          disabled={disabled}\n          onClick={handleToggle}\n          className={clsx(\n            'flex items-center justify-center w-240 mx-auto relative gap-20 transition-opacity duration-200',\n            'rounded-pill focus-visible:ring focus-visible:ring-8 focus-visible:ring-lavender/20 outline-none px-20 py-12 ',\n            disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',\n            '[@supports(anchor-name:_--label-anchor)]:[--anchorSupport:1]',\n          )}\n        >\n          {/* invisible top middle anchor position */}\n          <div\n            aria-hidden=\"true\"\n            className=\"absolute h-24 w-24 mx-auto pointer-events-none\"\n            style={{ anchorName: '--middle-anchor' } as React.CSSProperties}\n          ></div>\n          <span className=\"text-b3 flex items-center font-semibold\">\n            {/* label anchor */}\n            <span\n              className={clsx('transition-opacity duration-200 pe-8', isExpanded && 'opacity-0')}\n            >\n              {label}\n            </span>\n            <div\n              className=\"h-24 w-24\"\n              style={{ anchorName: '--label-anchor' } as React.CSSProperties}\n              aria-hidden=\"true\"\n            >\n              <Icon\n                name=\"ArrowDefaultDown\"\n                width=\"24px\"\n                aria-hidden=\"true\"\n                className={clsx(\n                  isExpanded ? 'absolute left-[calc(50%-12px)] rotate-180' : 'rotate-[0deg]',\n                )}\n                style={\n                  {\n                    transition: 'rotate 0.3s, left 0.3s',\n                    opacity: 'calc((1 - var(--anchorSupport)) * 1)',\n                  } as React.CSSProperties\n                }\n              />\n            </div>\n            <span className=\"sr-only\">{isExpanded ? collapseLabel : expandLabel}</span>\n          </span>\n          <Icon\n            name=\"ArrowDefaultDown\"\n            width=\"24px\"\n            aria-hidden=\"true\"\n            className={clsx('absolute', isExpanded ? 'rotate-180' : 'rotate-[0deg]')}\n            style={\n              {\n                positionAnchor: isExpanded ? '--middle-anchor' : '--label-anchor',\n                left: 'anchor(left)',\n                top: 'anchor(top)',\n                transition: 'left 0.3s, rotate 0.3s',\n              } as React.CSSProperties\n            }\n          />\n          {showCheckIcon && (\n            <Icon\n              name=\"CheckDefault\"\n              width=\"24px\"\n              aria-hidden=\"true\"\n              className={clsx('transition-opacity duration-200', isExpanded && 'opacity-0')}\n            />\n          )}\n        </button>\n\n        <div\n          className={clsx(\n            'grid overflow-hidden transition-[grid-template-rows,opacity] duration-500',\n            isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr] opacity-0',\n          )}\n        >\n          <div className=\"overflow-hidden\">\n            <div className=\"px-8 pb-8\" id={contentId}>\n              {children}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ChoiceExpander.js","names":[],"sources":["../../lib/ui/ChoiceExpander.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport { getBgColor, getTextColor } from './helpers/colors/colors';\nimport type { Colors } from './types/Colors';\n\nexport interface ChoiceExpanderProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Text shown when collapsed (e.g., \"From $255\")\n   */\n  label: string;\n\n  /**\n   * Show check icon in collapsed state (selected variant)\n   */\n  showCheckIcon?: boolean;\n\n  /**\n   * Content shown when expanded\n   */\n  children: ReactNode;\n\n  /**\n   * Controlled state - if provided, component is controlled\n   */\n  expanded?: boolean;\n\n  /**\n   * Initial state for uncontrolled mode\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Callback when expanded state changes\n   */\n  onExpandedChange?: (isExpanded: boolean) => void;\n\n  /**\n   * Disable interaction\n   */\n  disabled?: boolean;\n\n  /**\n   * Custom aria-label for button\n   */\n  ariaLabel?: string;\n\n  /**\n   * Background color for unexpanded button state\n   */\n  buttonBgColor?: Colors;\n\n  /**\n   * Text color for unexpanded button state\n   */\n  buttonTextColor?: Colors;\n\n  /**\n   * collapse label for screen readers\n   */\n  collapseLabel: string;\n\n  /**\n   * expand label for screen readers\n   */\n  expandLabel: string;\n}\n\nexport const ChoiceExpander: FunctionComponent<ChoiceExpanderProps> = ({\n  label,\n  showCheckIcon = false,\n  children,\n  expanded,\n  defaultExpanded = false,\n  onExpandedChange,\n  disabled = false,\n  ariaLabel,\n  buttonBgColor = 'black',\n  buttonTextColor = 'white',\n  collapseLabel,\n  expandLabel,\n  className,\n  ...props\n}) => {\n  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n  const contentId = useId();\n  const morphContainerRef = useRef<HTMLDivElement>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const hasInteractedRef = useRef(false);\n\n  const isExpanded = expanded !== undefined ? expanded : internalExpanded;\n\n  const handleToggle = useCallback(() => {\n    if (disabled) return;\n\n    hasInteractedRef.current = true;\n    const newState = !isExpanded;\n\n    if (expanded === undefined) {\n      setInternalExpanded(newState);\n    }\n\n    onExpandedChange?.(newState);\n  }, [disabled, isExpanded, expanded, onExpandedChange]);\n\n  useEffect(() => {\n    if (!isExpanded) return;\n\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        handleToggle();\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape);\n    return () => document.removeEventListener('keydown', handleEscape);\n  }, [isExpanded, handleToggle]);\n\n  useEffect(() => {\n    if (isExpanded && closeButtonRef.current) {\n      closeButtonRef.current.focus();\n    } else if (!isExpanded && hasInteractedRef.current && triggerButtonRef.current) {\n      triggerButtonRef.current.focus();\n    }\n  }, [isExpanded]);\n\n  useEffect(() => {\n    if (!isExpanded) return;\n\n    const handleClickOutside = (event: MouseEvent) => {\n      if (morphContainerRef.current && !morphContainerRef.current.contains(event.target as Node)) {\n        handleToggle();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [isExpanded, handleToggle]);\n\n  return (\n    <div\n      className={clsx('relative flex items-center justify-center', className)}\n      data-name=\"ChoiceExpander\"\n      data-testid=\"choice-expander\"\n      style={{ width: '240px', height: 48 }}\n      {...props}\n    >\n      <div\n        ref={morphContainerRef}\n        className={clsx(\n          'absolute top-0 grid transition-all duration-500',\n          !isExpanded && [\n            'w-240 rounded-pill-transitionable border-transparent',\n            getBgColor(buttonBgColor),\n            getTextColor(buttonTextColor),\n          ],\n          isExpanded && [\n            'w-324 rounded-16 bg-white text-black border border-gray-900',\n            'z-10',\n            disabled && 'opacity-50',\n          ],\n        )}\n      >\n        <button\n          ref={triggerButtonRef}\n          type=\"button\"\n          data-testid=\"choice-expander-button\"\n          aria-expanded={isExpanded}\n          aria-controls={contentId}\n          aria-label={ariaLabel || label}\n          disabled={disabled}\n          onClick={handleToggle}\n          className={clsx(\n            'flex items-center justify-center w-240 mx-auto relative gap-20 transition-opacity duration-200',\n            'rounded-pill focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 outline-none px-20 py-12 ',\n            disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',\n            '[@supports(anchor-name:_--label-anchor)]:[--anchorSupport:1]',\n          )}\n        >\n          {/* invisible top middle anchor position */}\n          <div\n            aria-hidden=\"true\"\n            className=\"absolute h-24 w-24 mx-auto pointer-events-none\"\n            style={{ anchorName: '--middle-anchor' } as React.CSSProperties}\n          ></div>\n          <span className=\"text-b3 flex items-center font-semibold\">\n            {/* label anchor */}\n            <span\n              className={clsx('transition-opacity duration-200 pe-8', isExpanded && 'opacity-0')}\n            >\n              {label}\n            </span>\n            <div\n              className=\"h-24 w-24\"\n              style={{ anchorName: '--label-anchor' } as React.CSSProperties}\n              aria-hidden=\"true\"\n            >\n              <Icon\n                name=\"ArrowDefaultDown\"\n                width=\"24px\"\n                aria-hidden=\"true\"\n                className={clsx(\n                  isExpanded ? 'absolute left-[calc(50%-12px)] rotate-180' : 'rotate-[0deg]',\n                )}\n                style={\n                  {\n                    transition: 'rotate 0.3s, left 0.3s',\n                    opacity: 'calc((1 - var(--anchorSupport)) * 1)',\n                  } as React.CSSProperties\n                }\n              />\n            </div>\n            <span className=\"sr-only\">{isExpanded ? collapseLabel : expandLabel}</span>\n          </span>\n          <Icon\n            name=\"ArrowDefaultDown\"\n            width=\"24px\"\n            aria-hidden=\"true\"\n            className={clsx('absolute', isExpanded ? 'rotate-180' : 'rotate-[0deg]')}\n            style={\n              {\n                positionAnchor: isExpanded ? '--middle-anchor' : '--label-anchor',\n                left: 'anchor(left)',\n                top: 'anchor(top)',\n                transition: 'left 0.3s, rotate 0.3s',\n              } as React.CSSProperties\n            }\n          />\n          {showCheckIcon && (\n            <Icon\n              name=\"CheckDefault\"\n              width=\"24px\"\n              aria-hidden=\"true\"\n              className={clsx('transition-opacity duration-200', isExpanded && 'opacity-0')}\n            />\n          )}\n        </button>\n\n        <div\n          className={clsx(\n            'grid overflow-hidden transition-[grid-template-rows,opacity] duration-500',\n            isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr] opacity-0',\n          )}\n        >\n          <div className=\"overflow-hidden\">\n            <div className=\"px-8 pb-8\" id={contentId}>\n              {children}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/ui/Countdown.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+import { Theme } from './types/Theme';
+export interface CountdownLabels {
+    days: string;
+    hours: string;
+    minutes: string;
+    seconds: string;
+}
+export interface CountdownProps extends Omit<ComponentProps<'div'>, 'children'> {
+    countdown: {
+        labels: CountdownLabels;
+        to: string;
+    };
+    theme?: Theme;
+}
+export declare function Countdown({ className, countdown, theme, ...props }: CountdownProps): import("react/jsx-runtime").JSX.Element;

package/ui/Countdown.js

@@ -0,0 +1,61 @@
+"use client";
+import { t as e } from "../chunks/clsx.js";
+import { FlipCard as t } from "./FlipCard.js";
+import { useEffect as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region lib/ui/Countdown.tsx
+var o = 1e3, s = o * 60, c = s * 60, l = c * 24, u = (e) => Math.max(Math.floor(e / l), 0), d = (e) => Math.max(Math.floor(e % l / c), 0), f = (e) => Math.max(Math.floor(e % c / s), 0), p = (e) => Math.max(Math.floor(e % s / o), 0);
+function m({ className: n, countdown: r, theme: o = "white", ...s }) {
+	let { to: c, labels: l } = r, [u, d, f, p] = h(c), m = [
+		[u, l.days],
+		[d, l.hours],
+		[f, l.minutes],
+		[p, l.seconds]
+	];
+	return /* @__PURE__ */ i("div", {
+		"data-name": "Countdown",
+		role: "timer",
+		...s,
+		dir: "ltr",
+		className: e("flex gap-x-4", n),
+		children: m.map(([e, n], r) => {
+			let s = m.slice(0, r).every(([e]) => e === 0), c = e === 0 && s ? "black" : o;
+			return /* @__PURE__ */ a("div", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ i("div", {
+					className: "flex flex-row items-center gap-x-2 px-2",
+					children: e.toString().padStart(2, "0").split("").map((e, n) => /* @__PURE__ */ i(t, {
+						theme: c,
+						value: parseInt(e)
+					}, n))
+				}), /* @__PURE__ */ i("span", {
+					className: "text-b5 block max-w-58 truncate text-center",
+					children: n
+				})]
+			}, n);
+		})
+	});
+}
+function h(e) {
+	let t = new Date(e).getTime(), i = t - Date.now(), [a, o] = r(() => u(i)), [s, c] = r(() => d(i)), [l, m] = r(() => f(i)), [h, g] = r(() => p(i));
+	return n(() => {
+		let e = setInterval(() => {
+			let n = t - Date.now();
+			if (n < 0) {
+				clearInterval(e);
+				return;
+			}
+			o(u(n)), c(d(n)), m(f(n)), g(p(n));
+		}, 1e3);
+		return () => clearInterval(e);
+	}, [t]), [
+		a,
+		s,
+		l,
+		h
+	];
+}
+//#endregion
+export { m as Countdown };
+
+//# sourceMappingURL=Countdown.js.map

package/ui/Countdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Countdown.js","names":[],"sources":["../../lib/ui/Countdown.tsx"],"sourcesContent":["'use client';\nimport type { ComponentProps } from 'react';\nimport { useEffect, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { FlipCard } from './FlipCard';\nimport type { Theme } from './types/Theme';\n\nexport interface CountdownLabels {\n  days: string;\n  hours: string;\n  minutes: string;\n  seconds: string;\n}\n\nexport interface CountdownProps extends Omit<ComponentProps<'div'>, 'children'> {\n  countdown: {\n    labels: CountdownLabels;\n    to: string;\n  };\n  theme?: Theme;\n}\n\nconst ONE_SEC = 1000;\nconst ONE_MIN = ONE_SEC * 60;\nconst ONE_HOUR = ONE_MIN * 60;\nconst ONE_DAY = ONE_HOUR * 24;\n\nconst getDay = (distance: number) => Math.max(Math.floor(distance / ONE_DAY), 0);\nconst getHour = (distance: number) => Math.max(Math.floor((distance % ONE_DAY) / ONE_HOUR), 0);\nconst getMinute = (distance: number) => Math.max(Math.floor((distance % ONE_HOUR) / ONE_MIN), 0);\nconst getSecond = (distance: number) => Math.max(Math.floor((distance % ONE_MIN) / ONE_SEC), 0);\n\nexport function Countdown({ className, countdown, theme = 'white', ...props }: CountdownProps) {\n  const { to, labels } = countdown;\n  const [days, hours, minutes, seconds] = useCountdown(to);\n\n  const structure: [number, string][] = [\n    [days, labels.days],\n    [hours, labels.hours],\n    [minutes, labels.minutes],\n    [seconds, labels.seconds],\n  ];\n\n  return (\n    <div\n      data-name=\"Countdown\"\n      role=\"timer\"\n      {...props}\n      dir=\"ltr\"\n      className={clsx('flex gap-x-4', className)}\n    >\n      {structure.map(([division, label], index) => {\n        const areAllPreviousZero = structure.slice(0, index).every(([d]) => d === 0);\n        const divisionTheme = division === 0 && areAllPreviousZero ? 'black' : theme;\n\n        return (\n          <div className=\"space-y-4\" key={label}>\n            <div className=\"flex flex-row items-center gap-x-2 px-2\">\n              {division\n                .toString()\n                .padStart(2, '0')\n                .split('')\n                .map((digit, i) => (\n                  <FlipCard key={i} theme={divisionTheme} value={parseInt(digit)} />\n                ))}\n            </div>\n            <span className=\"text-b5 block max-w-58 truncate text-center\">{label}</span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction useCountdown(to: string): [number, number, number, number] {\n  const toMs = new Date(to).getTime();\n  const distance = toMs - Date.now();\n  const [days, setDays] = useState(() => getDay(distance));\n  const [hours, setHours] = useState(() => getHour(distance));\n  const [minutes, setMinutes] = useState(() => getMinute(distance));\n  const [seconds, setSeconds] = useState(() => getSecond(distance));\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      const dist = toMs - Date.now();\n      if (dist < 0) {\n        clearInterval(interval);\n        return;\n      }\n      setDays(getDay(dist));\n      setHours(getHour(dist));\n      setMinutes(getMinute(dist));\n      setSeconds(getSecond(dist));\n    }, 1000);\n\n    return () => clearInterval(interval);\n  }, [toMs]);\n\n  return [days, hours, minutes, seconds];\n}\n"],"mappings":";;;;;;AAuBA,IAAM,IAAU,KACV,IAAU,IAAU,IACpB,IAAW,IAAU,IACrB,IAAU,IAAW,IAErB,KAAU,MAAqB,KAAK,IAAI,KAAK,MAAM,IAAW,EAAQ,EAAE,EAAE,EAC1E,KAAW,MAAqB,KAAK,IAAI,KAAK,MAAO,IAAW,IAAW,EAAS,EAAE,EAAE,EACxF,KAAa,MAAqB,KAAK,IAAI,KAAK,MAAO,IAAW,IAAY,EAAQ,EAAE,EAAE,EAC1F,KAAa,MAAqB,KAAK,IAAI,KAAK,MAAO,IAAW,IAAW,EAAQ,EAAE,EAAE;AAE/F,SAAgB,EAAU,EAAE,cAAW,cAAW,WAAQ,SAAS,GAAG,KAAyB;CAC7F,IAAM,EAAE,OAAI,cAAW,GACjB,CAAC,GAAM,GAAO,GAAS,KAAW,EAAa,EAAG,EAElD,IAAgC;EACpC,CAAC,GAAM,EAAO,KAAK;EACnB,CAAC,GAAO,EAAO,MAAM;EACrB,CAAC,GAAS,EAAO,QAAQ;EACzB,CAAC,GAAS,EAAO,QAAA;EAClB;AAED,QACE,kBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,GAAI;EACJ,KAAI;EACJ,WAAW,EAAK,gBAAgB,EAAU;YAEzC,EAAU,KAAK,CAAC,GAAU,IAAQ,MAAU;GAC3C,IAAM,IAAqB,EAAU,MAAM,GAAG,EAAM,CAAC,OAAO,CAAC,OAAO,MAAM,EAAE,EACtE,IAAgB,MAAa,KAAK,IAAqB,UAAU;AAEvE,UACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eACZ,EACE,UAAU,CACV,SAAS,GAAG,IAAI,CAChB,MAAM,GAAG,CACT,KAAK,GAAO,MACX,kBAAC,GAAD;MAAkB,OAAO;MAAe,OAAO,SAAS,EAAA;MAAU,EAAnD,EAAmD,CAAA;KAElE,CAAA,EACN,kBAAC,QAAD;KAAM,WAAU;eAA+C;KAAa,CAAA,CAAA;MAV9C,EAW1B;;EAGN,CAAA;;AAIV,SAAS,EAAa,GAA8C;CAClE,IAAM,IAAO,IAAI,KAAK,EAAG,CAAC,SAAS,EAC7B,IAAW,IAAO,KAAK,KAAK,EAC5B,CAAC,GAAM,KAAW,QAAe,EAAO,EAAS,CAAC,EAClD,CAAC,GAAO,KAAY,QAAe,EAAQ,EAAS,CAAC,EACrD,CAAC,GAAS,KAAc,QAAe,EAAU,EAAS,CAAC,EAC3D,CAAC,GAAS,KAAc,QAAe,EAAU,EAAS,CAAC;AAkBjE,QAhBA,QAAgB;EACd,IAAM,IAAW,kBAAkB;GACjC,IAAM,IAAO,IAAO,KAAK,KAAK;AAC9B,OAAI,IAAO,GAAG;AACZ,kBAAc,EAAS;AACvB;;AAKF,GAHA,EAAQ,EAAO,EAAK,CAAC,EACrB,EAAS,EAAQ,EAAK,CAAC,EACvB,EAAW,EAAU,EAAK,CAAC,EAC3B,EAAW,EAAU,EAAK,CAAC;KAC1B,IAAK;AAER,eAAa,cAAc,EAAS;IACnC,CAAC,EAAK,CAAC,EAEH;EAAC;EAAM;EAAO;EAAS;EAAQ"}

package/ui/Datepicker.d.ts

@@ -0,0 +1,26 @@
+import { Locale } from 'date-fns';
+import { FunctionComponent } from 'react';
+import { DateRange, Matcher, Modifiers } from 'react-day-picker';
+import { DayDataProps } from './Day';
+export declare const getMonthHeadingId: (date: Date) => string;
+interface Labels {
+    seeNextMonth: string;
+    seePreviousMonth: string;
+}
+type StatusLabelMap = Partial<Record<'green' | 'orange' | 'outline', string>>;
+type SelectRangeHandler = (selected: DateRange | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void;
+export interface DatepickerProps {
+    dates?: DayDataProps[];
+    defaultMonth?: Date;
+    disabledDays?: Matcher | Matcher[];
+    formatDurationsLabel?: (count: number) => string;
+    fromMonth?: Date;
+    labels: Labels;
+    locale?: Locale;
+    maxNumberOfMonths?: number;
+    onSelect?: SelectRangeHandler;
+    selected?: DateRange;
+    statusLabels?: StatusLabelMap;
+}
+export declare const Datepicker: FunctionComponent<DatepickerProps>;
+export {};

package/ui/Datepicker.js

@@ -0,0 +1,2 @@
+import { n as e, t } from "../chunks/Datepicker.js";
+export { t as Datepicker, e as getMonthHeadingId };

package/ui/Day.d.ts

@@ -0,0 +1,25 @@
+import { FunctionComponent, PropsWithChildren } from 'react';
+import { DayButtonProps } from 'react-day-picker';
+export interface DayDataProps {
+    /** Date in 'yyyy-MM-dd' format */
+    id: string;
+    price: string | null;
+    status: 'default' | 'green' | 'orange' | 'outline';
+}
+export interface DayProps {
+    formatDurationsLabel?: (count: number) => string;
+    label?: string;
+    price?: string | null;
+    status?: DayDataProps['status'];
+}
+interface InternalDayProps {
+    dateTime: string;
+    disabled?: boolean;
+    label?: string;
+    price?: string | null;
+    selected?: boolean;
+    status?: DayDataProps['status'];
+}
+export declare const _Day: FunctionComponent<PropsWithChildren<InternalDayProps>>;
+export declare const Day: FunctionComponent<DayProps & DayButtonProps>;
+export {};

package/ui/Day.js

@@ -0,0 +1,2 @@
+import { n as e, t } from "../chunks/Day.js";
+export { t as Day, e as _Day };

package/ui/Dropdown.d.ts

@@ -1,6 +1,23 @@
-import { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { IconicNames } from '@clubmed/trident-icons';
-export interface DropdownProps extends ComponentPropsWithoutRef<'button'> {
+interface DropdownRenderContext {
+    close: () => void;
+    open: boolean;
+    toggle: () => void;
+}
+type DropdownChildren = ReactNode | ((context: DropdownRenderContext) => ReactNode);
+export interface DropdownProps extends Omit<ComponentPropsWithoutRef<'button'>, 'children'> {
+    children?: DropdownChildren;
     icon?: IconicNames;
 }
-export declare function Dropdown({ icon, className, children: initialChildren, ...attrs }: PropsWithChildren<DropdownProps>): import("react/jsx-runtime").JSX.Element;
+export declare function useDropdown(initialChildren?: DropdownChildren): {
+    children: ReactNode[];
+    close: () => void;
+    containerRef: import('react').RefObject<HTMLDivElement | null>;
+    isLeaving: boolean;
+    label: ReactNode[];
+    open: boolean;
+    toggle: () => void;
+};
+export declare function Dropdown({ icon, className, children: initialChildren, ...attrs }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/ui/Dropdown.js

@@ -2,46 +2,80 @@ import { t as e } from "../chunks/clsx.js";
 import { twMerge as t } from "./helpers/twMerge.js";
 import { useSlots as n } from "./hooks/useSlots.js";
 import { useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
-import { Icon as s } from "@clubmed/trident-icons";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Icon as l } from "@clubmed/trident-icons";
 //#region lib/ui/Dropdown.tsx
-function u({ icon: u = "ArrowOutlinedDown", className: d, children: f, ...p }) {
-	let { label: m, children: h } = n(f, ["label"]), [g, _] = o(!1), v = a(null), y = a(g), b = y.current, x = !g && b;
-	y.current = g;
-	let S = r(() => {
-		_((e) => !e);
-	}, []);
+function u(e) {
+	let [t, s] = o(!1), c = a(null), l = a(t), u = l.current, d = !t && u;
+	l.current = t;
+	let f = r(() => {
+		s((e) => !e);
+	}, []), p = r(() => {
+		s(!1);
+	}, []), m = typeof e == "function" ? e({
+		close: p,
+		open: t,
+		toggle: f
+	}) : e, { label: h, children: g } = n(m, ["label"]);
 	return i(() => {
-		if (!g) return;
+		if (!c.current) return;
+		let e = c.current.querySelectorAll(".dropdown-panel a[href], .dropdown-panel [data-dropdown-item]"), t = Array.from(e, (e) => {
+			let t = () => {
+				p();
+			};
+			return e.addEventListener("click", t), {
+				handleItemClick: t,
+				item: e
+			};
+		});
+		return () => {
+			t.forEach(({ handleItemClick: e, item: t }) => {
+				t.removeEventListener("click", e);
+			});
+		};
+	}, [p, m]), i(() => {
+		if (!t) return;
 		let e = (e) => {
-			!v.current || e.composedPath().includes(v.current) || _(!1);
+			!c.current || e.composedPath().includes(c.current) || p();
 		};
-		return document.addEventListener("pointerdown", e), () => {
-			document.removeEventListener("pointerdown", e);
+		return document.addEventListener("click", e), () => {
+			document.removeEventListener("click", e);
 		};
-	}, [g]), /* @__PURE__ */ l("div", {
-		ref: v,
-		className: t("flex items-center gap-8 relative", d),
-		children: [/* @__PURE__ */ l("button", {
+	}, [p, t]), {
+		children: g,
+		close: p,
+		containerRef: c,
+		isLeaving: d,
+		label: h,
+		open: t,
+		toggle: f
+	};
+}
+function d({ icon: n = "ArrowOutlinedDown", className: r, children: i, ...a }) {
+	let { children: o, containerRef: d, isLeaving: f, label: p, open: m, toggle: h } = u(i);
+	return /* @__PURE__ */ c("div", {
+		ref: d,
+		className: t("flex items-center gap-8 relative", r),
+		children: [/* @__PURE__ */ c("button", {
 			tabIndex: -1,
-			...p,
+			...a,
 			className: "flex gap-8 items-center relative",
-			onClick: S,
-			children: [m, /* @__PURE__ */ c(s, {
-				name: u,
+			onClick: h,
+			children: [p, /* @__PURE__ */ s(l, {
+				name: n,
 				className: "w-30"
 			})]
-		}), /* @__PURE__ */ c("div", {
-			className: t(e("z-5 flex items-center gap-12 bg-white rounded-16 border-1 border-lightGrey absolute top-[calc(100%+8px)] right-0 text-black p-20 min-w-[120px] origin-center will-change[transform,opacity]", {
-				"animate-zoomIn": g,
-				"animate-zoomOut": !g && x,
-				"opacity-0 scale-90 pointer-events-none": !g && !x
+		}), /* @__PURE__ */ s("div", {
+			className: t(e("dropdown-panel z-5 flex items-center gap-12 bg-white rounded-16 border-1 border-lightGrey absolute top-[calc(100%+8px)] right-0 text-black p-20 min-w-[120px] origin-center will-change[transform,opacity]", {
+				"animate-zoom-in": m,
+				"animate-zoom-out": !m && f,
+				"opacity-0 scale-90 pointer-events-none": !m && !f
 			})),
-			children: h
+			children: o
 		})]
 	});
 }
 //#endregion
-export { u as Dropdown };
+export { d as Dropdown, u as useDropdown };
 
 //# sourceMappingURL=Dropdown.js.map