@clubmed/trident-ui 2.1.0-beta.3 → 2.1.0-beta.5

package/examples/layer-demo.d.ts

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

package/examples/layer-demo.js

@@ -0,0 +1,30 @@
+"use client";
+import { Button as e } from "../ui/buttons/Button.js";
+import { t } from "../chunks/Layer.js";
+import { useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/examples/layer-demo.tsx
+function a() {
+	let [a, o] = n(!1), s = () => o(!1);
+	return /* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r(e, {
+		onClick: () => o(!0),
+		children: "Open Layer"
+	}), /* @__PURE__ */ r(t, {
+		heading: "Your stay",
+		isOpen: a,
+		onClose: s,
+		rightButton: {
+			label: "Close",
+			icon: "CrossDefault",
+			onClick: s
+		},
+		children: /* @__PURE__ */ i("div", {
+			className: "space-y-20 p-20",
+			children: [/* @__PURE__ */ r("p", { children: "A Layer covers the whole screen and slides in from the side. Press Escape or use the close button to dismiss it." }), /* @__PURE__ */ r("p", { children: "Its body scrolls on its own, below the header, while the page behind it stays locked." })]
+		})
+	})] });
+}
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=layer-demo.js.map

package/examples/layer-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layer-demo.js","names":[],"sources":["../../lib/examples/layer-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Layer } from '@/ui/Layer';\nimport { Button } from '@/ui/buttons/Button';\n\nexport default function LayerDemo() {\n  const [isOpen, setIsOpen] = useState(false);\n  const close = () => setIsOpen(false);\n\n  return (\n    <div>\n      <Button onClick={() => setIsOpen(true)}>Open Layer</Button>\n      <Layer\n        heading=\"Your stay\"\n        isOpen={isOpen}\n        onClose={close}\n        rightButton={{ label: 'Close', icon: 'CrossDefault', onClick: close }}\n      >\n        <div className=\"space-y-20 p-20\">\n          <p>\n            A Layer covers the whole screen and slides in from the side. Press Escape or use the\n            close button to dismiss it.\n          </p>\n          <p>\n            Its body scrolls on its own, below the header, while the page behind it stays locked.\n          </p>\n        </div>\n      </Layer>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAY;CAClC,IAAM,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,UAAc,EAAU,GAAM;AAEpC,QACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EAAQ,eAAe,EAAU,GAAK;YAAE;EAAmB,CAAA,EAC3D,kBAAC,GAAD;EACE,SAAQ;EACA;EACR,SAAS;EACT,aAAa;GAAE,OAAO;GAAS,MAAM;GAAgB,SAAS;GAAO;YAErE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,KAAD,EAAA,UAAG,oHAGC,CAAA,EACJ,kBAAC,KAAD,EAAA,UAAG,yFAEC,CAAA,CAAA;;EAEA,CAAA,CACJ,EAAA,CAAA"}

package/examples/layer-header-demo.d.ts

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

package/examples/layer-header-demo.js

@@ -0,0 +1,27 @@
+"use client";
+import { LayerHeader as e } from "../ui/LayerHeader.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region lib/examples/layer-header-demo.tsx
+function n() {
+	return /* @__PURE__ */ t("div", {
+		className: "border-lightGrey w-full border",
+		children: /* @__PURE__ */ t(e, {
+			hLevel: 2,
+			leftButton: {
+				label: "Back",
+				icon: "ArrowDefaultLeft",
+				onClick: () => {}
+			},
+			rightButton: {
+				label: "Close",
+				icon: "CrossDefault",
+				onClick: () => {}
+			},
+			children: "Search filters"
+		})
+	});
+}
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=layer-header-demo.js.map

package/examples/layer-header-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layer-header-demo.js","names":[],"sources":["../../lib/examples/layer-header-demo.tsx"],"sourcesContent":["'use client';\n\nimport { LayerHeader } from '@/ui/LayerHeader';\n\nexport default function LayerHeaderDemo() {\n  return (\n    <div className=\"border-lightGrey w-full border\">\n      <LayerHeader\n        hLevel={2}\n        leftButton={{ label: 'Back', icon: 'ArrowDefaultLeft', onClick: () => {} }}\n        rightButton={{ label: 'Close', icon: 'CrossDefault', onClick: () => {} }}\n      >\n        Search filters\n      </LayerHeader>\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAkB;AACxC,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GACE,QAAQ;GACR,YAAY;IAAE,OAAO;IAAQ,MAAM;IAAoB,eAAe;IAAI;GAC1E,aAAa;IAAE,OAAO;IAAS,MAAM;IAAgB,eAAe;IAAI;aACzE;GAEa,CAAA;EACV,CAAA"}

package/examples/layer-nested-demo.d.ts

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

package/examples/layer-nested-demo.js

@@ -0,0 +1,51 @@
+"use client";
+import { Button as e } from "../ui/buttons/Button.js";
+import { t } from "../chunks/Layer.js";
+import { useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/examples/layer-nested-demo.tsx
+function a() {
+	let [a, o] = n(!1), [s, c] = n(!1), l = () => o(!1), u = () => c(!1);
+	return /* @__PURE__ */ i("div", { children: [
+		/* @__PURE__ */ r(e, {
+			onClick: () => o(!0),
+			children: "Filters"
+		}),
+		/* @__PURE__ */ r(t, {
+			heading: "Filters",
+			isOpen: a,
+			onClose: l,
+			rightButton: {
+				label: "Close",
+				icon: "CrossDefault",
+				onClick: l
+			},
+			children: /* @__PURE__ */ i("div", {
+				className: "space-y-20 p-20",
+				children: [/* @__PURE__ */ r("p", { children: "A second layer can open on top of this one." }), /* @__PURE__ */ r(e, {
+					onClick: () => c(!0),
+					children: "Choose dates"
+				})]
+			})
+		}),
+		/* @__PURE__ */ r(t, {
+			heading: "Dates",
+			hLevel: 2,
+			isOpen: s,
+			onClose: u,
+			leftButton: {
+				label: "Back to filters",
+				icon: "ArrowDefaultLeft",
+				onClick: u
+			},
+			children: /* @__PURE__ */ r("div", {
+				className: "p-20",
+				children: /* @__PURE__ */ r("p", { children: "Escape closes this layer only, and returns to the filters." })
+			})
+		})
+	] });
+}
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=layer-nested-demo.js.map

package/examples/layer-nested-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layer-nested-demo.js","names":[],"sources":["../../lib/examples/layer-nested-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Layer } from '@/ui/Layer';\nimport { Button } from '@/ui/buttons/Button';\n\nexport default function LayerNestedDemo() {\n  const [isFiltersOpen, setIsFiltersOpen] = useState(false);\n  const [isDatesOpen, setIsDatesOpen] = useState(false);\n\n  const closeFilters = () => setIsFiltersOpen(false);\n  const closeDates = () => setIsDatesOpen(false);\n\n  return (\n    <div>\n      <Button onClick={() => setIsFiltersOpen(true)}>Filters</Button>\n      <Layer\n        heading=\"Filters\"\n        isOpen={isFiltersOpen}\n        onClose={closeFilters}\n        rightButton={{ label: 'Close', icon: 'CrossDefault', onClick: closeFilters }}\n      >\n        <div className=\"space-y-20 p-20\">\n          <p>A second layer can open on top of this one.</p>\n          <Button onClick={() => setIsDatesOpen(true)}>Choose dates</Button>\n        </div>\n      </Layer>\n      <Layer\n        heading=\"Dates\"\n        hLevel={2}\n        isOpen={isDatesOpen}\n        onClose={closeDates}\n        leftButton={{ label: 'Back to filters', icon: 'ArrowDefaultLeft', onClick: closeDates }}\n      >\n        <div className=\"p-20\">\n          <p>Escape closes this layer only, and returns to the filters.</p>\n        </div>\n      </Layer>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAkB;CACxC,IAAM,CAAC,GAAe,KAAoB,EAAS,GAAM,EACnD,CAAC,GAAa,KAAkB,EAAS,GAAM,EAE/C,UAAqB,EAAiB,GAAM,EAC5C,UAAmB,EAAe,GAAM;AAE9C,QACE,kBAAC,OAAD,EAAA,UAAA;EACE,kBAAC,GAAD;GAAQ,eAAe,EAAiB,GAAK;aAAE;GAAgB,CAAA;EAC/D,kBAAC,GAAD;GACE,SAAQ;GACR,QAAQ;GACR,SAAS;GACT,aAAa;IAAE,OAAO;IAAS,MAAM;IAAgB,SAAS;IAAc;aAE5E,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,KAAD,EAAA,UAAG,+CAA+C,CAAA,EAClD,kBAAC,GAAD;KAAQ,eAAe,EAAe,GAAK;eAAE;KAAqB,CAAA,CAAA;;GAE9D,CAAA;EACR,kBAAC,GAAD;GACE,SAAQ;GACR,QAAQ;GACR,QAAQ;GACR,SAAS;GACT,YAAY;IAAE,OAAO;IAAmB,MAAM;IAAoB,SAAS;IAAY;aAEvF,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,KAAD,EAAA,UAAG,8DAA8D,CAAA;IAC7D,CAAA;GACA,CAAA;EACJ,EAAA,CAAA"}

package/examples/layer-pinned-demo.d.ts

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

package/examples/layer-pinned-demo.js

@@ -0,0 +1,36 @@
+"use client";
+import { Button as e } from "../ui/buttons/Button.js";
+import { t } from "../chunks/Layer.js";
+import { useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/examples/layer-pinned-demo.tsx
+function a() {
+	let [a, o] = n(!1), s = () => o(!1);
+	return /* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r(e, {
+		onClick: () => o(!0),
+		icon: "Search",
+		children: "Search a resort"
+	}), /* @__PURE__ */ r(t, {
+		heading: "Search",
+		isOpen: a,
+		onClose: s,
+		pinToVisualViewport: !0,
+		rightButton: {
+			label: "Close",
+			icon: "CrossDefault",
+			onClick: s
+		},
+		children: /* @__PURE__ */ r("div", {
+			className: "p-20",
+			children: /* @__PURE__ */ r("input", {
+				"aria-label": "Destination",
+				className: "w-full rounded-pill border border-black px-20 py-12",
+				placeholder: "Where do you want to go?"
+			})
+		})
+	})] });
+}
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=layer-pinned-demo.js.map

package/examples/layer-pinned-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layer-pinned-demo.js","names":[],"sources":["../../lib/examples/layer-pinned-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Layer } from '@/ui/Layer';\nimport { Button } from '@/ui/buttons/Button';\n\nexport default function LayerPinnedDemo() {\n  const [isOpen, setIsOpen] = useState(false);\n  const close = () => setIsOpen(false);\n\n  return (\n    <div>\n      <Button onClick={() => setIsOpen(true)} icon=\"Search\">\n        Search a resort\n      </Button>\n      <Layer\n        heading=\"Search\"\n        isOpen={isOpen}\n        onClose={close}\n        pinToVisualViewport\n        rightButton={{ label: 'Close', icon: 'CrossDefault', onClick: close }}\n      >\n        <div className=\"p-20\">\n          <input\n            aria-label=\"Destination\"\n            className=\"w-full rounded-pill border border-black px-20 py-12\"\n            placeholder=\"Where do you want to go?\"\n          />\n        </div>\n      </Layer>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAkB;CACxC,IAAM,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,UAAc,EAAU,GAAM;AAEpC,QACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EAAQ,eAAe,EAAU,GAAK;EAAE,MAAK;YAAS;EAE7C,CAAA,EACT,kBAAC,GAAD;EACE,SAAQ;EACA;EACR,SAAS;EACT,qBAAA;EACA,aAAa;GAAE,OAAO;GAAS,MAAM;GAAgB,SAAS;GAAO;YAErE,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,SAAD;IACE,cAAW;IACX,WAAU;IACV,aAAY;IACZ,CAAA;GACE,CAAA;EACA,CAAA,CACJ,EAAA,CAAA"}

package/examples/layer-scale-demo.d.ts

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

package/examples/layer-scale-demo.js

@@ -0,0 +1,34 @@
+"use client";
+import { Button as e } from "../ui/buttons/Button.js";
+import { t } from "../chunks/Layer.js";
+import { useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region lib/examples/layer-scale-demo.tsx
+function o() {
+	let [o, s] = r(!1), c = n(null), l = () => s(!1);
+	return /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i(e, {
+		ref: c,
+		onClick: () => s(!0),
+		icon: "ArrowDefaultRight",
+		children: "See the gallery"
+	}), /* @__PURE__ */ i(t, {
+		animation: "scale",
+		origin: c,
+		heading: "Gallery",
+		isOpen: o,
+		onClose: l,
+		rightButton: {
+			label: "Close",
+			icon: "CrossDefault",
+			onClick: l
+		},
+		children: /* @__PURE__ */ i("div", {
+			className: "grid grid-cols-2 gap-8 p-20 md:grid-cols-3",
+			children: Array.from({ length: 9 }, (e, t) => /* @__PURE__ */ i("div", { className: "bg-lightSand rounded-16 aspect-square" }, t))
+		})
+	})] });
+}
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=layer-scale-demo.js.map

