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

package/ui/LayerHeader.js

@@ -0,0 +1,45 @@
+import { t as e } from "../chunks/clsx.js";
+import { Button as t } from "./buttons/Button.js";
+import { Heading as n } from "./heading/Heading.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/ui/LayerHeader.tsx
+var a = ({ children: a, className: o, hAriaLevel: s, hLevel: c = 1, id: l, leftButton: u, rightButton: d, ...f }) => {
+	let { label: p, ...m } = u || {}, { label: h, ...g } = d || {};
+	return /* @__PURE__ */ i("header", {
+		...f,
+		className: e("relative flex min-h-64 items-center justify-between gap-8 overscroll-contain bg-white p-8 lg:px-20", o),
+		children: [
+			u && /* @__PURE__ */ r(t, {
+				"aria-describedby": l,
+				...m,
+				"aria-label": p,
+				className: "absolute start-0 m-8 lg:mx-20",
+				color: "black",
+				size: "medium",
+				theme: "outline",
+				variant: "circle"
+			}),
+			/* @__PURE__ */ r(n, {
+				"aria-level": s,
+				className: "text-b3 lg:text-b2 flex-1 px-56 text-center font-semibold",
+				id: l,
+				level: c,
+				children: a
+			}),
+			d && /* @__PURE__ */ r(t, {
+				"aria-describedby": l,
+				...g,
+				"aria-label": h,
+				className: "absolute end-0 m-8 lg:mx-20",
+				color: "black",
+				size: "medium",
+				theme: "outline",
+				variant: "circle"
+			})
+		]
+	});
+};
+//#endregion
+export { a as LayerHeader };
+
+//# sourceMappingURL=LayerHeader.js.map

