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

package/chunks/useTransitionState.js

@@ -0,0 +1,69 @@
+import { useCallback as e, useRef as t, useState as n } from "react";
+var r = 5, i = 6, a = [
+	"preEnter",
+	"entering",
+	"entered",
+	"preExit",
+	"exiting",
+	"exited",
+	"unmounted"
+], o = (e) => ({
+	_s: e,
+	status: a[e],
+	isEnter: e < 3,
+	isMounted: e !== i,
+	isResolved: e === 2 || e > 4
+}), s = (e) => e ? i : r, c = (e, t) => {
+	switch (e) {
+		case 1:
+		case 0: return 2;
+		case 4:
+		case 3: return s(t);
+	}
+}, l = (e) => typeof e == "object" ? [e.enter, e.exit] : [e, e], u = (...e) => setTimeout(...e), d = (e, t) => u(() => {
+	isNaN(document.body.offsetTop) || e(t + 1);
+}, 0), f = (e, t, n, r, i) => {
+	clearTimeout(r.current);
+	let a = o(e);
+	t(a), n.current = a, i && i({ current: a });
+}, p = ({ enter: r = !0, exit: i = !0, preEnter: a, preExit: p, timeout: m, initialEntered: h, mountOnEnter: g, unmountOnExit: _, onStateChange: v } = {}) => {
+	let [y, b] = n(() => o(h ? 2 : s(g))), x = t(y), S = t(0), [C, w] = l(m), T = e(() => {
+		let e = c(x.current._s, _);
+		e && f(e, b, x, S, v);
+	}, [v, _]);
+	return [
+		y,
+		e((e) => {
+			let t = (e) => {
+				switch (f(e, b, x, S, v), e) {
+					case 1:
+						C >= 0 && (S.current = u(T, C));
+						break;
+					case 4:
+						w >= 0 && (S.current = u(T, w));
+						break;
+					case 0:
+					case 3:
+						S.current = d(t, e);
+						break;
+				}
+			}, n = x.current.isEnter;
+			typeof e != "boolean" && (e = !n), e ? !n && t(r ? a ? 0 : 1 : 2) : n && t(i ? p ? 3 : 4 : s(_));
+		}, [
+			T,
+			v,
+			r,
+			i,
+			a,
+			p,
+			C,
+			w,
+			_
+		]),
+		T
+	];
+};
+//#endregion
+export { p as t };
+
+//# sourceMappingURL=useTransitionState.js.map

