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

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

@@ -5,43 +5,77 @@ import { useCallback as r, useEffect as i, useRef as a, useState as o } from "re
 import { Icon as s } from "@clubmed/trident-icons";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#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),
+	}, [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__ */ l("div", {
+		ref: d,
+		className: t("flex items-center gap-8 relative", r),
 		children: [/* @__PURE__ */ l("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__ */ c(s, {
+				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
+			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

package/ui/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","names":[],"sources":["../../lib/ui/Dropdown.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport clsx from 'clsx';\nimport { twMerge } from '@/ui/helpers/twMerge';\nimport { useSlots } from '@/ui/hooks/useSlots';\n\nexport interface DropdownProps extends ComponentPropsWithoutRef<'button'> {\n  icon?: IconicNames;\n}\n\nexport function Dropdown({\n  icon = 'ArrowOutlinedDown',\n  className,\n  children: initialChildren,\n  ...attrs\n}: PropsWithChildren<DropdownProps>) {\n  const { label, children } = useSlots(initialChildren, ['label']);\n  const [open, setOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const wasVisibleRef = useRef(open);\n  const wasVisible = wasVisibleRef.current;\n  const isLeaving = !open && wasVisible;\n\n  // update ref for next render\n  wasVisibleRef.current = open;\n\n  const onClick = useCallback(() => {\n    setOpen((prev) => !prev);\n  }, []);\n\n  // Close overlay when clicking outside using composedPath\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const handlePointerDown = (event: PointerEvent) => {\n      if (!containerRef.current || event.composedPath().includes(containerRef.current)) {\n        return;\n      }\n\n      setOpen(false);\n    };\n\n    document.addEventListener('pointerdown', handlePointerDown);\n    return () => {\n      document.removeEventListener('pointerdown', handlePointerDown);\n    };\n  }, [open]);\n\n  return (\n    <div ref={containerRef} className={twMerge('flex items-center gap-8 relative', className)}>\n      <button\n        tabIndex={-1}\n        {...attrs}\n        className=\"flex gap-8 items-center relative\"\n        onClick={onClick}\n      >\n        {label}\n\n        <Icon name={icon} className=\"w-30\" />\n      </button>\n\n      <div\n        className={twMerge(\n          clsx(\n            '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]',\n            {\n              'animate-zoomIn': open,\n              'animate-zoomOut': !open && isLeaving,\n              'opacity-0 scale-90 pointer-events-none': !open && !isLeaving,\n            },\n          ),\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAiBA,SAAgB,EAAS,EACvB,UAAO,qBACP,cACA,UAAU,GACV,GAAG,KACgC;CACnC,IAAM,EAAE,UAAO,gBAAa,EAAS,GAAiB,CAAC,QAAQ,CAAC,EAC1D,CAAC,GAAM,KAAW,EAAS,GAAM,EACjC,IAAe,EAAuB,KAAK,EAC3C,IAAgB,EAAO,EAAK,EAC5B,IAAa,EAAc,SAC3B,IAAY,CAAC,KAAQ;AAG3B,GAAc,UAAU;CAExB,IAAM,IAAU,QAAkB;AAChC,KAAS,MAAS,CAAC,EAAK;IACvB,EAAE,CAAC;AAsBN,QAnBA,QAAgB;AACd,MAAI,CAAC,EACH;EAGF,IAAM,KAAqB,MAAwB;AAC7C,IAAC,EAAa,WAAW,EAAM,cAAc,CAAC,SAAS,EAAa,QAAQ,IAIhF,EAAQ,GAAM;;AAIhB,SADA,SAAS,iBAAiB,eAAe,EAAkB,QAC9C;AACX,YAAS,oBAAoB,eAAe,EAAkB;;IAE/D,CAAC,EAAK,CAAC,EAGR,kBAAC,OAAD;EAAK,KAAK;EAAc,WAAW,EAAQ,oCAAoC,EAAU;YAAzF,CACE,kBAAC,UAAD;GACE,UAAU;GACV,GAAI;GACJ,WAAU;GACD;aAJX,CAMG,GAED,kBAAC,GAAD;IAAM,MAAM;IAAM,WAAU;IAAS,CAAA,CAC9B;MAET,kBAAC,OAAD;GACE,WAAW,EACT,EACE,+LACA;IACE,kBAAkB;IAClB,mBAAmB,CAAC,KAAQ;IAC5B,0CAA0C,CAAC,KAAQ,CAAC;IACrD,CACF,CACF;GAEA;GACG,CAAA,CACF"}
+{"version":3,"file":"Dropdown.js","names":[],"sources":["../../lib/ui/Dropdown.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport clsx from 'clsx';\nimport { twMerge } from '@/ui/helpers/twMerge';\nimport { useSlots } from '@/ui/hooks/useSlots';\n\ninterface DropdownRenderContext {\n  close: () => void;\n  open: boolean;\n  toggle: () => void;\n}\n\ntype DropdownChildren = ReactNode | ((context: DropdownRenderContext) => ReactNode);\n\nexport interface DropdownProps extends Omit<ComponentPropsWithoutRef<'button'>, 'children'> {\n  children?: DropdownChildren;\n  icon?: IconicNames;\n}\n\nexport function useDropdown(initialChildren?: DropdownChildren) {\n  const [open, setOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const wasVisibleRef = useRef(open);\n  const wasVisible = wasVisibleRef.current;\n  const isLeaving = !open && wasVisible;\n\n  // update ref for next render\n  wasVisibleRef.current = open;\n\n  const toggle = useCallback(() => {\n    setOpen((prev) => !prev);\n  }, []);\n\n  const close = useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  const renderedChildren =\n    typeof initialChildren === 'function'\n      ? initialChildren({ close, open, toggle })\n      : initialChildren;\n\n  const { label, children } = useSlots(renderedChildren, ['label']);\n\n  useEffect(() => {\n    if (!containerRef.current) {\n      return;\n    }\n\n    const items = containerRef.current.querySelectorAll(\n      '.dropdown-panel a[href], .dropdown-panel [data-dropdown-item]',\n    );\n    const listeners = Array.from(items, (item) => {\n      const handleItemClick = () => {\n        close();\n      };\n      item.addEventListener('click', handleItemClick);\n      return { handleItemClick, item };\n    });\n\n    return () => {\n      listeners.forEach(({ handleItemClick, item }) => {\n        item.removeEventListener('click', handleItemClick);\n      });\n    };\n  }, [close, renderedChildren]);\n\n  // Close overlay when clicking outside using composedPath\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const handleOutsideClick = (event: PointerEvent) => {\n      if (!containerRef.current || event.composedPath().includes(containerRef.current)) {\n        return;\n      }\n\n      close();\n    };\n\n    document.addEventListener('click', handleOutsideClick);\n    return () => {\n      document.removeEventListener('click', handleOutsideClick);\n    };\n  }, [close, open]);\n\n  return {\n    children,\n    close,\n    containerRef,\n    isLeaving,\n    label,\n    open,\n    toggle,\n  };\n}\n\nexport function Dropdown({\n  icon = 'ArrowOutlinedDown',\n  className,\n  children: initialChildren,\n  ...attrs\n}: DropdownProps) {\n  const { children, containerRef, isLeaving, label, open, toggle } = useDropdown(initialChildren);\n\n  return (\n    <div ref={containerRef} className={twMerge('flex items-center gap-8 relative', className)}>\n      <button\n        tabIndex={-1}\n        {...attrs}\n        className=\"flex gap-8 items-center relative\"\n        onClick={toggle}\n      >\n        {label}\n\n        <Icon name={icon} className=\"w-30\" />\n      </button>\n\n      <div\n        className={twMerge(\n          clsx(\n            '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]',\n            {\n              'animate-zoom-in': open,\n              'animate-zoom-out': !open && isLeaving,\n              'opacity-0 scale-90 pointer-events-none': !open && !isLeaving,\n            },\n          ),\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AA0BA,SAAgB,EAAY,GAAoC;CAC9D,IAAM,CAAC,GAAM,KAAW,EAAS,GAAM,EACjC,IAAe,EAAuB,KAAK,EAC3C,IAAgB,EAAO,EAAK,EAC5B,IAAa,EAAc,SAC3B,IAAY,CAAC,KAAQ;AAG3B,GAAc,UAAU;CAExB,IAAM,IAAS,QAAkB;AAC/B,KAAS,MAAS,CAAC,EAAK;IACvB,EAAE,CAAC,EAEA,IAAQ,QAAkB;AAC9B,IAAQ,GAAM;IACb,EAAE,CAAC,EAEA,IACJ,OAAO,KAAoB,aACvB,EAAgB;EAAE;EAAO;EAAM;EAAQ,CAAC,GACxC,GAEA,EAAE,UAAO,gBAAa,EAAS,GAAkB,CAAC,QAAQ,CAAC;AA6CjE,QA3CA,QAAgB;AACd,MAAI,CAAC,EAAa,QAChB;EAGF,IAAM,IAAQ,EAAa,QAAQ,iBACjC,gEACD,EACK,IAAY,MAAM,KAAK,IAAQ,MAAS;GAC5C,IAAM,UAAwB;AAC5B,OAAO;;AAGT,UADA,EAAK,iBAAiB,SAAS,EAAgB,EACxC;IAAE;IAAiB;IAAM;IAChC;AAEF,eAAa;AACX,KAAU,SAAS,EAAE,oBAAiB,cAAW;AAC/C,MAAK,oBAAoB,SAAS,EAAgB;KAClD;;IAEH,CAAC,GAAO,EAAiB,CAAC,EAG7B,QAAgB;AACd,MAAI,CAAC,EACH;EAGF,IAAM,KAAsB,MAAwB;AAC9C,IAAC,EAAa,WAAW,EAAM,cAAc,CAAC,SAAS,EAAa,QAAQ,IAIhF,GAAO;;AAIT,SADA,SAAS,iBAAiB,SAAS,EAAmB,QACzC;AACX,YAAS,oBAAoB,SAAS,EAAmB;;IAE1D,CAAC,GAAO,EAAK,CAAC,EAEV;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACD;;AAGH,SAAgB,EAAS,EACvB,UAAO,qBACP,cACA,UAAU,GACV,GAAG,KACa;CAChB,IAAM,EAAE,aAAU,iBAAc,cAAW,UAAO,SAAM,cAAW,EAAY,EAAgB;AAE/F,QACE,kBAAC,OAAD;EAAK,KAAK;EAAc,WAAW,EAAQ,oCAAoC,EAAU;YAAzF,CACE,kBAAC,UAAD;GACE,UAAU;GACV,GAAI;GACJ,WAAU;GACV,SAAS;aAJX,CAMG,GAED,kBAAC,GAAD;IAAM,MAAM;IAAM,WAAU;IAAS,CAAA,CAC9B;MAET,kBAAC,OAAD;GACE,WAAW,EACT,EACE,8MACA;IACE,mBAAmB;IACnB,oBAAoB,CAAC,KAAQ;IAC7B,0CAA0C,CAAC,KAAQ,CAAC;IACrD,CACF,CACF;GAEA;GACG,CAAA,CACF"}

package/ui/ElasticHeight.d.ts

@@ -3,7 +3,6 @@ interface ElasticHeightProps extends ComponentPropsWithoutRef<'div'> {
     innerClassName?: string;
     isExpanded?: boolean;
     min?: number;
-    onHeightChange?: (height: number) => void;
 }
 export declare const ElasticHeight: FunctionComponent<ElasticHeightProps>;
 export {};

package/ui/ElasticHeight.js

@@ -1,31 +1,22 @@
-"use client";
 import { t as e } from "../chunks/clsx.js";
-import t from "./hooks/useResizeObserver.js";
-import { useLayoutEffect as n, useRef as r, useState as i } from "react";
-import { jsx as a } from "react/jsx-runtime";
+import { useRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
 //#region lib/ui/ElasticHeight.tsx
-var o = ({ className: o, children: s, innerClassName: c, isExpanded: l = !1, min: u = 0, ...d }) => {
-	let f = r(null), [p, m] = i(0);
-	return t({
-		ref: f,
-		onResize: () => {
-			f.current && m(f.current?.offsetHeight);
-		}
-	}), n(() => {
-		f.current && m(f.current.offsetHeight);
-	}, [f]), /* @__PURE__ */ a("div", {
-		...d,
-		className: e("overflow-hidden transition-all duration-500", o),
-		"data-expanded": l,
-		style: { height: l ? p : u },
-		children: /* @__PURE__ */ a("div", {
-			className: c,
-			ref: f,
-			children: s
+var r = ({ className: r, children: i, innerClassName: a, isExpanded: o = !1, min: s = 0, ...c }) => {
+	let l = t(null);
+	return /* @__PURE__ */ n("div", {
+		...c,
+		className: e("overflow-hidden transition-all duration-500 grid", "data-[expanded=true]:grid-rows-[1fr]", "data-[expanded=false]:grid-rows-[0fr]", r),
+		"data-expanded": o,
+		children: /* @__PURE__ */ n("div", {
+			style: { minHeight: s },
+			className: e("overflow-hidden", a),
+			ref: l,
+			children: i
 		})
 	});
 };
 //#endregion
-export { o as ElasticHeight };
+export { r as ElasticHeight };
 
 //# sourceMappingURL=ElasticHeight.js.map

package/ui/ElasticHeight.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElasticHeight.js","names":[],"sources":["../../lib/ui/ElasticHeight.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport useResizeObserver from './hooks/useResizeObserver';\n\ninterface ElasticHeightProps extends ComponentPropsWithoutRef<'div'> {\n  innerClassName?: string;\n  isExpanded?: boolean;\n  min?: number;\n  onHeightChange?: (height: number) => void;\n}\n\nexport const ElasticHeight: FunctionComponent<ElasticHeightProps> = ({\n  className,\n  children,\n  innerClassName,\n  isExpanded = false,\n  min = 0,\n  ...attrs\n}) => {\n  const ref = useRef<HTMLDivElement>(null as any);\n  const [max, setMax] = useState(0);\n\n  useResizeObserver<HTMLDivElement>({\n    ref: ref,\n    onResize: () => {\n      if (ref.current) {\n        setMax(ref.current?.offsetHeight);\n      }\n    },\n  });\n\n  useLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n    setMax(ref.current.offsetHeight);\n  }, [ref]);\n\n  return (\n    <div\n      {...attrs}\n      className={clsx('overflow-hidden transition-all duration-500', className)}\n      data-expanded={isExpanded}\n      style={{ height: isExpanded ? max : min }}\n    >\n      <div className={innerClassName} ref={ref}>\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAmBA,IAAa,KAAwD,EACnE,cACA,aACA,mBACA,gBAAa,IACb,SAAM,GACN,GAAG,QACC;CACJ,IAAM,IAAM,EAAuB,KAAY,EACzC,CAAC,GAAK,KAAU,EAAS,EAAE;AAkBjC,QAhBA,EAAkC;EAC3B;EACL,gBAAgB;AACd,GAAI,EAAI,WACN,EAAO,EAAI,SAAS,aAAa;;EAGtC,CAAC,EAEF,QAAsB;AACf,IAAI,WAGT,EAAO,EAAI,QAAQ,aAAa;IAC/B,CAAC,EAAI,CAAC,EAGP,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,EAAK,+CAA+C,EAAU;EACzE,iBAAe;EACf,OAAO,EAAE,QAAQ,IAAa,IAAM,GAAK;YAEzC,kBAAC,OAAD;GAAK,WAAW;GAAqB;GAClC;GACG,CAAA;EACF,CAAA"}
+{"version":3,"file":"ElasticHeight.js","names":[],"sources":["../../lib/ui/ElasticHeight.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { type ComponentPropsWithoutRef, type FunctionComponent, useRef } from 'react';\n\ninterface ElasticHeightProps extends ComponentPropsWithoutRef<'div'> {\n  innerClassName?: string;\n  isExpanded?: boolean;\n  min?: number;\n}\n\nexport const ElasticHeight: FunctionComponent<ElasticHeightProps> = ({\n  className,\n  children,\n  innerClassName,\n  isExpanded = false,\n  min = 0,\n  ...attrs\n}) => {\n  const ref = useRef<HTMLDivElement>(null as any);\n\n  return (\n    <div\n      {...attrs}\n      className={clsx(\n        'overflow-hidden transition-all duration-500 grid',\n        'data-[expanded=true]:grid-rows-[1fr]',\n        'data-[expanded=false]:grid-rows-[0fr]',\n        className,\n      )}\n      data-expanded={isExpanded}\n    >\n      <div style={{ minHeight: min }} className={clsx('overflow-hidden', innerClassName)} ref={ref}>\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AASA,IAAa,KAAwD,EACnE,cACA,aACA,mBACA,gBAAa,IACb,SAAM,GACN,GAAG,QACC;CACJ,IAAM,IAAM,EAAuB,KAAY;AAE/C,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,EACT,oDACA,wCACA,yCACA,EACD;EACD,iBAAe;YAEf,kBAAC,OAAD;GAAK,OAAO,EAAE,WAAW,GAAK;GAAE,WAAW,EAAK,mBAAmB,EAAe;GAAO;GACtF;GACG,CAAA;EACF,CAAA"}

package/ui/ExpandableText.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+export interface ExpandableTextLabels {
+    expand: string;
+    reduce: string;
+}
+export interface ExpandableTextProps {
+    buttonClassName?: string;
+    className?: string;
+    id: string;
+    labels: ExpandableTextLabels;
+    /** Tailwind line-clamp class to use when collapsed, e.g. "line-clamp-3" */
+    lineClamps?: string;
+}
+export declare const ExpandableText: ({ buttonClassName, children, className, id, labels, lineClamps, }: PropsWithChildren<ExpandableTextProps>) => import("react/jsx-runtime").JSX.Element | null;

package/ui/ExpandableText.js

@@ -0,0 +1,40 @@
+"use client";
+import { t as e } from "../chunks/clsx.js";
+import t from "./hooks/useResizeObserver.js";
+import { useIsClient as n } from "./hooks/useIsClient.js";
+import { useCallback as r, useLayoutEffect as i, useRef as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region lib/ui/ExpandableText.tsx
+var u = ({ buttonClassName: u, children: d, className: f, id: p, labels: m, lineClamps: h = "line-clamp-3" }) => {
+	let g = a(null), [_, v] = o(0), [y, b] = o(0), [x, S] = o(!1), C = n();
+	if (t({
+		ref: g,
+		onResize: r(() => {
+			b(g.current.scrollHeight), v((e) => e === 0 ? g.current.offsetHeight : e);
+		}, [])
+	}), i(() => {
+		g.current && (v(g.current.offsetHeight), b(g.current.scrollHeight));
+	}, []), !d) return null;
+	let w = y > _ || x, T = { "--height": `${x ? y : _}px` };
+	return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("div", {
+		className: e(f, "overflow-clip transition-all duration-500", { "h-(--height)": C }),
+		style: T,
+		children: /* @__PURE__ */ c("div", {
+			className: e({ [h]: !x }),
+			id: p,
+			ref: g,
+			children: d
+		})
+	}), w && /* @__PURE__ */ c("button", {
+		"aria-controls": p,
+		"aria-expanded": x,
+		className: e("self-start border-b border-current font-semibold text-inherit transition-colors outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", u),
+		onClick: () => S(!x),
+		type: "button",
+		children: x ? m.reduce : m.expand
+	})] });
+};
+//#endregion
+export { u as ExpandableText };
+
+//# sourceMappingURL=ExpandableText.js.map

package/ui/ExpandableText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableText.js","names":[],"sources":["../../lib/ui/ExpandableText.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { CSSProperties, PropsWithChildren } from 'react';\nimport { useCallback, useLayoutEffect, useRef, useState } from 'react';\n\nimport { useIsClient } from './hooks/useIsClient';\nimport { useResizeObserver } from './hooks/useResizeObserver';\n\nexport interface ExpandableTextLabels {\n  expand: string;\n  reduce: string;\n}\n\nexport interface ExpandableTextProps {\n  buttonClassName?: string;\n  className?: string;\n  id: string;\n  labels: ExpandableTextLabels;\n  /** Tailwind line-clamp class to use when collapsed, e.g. \"line-clamp-3\" */\n  lineClamps?: string;\n}\n\nexport const ExpandableText = ({\n  buttonClassName,\n  children,\n  className,\n  id,\n  labels,\n  lineClamps = 'line-clamp-3',\n}: PropsWithChildren<ExpandableTextProps>) => {\n  const ref = useRef<HTMLDivElement>(null!);\n  const [min, setMin] = useState(0);\n  const [max, setMax] = useState(0);\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const isClient = useIsClient();\n\n  const onResize = useCallback(() => {\n    setMax(ref.current.scrollHeight);\n    setMin((currentMin) => {\n      if (currentMin === 0) {\n        return ref.current.offsetHeight;\n      }\n      return currentMin;\n    });\n  }, []);\n\n  useResizeObserver<HTMLDivElement>({\n    ref,\n    onResize,\n  });\n\n  useLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n    setMin(ref.current.offsetHeight);\n    setMax(ref.current.scrollHeight);\n  }, []);\n\n  if (!children) {\n    return null;\n  }\n\n  const withToggleButton = max > min || isExpanded;\n  const style = { '--height': `${isExpanded ? max : min}px` } as CSSProperties;\n\n  return (\n    <>\n      <div\n        className={clsx(className, 'overflow-clip transition-all duration-500', {\n          'h-(--height)': isClient,\n        })}\n        style={style}\n      >\n        <div className={clsx({ [lineClamps]: !isExpanded })} id={id} ref={ref}>\n          {children}\n        </div>\n      </div>\n      {withToggleButton && (\n        <button\n          aria-controls={id}\n          aria-expanded={isExpanded}\n          className={clsx(\n            'self-start border-b border-current font-semibold text-inherit transition-colors outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n            buttonClassName,\n          )}\n          onClick={() => setIsExpanded(!isExpanded)}\n          type=\"button\"\n        >\n          {isExpanded ? labels.reduce : labels.expand}\n        </button>\n      )}\n    </>\n  );\n};\n"],"mappings":";;;;;;;AAsBA,IAAa,KAAkB,EAC7B,oBACA,aACA,cACA,OACA,WACA,gBAAa,qBAC+B;CAC5C,IAAM,IAAM,EAAuB,KAAM,EACnC,CAAC,GAAK,KAAU,EAAS,EAAE,EAC3B,CAAC,GAAK,KAAU,EAAS,EAAE,EAC3B,CAAC,GAAY,KAAiB,EAAS,GAAM,EAE7C,IAAW,GAAa;AAyB9B,KAbA,EAAkC;EAChC;EACA,UAZe,QAAkB;AAEjC,GADA,EAAO,EAAI,QAAQ,aAAa,EAChC,GAAQ,MACF,MAAe,IACV,EAAI,QAAQ,eAEd,EACP;KACD,EAAE,CAAA;EAKJ,CAAC,EAEF,QAAsB;AACf,IAAI,YAGT,EAAO,EAAI,QAAQ,aAAa,EAChC,EAAO,EAAI,QAAQ,aAAa;IAC/B,EAAE,CAAC,EAEF,CAAC,EACH,QAAO;CAGT,IAAM,IAAmB,IAAM,KAAO,GAChC,IAAQ,EAAE,YAAY,GAAG,IAAa,IAAM,EAAI,KAAK;AAE3D,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;EACE,WAAW,EAAK,GAAW,6CAA6C,EACtE,gBAAgB,GACjB,CAAC;EACK;YAEP,kBAAC,OAAD;GAAK,WAAW,EAAK,GAAG,IAAa,CAAC,GAAY,CAAC;GAAM;GAAS;GAC/D;GACG,CAAA;EACF,CAAA,EACL,KACC,kBAAC,UAAD;EACE,iBAAe;EACf,iBAAe;EACf,WAAW,EACT,0KACA,EACD;EACD,eAAe,EAAc,CAAC,EAAW;EACzC,MAAK;YAEJ,IAAa,EAAO,SAAS,EAAO;EAC9B,CAAA,CAEV,EAAA,CAAA"}

package/ui/FlipCard.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps } from 'react';
+import { Theme } from './types/Theme';
+export interface FlipCardProps extends Omit<ComponentProps<'div'>, 'children'> {
+    theme?: Theme;
+    value: number;
+}
+export declare function FlipCard({ className, theme, value, ...props }: FlipCardProps): import("react/jsx-runtime").JSX.Element;

package/ui/FlipCard.js

@@ -0,0 +1,59 @@
+"use client";
+import { t as e } from "../chunks/clsx.js";
+import { getBgColor as t, getComplementaryTextColor as n, getThemeColor as r } from "./helpers/colors/colors.js";
+import { useEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region lib/ui/FlipCard.tsx
+var l = "flex w-full justify-center overflow-hidden", u = e(l, "relative h-full"), d = e(u, "rounded-16 rounded-b-4"), f = e(u, "rounded-16 rounded-t-4"), p = e(l, "absolute inset-x-0 h-16 w-full"), m = e(p, "rounded-16 rounded-b-4 top-0 origin-bottom [transform:rotateX(0deg)] [backface-visibility:hidden] [transform-style:preserve-3d]"), h = e(p, "rounded-16 rounded-t-4 top-16 origin-top [transform:rotateX(180deg)] [backface-visibility:hidden] [transform-style:preserve-3d]");
+function g({ className: a, theme: l = "white", value: u, ...p }) {
+	let [g, v] = o(0), [y, b] = o(!1), x = _(g);
+	i(() => {
+		u !== x && (v(u), b((e) => !e));
+	}, [u, x]);
+	let S = r(l), C = t(S), w = n(S);
+	return /* @__PURE__ */ c("div", {
+		...p,
+		role: "figure",
+		className: e("relative isolate grid h-32 w-22 grid-rows-2 [perspective:40px] [perspective-origin:50%_50%]", a),
+		children: [
+			/* @__PURE__ */ s("div", {
+				className: e(d, C),
+				children: /* @__PURE__ */ s("span", {
+					className: e("text-b4 translate-y-1/3", w),
+					children: g
+				})
+			}),
+			/* @__PURE__ */ s("div", {
+				className: e(f, C),
+				children: /* @__PURE__ */ s("span", {
+					className: e("text-b4 -translate-y-2/3", w),
+					children: x
+				})
+			}),
+			/* @__PURE__ */ s("div", {
+				className: e(y ? m : h, C, y ? "animate-tick" : "animate-tock"),
+				children: /* @__PURE__ */ s("span", {
+					className: e("text-b4", y ? "translate-y-1/3" : "-translate-y-2/3", w),
+					children: y ? x : g
+				})
+			}),
+			/* @__PURE__ */ s("div", {
+				className: e(y ? h : m, C, y ? "animate-tock" : "animate-tick"),
+				children: /* @__PURE__ */ s("span", {
+					className: e("text-b4", y ? "-translate-y-2/3" : "translate-y-1/3", w),
+					children: y ? g : x
+				})
+			})
+		]
+	});
+}
+function _(e) {
+	let t = a(0);
+	return i(() => {
+		t.current = e;
+	}, [e]), t.current;
+}
+//#endregion
+export { g as FlipCard };
+
+//# sourceMappingURL=FlipCard.js.map

package/ui/FlipCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlipCard.js","names":[],"sources":["../../lib/ui/FlipCard.tsx"],"sourcesContent":["'use client';\nimport type { ComponentProps } from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getBgColor, getComplementaryTextColor, getThemeColor } from './helpers/colors/colors';\nimport type { Theme } from './types/Theme';\n\nexport interface FlipCardProps extends Omit<ComponentProps<'div'>, 'children'> {\n  theme?: Theme;\n  value: number;\n}\n\nconst commonSection = 'flex w-full justify-center overflow-hidden';\nconst staticCard = clsx(commonSection, 'relative h-full');\nconst staticTop = clsx(staticCard, 'rounded-16 rounded-b-4');\nconst staticBottom = clsx(staticCard, 'rounded-16 rounded-t-4');\n\nconst animatedCard = clsx(commonSection, 'absolute inset-x-0 h-16 w-full');\nconst animatedTop = clsx(\n  animatedCard,\n  'rounded-16 rounded-b-4 top-0 origin-bottom [transform:rotateX(0deg)] [backface-visibility:hidden] [transform-style:preserve-3d]',\n);\nconst animatedBottom = clsx(\n  animatedCard,\n  'rounded-16 rounded-t-4 top-16 origin-top [transform:rotateX(180deg)] [backface-visibility:hidden] [transform-style:preserve-3d]',\n);\n\nexport function FlipCard({ className, theme = 'white', value, ...props }: FlipCardProps) {\n  const [currentNumber, setCurrentNumber] = useState(0);\n  const [tick, setTick] = useState(false);\n  const previousNumber = usePrevious(currentNumber);\n\n  useEffect(() => {\n    if (value === previousNumber) return;\n    setCurrentNumber(value);\n    setTick((t) => !t);\n  }, [value, previousNumber]);\n\n  const themeColor = getThemeColor(theme);\n  const thBackground = getBgColor(themeColor);\n  const thText = getComplementaryTextColor(themeColor);\n\n  return (\n    <div\n      {...props}\n      role=\"figure\"\n      className={clsx(\n        'relative isolate grid h-32 w-22 grid-rows-2 [perspective:40px] [perspective-origin:50%_50%]',\n        className,\n      )}\n    >\n      <div className={clsx(staticTop, thBackground)}>\n        <span className={clsx('text-b4 translate-y-1/3', thText)}>{currentNumber}</span>\n      </div>\n      <div className={clsx(staticBottom, thBackground)}>\n        <span className={clsx('text-b4 -translate-y-2/3', thText)}>{previousNumber}</span>\n      </div>\n      <div\n        className={clsx(\n          tick ? animatedTop : animatedBottom,\n          thBackground,\n          tick ? 'animate-tick' : 'animate-tock',\n        )}\n      >\n        <span className={clsx('text-b4', tick ? 'translate-y-1/3' : '-translate-y-2/3', thText)}>\n          {tick ? previousNumber : currentNumber}\n        </span>\n      </div>\n      <div\n        className={clsx(\n          tick ? animatedBottom : animatedTop,\n          thBackground,\n          tick ? 'animate-tock' : 'animate-tick',\n        )}\n      >\n        <span className={clsx('text-b4', tick ? '-translate-y-2/3' : 'translate-y-1/3', thText)}>\n          {tick ? currentNumber : previousNumber}\n        </span>\n      </div>\n    </div>\n  );\n}\n\nfunction usePrevious(currentValue: number) {\n  const ref = useRef(0);\n  useEffect(() => {\n    ref.current = currentValue;\n  }, [currentValue]);\n  return ref.current;\n}\n"],"mappings":";;;;;;AAaA,IAAM,IAAgB,8CAChB,IAAa,EAAK,GAAe,kBAAkB,EACnD,IAAY,EAAK,GAAY,yBAAyB,EACtD,IAAe,EAAK,GAAY,yBAAyB,EAEzD,IAAe,EAAK,GAAe,iCAAiC,EACpE,IAAc,EAClB,GACA,kIACD,EACK,IAAiB,EACrB,GACA,kIACD;AAED,SAAgB,EAAS,EAAE,cAAW,WAAQ,SAAS,UAAO,GAAG,KAAwB;CACvF,IAAM,CAAC,GAAe,KAAoB,EAAS,EAAE,EAC/C,CAAC,GAAM,KAAW,EAAS,GAAM,EACjC,IAAiB,EAAY,EAAc;AAEjD,SAAgB;AACV,QAAU,MACd,EAAiB,EAAM,EACvB,GAAS,MAAM,CAAC,EAAE;IACjB,CAAC,GAAO,EAAe,CAAC;CAE3B,IAAM,IAAa,EAAc,EAAM,EACjC,IAAe,EAAW,EAAW,EACrC,IAAS,EAA0B,EAAW;AAEpD,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,MAAK;EACL,WAAW,EACT,+FACA,EACD;YANH;GAQE,kBAAC,OAAD;IAAK,WAAW,EAAK,GAAW,EAAa;cAC3C,kBAAC,QAAD;KAAM,WAAW,EAAK,2BAA2B,EAAO;eAAG;KAAqB,CAAA;IAC5E,CAAA;GACN,kBAAC,OAAD;IAAK,WAAW,EAAK,GAAc,EAAa;cAC9C,kBAAC,QAAD;KAAM,WAAW,EAAK,4BAA4B,EAAO;eAAG;KAAsB,CAAA;IAC9E,CAAA;GACN,kBAAC,OAAD;IACE,WAAW,EACT,IAAO,IAAc,GACrB,GACA,IAAO,iBAAiB,eACzB;cAED,kBAAC,QAAD;KAAM,WAAW,EAAK,WAAW,IAAO,oBAAoB,oBAAoB,EAAO;eACpF,IAAO,IAAiB;KACpB,CAAA;IACH,CAAA;GACN,kBAAC,OAAD;IACE,WAAW,EACT,IAAO,IAAiB,GACxB,GACA,IAAO,iBAAiB,eACzB;cAED,kBAAC,QAAD;KAAM,WAAW,EAAK,WAAW,IAAO,qBAAqB,mBAAmB,EAAO;eACpF,IAAO,IAAgB;KACnB,CAAA;IACH,CAAA;;;;AAKZ,SAAS,EAAY,GAAsB;CACzC,IAAM,IAAM,EAAO,EAAE;AAIrB,QAHA,QAAgB;AACd,IAAI,UAAU;IACb,CAAC,EAAa,CAAC,EACX,EAAI"}

package/ui/HamburgerIcon.js

@@ -12,7 +12,7 @@ var n = ({ className: n, isActive: r = !1, ...i }) => {
 	return /* @__PURE__ */ t("span", {
 		"data-name": "HamburgerIcon",
 		...i,
-		className: e("menu-icon cursor-pointer", "color-current relative isolate shrink-0 h-24 w-24 block", n),
+		className: e("menu-icon cursor-pointer", "color-current relative isolate shrink-0 h-24 w-24 block outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", n),
 		"data-testid": r ? "HamburgerIcon-active" : "HamburgerIcon",
 		children: /* @__PURE__ */ t("span", { className: e("absolute left-1/2 top-1/2 block h-2 w-24 -translate-x-1/2 -translate-y-1/2 transition-[background] duration-500 cursor-pointer", {
 			"bg-current": !r,

package/ui/HamburgerIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"HamburgerIcon.js","names":[],"sources":["../../lib/ui/HamburgerIcon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\ninterface Props extends ComponentPropsWithoutRef<'span'> {\n  isActive?: boolean;\n}\n\nexport const HamburgerIcon: FunctionComponent<Props> = ({\n  className,\n  isActive = false,\n  ...attrs\n}) => {\n  const before = clsx(\n    'before:absolute before:left-0 before:top-0 before:block before:h-2 before:w-24 before:bg-current before:opacity-100 before:transition-transform before:duration-500 before:content-[\"\"] before:cursor-pointer',\n    { 'before:translate-y-[-6px]': !isActive, 'before:translate-y-0 before:rotate-45': isActive },\n  );\n\n  const after = clsx(\n    'after:absolute after:left-0 after:top-0 after:block after:h-2 after:w-24 after:bg-current after:opacity-100 after:transition-transform after:duration-500 after:content-[\"\"] after:cursor-pointer',\n    { 'after:translate-y-[6px]': !isActive, 'after:translate-y-0 after:-rotate-45': isActive },\n  );\n\n  return (\n    <span\n      data-name=\"HamburgerIcon\"\n      {...attrs}\n      className={clsx(\n        'menu-icon cursor-pointer',\n        'color-current relative isolate shrink-0 h-24 w-24 block',\n        className,\n      )}\n      data-testid={isActive ? 'HamburgerIcon-active' : 'HamburgerIcon'}\n    >\n      <span\n        className={clsx(\n          'absolute left-1/2 top-1/2 block h-2 w-24 -translate-x-1/2 -translate-y-1/2 transition-[background] duration-500 cursor-pointer',\n          { 'bg-current': !isActive, 'bg-transparent': isActive },\n          before,\n          after,\n        )}\n      />\n    </span>\n  );\n};\n"],"mappings":";;;AAOA,IAAa,KAA2C,EACtD,cACA,cAAW,IACX,GAAG,QACC;CACJ,IAAM,IAAS,EACb,mNACA;EAAE,6BAA6B,CAAC;EAAU,yCAAyC;EAAU,CAC9F,EAEK,IAAQ,EACZ,uMACA;EAAE,2BAA2B,CAAC;EAAU,wCAAwC;EAAU,CAC3F;AAED,QACE,kBAAC,QAAD;EACE,aAAU;EACV,GAAI;EACJ,WAAW,EACT,4BACA,2DACA,EACD;EACD,eAAa,IAAW,yBAAyB;YAEjD,kBAAC,QAAD,EACE,WAAW,EACT,kIACA;GAAE,cAAc,CAAC;GAAU,kBAAkB;GAAU,EACvD,GACA,EACD,EACD,CAAA;EACG,CAAA"}
+{"version":3,"file":"HamburgerIcon.js","names":[],"sources":["../../lib/ui/HamburgerIcon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\ninterface Props extends ComponentPropsWithoutRef<'span'> {\n  isActive?: boolean;\n}\n\nexport const HamburgerIcon: FunctionComponent<Props> = ({\n  className,\n  isActive = false,\n  ...attrs\n}) => {\n  const before = clsx(\n    'before:absolute before:left-0 before:top-0 before:block before:h-2 before:w-24 before:bg-current before:opacity-100 before:transition-transform before:duration-500 before:content-[\"\"] before:cursor-pointer',\n    { 'before:translate-y-[-6px]': !isActive, 'before:translate-y-0 before:rotate-45': isActive },\n  );\n\n  const after = clsx(\n    'after:absolute after:left-0 after:top-0 after:block after:h-2 after:w-24 after:bg-current after:opacity-100 after:transition-transform after:duration-500 after:content-[\"\"] after:cursor-pointer',\n    { 'after:translate-y-[6px]': !isActive, 'after:translate-y-0 after:-rotate-45': isActive },\n  );\n\n  return (\n    <span\n      data-name=\"HamburgerIcon\"\n      {...attrs}\n      className={clsx(\n        'menu-icon cursor-pointer',\n        'color-current relative isolate shrink-0 h-24 w-24 block outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n        className,\n      )}\n      data-testid={isActive ? 'HamburgerIcon-active' : 'HamburgerIcon'}\n    >\n      <span\n        className={clsx(\n          'absolute left-1/2 top-1/2 block h-2 w-24 -translate-x-1/2 -translate-y-1/2 transition-[background] duration-500 cursor-pointer',\n          { 'bg-current': !isActive, 'bg-transparent': isActive },\n          before,\n          after,\n        )}\n      />\n    </span>\n  );\n};\n"],"mappings":";;;AAOA,IAAa,KAA2C,EACtD,cACA,cAAW,IACX,GAAG,QACC;CACJ,IAAM,IAAS,EACb,mNACA;EAAE,6BAA6B,CAAC;EAAU,yCAAyC;EAAU,CAC9F,EAEK,IAAQ,EACZ,uMACA;EAAE,2BAA2B,CAAC;EAAU,wCAAwC;EAAU,CAC3F;AAED,QACE,kBAAC,QAAD;EACE,aAAU;EACV,GAAI;EACJ,WAAW,EACT,4BACA,kJACA,EACD;EACD,eAAa,IAAW,yBAAyB;YAEjD,kBAAC,QAAD,EACE,WAAW,EACT,kIACA;GAAE,cAAc,CAAC;GAAU,kBAAkB;GAAU,EACvD,GACA,EACD,EACD,CAAA;EACG,CAAA"}

package/ui/Link.js

@@ -7,7 +7,7 @@ var a = ({ label: a, icon: o, component: s = "a", iconType: c, underlined: l = !
 	if (!a) return null;
 	let m = a.lastIndexOf(" "), h = m === -1 ? a.length : m, g = a.substring(0, 1), _ = a.substring(1, h + 1), v = a.substring(h);
 	return /* @__PURE__ */ i(d ? "span" : s, {
-		className: t("decoration-none link-container cursor-pointer text-b3 font-semibold", u),
+		className: t("decoration-none link-container cursor-pointer text-b3 font-semibold outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", u),
 		"data-name": "Link",
 		...p,
 		children: [/* @__PURE__ */ r("span", {

package/ui/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":[],"sources":["../../lib/ui/Link.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { AnchorHTMLAttributes, FunctionComponent, PropsWithChildren } from 'react';\n\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { twMerge } from './helpers/twMerge';\n\ninterface LinkProps<T extends HTMLAnchorElement = HTMLAnchorElement>\n  extends AnchorHTMLAttributes<T> {\n  /**\n   * Label text\n   */\n  label: string;\n  /**\n   * Icon name\n   */\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  /**\n   * Icon width\n   */\n  width?: string;\n  /**\n   * Underlined\n   */\n  underlined?: boolean;\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * Is the link inert (not itself clickable but part of a clickable element)\n   */\n  inert?: boolean;\n  /**\n   * Allow giving a custom component\n   */\n  component?: FunctionComponent<PropsWithChildren<any>> | string;\n}\n\nexport const Link: FunctionComponent<LinkProps> = ({\n  label,\n  icon,\n  component = 'a',\n  iconType,\n  underlined = true,\n  className,\n  inert,\n  width = '24px',\n  ...anchorAttrs\n}) => {\n  if (!label) {\n    return null;\n  }\n  const lastSpace = label.lastIndexOf(' ');\n  const lastIndex = lastSpace === -1 ? label.length : lastSpace;\n\n  const first = label.substring(0, 1);\n  const middle = label.substring(1, lastIndex + 1);\n  const last = label.substring(lastIndex);\n  const Cmp = component as FunctionComponent<PropsWithChildren>;\n\n  const TagName = inert ? 'span' : Cmp;\n\n  return (\n    <TagName\n      className={twMerge(\n        'decoration-none link-container cursor-pointer text-b3 font-semibold',\n        className,\n      )}\n      data-name=\"Link\"\n      {...anchorAttrs}\n    >\n      <span className={clsx({ 'link-underline': underlined })}>{first}</span>\n      <span\n        className={clsx('hoverable', {\n          'has-icon': icon,\n          'link-underline': underlined,\n        })}\n      >\n        {middle}\n        <span className=\"inline-block\">\n          {last}\n          {icon && (\n            <Icon\n              name={icon}\n              iconType={iconType}\n              width={width}\n              style={{ marginInlineStart: '8px' }}\n            />\n          )}\n        </span>\n      </span>\n    </TagName>\n  );\n};\n"],"mappings":";;;;;AAuCA,IAAa,KAAsC,EACjD,UACA,SACA,eAAY,KACZ,aACA,gBAAa,IACb,cACA,UACA,WAAQ,QACR,GAAG,QACC;AACJ,KAAI,CAAC,EACH,QAAO;CAET,IAAM,IAAY,EAAM,YAAY,IAAI,EAClC,IAAY,MAAc,KAAK,EAAM,SAAS,GAE9C,IAAQ,EAAM,UAAU,GAAG,EAAE,EAC7B,IAAS,EAAM,UAAU,GAAG,IAAY,EAAE,EAC1C,IAAO,EAAM,UAAU,EAAU;AAKvC,QACE,kBAHc,IAAQ,SAFZ,GAKV;EACE,WAAW,EACT,uEACA,EACD;EACD,aAAU;EACV,GAAI;YANN,CAQE,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAE,kBAAkB,GAAY,CAAC;aAAG;GAAa,CAAA,EACvE,kBAAC,QAAD;GACE,WAAW,EAAK,aAAa;IAC3B,YAAY;IACZ,kBAAkB;IACnB,CAAC;aAJJ,CAMG,GACD,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACG,GACA,KACC,kBAAC,GAAD;KACE,MAAM;KACI;KACH;KACP,OAAO,EAAE,mBAAmB,OAAO;KACnC,CAAA,CAEC;MACF;KACC"}
+{"version":3,"file":"Link.js","names":[],"sources":["../../lib/ui/Link.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { AnchorHTMLAttributes, FunctionComponent, PropsWithChildren } from 'react';\n\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { twMerge } from './helpers/twMerge';\n\ninterface LinkProps<T extends HTMLAnchorElement = HTMLAnchorElement>\n  extends AnchorHTMLAttributes<T> {\n  /**\n   * Label text\n   */\n  label: string;\n  /**\n   * Icon name\n   */\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  /**\n   * Icon width\n   */\n  width?: string;\n  /**\n   * Underlined\n   */\n  underlined?: boolean;\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * Is the link inert (not itself clickable but part of a clickable element)\n   */\n  inert?: boolean;\n  /**\n   * Allow giving a custom component\n   */\n  component?: FunctionComponent<PropsWithChildren<any>> | string;\n}\n\nexport const Link: FunctionComponent<LinkProps> = ({\n  label,\n  icon,\n  component = 'a',\n  iconType,\n  underlined = true,\n  className,\n  inert,\n  width = '24px',\n  ...anchorAttrs\n}) => {\n  if (!label) {\n    return null;\n  }\n  const lastSpace = label.lastIndexOf(' ');\n  const lastIndex = lastSpace === -1 ? label.length : lastSpace;\n\n  const first = label.substring(0, 1);\n  const middle = label.substring(1, lastIndex + 1);\n  const last = label.substring(lastIndex);\n  const Cmp = component as FunctionComponent<PropsWithChildren>;\n\n  const TagName = inert ? 'span' : Cmp;\n\n  return (\n    <TagName\n      className={twMerge(\n        'decoration-none link-container cursor-pointer text-b3 font-semibold outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n        className,\n      )}\n      data-name=\"Link\"\n      {...anchorAttrs}\n    >\n      <span className={clsx({ 'link-underline': underlined })}>{first}</span>\n      <span\n        className={clsx('hoverable', {\n          'has-icon': icon,\n          'link-underline': underlined,\n        })}\n      >\n        {middle}\n        <span className=\"inline-block\">\n          {last}\n          {icon && (\n            <Icon\n              name={icon}\n              iconType={iconType}\n              width={width}\n              style={{ marginInlineStart: '8px' }}\n            />\n          )}\n        </span>\n      </span>\n    </TagName>\n  );\n};\n"],"mappings":";;;;;AAuCA,IAAa,KAAsC,EACjD,UACA,SACA,eAAY,KACZ,aACA,gBAAa,IACb,cACA,UACA,WAAQ,QACR,GAAG,QACC;AACJ,KAAI,CAAC,EACH,QAAO;CAET,IAAM,IAAY,EAAM,YAAY,IAAI,EAClC,IAAY,MAAc,KAAK,EAAM,SAAS,GAE9C,IAAQ,EAAM,UAAU,GAAG,EAAE,EAC7B,IAAS,EAAM,UAAU,GAAG,IAAY,EAAE,EAC1C,IAAO,EAAM,UAAU,EAAU;AAKvC,QACE,kBAHc,IAAQ,SAFZ,GAKV;EACE,WAAW,EACT,8JACA,EACD;EACD,aAAU;EACV,GAAI;YANN,CAQE,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAE,kBAAkB,GAAY,CAAC;aAAG;GAAa,CAAA,EACvE,kBAAC,QAAD;GACE,WAAW,EAAK,aAAa;IAC3B,YAAY;IACZ,kBAAkB;IACnB,CAAC;aAJJ,CAMG,GACD,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACG,GACA,KACC,kBAAC,GAAD;KACE,MAAM;KACI;KACH;KACP,OAAO,EAAE,mBAAmB,OAAO;KACnC,CAAA,CAEC;MACF;KACC"}

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>;