package/examples/layer-scale-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layer-scale-demo.js","names":[],"sources":["../../lib/examples/layer-scale-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useState } from 'react';\nimport { Layer } from '@/ui/Layer';\nimport { Button } from '@/ui/buttons/Button';\n\nexport default function LayerScaleDemo() {\n  const [isOpen, setIsOpen] = useState(false);\n  const trigger = useRef<HTMLButtonElement>(null);\n  const close = () => setIsOpen(false);\n\n  return (\n    <div>\n      <Button ref={trigger} onClick={() => setIsOpen(true)} icon=\"ArrowDefaultRight\">\n        See the gallery\n      </Button>\n      <Layer\n        animation=\"scale\"\n        origin={trigger}\n        heading=\"Gallery\"\n        isOpen={isOpen}\n        onClose={close}\n        rightButton={{ label: 'Close', icon: 'CrossDefault', onClick: close }}\n      >\n        <div className=\"grid grid-cols-2 gap-8 p-20 md:grid-cols-3\">\n          {Array.from({ length: 9 }, (_, index) => (\n            <div key={index} className=\"bg-lightSand rounded-16 aspect-square\" />\n          ))}\n        </div>\n      </Layer>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAiB;CACvC,IAAM,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,IAAU,EAA0B,KAAK,EACzC,UAAc,EAAU,GAAM;AAEpC,QACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EAAQ,KAAK;EAAS,eAAe,EAAU,GAAK;EAAE,MAAK;YAAoB;EAEtE,CAAA,EACT,kBAAC,GAAD;EACE,WAAU;EACV,QAAQ;EACR,SAAQ;EACA;EACR,SAAS;EACT,aAAa;GAAE,OAAO;GAAS,MAAM;GAAgB,SAAS;GAAO;YAErE,kBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,MAC7B,kBAAC,OAAD,EAAiB,WAAU,yCAA0C,EAA3D,EAA2D,CAAA;GAEnE,CAAA;EACA,CAAA,CACJ,EAAA,CAAA"}

package/examples/layer-use-layer-demo.d.ts

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

package/examples/layer-use-layer-demo.js

@@ -0,0 +1,33 @@
+"use client";
+import { Button as e } from "../ui/buttons/Button.js";
+import { t } from "../chunks/Layer.js";
+import { useLayer as n } from "../ui/hooks/useLayer.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/examples/layer-use-layer-demo.tsx
+function a() {
+	let { close: a, isOpen: o, open: s } = n({
+		onClose: () => console.log("Layer closed"),
+		onOpen: () => console.log("Layer opened")
+	});
+	return /* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r(e, {
+		onClick: s,
+		children: "Open with useLayer"
+	}), /* @__PURE__ */ r(t, {
+		heading: "Driven by useLayer",
+		isOpen: o,
+		onClose: a,
+		rightButton: {
+			label: "Close",
+			icon: "CrossDefault",
+			onClick: a
+		},
+		children: /* @__PURE__ */ r("div", {
+			className: "p-20",
+			children: /* @__PURE__ */ r("p", { children: "`open` and `close` keep the same identity across renders." })
+		})
+	})] });
+}
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=layer-use-layer-demo.js.map