package/chunks/useTransitionState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransitionState.js","names":[],"sources":["../../../../node_modules/.pnpm/react-transition-state@2.3.3_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-transition-state/dist/esm/utils.mjs","../../../../node_modules/.pnpm/react-transition-state@2.3.3_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-transition-state/dist/esm/useTransitionState.mjs"],"sourcesContent":["//#region src/utils.ts\nconst PRE_ENTER = 0;\nconst ENTERING = 1;\nconst ENTERED = 2;\nconst PRE_EXIT = 3;\nconst EXITING = 4;\nconst EXITED = 5;\nconst UNMOUNTED = 6;\nconst STATUS = [\n\t\"preEnter\",\n\t\"entering\",\n\t\"entered\",\n\t\"preExit\",\n\t\"exiting\",\n\t\"exited\",\n\t\"unmounted\"\n];\nconst getState = (status) => ({\n\t_s: status,\n\tstatus: STATUS[status],\n\tisEnter: status < PRE_EXIT,\n\tisMounted: status !== UNMOUNTED,\n\tisResolved: status === ENTERED || status > EXITING\n});\nconst startOrEnd = (unmounted) => unmounted ? UNMOUNTED : EXITED;\nconst getEndStatus = (status, unmountOnExit) => {\n\tswitch (status) {\n\t\tcase ENTERING:\n\t\tcase PRE_ENTER: return ENTERED;\n\t\tcase EXITING:\n\t\tcase PRE_EXIT: return startOrEnd(unmountOnExit);\n\t}\n};\nconst getTimeout = (timeout) => typeof timeout === \"object\" ? [timeout.enter, timeout.exit] : [timeout, timeout];\nconst _setTimeout = (...args) => setTimeout(...args);\nconst nextTick = (transitState, status) => _setTimeout(() => {\n\tisNaN(document.body.offsetTop) || transitState(status + 1);\n}, 0);\n\n//#endregion\nexport { ENTERED, ENTERING, EXITING, PRE_ENTER, PRE_EXIT, _setTimeout, getEndStatus, getState, getTimeout, nextTick, startOrEnd };","import { ENTERED, ENTERING, EXITING, PRE_ENTER, PRE_EXIT, _setTimeout, getEndStatus, getState, getTimeout, nextTick, startOrEnd } from \"./utils.mjs\";\nimport { useCallback, useRef, useState } from \"react\";\n\n//#region src/useTransitionState.ts\nconst updateState = (status, setState, latestState, timeoutId, onChange) => {\n\tclearTimeout(timeoutId.current);\n\tconst state = getState(status);\n\tsetState(state);\n\tlatestState.current = state;\n\tonChange && onChange({ current: state });\n};\nconst useTransitionState = ({ enter = true, exit = true, preEnter, preExit, timeout, initialEntered, mountOnEnter, unmountOnExit, onStateChange: onChange } = {}) => {\n\tconst [state, setState] = useState(() => getState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)));\n\tconst latestState = useRef(state);\n\tconst timeoutId = useRef(0);\n\tconst [enterTimeout, exitTimeout] = getTimeout(timeout);\n\tconst endTransition = useCallback(() => {\n\t\tconst status = getEndStatus(latestState.current._s, unmountOnExit);\n\t\tstatus && updateState(status, setState, latestState, timeoutId, onChange);\n\t}, [onChange, unmountOnExit]);\n\treturn [\n\t\tstate,\n\t\tuseCallback((toEnter) => {\n\t\t\tconst transitState = (status) => {\n\t\t\t\tupdateState(status, setState, latestState, timeoutId, onChange);\n\t\t\t\tswitch (status) {\n\t\t\t\t\tcase ENTERING:\n\t\t\t\t\t\tif (enterTimeout >= 0) timeoutId.current = _setTimeout(endTransition, enterTimeout);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase EXITING:\n\t\t\t\t\t\tif (exitTimeout >= 0) timeoutId.current = _setTimeout(endTransition, exitTimeout);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase PRE_ENTER:\n\t\t\t\t\tcase PRE_EXIT:\n\t\t\t\t\t\ttimeoutId.current = nextTick(transitState, status);\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t};\n\t\t\tconst enterStage = latestState.current.isEnter;\n\t\t\tif (typeof toEnter !== \"boolean\") toEnter = !enterStage;\n\t\t\tif (toEnter) !enterStage && transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);\n\t\t\telse enterStage && transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));\n\t\t}, [\n\t\t\tendTransition,\n\t\t\tonChange,\n\t\t\tenter,\n\t\t\texit,\n\t\t\tpreEnter,\n\t\t\tpreExit,\n\t\t\tenterTimeout,\n\t\t\texitTimeout,\n\t\t\tunmountOnExit\n\t\t]),\n\t\tendTransition\n\t];\n};\n\n//#endregion\nexport { useTransitionState };"],"x_google_ignoreList":[0,1],"mappings":";AAMA,IAAM,IAAS,GACT,IAAY,GACZ,IAAS;CACd;CACA;CACA;CACA;CACA;CACA;CACA;CACA,EACK,KAAY,OAAY;CAC7B,IAAI;CACJ,QAAQ,EAAO;CACf,SAAS,IAAA;CACT,WAAW,MAAW;CACtB,YAAY,MAAA,KAAsB,IAAA;CAClC,GACK,KAAc,MAAc,IAAY,IAAY,GACpD,KAAgB,GAAQ,MAAkB;AAC/C,SAAQ,GAAR;EACC,KAAA;EACA,KAAA,EAAgB,QAAA;EAChB,KAAA;EACA,KAAA,EAAe,QAAO,EAAW,EAAc;;GAG3C,KAAc,MAAY,OAAO,KAAY,WAAW,CAAC,EAAQ,OAAO,EAAQ,KAAK,GAAG,CAAC,GAAS,EAAQ,EAC1G,KAAe,GAAG,MAAS,WAAW,GAAG,EAAK,EAC9C,KAAY,GAAc,MAAW,QAAkB;AAC5D,OAAM,SAAS,KAAK,UAAU,IAAI,EAAa,IAAS,EAAE;GACxD,EAAE,ECjCC,KAAe,GAAQ,GAAU,GAAa,GAAW,MAAa;AAC3E,cAAa,EAAU,QAAQ;CAC/B,IAAM,IAAQ,EAAS,EAAO;AAG9B,CAFA,EAAS,EAAM,EACf,EAAY,UAAU,GACtB,KAAY,EAAS,EAAE,SAAS,GAAO,CAAC;GAEnC,KAAsB,EAAE,WAAQ,IAAM,UAAO,IAAM,aAAU,YAAS,YAAS,mBAAgB,iBAAc,kBAAe,eAAe,MAAa,EAAE,KAAK;CACpK,IAAM,CAAC,GAAO,KAAY,QAAe,EAAS,IAAA,IAA2B,EAAW,EAAa,CAAC,CAAC,EACjG,IAAc,EAAO,EAAM,EAC3B,IAAY,EAAO,EAAE,EACrB,CAAC,GAAc,KAAe,EAAW,EAAQ,EACjD,IAAgB,QAAkB;EACvC,IAAM,IAAS,EAAa,EAAY,QAAQ,IAAI,EAAc;AAClE,OAAU,EAAY,GAAQ,GAAU,GAAa,GAAW,EAAS;IACvE,CAAC,GAAU,EAAc,CAAC;AAC7B,QAAO;EACN;EACA,GAAa,MAAY;GACxB,IAAM,KAAgB,MAAW;AAEhC,YADA,EAAY,GAAQ,GAAU,GAAa,GAAW,EAAS,EACvD,GAAR;KACC,KAAA;AACC,MAAI,KAAgB,MAAG,EAAU,UAAU,EAAY,GAAe,EAAa;AACnF;KACD,KAAA;AACC,MAAI,KAAe,MAAG,EAAU,UAAU,EAAY,GAAe,EAAY;AACjF;KACD,KAAA;KACA,KAAA;AACC,QAAU,UAAU,EAAS,GAAc,EAAO;AAClD;;MAGG,IAAa,EAAY,QAAQ;AAEvC,GADI,OAAO,KAAY,cAAW,IAAU,CAAC,IACzC,IAAS,CAAC,KAAc,EAAa,IAAQ,IAAA,IAAA,IAAA,EAA0C,GACtF,KAAc,EAAa,IAAO,IAAA,IAAA,IAA+B,EAAW,EAAc,CAAC;KAC9F;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,CAAC;EACF;EACA"}