package/ui/LayerHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayerHeader.js","names":[],"sources":["../../lib/ui/LayerHeader.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentProps, FunctionComponent, MouseEventHandler } from 'react';\n\nimport { Button } from './buttons/Button';\nimport type { ButtonProps as Btn } from './buttons/Button.type';\nimport { Heading, type HeadingProps } from './heading/Heading';\n\nexport interface LayerHeaderButtonProps\n  extends Omit<ComponentProps<'button'>, 'color' | 'onClick'>,\n    Omit<Btn, 'variant' | 'theme'> {\n  /**\n   * Icon displayed in the round button\n   */\n  icon: Exclude<Btn['icon'], undefined>;\n  /**\n   * Accessible name of the button (rendered as `aria-label`)\n   */\n  label: string;\n  onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface LayerHeaderProps extends ComponentProps<'header'> {\n  /**\n   * Overrides the level announced to assistive technologies, without changing the tag\n   */\n  hAriaLevel?: number;\n  /**\n   * Level of the heading tag (h1 to h6)\n   */\n  hLevel?: HeadingProps['level'];\n  /**\n   * Round button pinned to the inline start of the header (e.g. a \"back\" arrow)\n   */\n  leftButton?: LayerHeaderButtonProps;\n  /**\n   * Round button pinned to the inline end of the header (e.g. a \"close\" cross)\n   */\n  rightButton?: LayerHeaderButtonProps;\n}\n\nexport const LayerHeader: FunctionComponent<LayerHeaderProps> = ({\n  children,\n  className,\n  hAriaLevel,\n  hLevel = 1,\n  id,\n  leftButton,\n  rightButton,\n  ...attrs\n}) => {\n  const { label: leftLabel, ...leftBtn } = leftButton || {};\n  const { label: rightLabel, ...rightBtn } = rightButton || {};\n\n  return (\n    <header\n      {...attrs}\n      className={clsx(\n        'relative flex min-h-64 items-center justify-between gap-8 overscroll-contain bg-white p-8 lg:px-20',\n        className,\n      )}\n    >\n      {leftButton && (\n        <Button\n          aria-describedby={id}\n          {...leftBtn}\n          aria-label={leftLabel}\n          className=\"absolute start-0 m-8 lg:mx-20\"\n          color=\"black\"\n          size=\"medium\"\n          theme=\"outline\"\n          variant=\"circle\"\n        />\n      )}\n      <Heading\n        aria-level={hAriaLevel}\n        className=\"text-b3 lg:text-b2 flex-1 px-56 text-center font-semibold\"\n        id={id}\n        level={hLevel}\n      >\n        {children}\n      </Heading>\n      {rightButton && (\n        <Button\n          aria-describedby={id}\n          {...rightBtn}\n          aria-label={rightLabel}\n          className=\"absolute end-0 m-8 lg:mx-20\"\n          color=\"black\"\n          size=\"medium\"\n          theme=\"outline\"\n          variant=\"circle\"\n        />\n      )}\n    </header>\n  );\n};\n"],"mappings":";;;;;AAwCA,IAAa,KAAoD,EAC/D,aACA,cACA,eACA,YAAS,GACT,OACA,eACA,gBACA,GAAG,QACC;CACJ,IAAM,EAAE,OAAO,GAAW,GAAG,MAAY,KAAc,EAAE,EACnD,EAAE,OAAO,GAAY,GAAG,MAAa,KAAe,EAAE;AAE5D,QACE,kBAAC,UAAD;EACE,GAAI;EACJ,WAAW,EACT,sGACA,EACD;YALH;GAOG,KACC,kBAAC,GAAD;IACE,oBAAkB;IAClB,GAAI;IACJ,cAAY;IACZ,WAAU;IACV,OAAM;IACN,MAAK;IACL,OAAM;IACN,SAAQ;IACR,CAAA;GAEJ,kBAAC,GAAD;IACE,cAAY;IACZ,WAAU;IACN;IACJ,OAAO;IAEN;IACO,CAAA;GACT,KACC,kBAAC,GAAD;IACE,oBAAkB;IAClB,GAAI;IACJ,cAAY;IACZ,WAAU;IACV,OAAM;IACN,MAAK;IACL,OAAM;IACN,SAAQ;IACR,CAAA;GAEG"}

package/ui/Loader.js

@@ -1,6 +1,7 @@
 "use client";
 import { t as e } from "../chunks/clsx.js";
-import { n as t, t as n } from "../chunks/Backdrop.js";
+import { t } from "../chunks/useTransitionState.js";
+import { Backdrop as n } from "./Backdrop.js";
 import { useEffect as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region lib/ui/Loader.tsx

package/ui/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","names":[],"sources":["../../lib/ui/Loader.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ComponentProps, type FunctionComponent } from 'react';\nimport { useTransitionState } from 'react-transition-state';\n\nimport { Backdrop } from './Backdrop';\n\nexport interface LoaderProps {\n  isVisible?: boolean;\n  label?: string;\n  portalId?: ComponentProps<typeof Backdrop>['target'];\n}\n\nconst loaderSVG = (\n  <svg viewBox=\"0 0 140 140\" width={140}>\n    <defs>\n      <path\n        id=\"a\"\n        d=\"m70 74.1-9.6 9.6 9.6 9.5 9.5-9.5L70 74Zm6.6-70.7c-.7-2.7-6.9 1.1-20.1 13 5.3 5.8 7.9 2.5 12.1 1 3.4 6.4 4.8 35.4-17.3 44 .6-29.1.9-60.4.9-60.4a1 1 0 0 0-1.3-1c-6.1.8-17 11.6-25.3 20.6 4.6 7.5 10.4.8 15-1.1 0 1.2-1 22.8-.6 44.7C17.3 66 21 19.5 22.2 13.6 22.8 8.9 7.6 19.3 0 26.4c2.4 4.3 5.7 3.4 10 1.8C8.3 49 23 67.9 40 67.5c.6 21.4 2.9 42.2 9 43.7 1 .2 1.6-21.8 2-46.1C92 52.4 76.5 3.4 76.5 3.4\"\n      />\n    </defs>\n    <g fill=\"none\" fillRule=\"evenodd\" transform=\"translate(27 14)\">\n      <mask id=\"b\" fill=\"#fff\">\n        <use xlinkHref=\"#a\" />\n      </mask>\n      <g mask=\"url(#b)\">\n        <path\n          fill=\"#1E2643\"\n          fillRule=\"nonzero\"\n          d=\"M-83.1-23s6.7 3 11.2 3c4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3C.2-20 2.3-23 7-23c4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 11.3-3 11.3-3v138H-83V-23Z\"\n          className=\"animate-wave\"\n        />\n        <path\n          fill=\"#1E2643\"\n          fillRule=\"nonzero\"\n          d=\"m70 74.1.7-.7-.7-.7-.7.7.7.7Zm-9.6 9.6-.7-.7-.7.7.7.7.7-.7Zm9.6 9.5-.7.7.7.7.7-.7-.7-.7Zm9.5-9.5.7.7.7-.7-.7-.7-.7.7Zm-23-67.3-.7-.7-.7.6.7.8.7-.7Zm12.1 1 1-.5-.5-.8-.8.3.3 1Zm-17.3 44h-1V63l1.4-.6-.4-1ZM52.2 1h1-1Zm-1.3-1v1h.2L51 0ZM25.6 20.6l-.7-.7-.5.5.4.7.8-.5Zm15-1.1h1V18l-1.4.5.4 1ZM40 64.2l.1 1h1v-1h-1ZM22.2 13.6l1 .2-1-.2ZM0 26.4l-.7-.8-.6.6.4.7.9-.5Zm10 1.8h1v-1.5l-1.4.6.3.9Zm30 39.3h1v-1h-1v1Zm9 43.7.3-1-.2 1Zm2-46.1-.2-1-.7.2v.8h1Zm18.2 8.3L59.7 83l1.4 1.4 9.6-9.6-1.4-1.4Zm-9.6 11 9.6 9.5 1.4-1.4L61 83l-1.4 1.4Zm11 9.5 9.5-9.5-1.4-1.4-9.5 9.5 1.4 1.4Zm9.5-11-9.5-9.5-1.4 1.4 9.5 9.6 1.4-1.4ZM77.6 3.2a2 2 0 0 0-1-1.3c-.6-.3-1.2-.3-1.8-.2-1 .2-2.4 1-4.1 2-3.4 2.1-8.2 6.1-14.9 12l1.4 1.6c6.6-6 11.4-9.9 14.6-12a11 11 0 0 1 3.4-1.6h.4l2-.5Zm-21.8 14c1.3 1.5 2.6 2.5 3.8 3a6 6 0 0 0 3.5.5c1-.1 2-.6 3-1 1-.5 1.9-1 2.9-1.3l-.7-1.9c-1.1.4-2.2 1-3 1.4l-2.5.9a4 4 0 0 1-2.4-.4 12 12 0 0 1-3.2-2.6l-1.4 1.4Zm12 .7c.7 1.5 1.4 4.3 1.7 8 .2 3.7 0 8-1 12.6-2 8.9-7 18-17.6 22.2l.8 1.8a31.3 31.3 0 0 0 18.8-23.6 51 51 0 0 0 1-13.1c-.3-3.8-1-7-2-8.8l-1.7 1ZM52.3 61.5a5227.3 5227.3 0 0 0 .9-60.1V1h-2v1.3a4268.6 4268.6 0 0 1-1 59l2 .1ZM53.2 1c0-.3 0-.6-.2-.9l-1.8 1h2ZM53 .1a2 2 0 0 0-.6-.7L51.2 1 53 .1Zm-.6-.7a2 2 0 0 0-.9-.4l-.3 2 1.2-1.6Zm-.9-.4a2 2 0 0 0-1 0l.7 2 .3-2Zm-.8 0C49-.6 47 .3 45 1.6s-4.3 3-6.6 5c-4.5 4-9.3 8.9-13.5 13.4l1.5 1.4c4.1-4.5 8.9-9.4 13.3-13.3C42 6 44.1 4.4 46 3.2c2-1.3 3.7-2 5-2.2l-.3-2Zm-26 22c1.3 2.1 2.7 3.3 4.3 3.8a7 7 0 0 0 4.5-.3c1.4-.5 2.8-1.4 4-2.1 1.3-.8 2.4-1.6 3.5-2l-.8-1.9-3.7 2.2c-1.3.7-2.5 1.5-3.7 2-1.2.4-2.3.5-3.2.2-1-.3-2-1.1-3.1-2.8l-1.7 1Zm15-1.5c0 1.1-1.2 22.8-.7 44.7h2c-.5-22 .6-43.4.6-44.7h-2Zm.2 43.7c-5.2.4-9-2-11.6-6-2.7-4-4.3-9.6-5.2-15.6-1.8-12-.5-25 .1-27.8l-2-.4c-.6 3-1.9 16.3-.1 28.5.9 6.1 2.6 12.1 5.5 16.5a14 14 0 0 0 13.5 6.8l-.2-2ZM23.2 13.7l-.1-1.2a2 2 0 0 0-1-1c-.7-.2-1.6 0-2.3.1a28 28 0 0 0-6.2 3.1 106 106 0 0 0-14.3 11L.7 27c3.7-3.5 9.4-7.8 14-10.7a26.4 26.4 0 0 1 6.4-3h.3l-.2-.1v.2l2 .2ZM-.8 27c.6 1.1 1.3 2 2.2 2.6a5 5 0 0 0 2.8 1c2 .1 4-.6 6-1.4l-.6-1.8c-2.1.8-3.8 1.3-5.2 1.2-.7 0-1.3-.2-1.9-.6-.5-.4-1-1-1.6-2l-1.8 1Zm9.6 1a41.8 41.8 0 0 0 8.4 28.3c5.7 7.5 14 12.3 22.9 12v-2a26 26 0 0 1-21.3-11.2 40 40 0 0 1-8-27H9ZM39 67.4c.3 10.7 1 21.3 2.5 29.5.7 4 1.6 7.5 2.7 10.1 1.1 2.6 2.6 4.6 4.7 5l.4-2c-1-.2-2.2-1.3-3.2-3.8-1-2.3-2-5.7-2.7-9.7-1.4-8-2-18.5-2.4-29.1h-2Zm9.8 44.6c.7.2 1.1-.3 1.2-.4l.2-.4.2-.9.3-2.8.5-10.2.9-32.3h-2a1859.2 1859.2 0 0 1-1.4 42.3 38 38 0 0 1-.4 3.2c0-.1.4-.6 1-.4l-.5 2Zm2.6-46a39.2 39.2 0 0 0 21.8-15.4 46 46 0 0 0 7-21.1 73 73 0 0 0-2.6-25.9l-.1-.4v-.1l-1 .2-1 .3a14.2 14.2 0 0 1 .2.6 51 51 0 0 1 1.6 7.1 71 71 0 0 1 .9 18A37.2 37.2 0 0 1 50.8 64l.6 2Z\"\n          mask=\"url(#a)\"\n        />\n      </g>\n    </g>\n  </svg>\n);\n\nexport const Loader: FunctionComponent<LoaderProps> = ({ isVisible, label, portalId }) => {\n  const [{ status, isMounted }, toggle] = useTransitionState({\n    timeout: { enter: 250, exit: 250 },\n    mountOnEnter: true,\n    unmountOnExit: true,\n    preEnter: true,\n  });\n\n  useEffect(() => {\n    toggle(isVisible);\n  }, [isVisible, toggle]);\n\n  const entering = status === 'preEnter' || status === 'entering';\n  const exiting = status === 'exiting';\n\n  return (\n    <Backdrop isVisible={isVisible} target={portalId} sweep>\n      {isMounted && (\n        <div\n          className={clsx('flex flex-col items-center transition-all duration-500', {\n            '-translate-x-full opacity-0': entering,\n            'translate-x-full opacity-100': exiting,\n          })}\n          role=\"alert\"\n        >\n          <div\n            className=\"relative isolate\"\n            style={{\n              maskImage: `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cellipse cx='1' cy='1' rx='1' ry='1'/%3E%3C/svg%3E\")`,\n              WebkitMaskImage: `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cellipse cx='1' cy='1' rx='1' ry='1'/%3E%3C/svg%3E\")`,\n            }}\n          >\n            {loaderSVG}\n          </div>\n          <div\n            className={clsx(\n              'mx-auto max-w-[320px] px-20 text-center text-b3 transition-all delay-100 duration-400',\n              {\n                '-translate-x-full opacity-0': entering,\n                'translate-x-full opacity-100': exiting,\n              },\n            )}\n          >\n            {label}\n          </div>\n        </div>\n      )}\n    </Backdrop>\n  );\n};\n"],"mappings":";;;;;;AAcA,IAAM,IACJ,kBAAC,OAAD;CAAK,SAAQ;CAAc,OAAO;WAAlC,CACE,kBAAC,QAAD,EAAA,UACE,kBAAC,QAAD;EACE,IAAG;EACH,GAAE;EACF,CAAA,EACG,CAAA,EACP,kBAAC,KAAD;EAAG,MAAK;EAAO,UAAS;EAAU,WAAU;YAA5C,CACE,kBAAC,QAAD;GAAM,IAAG;GAAI,MAAK;aAChB,kBAAC,OAAD,EAAK,WAAU,MAAO,CAAA;GACjB,CAAA,EACP,kBAAC,KAAD;GAAG,MAAK;aAAR,CACE,kBAAC,QAAD;IACE,MAAK;IACL,UAAS;IACT,GAAE;IACF,WAAU;IACV,CAAA,EACF,kBAAC,QAAD;IACE,MAAK;IACL,UAAS;IACT,GAAE;IACF,MAAK;IACL,CAAA,CAAA;;;IAMG,KAA0C,EAAE,cAAW,UAAO,kBAAe;CACxF,IAAM,CAAC,EAAE,WAAQ,gBAAa,KAAU,EAAmB;EACzD,SAAS;GAAE,OAAO;GAAK,MAAM;GAAK;EAClC,cAAc;EACd,eAAe;EACf,UAAU;EACX,CAAC;AAEF,SAAgB;AACd,IAAO,EAAU;IAChB,CAAC,GAAW,EAAO,CAAC;CAEvB,IAAM,IAAW,MAAW,cAAc,MAAW,YAC/C,IAAU,MAAW;AAE3B,QACE,kBAAC,GAAD;EAAqB;EAAW,QAAQ;EAAU,OAAA;YAC/C,KACC,kBAAC,OAAD;GACE,WAAW,EAAK,0DAA0D;IACxE,+BAA+B;IAC/B,gCAAgC;IACjC,CAAC;GACF,MAAK;aALP,CAOE,kBAAC,OAAD;IACE,WAAU;IACV,OAAO;KACL,WAAW;KACX,iBAAiB;KAClB;cAEA;IACG,CAAA,EACN,kBAAC,OAAD;IACE,WAAW,EACT,yFACA;KACE,+BAA+B;KAC/B,gCAAgC;KACjC,CACF;cAEA;IACG,CAAA,CAAA;;EAGD,CAAA"}
+{"version":3,"file":"Loader.js","names":[],"sources":["../../lib/ui/Loader.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ComponentProps, type FunctionComponent } from 'react';\nimport { useTransitionState } from 'react-transition-state';\n\nimport { Backdrop } from './Backdrop';\n\nexport interface LoaderProps {\n  isVisible?: boolean;\n  label?: string;\n  portalId?: ComponentProps<typeof Backdrop>['target'];\n}\n\nconst loaderSVG = (\n  <svg viewBox=\"0 0 140 140\" width={140}>\n    <defs>\n      <path\n        id=\"a\"\n        d=\"m70 74.1-9.6 9.6 9.6 9.5 9.5-9.5L70 74Zm6.6-70.7c-.7-2.7-6.9 1.1-20.1 13 5.3 5.8 7.9 2.5 12.1 1 3.4 6.4 4.8 35.4-17.3 44 .6-29.1.9-60.4.9-60.4a1 1 0 0 0-1.3-1c-6.1.8-17 11.6-25.3 20.6 4.6 7.5 10.4.8 15-1.1 0 1.2-1 22.8-.6 44.7C17.3 66 21 19.5 22.2 13.6 22.8 8.9 7.6 19.3 0 26.4c2.4 4.3 5.7 3.4 10 1.8C8.3 49 23 67.9 40 67.5c.6 21.4 2.9 42.2 9 43.7 1 .2 1.6-21.8 2-46.1C92 52.4 76.5 3.4 76.5 3.4\"\n      />\n    </defs>\n    <g fill=\"none\" fillRule=\"evenodd\" transform=\"translate(27 14)\">\n      <mask id=\"b\" fill=\"#fff\">\n        <use xlinkHref=\"#a\" />\n      </mask>\n      <g mask=\"url(#b)\">\n        <path\n          fill=\"#1E2643\"\n          fillRule=\"nonzero\"\n          d=\"M-83.1-23s6.7 3 11.2 3c4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3C.2-20 2.3-23 7-23c4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 11.3-3 11.3-3v138H-83V-23Z\"\n          className=\"animate-wave\"\n        />\n        <path\n          fill=\"#1E2643\"\n          fillRule=\"nonzero\"\n          d=\"m70 74.1.7-.7-.7-.7-.7.7.7.7Zm-9.6 9.6-.7-.7-.7.7.7.7.7-.7Zm9.6 9.5-.7.7.7.7.7-.7-.7-.7Zm9.5-9.5.7.7.7-.7-.7-.7-.7.7Zm-23-67.3-.7-.7-.7.6.7.8.7-.7Zm12.1 1 1-.5-.5-.8-.8.3.3 1Zm-17.3 44h-1V63l1.4-.6-.4-1ZM52.2 1h1-1Zm-1.3-1v1h.2L51 0ZM25.6 20.6l-.7-.7-.5.5.4.7.8-.5Zm15-1.1h1V18l-1.4.5.4 1ZM40 64.2l.1 1h1v-1h-1ZM22.2 13.6l1 .2-1-.2ZM0 26.4l-.7-.8-.6.6.4.7.9-.5Zm10 1.8h1v-1.5l-1.4.6.3.9Zm30 39.3h1v-1h-1v1Zm9 43.7.3-1-.2 1Zm2-46.1-.2-1-.7.2v.8h1Zm18.2 8.3L59.7 83l1.4 1.4 9.6-9.6-1.4-1.4Zm-9.6 11 9.6 9.5 1.4-1.4L61 83l-1.4 1.4Zm11 9.5 9.5-9.5-1.4-1.4-9.5 9.5 1.4 1.4Zm9.5-11-9.5-9.5-1.4 1.4 9.5 9.6 1.4-1.4ZM77.6 3.2a2 2 0 0 0-1-1.3c-.6-.3-1.2-.3-1.8-.2-1 .2-2.4 1-4.1 2-3.4 2.1-8.2 6.1-14.9 12l1.4 1.6c6.6-6 11.4-9.9 14.6-12a11 11 0 0 1 3.4-1.6h.4l2-.5Zm-21.8 14c1.3 1.5 2.6 2.5 3.8 3a6 6 0 0 0 3.5.5c1-.1 2-.6 3-1 1-.5 1.9-1 2.9-1.3l-.7-1.9c-1.1.4-2.2 1-3 1.4l-2.5.9a4 4 0 0 1-2.4-.4 12 12 0 0 1-3.2-2.6l-1.4 1.4Zm12 .7c.7 1.5 1.4 4.3 1.7 8 .2 3.7 0 8-1 12.6-2 8.9-7 18-17.6 22.2l.8 1.8a31.3 31.3 0 0 0 18.8-23.6 51 51 0 0 0 1-13.1c-.3-3.8-1-7-2-8.8l-1.7 1ZM52.3 61.5a5227.3 5227.3 0 0 0 .9-60.1V1h-2v1.3a4268.6 4268.6 0 0 1-1 59l2 .1ZM53.2 1c0-.3 0-.6-.2-.9l-1.8 1h2ZM53 .1a2 2 0 0 0-.6-.7L51.2 1 53 .1Zm-.6-.7a2 2 0 0 0-.9-.4l-.3 2 1.2-1.6Zm-.9-.4a2 2 0 0 0-1 0l.7 2 .3-2Zm-.8 0C49-.6 47 .3 45 1.6s-4.3 3-6.6 5c-4.5 4-9.3 8.9-13.5 13.4l1.5 1.4c4.1-4.5 8.9-9.4 13.3-13.3C42 6 44.1 4.4 46 3.2c2-1.3 3.7-2 5-2.2l-.3-2Zm-26 22c1.3 2.1 2.7 3.3 4.3 3.8a7 7 0 0 0 4.5-.3c1.4-.5 2.8-1.4 4-2.1 1.3-.8 2.4-1.6 3.5-2l-.8-1.9-3.7 2.2c-1.3.7-2.5 1.5-3.7 2-1.2.4-2.3.5-3.2.2-1-.3-2-1.1-3.1-2.8l-1.7 1Zm15-1.5c0 1.1-1.2 22.8-.7 44.7h2c-.5-22 .6-43.4.6-44.7h-2Zm.2 43.7c-5.2.4-9-2-11.6-6-2.7-4-4.3-9.6-5.2-15.6-1.8-12-.5-25 .1-27.8l-2-.4c-.6 3-1.9 16.3-.1 28.5.9 6.1 2.6 12.1 5.5 16.5a14 14 0 0 0 13.5 6.8l-.2-2ZM23.2 13.7l-.1-1.2a2 2 0 0 0-1-1c-.7-.2-1.6 0-2.3.1a28 28 0 0 0-6.2 3.1 106 106 0 0 0-14.3 11L.7 27c3.7-3.5 9.4-7.8 14-10.7a26.4 26.4 0 0 1 6.4-3h.3l-.2-.1v.2l2 .2ZM-.8 27c.6 1.1 1.3 2 2.2 2.6a5 5 0 0 0 2.8 1c2 .1 4-.6 6-1.4l-.6-1.8c-2.1.8-3.8 1.3-5.2 1.2-.7 0-1.3-.2-1.9-.6-.5-.4-1-1-1.6-2l-1.8 1Zm9.6 1a41.8 41.8 0 0 0 8.4 28.3c5.7 7.5 14 12.3 22.9 12v-2a26 26 0 0 1-21.3-11.2 40 40 0 0 1-8-27H9ZM39 67.4c.3 10.7 1 21.3 2.5 29.5.7 4 1.6 7.5 2.7 10.1 1.1 2.6 2.6 4.6 4.7 5l.4-2c-1-.2-2.2-1.3-3.2-3.8-1-2.3-2-5.7-2.7-9.7-1.4-8-2-18.5-2.4-29.1h-2Zm9.8 44.6c.7.2 1.1-.3 1.2-.4l.2-.4.2-.9.3-2.8.5-10.2.9-32.3h-2a1859.2 1859.2 0 0 1-1.4 42.3 38 38 0 0 1-.4 3.2c0-.1.4-.6 1-.4l-.5 2Zm2.6-46a39.2 39.2 0 0 0 21.8-15.4 46 46 0 0 0 7-21.1 73 73 0 0 0-2.6-25.9l-.1-.4v-.1l-1 .2-1 .3a14.2 14.2 0 0 1 .2.6 51 51 0 0 1 1.6 7.1 71 71 0 0 1 .9 18A37.2 37.2 0 0 1 50.8 64l.6 2Z\"\n          mask=\"url(#a)\"\n        />\n      </g>\n    </g>\n  </svg>\n);\n\nexport const Loader: FunctionComponent<LoaderProps> = ({ isVisible, label, portalId }) => {\n  const [{ status, isMounted }, toggle] = useTransitionState({\n    timeout: { enter: 250, exit: 250 },\n    mountOnEnter: true,\n    unmountOnExit: true,\n    preEnter: true,\n  });\n\n  useEffect(() => {\n    toggle(isVisible);\n  }, [isVisible, toggle]);\n\n  const entering = status === 'preEnter' || status === 'entering';\n  const exiting = status === 'exiting';\n\n  return (\n    <Backdrop isVisible={isVisible} target={portalId} sweep>\n      {isMounted && (\n        <div\n          className={clsx('flex flex-col items-center transition-all duration-500', {\n            '-translate-x-full opacity-0': entering,\n            'translate-x-full opacity-100': exiting,\n          })}\n          role=\"alert\"\n        >\n          <div\n            className=\"relative isolate\"\n            style={{\n              maskImage: `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cellipse cx='1' cy='1' rx='1' ry='1'/%3E%3C/svg%3E\")`,\n              WebkitMaskImage: `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cellipse cx='1' cy='1' rx='1' ry='1'/%3E%3C/svg%3E\")`,\n            }}\n          >\n            {loaderSVG}\n          </div>\n          <div\n            className={clsx(\n              'mx-auto max-w-[320px] px-20 text-center text-b3 transition-all delay-100 duration-400',\n              {\n                '-translate-x-full opacity-0': entering,\n                'translate-x-full opacity-100': exiting,\n              },\n            )}\n          >\n            {label}\n          </div>\n        </div>\n      )}\n    </Backdrop>\n  );\n};\n"],"mappings":";;;;;;;AAcA,IAAM,IACJ,kBAAC,OAAD;CAAK,SAAQ;CAAc,OAAO;WAAlC,CACE,kBAAC,QAAD,EAAA,UACE,kBAAC,QAAD;EACE,IAAG;EACH,GAAE;EACF,CAAA,EACG,CAAA,EACP,kBAAC,KAAD;EAAG,MAAK;EAAO,UAAS;EAAU,WAAU;YAA5C,CACE,kBAAC,QAAD;GAAM,IAAG;GAAI,MAAK;aAChB,kBAAC,OAAD,EAAK,WAAU,MAAO,CAAA;GACjB,CAAA,EACP,kBAAC,KAAD;GAAG,MAAK;aAAR,CACE,kBAAC,QAAD;IACE,MAAK;IACL,UAAS;IACT,GAAE;IACF,WAAU;IACV,CAAA,EACF,kBAAC,QAAD;IACE,MAAK;IACL,UAAS;IACT,GAAE;IACF,MAAK;IACL,CAAA,CAAA;;;IAMG,KAA0C,EAAE,cAAW,UAAO,kBAAe;CACxF,IAAM,CAAC,EAAE,WAAQ,gBAAa,KAAU,EAAmB;EACzD,SAAS;GAAE,OAAO;GAAK,MAAM;GAAK;EAClC,cAAc;EACd,eAAe;EACf,UAAU;EACX,CAAC;AAEF,SAAgB;AACd,IAAO,EAAU;IAChB,CAAC,GAAW,EAAO,CAAC;CAEvB,IAAM,IAAW,MAAW,cAAc,MAAW,YAC/C,IAAU,MAAW;AAE3B,QACE,kBAAC,GAAD;EAAqB;EAAW,QAAQ;EAAU,OAAA;YAC/C,KACC,kBAAC,OAAD;GACE,WAAW,EAAK,0DAA0D;IACxE,+BAA+B;IAC/B,gCAAgC;IACjC,CAAC;GACF,MAAK;aALP,CAOE,kBAAC,OAAD;IACE,WAAU;IACV,OAAO;KACL,WAAW;KACX,iBAAiB;KAClB;cAEA;IACG,CAAA,EACN,kBAAC,OAAD;IACE,WAAW,EACT,yFACA;KACE,+BAA+B;KAC/B,gCAAgC;KACjC,CACF;cAEA;IACG,CAAA,CAAA;;EAGD,CAAA"}

package/ui/Popin.d.ts

@@ -14,6 +14,12 @@ export interface PopinProps {
     bodyClassName?: string;
     showCloseButton?: boolean;
     target?: BackdropProps['target'];
+    /**
+     * Whether the popin can be dismissed via ESC, backdrop click, or close button.
+     * When false, only programmatic closing via onClose is allowed.
+     * @default true
+     */
+    dismissable?: boolean;
     /**
      * @deprecated use popinFooter slot instead
      */

package/ui/Popin.js

@@ -1,6 +1,6 @@
 import { t as e } from "../chunks/clsx.js";
 import { Button as t } from "./buttons/Button.js";
-import { t as n } from "../chunks/Backdrop.js";
+import { Backdrop as n } from "./Backdrop.js";
 import { twMerge as r } from "./helpers/twMerge.js";
 import { useSlots as i } from "./hooks/useSlots.js";
 import { useRef as a } from "react";
@@ -13,16 +13,17 @@ var c = ({ closeLabel: e, onClose: n }) => /* @__PURE__ */ o(t, {
 	className: "mx-auto",
 	"aria-label": e,
 	onClick: n
-}), l = ({ title: t, children: l, closeLabel: u, onClose: d, isVisible: f, className: p = "sm:w-360", bodyClassName: m, Footer: h = c }) => {
-	let { children: g, popinFooter: _ } = i(l, ["popinFooter"]), v = a(f), y = v.current, b = !f && y;
-	return v.current = f, /* @__PURE__ */ o(n, {
+}), l = ({ title: t, children: l, closeLabel: u, onClose: d, isVisible: f, className: p = "sm:w-360", bodyClassName: m, Footer: h = c, dismissable: g = !0 }) => {
+	let { children: _, popinFooter: v } = i(l, ["popinFooter"]), y = a(f), b = y.current, x = !f && b;
+	return y.current = f, /* @__PURE__ */ o(n, {
 		isVisible: f,
-		onClose: d,
+		onClose: g ? d : void 0,
+		dismissable: g,
 		children: /* @__PURE__ */ o("div", {
 			className: r(e("border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white origin-center will-change[transform,opacity]", {
 				"animate-zoom-in": f,
-				"animate-zoom-out": !f && b,
-				"opacity-0 scale-90": !f && !b
+				"animate-zoom-out": !f && x,
+				"opacity-0 scale-90": !f && !x
 			}), p),
 			children: /* @__PURE__ */ s("div", {
 				className: r("text-center max-h-[90vh] flex flex-col p-40 gap-40", m),
@@ -33,13 +34,13 @@ var c = ({ closeLabel: e, onClose: n }) => /* @__PURE__ */ o(t, {
 					}),
 					/* @__PURE__ */ o("div", {
 						className: "text-start overflow-auto",
-						children: g
+						children: _
 					}),
-					!_?.length && h && /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(h, {
+					!v?.length && h && g && /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(h, {
 						closeLabel: u,
 						onClose: d
 					}) }),
-					_
+					v
 				]
 			})
 		})

package/ui/Popin.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popin.js","names":[],"sources":["../../lib/ui/Popin.tsx"],"sourcesContent":["import type { FunctionComponent, PropsWithChildren, ReactNode } from 'react';\nimport { useRef } from 'react';\nimport { twMerge } from './helpers/twMerge';\nimport { Backdrop, type BackdropProps } from './Backdrop';\nimport { Button } from './buttons/Button';\nimport clsx from 'clsx';\nimport { useSlots } from './hooks/useSlots';\n\nexport type ClosePopinCallback = () => void;\n\nexport interface PopinFooterProps {\n  closeLabel?: string;\n  onClose: ClosePopinCallback;\n}\n\nconst PopinFooter = ({ closeLabel, onClose }: PopinFooterProps) => {\n  return (\n    <Button\n      color=\"black\"\n      variant=\"circle\"\n      icon=\"CrossDefault\"\n      className=\"mx-auto\"\n      aria-label={closeLabel}\n      onClick={onClose}\n    />\n  );\n};\n\nexport interface PopinProps {\n  title?: ReactNode;\n  closeLabel?: string;\n  onClose: ClosePopinCallback;\n  isVisible: boolean;\n  className?: string;\n  bodyClassName?: string;\n  showCloseButton?: boolean;\n  target?: BackdropProps['target'];\n  /**\n   * @deprecated use popinFooter slot instead\n   */\n  Footer?: FunctionComponent<PopinFooterProps> | false;\n}\n\nexport const Popin: FunctionComponent<PropsWithChildren<PopinProps>> = ({\n  title,\n  children,\n  closeLabel,\n  onClose,\n  isVisible,\n  className = 'sm:w-360',\n  bodyClassName,\n  Footer = PopinFooter,\n}) => {\n  const { children: popinBody, popinFooter } = useSlots(children, ['popinFooter']);\n\n  // Prevent initial mount flash when closed: only animate leave if it was visible before\n  const wasVisibleRef = useRef(isVisible);\n  const wasVisible = wasVisibleRef.current;\n  const isLeaving = !isVisible && wasVisible;\n\n  // update ref for next render\n  wasVisibleRef.current = isVisible;\n  return (\n    <Backdrop isVisible={isVisible} onClose={onClose}>\n      <div\n        className={twMerge(\n          clsx(\n            'border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white origin-center will-change[transform,opacity]',\n            {\n              'animate-zoom-in': isVisible,\n              'animate-zoom-out': !isVisible && isLeaving,\n              'opacity-0 scale-90': !isVisible && !isLeaving,\n            },\n          ),\n          className,\n        )}\n      >\n        <div\n          className={twMerge('text-center max-h-[90vh] flex flex-col p-40 gap-40', bodyClassName)}\n        >\n          {title && <div className=\"text-h5 mt-0 -mb-20 text-start font-serif\">{title}</div>}\n          <div className=\"text-start overflow-auto\">{popinBody}</div>\n          {!popinFooter?.length && Footer && (\n            <div>\n              <Footer closeLabel={closeLabel} onClose={onClose} />\n            </div>\n          )}\n\n          {popinFooter}\n        </div>\n      </div>\n    </Backdrop>\n  );\n};\n"],"mappings":";;;;;;;;AAeA,IAAM,KAAe,EAAE,eAAY,iBAE/B,kBAAC,GAAD;CACE,OAAM;CACN,SAAQ;CACR,MAAK;CACL,WAAU;CACV,cAAY;CACZ,SAAS;CACT,CAAA,EAmBO,KAA2D,EACtE,UACA,aACA,eACA,YACA,cACA,eAAY,YACZ,kBACA,YAAS,QACL;CACJ,IAAM,EAAE,UAAU,GAAW,mBAAgB,EAAS,GAAU,CAAC,cAAc,CAAC,EAG1E,IAAgB,EAAO,EAAU,EACjC,IAAa,EAAc,SAC3B,IAAY,CAAC,KAAa;AAIhC,QADA,EAAc,UAAU,GAEtB,kBAAC,GAAD;EAAqB;EAAoB;YACvC,kBAAC,OAAD;GACE,WAAW,EACT,EACE,6HACA;IACE,mBAAmB;IACnB,oBAAoB,CAAC,KAAa;IAClC,sBAAsB,CAAC,KAAa,CAAC;IACtC,CACF,EACD,EACD;aAED,kBAAC,OAAD;IACE,WAAW,EAAQ,sDAAsD,EAAc;cADzF;KAGG,KAAS,kBAAC,OAAD;MAAK,WAAU;gBAA6C;MAAY,CAAA;KAClF,kBAAC,OAAD;MAAK,WAAU;gBAA4B;MAAgB,CAAA;KAC1D,CAAC,GAAa,UAAU,KACvB,kBAAC,OAAD,EAAA,UACE,kBAAC,GAAD;MAAoB;MAAqB;MAAW,CAAA,EAChD,CAAA;KAGP;KACG;;GACF,CAAA;EACG,CAAA"}
+{"version":3,"file":"Popin.js","names":[],"sources":["../../lib/ui/Popin.tsx"],"sourcesContent":["import type { FunctionComponent, PropsWithChildren, ReactNode } from 'react';\nimport { useRef } from 'react';\nimport { twMerge } from './helpers/twMerge';\nimport { Backdrop, type BackdropProps } from './Backdrop';\nimport { Button } from './buttons/Button';\nimport clsx from 'clsx';\nimport { useSlots } from './hooks/useSlots';\n\nexport type ClosePopinCallback = () => void;\n\nexport interface PopinFooterProps {\n  closeLabel?: string;\n  onClose: ClosePopinCallback;\n}\n\nconst PopinFooter = ({ closeLabel, onClose }: PopinFooterProps) => {\n  return (\n    <Button\n      color=\"black\"\n      variant=\"circle\"\n      icon=\"CrossDefault\"\n      className=\"mx-auto\"\n      aria-label={closeLabel}\n      onClick={onClose}\n    />\n  );\n};\n\nexport interface PopinProps {\n  title?: ReactNode;\n  closeLabel?: string;\n  onClose: ClosePopinCallback;\n  isVisible: boolean;\n  className?: string;\n  bodyClassName?: string;\n  showCloseButton?: boolean;\n  target?: BackdropProps['target'];\n  /**\n   * Whether the popin can be dismissed via ESC, backdrop click, or close button.\n   * When false, only programmatic closing via onClose is allowed.\n   * @default true\n   */\n  dismissable?: boolean;\n  /**\n   * @deprecated use popinFooter slot instead\n   */\n  Footer?: FunctionComponent<PopinFooterProps> | false;\n}\n\nexport const Popin: FunctionComponent<PropsWithChildren<PopinProps>> = ({\n  title,\n  children,\n  closeLabel,\n  onClose,\n  isVisible,\n  className = 'sm:w-360',\n  bodyClassName,\n  Footer = PopinFooter,\n  dismissable = true,\n}) => {\n  const { children: popinBody, popinFooter } = useSlots(children, ['popinFooter']);\n\n  // Prevent initial mount flash when closed: only animate leave if it was visible before\n  const wasVisibleRef = useRef(isVisible);\n  const wasVisible = wasVisibleRef.current;\n  const isLeaving = !isVisible && wasVisible;\n\n  // update ref for next render\n  wasVisibleRef.current = isVisible;\n  return (\n    <Backdrop\n      isVisible={isVisible}\n      onClose={dismissable ? onClose : undefined}\n      dismissable={dismissable}\n    >\n      <div\n        className={twMerge(\n          clsx(\n            'border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white origin-center will-change[transform,opacity]',\n            {\n              'animate-zoom-in': isVisible,\n              'animate-zoom-out': !isVisible && isLeaving,\n              'opacity-0 scale-90': !isVisible && !isLeaving,\n            },\n          ),\n          className,\n        )}\n      >\n        <div\n          className={twMerge('text-center max-h-[90vh] flex flex-col p-40 gap-40', bodyClassName)}\n        >\n          {title && <div className=\"text-h5 mt-0 -mb-20 text-start font-serif\">{title}</div>}\n          <div className=\"text-start overflow-auto\">{popinBody}</div>\n          {!popinFooter?.length && Footer && dismissable && (\n            <div>\n              <Footer closeLabel={closeLabel} onClose={onClose} />\n            </div>\n          )}\n\n          {popinFooter}\n        </div>\n      </div>\n    </Backdrop>\n  );\n};\n"],"mappings":";;;;;;;;AAeA,IAAM,KAAe,EAAE,eAAY,iBAE/B,kBAAC,GAAD;CACE,OAAM;CACN,SAAQ;CACR,MAAK;CACL,WAAU;CACV,cAAY;CACZ,SAAS;CACT,CAAA,EAyBO,KAA2D,EACtE,UACA,aACA,eACA,YACA,cACA,eAAY,YACZ,kBACA,YAAS,GACT,iBAAc,SACV;CACJ,IAAM,EAAE,UAAU,GAAW,mBAAgB,EAAS,GAAU,CAAC,cAAc,CAAC,EAG1E,IAAgB,EAAO,EAAU,EACjC,IAAa,EAAc,SAC3B,IAAY,CAAC,KAAa;AAIhC,QADA,EAAc,UAAU,GAEtB,kBAAC,GAAD;EACa;EACX,SAAS,IAAc,IAAU,KAAA;EACpB;YAEb,kBAAC,OAAD;GACE,WAAW,EACT,EACE,6HACA;IACE,mBAAmB;IACnB,oBAAoB,CAAC,KAAa;IAClC,sBAAsB,CAAC,KAAa,CAAC;IACtC,CACF,EACD,EACD;aAED,kBAAC,OAAD;IACE,WAAW,EAAQ,sDAAsD,EAAc;cADzF;KAGG,KAAS,kBAAC,OAAD;MAAK,WAAU;gBAA6C;MAAY,CAAA;KAClF,kBAAC,OAAD;MAAK,WAAU;gBAA4B;MAAgB,CAAA;KAC1D,CAAC,GAAa,UAAU,KAAU,KACjC,kBAAC,OAAD,EAAA,UACE,kBAAC,GAAD;MAAoB;MAAqB;MAAW,CAAA,EAChD,CAAA;KAGP;KACG;;GACF,CAAA;EACG,CAAA"}

package/ui/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,6 @@
+import { useEffect } from 'react';
+/**
+ * `useLayoutEffect` in the browser, `useEffect` on the server (where layout effects never run and
+ * React 18 warns about them)
+ */
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/ui/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,7 @@
+import { useEffect as e, useLayoutEffect as t } from "react";
+//#region lib/ui/hooks/useIsomorphicLayoutEffect.ts
+var n = typeof window < "u" ? t : e;
+//#endregion
+export { n as useIsomorphicLayoutEffect };
+
+//# sourceMappingURL=useIsomorphicLayoutEffect.js.map

package/ui/hooks/useIsomorphicLayoutEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsomorphicLayoutEffect.js","names":[],"sources":["../../../lib/ui/hooks/useIsomorphicLayoutEffect.ts"],"sourcesContent":["import { useEffect, useLayoutEffect } from 'react';\n\n/**\n * `useLayoutEffect` in the browser, `useEffect` on the server (where layout effects never run and\n * React 18 warns about them)\n */\nexport const useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n"],"mappings":";;AAMA,IAAa,IACX,OAAO,SAAW,MAAc,IAAkB"}

package/ui/hooks/useLayer.d.ts

@@ -0,0 +1,13 @@
+export interface UseLayerOptions {
+    onClose?: () => void;
+    onOpen?: () => void;
+    opened?: boolean;
+}
+/**
+ * Open state and handlers to drive a `<Layer />`
+ */
+export declare const useLayer: ({ onClose, onOpen, opened }?: UseLayerOptions) => {
+    close: () => void;
+    isOpen: boolean;
+    open: () => void;
+};

package/ui/hooks/useLayer.js

@@ -0,0 +1,31 @@
+"use client";
+import { useCallback as e, useMemo as t, useRef as n, useState as r } from "react";
+//#region lib/ui/hooks/useLayer.ts
+var i = ({ onClose: i, onOpen: a, opened: o = !1 } = {}) => {
+	let [s, c] = r(o), l = n({
+		onClose: i,
+		onOpen: a
+	});
+	l.current = {
+		onClose: i,
+		onOpen: a
+	};
+	let u = e(() => {
+		c(!0), l.current.onOpen?.();
+	}, []), d = e(() => {
+		c(!1), l.current.onClose?.();
+	}, []);
+	return t(() => ({
+		close: d,
+		isOpen: s,
+		open: u
+	}), [
+		d,
+		s,
+		u
+	]);
+};
+//#endregion
+export { i as useLayer };
+
+//# sourceMappingURL=useLayer.js.map

package/ui/hooks/useLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLayer.js","names":[],"sources":["../../../lib/ui/hooks/useLayer.ts"],"sourcesContent":["'use client';\nimport { useCallback, useMemo, useRef, useState } from 'react';\n\nexport interface UseLayerOptions {\n  onClose?: () => void;\n  onOpen?: () => void;\n  opened?: boolean;\n}\n\n/**\n * Open state and handlers to drive a `<Layer />`\n */\nexport const useLayer = ({ onClose, onOpen, opened = false }: UseLayerOptions = {}) => {\n  const [isOpen, setIsOpen] = useState(opened);\n\n  // read the callbacks through a ref so `open` and `close` keep the same identity even when the\n  // consumer passes inline handlers, which would otherwise re-render every memoized child using them\n  const callbacksRef = useRef({ onClose, onOpen });\n  callbacksRef.current = { onClose, onOpen };\n\n  const open = useCallback(() => {\n    setIsOpen(true);\n    callbacksRef.current.onOpen?.();\n  }, []);\n\n  const close = useCallback(() => {\n    setIsOpen(false);\n    callbacksRef.current.onClose?.();\n  }, []);\n\n  return useMemo(() => ({ close, isOpen, open }), [close, isOpen, open]);\n};\n"],"mappings":";;;AAYA,IAAa,KAAY,EAAE,YAAS,WAAQ,YAAS,OAA2B,EAAE,KAAK;CACrF,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAO,EAItC,IAAe,EAAO;EAAE;EAAS;EAAQ,CAAC;AAChD,GAAa,UAAU;EAAE;EAAS;EAAQ;CAE1C,IAAM,IAAO,QAAkB;AAE7B,EADA,EAAU,GAAK,EACf,EAAa,QAAQ,UAAU;IAC9B,EAAE,CAAC,EAEA,IAAQ,QAAkB;AAE9B,EADA,EAAU,GAAM,EAChB,EAAa,QAAQ,WAAW;IAC/B,EAAE,CAAC;AAEN,QAAO,SAAe;EAAE;EAAO;EAAQ;EAAM,GAAG;EAAC;EAAO;EAAQ;EAAK,CAAC"}

package/ui/hooks/useTransitionState.d.ts

@@ -0,0 +1,7 @@
+import { TransitionOptions, TransitionResult } from 'react-transition-state';
+/**
+ * `react-transition-state` keeps its pending animation frame and timeout when a component
+ * unmounts mid-transition, so the scheduled callback runs against a tree that no longer exists.
+ * Ending the transition on unmount clears both.
+ */
+export declare const useTransitionState: (options?: TransitionOptions) => TransitionResult;

package/ui/hooks/useTransitionState.js

@@ -0,0 +1,15 @@
+import { t as e } from "../../chunks/useTransitionState.js";
+import { useEffect as t, useRef as n } from "react";
+//#region lib/ui/hooks/useTransitionState.ts
+var r = (r) => {
+	let [i, a, o] = e(r), s = n(o);
+	return s.current = o, t(() => () => s.current(), []), [
+		i,
+		a,
+		o
+	];
+};
+//#endregion
+export { r as useTransitionState };
+
+//# sourceMappingURL=useTransitionState.js.map

package/ui/hooks/useTransitionState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransitionState.js","names":[],"sources":["../../../lib/ui/hooks/useTransitionState.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport {\n  useTransitionState as useBaseTransitionState,\n  type TransitionOptions,\n  type TransitionResult,\n} from 'react-transition-state';\n\n/**\n * `react-transition-state` keeps its pending animation frame and timeout when a component\n * unmounts mid-transition, so the scheduled callback runs against a tree that no longer exists.\n * Ending the transition on unmount clears both.\n */\nexport const useTransitionState = (options?: TransitionOptions): TransitionResult => {\n  const [state, toggle, endTransition] = useBaseTransitionState(options);\n\n  const endTransitionRef = useRef(endTransition);\n  endTransitionRef.current = endTransition;\n\n  useEffect(() => () => endTransitionRef.current(), []);\n\n  return [state, toggle, endTransition];\n};\n"],"mappings":";;;AAYA,IAAa,KAAsB,MAAkD;CACnF,IAAM,CAAC,GAAO,GAAQ,KAAiB,EAAuB,EAAQ,EAEhE,IAAmB,EAAO,EAAc;AAK9C,QAJA,EAAiB,UAAU,GAE3B,cAAsB,EAAiB,SAAS,EAAE,EAAE,CAAC,EAE9C;EAAC;EAAO;EAAQ;EAAc"}

package/ui/hooks/useVisualViewportBox.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Pins a `position: fixed` overlay to the visual viewport so iOS Safari's
+ * keyboard does not shift the overlay off-screen.
+ *
+ * Returns a callback ref to put on the overlay element.
+ */
+export declare const useVisualViewportBox: <T extends HTMLElement>() => import('react').Dispatch<import('react').SetStateAction<T | null>>;

package/ui/hooks/useVisualViewportBox.js

@@ -0,0 +1,22 @@
+import { useIsomorphicLayoutEffect as e } from "./useIsomorphicLayoutEffect.js";
+import { useState as t } from "react";
+//#region lib/ui/hooks/useVisualViewportBox.ts
+var n = (e, t) => {
+	e.style.top = `${t.offsetTop}px`, e.style.left = `${t.offsetLeft}px`, e.style.right = "auto", e.style.bottom = "auto", e.style.width = `${t.width}px`, e.style.height = `${t.height}px`, e.style.maxHeight = `${t.height}px`;
+}, r = () => {
+	let [r, i] = t(null);
+	return e(() => {
+		let e = window.visualViewport;
+		if (!r || !e) return;
+		let t = () => {
+			n(r, e);
+		};
+		return t(), e.addEventListener("resize", t), e.addEventListener("scroll", t), () => {
+			e.removeEventListener("resize", t), e.removeEventListener("scroll", t);
+		};
+	}, [r]), i;
+};
+//#endregion
+export { r as useVisualViewportBox };
+
+//# sourceMappingURL=useVisualViewportBox.js.map

package/ui/hooks/useVisualViewportBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVisualViewportBox.js","names":[],"sources":["../../../lib/ui/hooks/useVisualViewportBox.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\nconst applyVisualViewportBox = (element: HTMLElement, viewport: VisualViewport) => {\n  element.style.top = `${viewport.offsetTop}px`;\n  element.style.left = `${viewport.offsetLeft}px`;\n  element.style.right = 'auto';\n  element.style.bottom = 'auto';\n  element.style.width = `${viewport.width}px`;\n  element.style.height = `${viewport.height}px`;\n  element.style.maxHeight = `${viewport.height}px`;\n};\n\n/**\n * Pins a `position: fixed` overlay to the visual viewport so iOS Safari's\n * keyboard does not shift the overlay off-screen.\n *\n * Returns a callback ref to put on the overlay element.\n */\nexport const useVisualViewportBox = <T extends HTMLElement>() => {\n  const [element, setElement] = useState<T | null>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    const viewport = window.visualViewport;\n\n    if (!element || !viewport) {\n      return;\n    }\n\n    const update = () => {\n      applyVisualViewportBox(element, viewport);\n    };\n\n    update();\n    viewport.addEventListener('resize', update);\n    viewport.addEventListener('scroll', update);\n\n    return () => {\n      viewport.removeEventListener('resize', update);\n      viewport.removeEventListener('scroll', update);\n    };\n  }, [element]);\n\n  return setElement;\n};\n"],"mappings":";;;AAIA,IAAM,KAA0B,GAAsB,MAA6B;AAOjF,CANA,EAAQ,MAAM,MAAM,GAAG,EAAS,UAAU,KAC1C,EAAQ,MAAM,OAAO,GAAG,EAAS,WAAW,KAC5C,EAAQ,MAAM,QAAQ,QACtB,EAAQ,MAAM,SAAS,QACvB,EAAQ,MAAM,QAAQ,GAAG,EAAS,MAAM,KACxC,EAAQ,MAAM,SAAS,GAAG,EAAS,OAAO,KAC1C,EAAQ,MAAM,YAAY,GAAG,EAAS,OAAO;GASlC,UAAoD;CAC/D,IAAM,CAAC,GAAS,KAAc,EAAmB,KAAK;AAuBtD,QArBA,QAAgC;EAC9B,IAAM,IAAW,OAAO;AAExB,MAAI,CAAC,KAAW,CAAC,EACf;EAGF,IAAM,UAAe;AACnB,KAAuB,GAAS,EAAS;;AAO3C,SAJA,GAAQ,EACR,EAAS,iBAAiB,UAAU,EAAO,EAC3C,EAAS,iBAAiB,UAAU,EAAO,QAE9B;AAEX,GADA,EAAS,oBAAoB,UAAU,EAAO,EAC9C,EAAS,oBAAoB,UAAU,EAAO;;IAE/C,CAAC,EAAQ,CAAC,EAEN"}

package/chunks/Backdrop.js

@@ -1,105 +0,0 @@
-import { t as e } from "./clsx.js";
-import { Portal as t } from "../ui/Portal.js";
-import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-var c = 5, l = 6, u = [
-	"preEnter",
-	"entering",
-	"entered",
-	"preExit",
-	"exiting",
-	"exited",
-	"unmounted"
-], d = (e) => ({
-	_s: e,
-	status: u[e],
-	isEnter: e < 3,
-	isMounted: e !== l,
-	isResolved: e === 2 || e > 4
-}), f = (e) => e ? l : c, p = (e, t) => {
-	switch (e) {
-		case 1:
-		case 0: return 2;
-		case 4:
-		case 3: return f(t);
-	}
-}, m = (e) => typeof e == "object" ? [e.enter, e.exit] : [e, e], h = (...e) => setTimeout(...e), g = (e, t) => h(() => {
-	isNaN(document.body.offsetTop) || e(t + 1);
-}, 0), _ = (e, t, n, r, i) => {
-	clearTimeout(r.current);
-	let a = d(e);
-	t(a), n.current = a, i && i({ current: a });
-}, v = ({ enter: e = !0, exit: t = !0, preEnter: r, preExit: o, timeout: s, initialEntered: c, mountOnEnter: l, unmountOnExit: u, onStateChange: v } = {}) => {
-	let [y, b] = a(() => d(c ? 2 : f(l))), x = i(y), S = i(0), [C, w] = m(s), T = n(() => {
-		let e = p(x.current._s, u);
-		e && _(e, b, x, S, v);
-	}, [v, u]);
-	return [
-		y,
-		n((n) => {
-			let i = (e) => {
-				switch (_(e, b, x, S, v), e) {
-					case 1:
-						C >= 0 && (S.current = h(T, C));
-						break;
-					case 4:
-						w >= 0 && (S.current = h(T, w));
-						break;
-					case 0:
-					case 3:
-						S.current = g(i, e);
-						break;
-				}
-			}, a = x.current.isEnter;
-			typeof n != "boolean" && (n = !a), n ? !a && i(e ? r ? 0 : 1 : 2) : a && i(t ? o ? 3 : 4 : f(u));
-		}, [
-			T,
-			v,
-			e,
-			t,
-			r,
-			o,
-			C,
-			w,
-			u
-		]),
-		T
-	];
-}, y = ({ children: n, className: i = "flex justify-center", onClose: a, isVisible: c, target: l = "backdrop", sweep: u = !1, ...d }) => {
-	let [f, p] = v({
-		timeout: {
-			enter: 0,
-			exit: 500
-		},
-		mountOnEnter: !0,
-		unmountOnExit: !0,
-		preEnter: !0
-	}), { status: m, isMounted: h } = f;
-	r(() => {
-		p(c);
-	}, [c, p]);
-	let g = m === "preEnter" || m === "exiting";
-	return /* @__PURE__ */ o(t, {
-		target: l,
-		children: h && /* @__PURE__ */ s("div", {
-			...d,
-			role: "presentation",
-			className: e(i, "fixed inset-0 isolate items-center"),
-			children: [/* @__PURE__ */ o("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": !g,
-					"bg-white/0 backdrop-blur-none": g,
-					"-translate-x-full": u && (m === "preEnter" || m === "entering"),
-					"translate-x-full": u && m === "exiting"
-				}),
-				onClick: a,
-				type: "button"
-			}), n]
-		})
-	});
-};
-//#endregion
-export { v as n, y as t };
-
-//# sourceMappingURL=Backdrop.js.map

package/chunks/Backdrop.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Backdrop.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","../../lib/ui/Backdrop.tsx"],"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 };","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\nexport const Backdrop: FunctionComponent<PropsWithChildren<BackdropProps>> = ({\n  children,\n  className = 'flex justify-center',\n  onClose,\n  isVisible,\n  target = 'backdrop',\n  sweep = false,\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  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={onClose}\n            type=\"button\"\n          />\n          {children}\n        </div>\n      )}\n    </Portal>\n  );\n};\n"],"x_google_ignoreList":[0,1],"mappings":"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"}