package/examples/layer-use-layer-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layer-use-layer-demo.js","names":[],"sources":["../../lib/examples/layer-use-layer-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Layer } from '@/ui/Layer';\nimport { Button } from '@/ui/buttons/Button';\nimport { useLayer } from '@/ui/hooks/useLayer';\n\nexport default function LayerUseLayerDemo() {\n  const { close, isOpen, open } = useLayer({\n    onClose: () => console.log('Layer closed'),\n    onOpen: () => console.log('Layer opened'),\n  });\n\n  return (\n    <div>\n      <Button onClick={open}>Open with useLayer</Button>\n      <Layer\n        heading=\"Driven by useLayer\"\n        isOpen={isOpen}\n        onClose={close}\n        rightButton={{ label: 'Close', icon: 'CrossDefault', onClick: close }}\n      >\n        <div className=\"p-20\">\n          <p>`open` and `close` keep the same identity across renders.</p>\n        </div>\n      </Layer>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAoB;CAC1C,IAAM,EAAE,UAAO,WAAQ,YAAS,EAAS;EACvC,eAAe,QAAQ,IAAI,eAAe;EAC1C,cAAc,QAAQ,IAAI,eAAA;EAC3B,CAAC;AAEF,QACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EAAQ,SAAS;YAAM;EAA2B,CAAA,EAClD,kBAAC,GAAD;EACE,SAAQ;EACA;EACR,SAAS;EACT,aAAa;GAAE,OAAO;GAAS,MAAM;GAAgB,SAAS;GAAO;YAErE,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,KAAD,EAAA,UAAG,6DAA6D,CAAA;GAC5D,CAAA;EACA,CAAA,CACJ,EAAA,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "2.1.0-beta.3",
+  "version": "2.1.0-beta.5",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [
@@ -87,6 +87,7 @@
     "embla-carousel-react": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
     "react-day-picker": ">=8.10.0",
+    "react-focus-on": ">=3.10.2",
     "react-hot-toast": ">=2.4.1",
     "react-transition-state": ">=2.3.2",
     "react-use-measure": ">=2.1.1",

package/ui/Backdrop.d.ts

@@ -19,5 +19,10 @@ export interface BackdropProps extends ComponentProps<'div'> {
      * Target ID for the Portal component
      */
     target?: ComponentProps<typeof Portal>['target'];
+    /**
+     * Whether backdrop click should trigger onClose
+     * @default true
+     */
+    dismissable?: boolean;
 }
 export declare const Backdrop: FunctionComponent<PropsWithChildren<BackdropProps>>;

package/ui/Backdrop.js

@@ -1,2 +1,54 @@
-import { t as e } from "../chunks/Backdrop.js";
-export { e as Backdrop };
+import { t as e } from "../chunks/clsx.js";
+import { t } from "../chunks/useTransitionState.js";
+import { Portal as n } from "./Portal.js";
+import { useEffect as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region lib/ui/Backdrop.tsx
+var o = ({ children: o, className: s = "flex justify-center", onClose: c, isVisible: l, target: u = "backdrop", sweep: d = !1, dismissable: f = !0, ...p }) => {
+	let [m, h] = t({
+		timeout: {
+			enter: 0,
+			exit: 500
+		},
+		mountOnEnter: !0,
+		unmountOnExit: !0,
+		preEnter: !0
+	}), { status: g, isMounted: _ } = m;
+	r(() => {
+		h(l);
+	}, [l, h]), r(() => {
+		if (!_ || !f || !c) return;
+		let e = (e) => {
+			e.key === "Escape" && c(e);
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [
+		_,
+		f,
+		c
+	]);
+	let v = g === "preEnter" || g === "exiting";
+	return /* @__PURE__ */ i(n, {
+		target: u,
+		children: _ && /* @__PURE__ */ a("div", {
+			...p,
+			role: "presentation",
+			className: e(s, "fixed inset-0 isolate items-center"),
+			children: [/* @__PURE__ */ i("button", {
+				"aria-hidden": "true",
+				className: e("absolute inset-0 -z-1 transition-all duration-500 outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", {
+					"bg-white/80 backdrop-blur": !v,
+					"bg-white/0 backdrop-blur-none": v,
+					"-translate-x-full": d && (g === "preEnter" || g === "entering"),
+					"translate-x-full": d && g === "exiting"
+				}),
+				onClick: f ? c : void 0,
+				type: "button"
+			}), o]
+		})
+	});
+};
+//#endregion
+export { o as Backdrop };
+
+//# sourceMappingURL=Backdrop.js.map

package/ui/Backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Backdrop.js","names":[],"sources":["../../lib/ui/Backdrop.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type FunctionComponent,\n  type MouseEvent,\n  type PropsWithChildren,\n  useEffect,\n} from 'react';\nimport clsx from 'clsx';\nimport { useTransitionState } from 'react-transition-state';\nimport { Portal } from './Portal';\n\nexport interface BackdropProps extends ComponentProps<'div'> {\n  /**\n   * On close\n   * @param event\n   */\n  onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Is visible\n   */\n  isVisible?: boolean;\n  /**\n   * Sweep Mode™\n   * (makes it appear from the sides instead of from everywhere)\n   */\n  sweep?: boolean;\n  /**\n   * Target ID for the Portal component\n   */\n  target?: ComponentProps<typeof Portal>['target'];\n  /**\n   * Whether backdrop click should trigger onClose\n   * @default true\n   */\n  dismissable?: boolean;\n}\n\nexport const Backdrop: FunctionComponent<PropsWithChildren<BackdropProps>> = ({\n  children,\n  className = 'flex justify-center',\n  onClose,\n  isVisible,\n  target = 'backdrop',\n  sweep = false,\n  dismissable = true,\n  ...attrs\n}) => {\n  const [state, toggle] = useTransitionState({\n    timeout: { enter: 0, exit: 500 },\n    mountOnEnter: true,\n    unmountOnExit: true,\n    preEnter: true,\n  });\n\n  const { status, isMounted } = state;\n\n  useEffect(() => {\n    toggle(isVisible);\n  }, [isVisible, toggle]);\n\n  useEffect(() => {\n    if (!isMounted || !dismissable || !onClose) return;\n\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        onClose(event as unknown as MouseEvent<HTMLButtonElement>);\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape);\n    return () => document.removeEventListener('keydown', handleEscape);\n  }, [isMounted, dismissable, onClose]);\n\n  const animated = status === 'preEnter' || status === 'exiting';\n\n  return (\n    <Portal target={target}>\n      {isMounted && (\n        <div\n          {...attrs}\n          role=\"presentation\"\n          className={clsx(className, 'fixed inset-0 isolate items-center')}\n        >\n          <button\n            aria-hidden=\"true\"\n            className={clsx(\n              'absolute inset-0 -z-1 transition-all duration-500 outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n              {\n                'bg-white/80 backdrop-blur': !animated,\n                'bg-white/0 backdrop-blur-none': animated,\n                '-translate-x-full': sweep && (status === 'preEnter' || status === 'entering'),\n                'translate-x-full': sweep && status === 'exiting',\n              },\n            )}\n            onClick={dismissable ? onClose : undefined}\n            type=\"button\"\n          />\n          {children}\n        </div>\n      )}\n    </Portal>\n  );\n};\n"],"mappings":";;;;;;AAqCA,IAAa,KAAiE,EAC5E,aACA,eAAY,uBACZ,YACA,cACA,YAAS,YACT,WAAQ,IACR,iBAAc,IACd,GAAG,QACC;CACJ,IAAM,CAAC,GAAO,KAAU,EAAmB;EACzC,SAAS;GAAE,OAAO;GAAG,MAAM;GAAK;EAChC,cAAc;EACd,eAAe;EACf,UAAU;EACX,CAAC,EAEI,EAAE,WAAQ,iBAAc;AAM9B,CAJA,QAAgB;AACd,IAAO,EAAU;IAChB,CAAC,GAAW,EAAO,CAAC,EAEvB,QAAgB;AACd,MAAI,CAAC,KAAa,CAAC,KAAe,CAAC,EAAS;EAE5C,IAAM,KAAgB,MAAyB;AAC7C,GAAI,EAAM,QAAQ,YAChB,EAAQ,EAAkD;;AAK9D,SADA,SAAS,iBAAiB,WAAW,EAAa,QACrC,SAAS,oBAAoB,WAAW,EAAa;IACjE;EAAC;EAAW;EAAa;EAAQ,CAAC;CAErC,IAAM,IAAW,MAAW,cAAc,MAAW;AAErD,QACE,kBAAC,GAAD;EAAgB;YACb,KACC,kBAAC,OAAD;GACE,GAAI;GACJ,MAAK;GACL,WAAW,EAAK,GAAW,qCAAqC;aAHlE,CAKE,kBAAC,UAAD;IACE,eAAY;IACZ,WAAW,EACT,4IACA;KACE,6BAA6B,CAAC;KAC9B,iCAAiC;KACjC,qBAAqB,MAAU,MAAW,cAAc,MAAW;KACnE,oBAAoB,KAAS,MAAW;KACzC,CACF;IACD,SAAS,IAAc,IAAU,KAAA;IACjC,MAAK;IACL,CAAA,EACD,EACG;;EAED,CAAA"}

package/ui/ChatBody.d.ts

@@ -1,25 +1 @@
-import { ChatMessageSender } from './ChatMessage';
-import { ChatWindowCsatPromptLabels } from './ChatWindowCsatPrompt';
-import { ChatWindowCsatThankYouLabels } from './ChatWindowCsatThankYou';
-import { ChatWindowQuoteItem } from './ChatWindowQuote';
-import { HTMLAttributes, ReactNode } from 'react';
-export interface ChatMessage {
-    id: string;
-    sender: ChatMessageSender;
-    content: ReactNode;
-}
-export interface ChatBodyProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-    greeting?: string;
-    messages: ChatMessage[];
-    isTyping?: boolean;
-    onFeedbackRate?: (rating: number) => void;
-    csatLabels?: ChatWindowCsatPromptLabels;
-    csatRenderRatingLabel?: (rating: number) => ReactNode;
-    csatThankYouLabels?: ChatWindowCsatThankYouLabels;
-    onQuoteCtaClick?: (quote: ChatWindowQuoteItem) => void;
-}
-export interface ChatHandle {
-    askForFeedback: () => void;
-    showQuotes: (quotes: ChatWindowQuoteItem[]) => void;
-}
-export declare const ChatBody: import('react').ForwardRefExoticComponent<ChatBodyProps & import('react').RefAttributes<ChatHandle>>;
+export * from './chat/ChatBody';

package/ui/ChatBody.js

@@ -1,88 +1,2 @@
-import { twMerge as e } from "./helpers/twMerge.js";
-import { t } from "../chunks/ChatMessage.js";
-import { ChatTypingIndicator as n } from "./ChatTypingIndicator.js";
-import { ChatWindowCsatPrompt as r } from "./ChatWindowCsatPrompt.js";
-import { ChatWindowCsatThankYou as i } from "./ChatWindowCsatThankYou.js";
-import { ChatWindowQuote as a } from "./ChatWindowQuote.js";
-import { forwardRef as o, useEffect as s, useImperativeHandle as c, useRef as l, useState as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-//#region lib/ui/ChatBody.tsx
-function p({ messages: e, isTyping: t, csatRenderRatingLabel: n, onFeedbackRate: r, csatLabels: i }, a) {
-	let o = l(null), [d, f] = u(!1), [p, m] = u(null), [h, g] = u([]);
-	c(a, () => ({
-		askForFeedback() {
-			f(!0);
-		},
-		showQuotes(e) {
-			g((t) => [...t, e]);
-		}
-	})), s(() => {
-		let e = o.current;
-		e && e.scrollTo({
-			top: e.scrollHeight,
-			behavior: "smooth"
-		});
-	}, [
-		e,
-		t,
-		d,
-		p,
-		h
-	]);
-	function _(e) {
-		m(String(n ? n(e) : e)), r?.(e);
-	}
-	return {
-		logRef: o,
-		csatRatingMessage: p,
-		quoteGroups: h,
-		handleRate: _,
-		csatReady: d && i && n
-	};
-}
-var m = o(function(o, s) {
-	let { logRef: c, csatRatingMessage: l, quoteGroups: u, handleRate: m, csatReady: h } = p(o, s), { greeting: g, messages: _, isTyping: v = !1, csatLabels: y, csatRenderRatingLabel: b, csatThankYouLabels: x, onQuoteCtaClick: S, className: C, ...w } = o;
-	return /* @__PURE__ */ f("div", {
-		...w,
-		ref: c,
-		role: "log",
-		"aria-label": "Chat messages",
-		"aria-live": "polite",
-		className: e("chat-message-log flex flex-col flex-1 gap-20 overflow-y-auto py-20", C),
-		children: [
-			g ? /* @__PURE__ */ d("div", {
-				className: "px-20",
-				children: /* @__PURE__ */ d("p", {
-					className: "text-b3 text-black",
-					children: g
-				})
-			}) : null,
-			_.map((e) => /* @__PURE__ */ d(t, {
-				sender: e.sender,
-				children: e.content
-			}, e.id)),
-			v && /* @__PURE__ */ d("div", {
-				className: "px-12",
-				children: /* @__PURE__ */ d(n, {})
-			}),
-			h && /* @__PURE__ */ d(r, {
-				onRate: m,
-				labels: y,
-				renderRatingLabel: b
-			}),
-			l && /* @__PURE__ */ d(t, {
-				sender: "user",
-				children: l
-			}),
-			l && x && /* @__PURE__ */ d(i, { labels: x }),
-			u.map((e, t) => /* @__PURE__ */ d(a, {
-				quotes: e,
-				onCtaClick: S
-			}, t))
-		]
-	});
-});
-//#endregion
-export { m as ChatBody };
-
-//# sourceMappingURL=ChatBody.js.map
+import { ChatBody as e } from "./chat/ChatBody.js";
+export { e as ChatBody };

package/ui/ChatButton.d.ts

@@ -1,6 +1 @@
-import { ButtonHTMLAttributes } from 'react';
-export type ChatButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-    offset?: boolean;
-    unfoldOn?: 'hover' | 'active';
-};
-export declare function ChatButton({ children, className, type, 'aria-label': ariaLabel, tabIndex, offset, unfoldOn, ...rest }: ChatButtonProps): import("react/jsx-runtime").JSX.Element;
+export * from './chat/ChatButton';

package/ui/ChatButton.js

@@ -1,33 +1,2 @@
-import { twMerge as e } from "./helpers/twMerge.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Icon as r } from "@clubmed/trident-icons";
-//#region lib/ui/ChatButton.tsx
-var i = "AI Agent: Have you got a question?", a = "Chat with your assistant";
-function o({ children: o = i, className: s, type: c = "button", "aria-label": l, tabIndex: u, offset: d, unfoldOn: f = "hover", ...p }) {
-	let m = l ?? (typeof o == "string" && o.trim().length > 0 ? o.trim() : a);
-	return /* @__PURE__ */ n("button", {
-		type: c,
-		"aria-label": m,
-		tabIndex: u ?? 0,
-		...p,
-		className: e("chat-border grid grid-cols-[24px_0fr] transition-[grid-template-columns] justify-center items-center overflow-hidden cursor-pointer transition-all rounded-pill px-8 md:px-16 outline-none group/Chatbutton focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 pointer-events-auto h-48 min-h-48 md:min-w-80 md:h-80 active:scale-[0.98]", d && "md:translate-x-[40px] focus-visible:translate-x-0", f === "hover" && "group/hoverChatbutton hover:grid-cols-[24px_1fr] hover:translate-x-0", f === "active" && "group/activeChatbutton active:grid-cols-[24px_1fr] active:translate-x-0", "focus-visible:grid-cols-[24px_1fr]", s),
-		children: [/* @__PURE__ */ t(r, {
-			name: "Sparkles",
-			className: e("chat-button-icon w-24 transition-all", d && "relative md:start-[calc(-16px)] group-focus-visible/Chatbutton:start-0 group-hover/hoverChatbutton:start-0 group-active/activeChatbutton:start-0")
-		}), /* @__PURE__ */ t("div", {
-			className: "grid grid-cols-[0fr] overflow-hidden opacity-0 transition-opacity group-hover/hoverChatbutton:opacity-100 group-focus-visible/Chatbutton:opacity-100 group-active/activeChatbutton:opacity-100 duration-500",
-			children: /* @__PURE__ */ n("span", {
-				"aria-hidden": "true",
-				className: "chat-button-text items-center ps-20 flex gap-10 whitespace-nowrap font-semibold text-b3 text-black",
-				children: [o, /* @__PURE__ */ t(r, {
-					name: "ArrowTailRight",
-					width: "24px"
-				})]
-			})
-		})]
-	});
-}
-//#endregion
-export { o as ChatButton };
-
-//# sourceMappingURL=ChatButton.js.map
+import { ChatButton as e } from "./chat/ChatButton.js";
+export { e as ChatButton };

package/ui/ChatHeader.d.ts

@@ -1,6 +1 @@
-import { ReactNode } from 'react';
-export interface ChatHeaderProps {
-    title?: string;
-    logo?: ReactNode;
-}
-export declare function ChatHeader({ title, logo }: ChatHeaderProps): import("react/jsx-runtime").JSX.Element;
+export * from './chat/ChatHeader';

package/ui/ChatHeader.js

@@ -1,43 +1,2 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { Icon as n } from "@clubmed/trident-icons";
-//#region lib/ui/ChatHeader.tsx
-var r = /* @__PURE__ */ e("svg", {
-	className: "absolute top-full inset-x-[50%] -translate-x-1/2",
-	width: "118",
-	height: "27",
-	viewBox: "0 0 118 27",
-	children: /* @__PURE__ */ e("path", {
-		d: "M0 0C10.8283 0 21.1946 5.40419 28.7327 13.2062L30.2673 14.7945C45.991 31.0685 72.009 31.0685 87.7327 14.7945L89.2673 13.2062C96.8054 5.40419 107.172 0 118 0C118 0 80.6853 0 0 0Z",
-		fill: "#F6EFE7"
-	})
-});
-function i({ title: i = "Ask me a question", logo: a }) {
-	return /* @__PURE__ */ t("div", {
-		className: "relative flex flex-col items-center shrink-0 pt-4 px-4 h-118 overflow-hidden",
-		children: [/* @__PURE__ */ e("div", {
-			className: "absolute inset-x-4 top-4 h-87 bg-lightSand rounded-[24px]",
-			children: r
-		}), /* @__PURE__ */ t("div", {
-			className: "relative flex flex-col flex-1 items-center justify-end pb-8 w-full z-10",
-			children: [/* @__PURE__ */ e("div", {
-				className: "flex items-center justify-center px-12 py-8 w-full",
-				children: /* @__PURE__ */ e("p", {
-					className: "font-serif font-bold italic text-h5 text-center text-black line-clamp-2",
-					children: i
-				})
-			}), a ?? /* @__PURE__ */ e("button", {
-				type: "button",
-				"aria-label": "AI assistant",
-				className: "chat-border flex items-center justify-center size-48 rounded-full bg-white outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
-				children: /* @__PURE__ */ e(n, {
-					name: "Sparkles",
-					width: "24px"
-				})
-			})]
-		})]
-	});
-}
-//#endregion
-export { i as ChatHeader };
-
-//# sourceMappingURL=ChatHeader.js.map
+import { ChatHeader as e } from "./chat/ChatHeader.js";
+export { e as ChatHeader };

package/ui/ChatInput.d.ts

@@ -1,10 +1 @@
-import { FormHTMLAttributes } from 'react';
-export interface ChatInputProps extends FormHTMLAttributes<HTMLFormElement> {
-    value: string;
-    placeholder?: string;
-    onValueChange: (value: string) => void;
-    onSubmit: () => void;
-    /** Fallback for when the browser does not support the Web Speech API */
-    onAudioClick?: () => void;
-}
-export declare function ChatInput({ value, placeholder, onValueChange, onSubmit, onAudioClick, className, ...props }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
+export * from './chat/ChatInput';