package/examples/backdrop-demo.js

@@ -1,6 +1,6 @@
 "use client";
 import { Button as e } from "../ui/buttons/Button.js";
-import { t } from "../chunks/Backdrop.js";
+import { Backdrop as t } from "../ui/Backdrop.js";
 import { useState as n } from "react";
 import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region lib/examples/backdrop-demo.tsx

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

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

package/examples/layer-buttons-demo.js

@@ -0,0 +1,43 @@
+"use client";
+import { Button as e } from "../ui/buttons/Button.js";
+import { t } from "../chunks/Layer.js";
+import { useState as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region lib/examples/layer-buttons-demo.tsx
+function o() {
+	let [o, s] = n(!1), [c, l] = n(1), u = () => {
+		s(!1), l(1);
+	};
+	return /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i(e, {
+		onClick: () => s(!0),
+		children: "Book an activity"
+	}), /* @__PURE__ */ i(t, {
+		heading: `Step ${c} of 2`,
+		isOpen: o,
+		onClose: u,
+		leftButton: c > 1 ? {
+			label: "Previous step",
+			icon: "ArrowDefaultLeft",
+			onClick: () => l(1)
+		} : void 0,
+		rightButton: {
+			label: "Close",
+			icon: "CrossDefault",
+			onClick: u
+		},
+		children: /* @__PURE__ */ i("div", {
+			className: "space-y-20 p-20",
+			children: c === 1 ? /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("p", { children: "Choose an activity for your stay." }), /* @__PURE__ */ i(e, {
+				onClick: () => l(2),
+				children: "Continue"
+			})] }) : /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("p", { children: "Pick a time slot. The back arrow returns to the previous step." }), /* @__PURE__ */ i(e, {
+				onClick: u,
+				children: "Confirm"
+			})] })
+		})
+	})] });
+}
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=layer-buttons-demo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layer-buttons-demo.js","names":[],"sources":["../../lib/examples/layer-buttons-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 LayerButtonsDemo() {\n  const [isOpen, setIsOpen] = useState(false);\n  const [step, setStep] = useState(1);\n\n  const close = () => {\n    setIsOpen(false);\n    setStep(1);\n  };\n\n  return (\n    <div>\n      <Button onClick={() => setIsOpen(true)}>Book an activity</Button>\n      <Layer\n        heading={`Step ${step} of 2`}\n        isOpen={isOpen}\n        onClose={close}\n        leftButton={\n          step > 1\n            ? { label: 'Previous step', icon: 'ArrowDefaultLeft', onClick: () => setStep(1) }\n            : undefined\n        }\n        rightButton={{ label: 'Close', icon: 'CrossDefault', onClick: close }}\n      >\n        <div className=\"space-y-20 p-20\">\n          {step === 1 ? (\n            <>\n              <p>Choose an activity for your stay.</p>\n              <Button onClick={() => setStep(2)}>Continue</Button>\n            </>\n          ) : (\n            <>\n              <p>Pick a time slot. The back arrow returns to the previous step.</p>\n              <Button onClick={close}>Confirm</Button>\n            </>\n          )}\n        </div>\n      </Layer>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAmB;CACzC,IAAM,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,CAAC,GAAM,KAAW,EAAS,EAAE,EAE7B,UAAc;AAElB,EADA,EAAU,GAAM,EAChB,EAAQ,EAAE;;AAGZ,QACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EAAQ,eAAe,EAAU,GAAK;YAAE;EAAyB,CAAA,EACjE,kBAAC,GAAD;EACE,SAAS,QAAQ,EAAK;EACd;EACR,SAAS;EACT,YACE,IAAO,IACH;GAAE,OAAO;GAAiB,MAAM;GAAoB,eAAe,EAAQ,EAAA;GAAI,GAC/E,KAAA;EAEN,aAAa;GAAE,OAAO;GAAS,MAAM;GAAgB,SAAS;GAAO;YAErE,kBAAC,OAAD;GAAK,WAAU;aACZ,MAAS,IACR,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,KAAD,EAAA,UAAG,qCAAqC,CAAA,EACxC,kBAAC,GAAD;IAAQ,eAAe,EAAQ,EAAE;cAAE;IAAiB,CAAA,CACnD,EAAA,CAAA,GAEH,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,KAAD,EAAA,UAAG,kEAAkE,CAAA,EACrE,kBAAC,GAAD;IAAQ,SAAS;cAAO;IAAgB,CAAA,CACvC,EAAA,CAAA;GAED,CAAA;EACA,CAAA,CACJ,EAAA,CAAA"}

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.4",
+  "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/Layer.d.ts

@@ -0,0 +1,72 @@
+import { ComponentProps, FunctionComponent, ReactNode, RefObject } from 'react';
+import { FocusOn } from 'react-focus-on';
+import { LayerHeaderProps } from './LayerHeader';
+import { PortalProps } from './Portal';
+declare const ANIMATIONS: {
+    readonly scale: {
+        readonly from: "scale-[0.167] opacity-0";
+        readonly to: "scale-100 opacity-100";
+    };
+    readonly slide: {
+        readonly from: "translate-x-full rtl:-translate-x-full opacity-0";
+        readonly to: "translate-x-0 opacity-100";
+    };
+};
+export interface LayerProps extends ComponentProps<'div'> {
+    /**
+     * How the layer enters and leaves the screen
+     * @default 'slide'
+     */
+    animation?: keyof typeof ANIMATIONS;
+    /**
+     * Traps the focus, locks the page scroll and closes on Escape / outside click while open
+     * @default true
+     */
+    hasFocusTrap?: boolean;
+    /**
+     * Keeps pinch zoom available while the page scroll is locked
+     * @default true
+     */
+    hasPinchZoom?: ComponentProps<typeof FocusOn>['allowPinchZoom'];
+    /**
+     * Content of the header heading, also used as the accessible name of the dialog
+     */
+    heading: ReactNode;
+    /**
+     * Level of the header heading tag
+     * @default 1
+     */
+    hLevel?: LayerHeaderProps['hLevel'];
+    /**
+     * Whether the layer is displayed
+     */
+    isOpen: boolean;
+    /**
+     * Round button pinned to the inline start of the header
+     */
+    leftButton?: LayerHeaderProps['leftButton'];
+    /**
+     * Called on Escape or on a click outside the layer
+     */
+    onClose: () => void;
+    /**
+     * Element the `scale` animation grows from and shrinks back to
+     */
+    origin?: RefObject<HTMLElement | null>;
+    /**
+     * Pins the layer to the visual viewport, so the iOS keyboard does not push it off-screen
+     * @default false
+     */
+    pinToVisualViewport?: boolean;
+    /**
+     * Round button pinned to the inline end of the header
+     */
+    rightButton?: LayerHeaderProps['rightButton'];
+    /**
+     * Id of the element the layer is rendered in, created at the end of the `body` when missing
+     * @default 'portal'
+     */
+    target?: PortalProps['target'];
+}
+export declare const Layer: FunctionComponent<LayerProps>;
+export {};

package/ui/Layer.js

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

package/ui/LayerHeader.d.ts

@@ -0,0 +1,33 @@
+import { ComponentProps, FunctionComponent, MouseEventHandler } from 'react';
+import { ButtonProps as Btn } from './buttons/Button.type';
+import { HeadingProps } from './heading/Heading';
+export interface LayerHeaderButtonProps extends Omit<ComponentProps<'button'>, 'color' | 'onClick'>, Omit<Btn, 'variant' | 'theme'> {
+    /**
+     * Icon displayed in the round button
+     */
+    icon: Exclude<Btn['icon'], undefined>;
+    /**
+     * Accessible name of the button (rendered as `aria-label`)
+     */
+    label: string;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+}
+export interface LayerHeaderProps extends ComponentProps<'header'> {
+    /**
+     * Overrides the level announced to assistive technologies, without changing the tag
+     */
+    hAriaLevel?: number;
+    /**
+     * Level of the heading tag (h1 to h6)
+     */
+    hLevel?: HeadingProps['level'];
+    /**
+     * Round button pinned to the inline start of the header (e.g. a "back" arrow)
+     */
+    leftButton?: LayerHeaderButtonProps;
+    /**
+     * Round button pinned to the inline end of the header (e.g. a "close" cross)
+     */
+    rightButton?: LayerHeaderButtonProps;
+}
+export declare const LayerHeader: FunctionComponent<LayerHeaderProps>;