@clubmed/trident-ui 2.0.0-beta.2 → 2.0.0-beta.21

package/ui/Loader.js

@@ -33,8 +33,8 @@ var o = /* @__PURE__ */ a("svg", {
 			})]
 		})]
 	})]
-}), s = ({ isVisible: s, label: c }) => {
-	let [{ status: l, isMounted: u }, d] = t({
+}), s = ({ isVisible: s, label: c, portalId: l }) => {
+	let [{ status: u, isMounted: d }, f] = t({
 		timeout: {
 			enter: 250,
 			exit: 250
@@ -44,16 +44,17 @@ var o = /* @__PURE__ */ a("svg", {
 		preEnter: !0
 	});
 	r(() => {
-		d(s);
-	}, [s, d]);
-	let f = l === "preEnter" || l === "entering", p = l === "exiting";
+		f(s);
+	}, [s, f]);
+	let p = u === "preEnter" || u === "entering", m = u === "exiting";
 	return /* @__PURE__ */ i(n, {
 		isVisible: s,
+		target: l,
 		sweep: !0,
-		children: u && /* @__PURE__ */ a("div", {
+		children: d && /* @__PURE__ */ a("div", {
 			className: e("flex flex-col items-center transition-all duration-500", {
-				"-translate-x-full opacity-0": f,
-				"translate-x-full opacity-100": p
+				"-translate-x-full opacity-0": p,
+				"translate-x-full opacity-100": m
 			}),
 			role: "alert",
 			children: [/* @__PURE__ */ i("div", {
@@ -65,8 +66,8 @@ var o = /* @__PURE__ */ a("svg", {
 				children: o
 			}), /* @__PURE__ */ i("div", {
 				className: e("mx-auto max-w-[320px] px-20 text-center text-b3 transition-all delay-100 duration-400", {
-					"-translate-x-full opacity-0": f,
-					"translate-x-full opacity-100": p
+					"-translate-x-full opacity-0": p,
+					"translate-x-full opacity-100": m
 				}),
 				children: c
 			})]

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 FunctionComponent } from 'react';\nimport { useTransitionState } from 'react-transition-state';\n\nimport { Backdrop } from './Backdrop';\n\ninterface Props {\n  isVisible?: boolean;\n  label?: string;\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<Props> = ({ isVisible, label }) => {\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} 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":";;;;;;AAaA,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,KAAoC,EAAE,cAAW,eAAY;CACxE,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,OAAA;YAC7B,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.js

@@ -20,8 +20,8 @@ var c = ({ closeLabel: e, onClose: n }) => /* @__PURE__ */ o(t, {
 		onClose: d,
 		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-zoomIn": f,
-				"animate-zoomOut": !f && b,
+				"animate-zoom-in": f,
+				"animate-zoom-out": !f && b,
 				"opacity-0 scale-90": !f && !b
 			}), p),
 			children: /* @__PURE__ */ s("div", {

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-zoomIn': isVisible,\n              'animate-zoomOut': !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,kBAAkB;IAClB,mBAAmB,CAAC,KAAa;IACjC,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   * @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"}

package/ui/SidebarLayout.d.ts

@@ -1,14 +1,16 @@
 import { IconicNames } from '@clubmed/trident-icons';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
+type SidebarSubItem = {
+    label: string;
+    href: string;
+} & ComponentPropsWithoutRef<'a'>;
 type SidebarItem = {
     label: string;
     icon: IconicNames;
-    url?: string;
-    items?: {
-        label: string;
-        url: string;
-    }[];
-};
+    items?: SidebarSubItem[];
+} & ((ComponentPropsWithoutRef<'a'> & {
+    href: string;
+}) | ComponentPropsWithoutRef<'button'>);
 interface SidebarItemProps {
     item: SidebarItem;
     isActive?: boolean;
@@ -24,6 +26,8 @@ export interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {
     items: SidebarItem[];
     children: ReactNode;
     activeIndex?: number;
+    isCollapsed?: boolean;
+    onCollapsedChange?: (isCollapsed: boolean) => void;
 }
-export declare const SidebarLayout: ({ items, children: initialChildren, className, activeIndex, ...attrs }: SidebarLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarLayout: ({ items, children: initialChildren, className, activeIndex, isCollapsed: initialCollapsedValue, onCollapsedChange, ...attrs }: SidebarLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/ui/SidebarLayout.js

@@ -6,15 +6,28 @@ import { useCallback as i, useRef as a, useState as o } from "react";
 import { Icon as s } from "@clubmed/trident-icons";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region lib/ui/SidebarLayout.tsx
-var u = ({ item: e, isActive: n = !1, isCollapsed: r = !1, anchorName: i, onItemClick: a }) => {
+function u(e) {
+	if ("href" in e) {
+		let { children: t, icon: n, label: r, ...i } = e;
+		return /* @__PURE__ */ c("a", {
+			...i,
+			className: "flex whitespace-nowrap items-center text-white hover:text-saffron transition-colors outline-none focus-visible:bg-white/20 rounded-pill relative group/sidebar-item",
+			children: t
+		});
+	}
+	let { children: t, icon: n, label: r, ...i } = e;
+	return /* @__PURE__ */ c("button", {
+		...i,
+		className: "flex whitespace-nowrap items-center text-white outline-none rounded-pill relative group/sidebar-item",
+		children: t
+	});
+}
+var d = ({ item: e, isActive: n = !1, isCollapsed: r = !1, anchorName: i, onItemClick: a }) => {
 	let o = e.items && e.items.length > 0;
 	return /* @__PURE__ */ l("div", {
 		className: "col-start-1 col-end-3",
-		children: [/* @__PURE__ */ l(e.url ? "a" : "button", {
-			...e.url ? {
-				href: e.url,
-				className: "flex whitespace-nowrap items-center text-white hover:text-saffron transition-colors outline-none focus-visible:bg-white/20 rounded-pill relative group/sidebar-item"
-			} : { className: "flex whitespace-nowrap items-center text-white outline-none rounded-pill relative group/sidebar-item" },
+		children: [/* @__PURE__ */ l(u, {
+			...e,
 			onClick: (e) => {
 				o && a && (e.preventDefault(), a());
 			},
@@ -49,14 +62,14 @@ var u = ({ item: e, isActive: n = !1, isCollapsed: r = !1, anchorName: i, onItem
 			children: /* @__PURE__ */ c("div", {
 				className: "outline-none relative overflow-hidden flex flex-col gap-8 ps-48 font-normal",
 				children: e.items.map((e, t) => /* @__PURE__ */ c("a", {
-					href: e.url,
+					href: e.href,
 					className: "text-white hover:text-saffron transition-colors text-b4 whitespace-nowrap outline-none focus-visible:bg-white/20 ps-8 pe-16 rounded-pill",
 					children: e.label
 				}, t))
 			})
 		})]
 	});
-}, d = ({ isCollapsed: e }) => /* @__PURE__ */ c("svg", {
+}, f = ({ isCollapsed: e }) => /* @__PURE__ */ c("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: "33",
 	height: "48",
@@ -75,19 +88,27 @@ var u = ({ item: e, isActive: n = !1, isCollapsed: r = !1, anchorName: i, onItem
 		})]
 	})
 });
-function f() {
-	let [e, t] = o(!0);
+function p({ isCollapsed: e, onCollapsedChange: t }) {
+	let [n, r] = o(() => e ?? !0), s = a(null), c = i((e) => {
+		r((n) => {
+			let r = typeof e == "function" ? e(n) : e;
+			return r !== n && t?.(r), r;
+		});
+	}, [t]);
 	return {
-		isCollapsed: e,
-		setIsCollapsed: t,
-		overlayRef: a(null),
+		isCollapsed: n,
+		setIsCollapsed: c,
+		overlayRef: s,
 		handleToggleCollapse: i(() => {
-			t((e) => !e);
-		}, [])
+			c((e) => !e);
+		}, [c])
 	};
 }
-var p = ({ items: i, children: a, className: o, activeIndex: s = 0, ...p }) => {
-	let { isCollapsed: m, setIsCollapsed: h, handleToggleCollapse: g } = f(), { "header-logo": _, header: v, "header-actions": y, children: b } = n(a, [
+var m = ({ items: i, children: a, className: o, activeIndex: s = 0, isCollapsed: u, onCollapsedChange: m, ...h }) => {
+	let { isCollapsed: g, setIsCollapsed: _, handleToggleCollapse: v } = p({
+		isCollapsed: u,
+		onCollapsedChange: m
+	}), { "header-logo": y, header: b, "header-actions": x, children: S } = n(a, [
 		"header-logo",
 		"header",
 		"header-actions"
@@ -95,50 +116,50 @@ var p = ({ items: i, children: a, className: o, activeIndex: s = 0, ...p }) => {
 	return /* @__PURE__ */ l("div", {
 		"data-name": "SidebarLayout",
 		className: e("h-screen overflow-clip flex flex-col bg-ultramarine", o),
-		...p,
+		...h,
 		children: [/* @__PURE__ */ l("header", {
 			className: "bg-ultramarine h-64 flex items-center justify-between gap-8 p-8 ps-20 md:px-24 text-white shrink-0",
 			children: [
-				_,
-				v,
 				y,
+				b,
+				x,
 				/* @__PURE__ */ c("button", {
 					className: "md:hidden w-48 h-48 focus-visible:ring-8 focus-visible:ring-lavender/20 rounded-full flex items-center justify-center text-white transition-opacity outline-none",
-					"aria-label": m ? "Open the navigation menu" : "Close the navigation menu",
-					onClick: g,
-					children: /* @__PURE__ */ c(r, { isActive: !m })
+					"aria-label": g ? "Open the navigation menu" : "Close the navigation menu",
+					onClick: v,
+					children: /* @__PURE__ */ c(r, { isActive: !g })
 				})
 			]
 		}), /* @__PURE__ */ l("div", {
 			className: "flex h-full overflow-x-clip overflow-y-hidden",
 			children: [/* @__PURE__ */ l("aside", {
-				className: t("max-md:absolute max-md:top-64 max-md:h-[calc(100dvh-64px)] max-md:w-screen flex bg-ultramarine px-8 md:py-16 md:ps-28 md:pe-16 text-white flex-col gap-24 transition-all duration-300 ease-in-out relative h-full shrink-0", m ? "max-md:-translate-x-full" : "md:pe-24"),
+				className: t("z-10 max-md:absolute max-md:top-64 max-md:h-[calc(100dvh-64px)] max-md:w-screen flex bg-ultramarine px-8 md:py-16 md:ps-28 md:pe-16 text-white flex-col gap-24 transition-all duration-300 ease-in-out relative h-full shrink-0", g ? "max-md:-translate-x-full" : "md:pe-24"),
 				children: [/* @__PURE__ */ c("button", {
 					className: "hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-8 focus-visible:ring-lavender/20 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]",
-					onClick: g,
-					"aria-label": m ? "Expand sidebar" : "Collapse sidebar",
+					onClick: v,
+					"aria-label": g ? "Expand sidebar" : "Collapse sidebar",
 					style: { positionAnchor: `--sidebar-item-${s}` },
-					children: /* @__PURE__ */ c(d, { isCollapsed: m })
+					children: /* @__PURE__ */ c(f, { isCollapsed: g })
 				}), /* @__PURE__ */ c("nav", {
-					className: t("max-md:divide-y-1 p-8 max-md:h-full max-md:overflow-auto md:gap-y-20 grid overflow-hidden text-b3 font-semibold relative transition-grid-template-columns duration-300 ease-in-out", m ? "grid-cols-[48px_0fr]" : "grid-cols-[48px_1fr]"),
-					children: i.map((e, t) => /* @__PURE__ */ c(u, {
+					className: t("max-md:divide-y-1 p-8 max-md:h-full max-md:overflow-auto md:gap-y-20 grid overflow-hidden text-b3 font-semibold relative transition-grid-template-columns duration-300 ease-in-out", g ? "grid-cols-[48px_0fr]" : "grid-cols-[48px_1fr]"),
+					children: i.map((e, t) => /* @__PURE__ */ c(d, {
 						item: e,
 						isActive: t === s,
-						isCollapsed: m,
+						isCollapsed: g,
 						anchorName: `sidebar-item-${t}`,
 						onItemClick: () => {
-							e.items && e.items.length > 0 && h((e) => e && !1);
+							e.items && e.items.length > 0 && _((e) => e && !1);
 						}
 					}, t))
 				})]
 			}), /* @__PURE__ */ c("main", {
-				className: "min-w-full md:min-w-0 md:w-[calc(100%-96px)] bg-white p-24 overflow-auto md:rounded-ss-16 h-full shrink-0",
-				children: b
+				className: "w-full md:min-w-0 md:w-[calc(100%-108px)] bg-white p-24 overflow-auto md:rounded-ss-16 h-full shrink-0",
+				children: S
 			})]
 		})]
 	});
 };
 //#endregion
-export { d as CollapseIndicatorSVG, p as SidebarLayout };
+export { f as CollapseIndicatorSVG, m as SidebarLayout };
 
 //# sourceMappingURL=SidebarLayout.js.map

package/ui/SidebarLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarLayout.js","names":[],"sources":["../../lib/ui/SidebarLayout.tsx"],"sourcesContent":["import { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport clsx from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type ReactNode,\n  useCallback,\n  useRef,\n  useState,\n} from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { HamburgerIcon } from './HamburgerIcon';\nimport { useSlots } from '@/ui/hooks/useSlots';\n\ntype SidebarItem = {\n  label: string;\n  icon: IconicNames;\n  url?: string;\n  items?: {\n    label: string;\n    url: string;\n  }[];\n};\n\ninterface SidebarItemProps {\n  item: SidebarItem;\n  isActive?: boolean;\n  isCollapsed?: boolean;\n  anchorName: string;\n  onItemClick?: () => void;\n}\n\nconst SidebarItem = ({\n  item,\n  isActive = false,\n  isCollapsed = false,\n  anchorName,\n  onItemClick,\n}: SidebarItemProps) => {\n  const hasSubItems = item.items && item.items.length > 0;\n\n  const Comp = item.url ? 'a' : 'button';\n\n  const componentProps = item.url\n    ? {\n        href: item.url,\n        className:\n          'flex whitespace-nowrap items-center text-white hover:text-saffron transition-colors outline-none focus-visible:bg-white/20 rounded-pill relative group/sidebar-item',\n      }\n    : {\n        className:\n          'flex whitespace-nowrap items-center text-white outline-none rounded-pill relative group/sidebar-item',\n      };\n\n  return (\n    <div className=\"col-start-1 col-end-3\">\n      <Comp\n        {...componentProps}\n        onClick={(e) => {\n          if (hasSubItems && onItemClick) {\n            e.preventDefault();\n            onItemClick();\n          }\n        }}\n        style={{ anchorName: `--${anchorName}` } as React.CSSProperties}\n      >\n        <div className=\"relative\">\n          <div\n            className={twMerge('aspect-square w-48 rounded-full flex items-center justify-center')}\n          >\n            <Icon name={item.icon} className=\"w-24 text-white\" />\n          </div>\n          <div className=\"absolute inset-0 pointer-events-none\" aria-hidden=\"true\" inert>\n            <div\n              className={twMerge(\n                'max-md:hidden aspect-square w-48 rounded-full flex items-center justify-center bg-lightSand text-black',\n                '[clip-path:circle(var(--sidebarItem_clipCircle))] transition-all duration-200 delay-100 ease-in-out group-focus-visible/sidebar-item:ring-8 group-focus-visible/sidebar-item:ring-lavender/20',\n                isActive ? '[--sidebarItem_clipCircle:100%]' : '[--sidebarItem_clipCircle:0%]',\n                'group-hover/sidebar-item:[--sidebarItem_clipCircle:100%] group-focus-within/sidebar-item:[--sidebarItem_clipCircle:100%]',\n                !isActive &&\n                  'group-hover/sidebar-item:bg-lightSand/80 group-focus-within/sidebar-item:bg-lightSand/80',\n              )}\n            >\n              <Icon name={item.icon} className=\"w-24\" />\n            </div>\n          </div>\n        </div>\n        <span\n          className={twMerge(\n            'transition-all duration-300 ease-in-out whitespace-nowrap ps-8 pe-12 truncate md:max-w-240',\n            isCollapsed ? 'opacity-0' : 'opacity-100',\n          )}\n        >\n          {item.label}\n        </span>\n      </Comp>\n      {hasSubItems && (\n        <div\n          className={twMerge(\n            'grid transition-[grid-template-rows,opacity] duration-300 ease-in-out overflow-hidden max-md:grid-rows-[1fr] max-md:opacity-100',\n            isCollapsed ? 'grid-rows-[0fr] opacity-0' : 'grid-rows-[1fr] opacity-100 pb-12',\n          )}\n          inert={isCollapsed}\n        >\n          <div className=\"outline-none relative overflow-hidden flex flex-col gap-8 ps-48 font-normal\">\n            {item.items!.map((subItem, subIndex) => (\n              <a\n                key={subIndex}\n                href={subItem.url}\n                className=\"text-white hover:text-saffron transition-colors text-b4 whitespace-nowrap outline-none focus-visible:bg-white/20 ps-8 pe-16 rounded-pill\"\n              >\n                {subItem.label}\n              </a>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const CollapseIndicatorSVG = ({ isCollapsed }: { isCollapsed: boolean }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"48\">\n    <g fill=\"none\" fillRule=\"nonzero\">\n      <path\n        fill=\"#FFF\"\n        d=\"M10.008 48v-1.829c0-4.116-1.722-8.045-4.75-10.835-6.331-5.837-6.331-15.835 0-21.672a14.736 14.736 0 0 0 4.75-10.835V0h27.417v48H10.008Z\"\n      />\n      <g\n        className={twMerge(\n          'transition-transform duration-500 ease-in-out origin-center [transform-box:fill-box]',\n          isCollapsed ? 'rotate-180' : 'rotate-0',\n        )}\n      >\n        <path\n          fill=\"#1E2643\"\n          d=\"M19.686 12.547c6.617 0 12 5.383 12 12s-5.383 12-12 12-12-5.383-12-12 5.383-12 12-12Zm0 1.986c-5.522 0-10.015 4.492-10.015 10.014 0 5.523 4.493 10.015 10.016 10.015 5.52 0 10.012-4.492 10.012-10.015 0-5.522-4.492-10.014-10.012-10.014Zm-2.097 4.382c.376-.366 1.032-.366 1.409 0l5.037 4.895a.948.948 0 0 1 0 1.37l-5.037 4.894a1.002 1.002 0 0 1-.705.285 1 1 0 0 1-.704-.285.947.947 0 0 1 0-1.369l4.332-4.21-4.332-4.21a.95.95 0 0 1 0-1.37Z\"\n        />\n      </g>\n    </g>\n  </svg>\n);\n\nexport interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {\n  items: SidebarItem[];\n  children: ReactNode;\n  activeIndex?: number;\n}\n\nfunction useSidebarLayout() {\n  const [isCollapsed, setIsCollapsed] = useState(true);\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  const handleToggleCollapse = useCallback(() => {\n    setIsCollapsed((prev) => !prev);\n  }, []);\n\n  return {\n    isCollapsed,\n    setIsCollapsed,\n    overlayRef,\n    handleToggleCollapse,\n  };\n}\n\nexport const SidebarLayout = ({\n  items,\n  children: initialChildren,\n  className,\n  activeIndex = 0,\n  ...attrs\n}: SidebarLayoutProps) => {\n  const { isCollapsed, setIsCollapsed, handleToggleCollapse } = useSidebarLayout();\n  const {\n    'header-logo': headerLogo,\n    header,\n    ['header-actions']: headerActions,\n    children,\n  } = useSlots(initialChildren, ['header-logo', 'header', 'header-actions']);\n\n  return (\n    <div\n      data-name=\"SidebarLayout\"\n      className={clsx('h-screen overflow-clip flex flex-col bg-ultramarine', className)}\n      {...attrs}\n    >\n      {/* Header */}\n      <header className=\"bg-ultramarine h-64 flex items-center justify-between gap-8 p-8 ps-20 md:px-24 text-white shrink-0\">\n        {headerLogo}\n        {header}\n        {headerActions}\n        <button\n          className=\"md:hidden w-48 h-48 focus-visible:ring-8 focus-visible:ring-lavender/20 rounded-full flex items-center justify-center text-white transition-opacity outline-none\"\n          aria-label={isCollapsed ? 'Open the navigation menu' : 'Close the navigation menu'}\n          onClick={handleToggleCollapse}\n        >\n          <HamburgerIcon isActive={!isCollapsed} />\n        </button>\n      </header>\n\n      {/* Main container with sidebar and content */}\n      <div className=\"flex h-full overflow-x-clip overflow-y-hidden\">\n        {/* Sidebar */}\n        <aside\n          className={twMerge(\n            'max-md:absolute max-md:top-64 max-md:h-[calc(100dvh-64px)] max-md:w-screen flex bg-ultramarine px-8 md:py-16 md:ps-28 md:pe-16 text-white flex-col gap-24 transition-all duration-300 ease-in-out relative h-full shrink-0',\n            isCollapsed ? 'max-md:-translate-x-full' : 'md:pe-24',\n          )}\n        >\n          {/* Indicator */}\n          <button\n            className=\"hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-8 focus-visible:ring-lavender/20 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]\"\n            onClick={handleToggleCollapse}\n            aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n            style={\n              {\n                positionAnchor: `--sidebar-item-${activeIndex}`,\n              } as CSSProperties\n            }\n          >\n            <CollapseIndicatorSVG isCollapsed={isCollapsed} />\n          </button>\n\n          <nav\n            className={twMerge(\n              'max-md:divide-y-1 p-8 max-md:h-full max-md:overflow-auto md:gap-y-20 grid overflow-hidden text-b3 font-semibold relative transition-grid-template-columns duration-300 ease-in-out',\n              isCollapsed ? 'grid-cols-[48px_0fr]' : 'grid-cols-[48px_1fr]',\n            )}\n          >\n            {items.map((item, index) => (\n              <SidebarItem\n                key={index}\n                item={item}\n                isActive={index === activeIndex}\n                isCollapsed={isCollapsed}\n                anchorName={`sidebar-item-${index}`}\n                onItemClick={() => {\n                  if (item.items && item.items.length > 0) {\n                    setIsCollapsed((prev) => (prev ? false : prev));\n                  }\n                }}\n              />\n            ))}\n          </nav>\n        </aside>\n\n        <main className=\"min-w-full md:min-w-0 md:w-[calc(100%-96px)] bg-white p-24 overflow-auto md:rounded-ss-16 h-full shrink-0\">\n          {children}\n        </main>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"SidebarLayout.js","names":[],"sources":["../../lib/ui/SidebarLayout.tsx"],"sourcesContent":["import { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport clsx from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type Dispatch,\n  type PropsWithChildren,\n  type ReactNode,\n  type SetStateAction,\n  type MouseEvent,\n  useCallback,\n  useRef,\n  useState,\n} from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { HamburgerIcon } from './HamburgerIcon';\nimport { useSlots } from '@/ui/hooks/useSlots';\n\ntype SidebarSubItem = {\n  label: string;\n  href: string;\n} & ComponentPropsWithoutRef<'a'>;\n\ntype SidebarItem = {\n  label: string;\n  icon: IconicNames;\n  items?: SidebarSubItem[];\n} & ((ComponentPropsWithoutRef<'a'> & { href: string }) | ComponentPropsWithoutRef<'button'>);\n\ninterface SidebarItemProps {\n  item: SidebarItem;\n  isActive?: boolean;\n  isCollapsed?: boolean;\n  anchorName: string;\n  onItemClick?: () => void;\n}\n\nfunction Cta(item: PropsWithChildren<SidebarItem>) {\n  if ('href' in item) {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { children, icon, label, ...attrs } = item;\n\n    return (\n      <a\n        {...attrs}\n        className=\"flex whitespace-nowrap items-center text-white hover:text-saffron transition-colors outline-none focus-visible:bg-white/20 rounded-pill relative group/sidebar-item\"\n      >\n        {children}\n      </a>\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { children, icon, label, ...attrs } = item;\n\n  return (\n    <button\n      {...attrs}\n      className=\"flex whitespace-nowrap items-center text-white outline-none rounded-pill relative group/sidebar-item\"\n    >\n      {children}\n    </button>\n  );\n}\n\nconst SidebarItem = ({\n  item,\n  isActive = false,\n  isCollapsed = false,\n  anchorName,\n  onItemClick,\n}: SidebarItemProps) => {\n  const hasSubItems = item.items && item.items.length > 0;\n\n  return (\n    <div className=\"col-start-1 col-end-3\">\n      <Cta\n        {...item}\n        onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          if (hasSubItems && onItemClick) {\n            e.preventDefault();\n            onItemClick();\n          }\n        }}\n        style={{ anchorName: `--${anchorName}` } as CSSProperties}\n      >\n        <div className=\"relative\">\n          <div\n            className={twMerge('aspect-square w-48 rounded-full flex items-center justify-center')}\n          >\n            <Icon name={item.icon} className=\"w-24 text-white\" />\n          </div>\n          <div className=\"absolute inset-0 pointer-events-none\" aria-hidden=\"true\" inert>\n            <div\n              className={twMerge(\n                'max-md:hidden aspect-square w-48 rounded-full flex items-center justify-center bg-lightSand text-black',\n                '[clip-path:circle(var(--sidebarItem_clipCircle))] transition-all duration-200 delay-100 ease-in-out group-focus-visible/sidebar-item:ring-8 group-focus-visible/sidebar-item:ring-lavender/20',\n                isActive ? '[--sidebarItem_clipCircle:100%]' : '[--sidebarItem_clipCircle:0%]',\n                'group-hover/sidebar-item:[--sidebarItem_clipCircle:100%] group-focus-within/sidebar-item:[--sidebarItem_clipCircle:100%]',\n                !isActive &&\n                  'group-hover/sidebar-item:bg-lightSand/80 group-focus-within/sidebar-item:bg-lightSand/80',\n              )}\n            >\n              <Icon name={item.icon} className=\"w-24\" />\n            </div>\n          </div>\n        </div>\n        <span\n          className={twMerge(\n            'transition-all duration-300 ease-in-out whitespace-nowrap ps-8 pe-12 truncate md:max-w-240',\n            isCollapsed ? 'opacity-0' : 'opacity-100',\n          )}\n        >\n          {item.label}\n        </span>\n      </Cta>\n      {hasSubItems && (\n        <div\n          className={twMerge(\n            'grid transition-[grid-template-rows,opacity] duration-300 ease-in-out overflow-hidden max-md:grid-rows-[1fr] max-md:opacity-100',\n            isCollapsed ? 'grid-rows-[0fr] opacity-0' : 'grid-rows-[1fr] opacity-100 pb-12',\n          )}\n          inert={isCollapsed}\n        >\n          <div className=\"outline-none relative overflow-hidden flex flex-col gap-8 ps-48 font-normal\">\n            {item.items!.map((subItem, subIndex) => (\n              <a\n                key={subIndex}\n                href={subItem.href}\n                className=\"text-white hover:text-saffron transition-colors text-b4 whitespace-nowrap outline-none focus-visible:bg-white/20 ps-8 pe-16 rounded-pill\"\n              >\n                {subItem.label}\n              </a>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const CollapseIndicatorSVG = ({ isCollapsed }: { isCollapsed: boolean }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"48\">\n    <g fill=\"none\" fillRule=\"nonzero\">\n      <path\n        fill=\"#FFF\"\n        d=\"M10.008 48v-1.829c0-4.116-1.722-8.045-4.75-10.835-6.331-5.837-6.331-15.835 0-21.672a14.736 14.736 0 0 0 4.75-10.835V0h27.417v48H10.008Z\"\n      />\n      <g\n        className={twMerge(\n          'transition-transform duration-500 ease-in-out origin-center [transform-box:fill-box]',\n          isCollapsed ? 'rotate-180' : 'rotate-0',\n        )}\n      >\n        <path\n          fill=\"#1E2643\"\n          d=\"M19.686 12.547c6.617 0 12 5.383 12 12s-5.383 12-12 12-12-5.383-12-12 5.383-12 12-12Zm0 1.986c-5.522 0-10.015 4.492-10.015 10.014 0 5.523 4.493 10.015 10.016 10.015 5.52 0 10.012-4.492 10.012-10.015 0-5.522-4.492-10.014-10.012-10.014Zm-2.097 4.382c.376-.366 1.032-.366 1.409 0l5.037 4.895a.948.948 0 0 1 0 1.37l-5.037 4.894a1.002 1.002 0 0 1-.705.285 1 1 0 0 1-.704-.285.947.947 0 0 1 0-1.369l4.332-4.21-4.332-4.21a.95.95 0 0 1 0-1.37Z\"\n        />\n      </g>\n    </g>\n  </svg>\n);\n\nexport interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {\n  items: SidebarItem[];\n  children: ReactNode;\n  activeIndex?: number;\n  isCollapsed?: boolean;\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n}\n\nfunction useSidebarLayout({\n  isCollapsed: initialCollapsedValue,\n  onCollapsedChange,\n}: {\n  isCollapsed?: boolean;\n  onCollapsedChange?: (isCollapsed: boolean) => void;\n}) {\n  const [isCollapsed, setIsCollapsedState] = useState(() => initialCollapsedValue ?? true);\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  const setIsCollapsed = useCallback<Dispatch<SetStateAction<boolean>>>(\n    (value) => {\n      setIsCollapsedState((previousState) => {\n        const nextState = typeof value === 'function' ? value(previousState) : value;\n        if (nextState !== previousState) {\n          onCollapsedChange?.(nextState);\n        }\n        return nextState;\n      });\n    },\n    [onCollapsedChange],\n  );\n\n  const handleToggleCollapse = useCallback(() => {\n    setIsCollapsed((prev) => !prev);\n  }, [setIsCollapsed]);\n\n  return {\n    isCollapsed,\n    setIsCollapsed,\n    overlayRef,\n    handleToggleCollapse,\n  };\n}\n\nexport const SidebarLayout = ({\n  items,\n  children: initialChildren,\n  className,\n  activeIndex = 0,\n  isCollapsed: initialCollapsedValue,\n  onCollapsedChange,\n  ...attrs\n}: SidebarLayoutProps) => {\n  const { isCollapsed, setIsCollapsed, handleToggleCollapse } = useSidebarLayout({\n    isCollapsed: initialCollapsedValue,\n    onCollapsedChange,\n  });\n  const {\n    'header-logo': headerLogo,\n    header,\n    ['header-actions']: headerActions,\n    children,\n  } = useSlots(initialChildren, ['header-logo', 'header', 'header-actions']);\n\n  return (\n    <div\n      data-name=\"SidebarLayout\"\n      className={clsx('h-screen overflow-clip flex flex-col bg-ultramarine', className)}\n      {...attrs}\n    >\n      {/* Header */}\n      <header className=\"bg-ultramarine h-64 flex items-center justify-between gap-8 p-8 ps-20 md:px-24 text-white shrink-0\">\n        {headerLogo}\n        {header}\n        {headerActions}\n        <button\n          className=\"md:hidden w-48 h-48 focus-visible:ring-8 focus-visible:ring-lavender/20 rounded-full flex items-center justify-center text-white transition-opacity outline-none\"\n          aria-label={isCollapsed ? 'Open the navigation menu' : 'Close the navigation menu'}\n          onClick={handleToggleCollapse}\n        >\n          <HamburgerIcon isActive={!isCollapsed} />\n        </button>\n      </header>\n\n      {/* Main container with sidebar and content */}\n      <div className=\"flex h-full overflow-x-clip overflow-y-hidden\">\n        {/* Sidebar */}\n        <aside\n          className={twMerge(\n            'z-10 max-md:absolute max-md:top-64 max-md:h-[calc(100dvh-64px)] max-md:w-screen flex bg-ultramarine px-8 md:py-16 md:ps-28 md:pe-16 text-white flex-col gap-24 transition-all duration-300 ease-in-out relative h-full shrink-0',\n            isCollapsed ? 'max-md:-translate-x-full' : 'md:pe-24',\n          )}\n        >\n          {/* Indicator */}\n          <button\n            className=\"hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-8 focus-visible:ring-lavender/20 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]\"\n            onClick={handleToggleCollapse}\n            aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n            style={\n              {\n                positionAnchor: `--sidebar-item-${activeIndex}`,\n              } as CSSProperties\n            }\n          >\n            <CollapseIndicatorSVG isCollapsed={isCollapsed} />\n          </button>\n\n          <nav\n            className={twMerge(\n              'max-md:divide-y-1 p-8 max-md:h-full max-md:overflow-auto md:gap-y-20 grid overflow-hidden text-b3 font-semibold relative transition-grid-template-columns duration-300 ease-in-out',\n              isCollapsed ? 'grid-cols-[48px_0fr]' : 'grid-cols-[48px_1fr]',\n            )}\n          >\n            {items.map((item, index) => (\n              <SidebarItem\n                key={index}\n                item={item}\n                isActive={index === activeIndex}\n                isCollapsed={isCollapsed}\n                anchorName={`sidebar-item-${index}`}\n                onItemClick={() => {\n                  if (item.items && item.items.length > 0) {\n                    setIsCollapsed((prev) => (prev ? false : prev));\n                  }\n                }}\n              />\n            ))}\n          </nav>\n        </aside>\n\n        <main className=\"w-full md:min-w-0 md:w-[calc(100%-108px)] bg-white p-24 overflow-auto md:rounded-ss-16 h-full shrink-0\">\n          {children}\n        </main>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/ui/arrows/Arrows.d.ts

@@ -3,6 +3,7 @@ import { ArrowsLabels } from './ArrowsLabels';
 import { ArrowButton } from '../buttons/ArrowButton';
 export interface ArrowsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
     color?: ComponentProps<typeof ArrowButton>['color'];
+    describedby?: string;
     iconType?: 'ArrowDefault' | 'ArrowTail';
     isDisabledHidden?: boolean;
     isNextDisabled?: boolean;

package/ui/arrows/Arrows.js

@@ -2,31 +2,33 @@ import { t as e } from "../../chunks/clsx.js";
 import { ArrowButton as t } from "../buttons/ArrowButton.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region lib/ui/arrows/Arrows.tsx
-var i = ({ className: i, color: a, iconType: o = "ArrowDefault", isDisabledHidden: s = !1, isNextDisabled: c = !1, isPrevDisabled: l = !1, labels: u = {
+var i = ({ className: i, color: a, describedby: o, iconType: s = "ArrowDefault", isDisabledHidden: c = !1, isNextDisabled: l = !1, isPrevDisabled: u = !1, labels: d = {
 	next: "",
 	previous: ""
-}, onNext: d, onPrev: f, size: p, theme: m, ...h }) => /* @__PURE__ */ r("div", {
-	...h,
+}, onNext: f, onPrev: p, size: m, theme: h, ...g }) => /* @__PURE__ */ r("div", {
+	...g,
 	className: e("pointer-events-none flex w-full items-center justify-between gap-x-20", i),
 	"data-name": "Arrows",
 	children: [/* @__PURE__ */ n(t, {
-		className: e("pointer-events-auto transition-opacity", { "opacity-0": s && l }),
+		className: e("pointer-events-auto transition-opacity", { "opacity-0": c && u }),
 		color: a,
-		disabled: l,
-		icon: `${o}Left`,
-		onClick: f,
-		size: p,
-		theme: m,
-		children: u.previous
+		disabled: u,
+		icon: `${s}Left`,
+		onClick: p,
+		size: m,
+		theme: h,
+		"aria-describedby": o,
+		children: d.previous
 	}), /* @__PURE__ */ n(t, {
-		className: e("pointer-events-auto transition-opacity", { "opacity-0": s && c }),
+		className: e("pointer-events-auto transition-opacity", { "opacity-0": c && l }),
 		color: a,
-		disabled: c,
-		icon: `${o}Right`,
-		onClick: d,
-		size: p,
-		theme: m,
-		children: u.next
+		disabled: l,
+		icon: `${s}Right`,
+		onClick: f,
+		size: m,
+		theme: h,
+		"aria-describedby": o,
+		children: d.next
 	})]
 });
 //#endregion

package/ui/arrows/Arrows.js.map

@@ -1 +1 @@
-{"version":3,"file":"Arrows.js","names":[],"sources":["../../../lib/ui/arrows/Arrows.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentProps, ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\nimport type { ArrowsLabels } from './ArrowsLabels';\n// TODO: We need to migrate ArrowButton\nimport { ArrowButton } from '../buttons/ArrowButton';\n\nexport interface ArrowsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  color?: ComponentProps<typeof ArrowButton>['color'];\n  iconType?: 'ArrowDefault' | 'ArrowTail';\n  isDisabledHidden?: boolean;\n  isNextDisabled?: boolean;\n  isPrevDisabled?: boolean;\n  labels?: ArrowsLabels;\n  onNext: ComponentProps<typeof ArrowButton>['onClick'];\n  onPrev: ComponentProps<typeof ArrowButton>['onClick'];\n  size?: ComponentProps<typeof ArrowButton>['size'];\n  theme?: ComponentProps<typeof ArrowButton>['theme'];\n}\n\nexport const Arrows: FunctionComponent<ArrowsProps> = ({\n  className,\n  color,\n  iconType = 'ArrowDefault',\n  isDisabledHidden = false,\n  isNextDisabled = false,\n  isPrevDisabled = false,\n  labels = {\n    next: '',\n    previous: '',\n  },\n  onNext,\n  onPrev,\n  size,\n  theme,\n  ...attrs\n}) => {\n  return (\n    <div\n      {...attrs}\n      className={clsx(\n        'pointer-events-none flex w-full items-center justify-between gap-x-20',\n        className,\n      )}\n      data-name=\"Arrows\"\n    >\n      <ArrowButton\n        className={clsx('pointer-events-auto transition-opacity', {\n          'opacity-0': isDisabledHidden && isPrevDisabled,\n        })}\n        color={color}\n        disabled={isPrevDisabled}\n        icon={`${iconType}Left`}\n        onClick={onPrev}\n        size={size}\n        theme={theme}\n      >\n        {labels.previous}\n      </ArrowButton>\n      <ArrowButton\n        className={clsx('pointer-events-auto transition-opacity', {\n          'opacity-0': isDisabledHidden && isNextDisabled,\n        })}\n        color={color}\n        disabled={isNextDisabled}\n        icon={`${iconType}Right`}\n        onClick={onNext}\n        size={size}\n        theme={theme}\n      >\n        {labels.next}\n      </ArrowButton>\n    </div>\n  );\n};\n"],"mappings":";;;;AAoBA,IAAa,KAA0C,EACrD,cACA,UACA,cAAW,gBACX,sBAAmB,IACnB,oBAAiB,IACjB,oBAAiB,IACjB,YAAS;CACP,MAAM;CACN,UAAU;CACX,EACD,WACA,WACA,SACA,UACA,GAAG,QAGD,kBAAC,OAAD;CACE,GAAI;CACJ,WAAW,EACT,yEACA,EACD;CACD,aAAU;WANZ,CAQE,kBAAC,GAAD;EACE,WAAW,EAAK,0CAA0C,EACxD,aAAa,KAAoB,GAClC,CAAC;EACK;EACP,UAAU;EACV,MAAM,GAAG,EAAS;EAClB,SAAS;EACH;EACC;YAEN,EAAO;EACI,CAAA,EACd,kBAAC,GAAD;EACE,WAAW,EAAK,0CAA0C,EACxD,aAAa,KAAoB,GAClC,CAAC;EACK;EACP,UAAU;EACV,MAAM,GAAG,EAAS;EAClB,SAAS;EACH;EACC;YAEN,EAAO;EACI,CAAA,CACV"}
+{"version":3,"file":"Arrows.js","names":[],"sources":["../../../lib/ui/arrows/Arrows.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentProps, ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\nimport type { ArrowsLabels } from './ArrowsLabels';\n// TODO: We need to migrate ArrowButton\nimport { ArrowButton } from '../buttons/ArrowButton';\n\nexport interface ArrowsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  color?: ComponentProps<typeof ArrowButton>['color'];\n  describedby?: string;\n  iconType?: 'ArrowDefault' | 'ArrowTail';\n  isDisabledHidden?: boolean;\n  isNextDisabled?: boolean;\n  isPrevDisabled?: boolean;\n  labels?: ArrowsLabels;\n  onNext: ComponentProps<typeof ArrowButton>['onClick'];\n  onPrev: ComponentProps<typeof ArrowButton>['onClick'];\n  size?: ComponentProps<typeof ArrowButton>['size'];\n  theme?: ComponentProps<typeof ArrowButton>['theme'];\n}\n\nexport const Arrows: FunctionComponent<ArrowsProps> = ({\n  className,\n  color,\n  describedby,\n  iconType = 'ArrowDefault',\n  isDisabledHidden = false,\n  isNextDisabled = false,\n  isPrevDisabled = false,\n  labels = {\n    next: '',\n    previous: '',\n  },\n  onNext,\n  onPrev,\n  size,\n  theme,\n  ...attrs\n}) => {\n  return (\n    <div\n      {...attrs}\n      className={clsx(\n        'pointer-events-none flex w-full items-center justify-between gap-x-20',\n        className,\n      )}\n      data-name=\"Arrows\"\n    >\n      <ArrowButton\n        className={clsx('pointer-events-auto transition-opacity', {\n          'opacity-0': isDisabledHidden && isPrevDisabled,\n        })}\n        color={color}\n        disabled={isPrevDisabled}\n        icon={`${iconType}Left`}\n        onClick={onPrev}\n        size={size}\n        theme={theme}\n        aria-describedby={describedby}\n      >\n        {labels.previous}\n      </ArrowButton>\n      <ArrowButton\n        className={clsx('pointer-events-auto transition-opacity', {\n          'opacity-0': isDisabledHidden && isNextDisabled,\n        })}\n        color={color}\n        disabled={isNextDisabled}\n        icon={`${iconType}Right`}\n        onClick={onNext}\n        size={size}\n        theme={theme}\n        aria-describedby={describedby}\n      >\n        {labels.next}\n      </ArrowButton>\n    </div>\n  );\n};\n"],"mappings":";;;;AAqBA,IAAa,KAA0C,EACrD,cACA,UACA,gBACA,cAAW,gBACX,sBAAmB,IACnB,oBAAiB,IACjB,oBAAiB,IACjB,YAAS;CACP,MAAM;CACN,UAAU;CACX,EACD,WACA,WACA,SACA,UACA,GAAG,QAGD,kBAAC,OAAD;CACE,GAAI;CACJ,WAAW,EACT,yEACA,EACD;CACD,aAAU;WANZ,CAQE,kBAAC,GAAD;EACE,WAAW,EAAK,0CAA0C,EACxD,aAAa,KAAoB,GAClC,CAAC;EACK;EACP,UAAU;EACV,MAAM,GAAG,EAAS;EAClB,SAAS;EACH;EACC;EACP,oBAAkB;YAEjB,EAAO;EACI,CAAA,EACd,kBAAC,GAAD;EACE,WAAW,EAAK,0CAA0C,EACxD,aAAa,KAAoB,GAClC,CAAC;EACK;EACP,UAAU;EACV,MAAM,GAAG,EAAS;EAClB,SAAS;EACH;EACC;EACP,oBAAkB;YAEjB,EAAO;EACI,CAAA,CACV"}

package/ui/buttons/Button.type.d.ts

@@ -5,7 +5,7 @@ export interface ButtonProps extends PropsWithChildren {
     color?: Colors;
     icon?: IconicNames;
     iconWidth?: string;
-    size?: 'small' | 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large' | 'primary' | 'secondary' | 'tertiary';
     theme?: 'outline' | 'solid';
     variant?: 'circle' | 'pill';
 }

package/ui/buttons/Button.type.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.type.js","names":[],"sources":["../../../lib/ui/buttons/Button.type.ts"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { IconicNames } from '@clubmed/trident-icons';\nimport type { Colors } from '../types/Colors';\nimport type { PropsWithChildren } from 'react';\n\nexport interface ButtonProps extends PropsWithChildren {\n  color?: Colors;\n  icon?: IconicNames;\n  iconWidth?: string;\n  size?: 'small' | 'medium' | 'large';\n  theme?: 'outline' | 'solid';\n  variant?: 'circle' | 'pill';\n}\n\ntype Params = {\n  color: ButtonProps['color'];\n  size: ButtonProps['size'];\n  theme: ButtonProps['theme'];\n  variant: ButtonProps['variant'];\n};\n\nexport const BUTTON_COLORS = {\n  black: 'button-black',\n  green: 'button-green',\n  lavender: 'button-lavender',\n  lightSand: 'button-lightSand',\n  marygold: 'button-marygold',\n  pearl: 'button-pearl',\n  orange: 'button-orange',\n  red: 'button-red',\n  saffron: 'button-saffron',\n  sand: 'button-sand',\n  sienna: 'button-sienna',\n  ultramarine: 'button-ultramarine',\n  verdigris: 'button-verdigris',\n  wave: 'button-wave',\n  white: 'button-white',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst colorGuard = (color: string | undefined): color is keyof typeof BUTTON_COLORS => {\n  return color != undefined && color in BUTTON_COLORS;\n};\n\nconst getButtonColor = (color: string | undefined) => {\n  if (colorGuard(color)) {\n    return BUTTON_COLORS[color];\n  }\n\n  return BUTTON_COLORS.saffron;\n};\n\nexport const BUTTON_THEMES = {\n  outline: 'button-outline',\n  solid: 'button-solid',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst themeGuard = (color: string | undefined): color is keyof typeof BUTTON_THEMES => {\n  return color != undefined && color in BUTTON_THEMES;\n};\n\nconst getButtonTheme = (theme: string | undefined) => {\n  if (themeGuard(theme)) {\n    return BUTTON_THEMES[theme];\n  }\n\n  return BUTTON_THEMES.solid;\n};\n\nexport const BUTTON_VARIANTS = {\n  circle: 'button-circle',\n  pill: 'button-pill',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst variantGuard = (color: string | undefined): color is keyof typeof BUTTON_VARIANTS => {\n  return color != undefined && color in BUTTON_VARIANTS;\n};\n\nconst getButtonVariant = (variant: string | undefined) => {\n  if (variantGuard(variant)) {\n    return BUTTON_VARIANTS[variant];\n  }\n\n  return BUTTON_VARIANTS.pill;\n};\n\nexport const BUTTON_SIZES = {\n  small: 'button-small',\n  medium: 'button-medium',\n  large: 'button-large',\n  primary: 'button-medium',\n  secondary: 'button-secondary',\n  tertiary: 'button-tertiary',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst sizeGuard = (color: string | undefined): color is keyof typeof BUTTON_SIZES => {\n  return color != undefined && color in BUTTON_SIZES;\n};\n\nconst getButtonSize = (size: ButtonProps['size']) => {\n  if (sizeGuard(size)) {\n    return BUTTON_SIZES[size];\n  }\n\n  return BUTTON_SIZES.medium;\n};\n\nexport const getButtonClasses = ({ color, size, theme, variant }: Params) => {\n  /* keep the \"flex\" class outside of \"button-*\" so that it can be overridden in responsive */\n  return clsx(\n    'flex',\n    'button',\n    getButtonTheme(theme),\n    getButtonColor(color),\n    getButtonVariant(variant),\n    getButtonSize(size),\n  );\n};\n"],"mappings":";;AAsBA,IAAa,IAAgB;CAC3B,OAAO;CACP,OAAO;CACP,UAAU;CACV,WAAW;CACX,UAAU;CACV,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,MAAM;CACN,QAAQ;CACR,aAAa;CACb,WAAW;CACX,MAAM;CACN,OAAO;CACR,EAEK,KAAc,MACX,KAAS,QAAa,KAAS,GAGlC,KAAkB,MAClB,EAAW,EAAM,GACZ,EAAc,KAGhB,EAAc,SAGV,IAAgB;CAC3B,SAAS;CACT,OAAO;CACR,EAEK,KAAc,MACX,KAAS,QAAa,KAAS,GAGlC,KAAkB,MAClB,EAAW,EAAM,GACZ,EAAc,KAGhB,EAAc,OAGV,IAAkB;CAC7B,QAAQ;CACR,MAAM;CACP,EAEK,KAAgB,MACb,KAAS,QAAa,KAAS,GAGlC,KAAoB,MACpB,EAAa,EAAQ,GAChB,EAAgB,KAGlB,EAAgB,MAGZ,IAAe;CAC1B,OAAO;CACP,QAAQ;CACR,OAAO;CACP,SAAS;CACT,WAAW;CACX,UAAU;CACX,EAEK,KAAa,MACV,KAAS,QAAa,KAAS,GAGlC,KAAiB,MACjB,EAAU,EAAK,GACV,EAAa,KAGf,EAAa,QAGT,KAAoB,EAAE,UAAO,SAAM,UAAO,iBAE9C,EACL,QACA,UACA,EAAe,EAAM,EACrB,EAAe,EAAM,EACrB,EAAiB,EAAQ,EACzB,EAAc,EAAK,CACpB"}
+{"version":3,"file":"Button.type.js","names":[],"sources":["../../../lib/ui/buttons/Button.type.ts"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { IconicNames } from '@clubmed/trident-icons';\nimport type { Colors } from '../types/Colors';\nimport type { PropsWithChildren } from 'react';\n\nexport interface ButtonProps extends PropsWithChildren {\n  color?: Colors;\n  icon?: IconicNames;\n  iconWidth?: string;\n  size?: 'small' | 'medium' | 'large' | 'primary' | 'secondary' | 'tertiary';\n  theme?: 'outline' | 'solid';\n  variant?: 'circle' | 'pill';\n}\n\ntype Params = {\n  color: ButtonProps['color'];\n  size: ButtonProps['size'];\n  theme: ButtonProps['theme'];\n  variant: ButtonProps['variant'];\n};\n\nexport const BUTTON_COLORS = {\n  black: 'button-black',\n  green: 'button-green',\n  lavender: 'button-lavender',\n  lightSand: 'button-lightSand',\n  marygold: 'button-marygold',\n  pearl: 'button-pearl',\n  orange: 'button-orange',\n  red: 'button-red',\n  saffron: 'button-saffron',\n  sand: 'button-sand',\n  sienna: 'button-sienna',\n  ultramarine: 'button-ultramarine',\n  verdigris: 'button-verdigris',\n  wave: 'button-wave',\n  white: 'button-white',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst colorGuard = (color: string | undefined): color is keyof typeof BUTTON_COLORS => {\n  return color != undefined && color in BUTTON_COLORS;\n};\n\nconst getButtonColor = (color: string | undefined) => {\n  if (colorGuard(color)) {\n    return BUTTON_COLORS[color];\n  }\n\n  return BUTTON_COLORS.saffron;\n};\n\nexport const BUTTON_THEMES = {\n  outline: 'button-outline',\n  solid: 'button-solid',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst themeGuard = (color: string | undefined): color is keyof typeof BUTTON_THEMES => {\n  return color != undefined && color in BUTTON_THEMES;\n};\n\nconst getButtonTheme = (theme: string | undefined) => {\n  if (themeGuard(theme)) {\n    return BUTTON_THEMES[theme];\n  }\n\n  return BUTTON_THEMES.solid;\n};\n\nexport const BUTTON_VARIANTS = {\n  circle: 'button-circle',\n  pill: 'button-pill',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst variantGuard = (color: string | undefined): color is keyof typeof BUTTON_VARIANTS => {\n  return color != undefined && color in BUTTON_VARIANTS;\n};\n\nconst getButtonVariant = (variant: string | undefined) => {\n  if (variantGuard(variant)) {\n    return BUTTON_VARIANTS[variant];\n  }\n\n  return BUTTON_VARIANTS.pill;\n};\n\nexport const BUTTON_SIZES = {\n  small: 'button-small',\n  medium: 'button-medium',\n  large: 'button-large',\n  primary: 'button-medium',\n  secondary: 'button-secondary',\n  tertiary: 'button-tertiary',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst sizeGuard = (color: string | undefined): color is keyof typeof BUTTON_SIZES => {\n  return color != undefined && color in BUTTON_SIZES;\n};\n\nconst getButtonSize = (size: ButtonProps['size']) => {\n  if (sizeGuard(size)) {\n    return BUTTON_SIZES[size];\n  }\n\n  return BUTTON_SIZES.medium;\n};\n\nexport const getButtonClasses = ({ color, size, theme, variant }: Params) => {\n  /* keep the \"flex\" class outside of \"button-*\" so that it can be overridden in responsive */\n  return clsx(\n    'flex',\n    'button',\n    getButtonTheme(theme),\n    getButtonColor(color),\n    getButtonVariant(variant),\n    getButtonSize(size),\n  );\n};\n"],"mappings":";;AAsBA,IAAa,IAAgB;CAC3B,OAAO;CACP,OAAO;CACP,UAAU;CACV,WAAW;CACX,UAAU;CACV,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,MAAM;CACN,QAAQ;CACR,aAAa;CACb,WAAW;CACX,MAAM;CACN,OAAO;CACR,EAEK,KAAc,MACX,KAAS,QAAa,KAAS,GAGlC,KAAkB,MAClB,EAAW,EAAM,GACZ,EAAc,KAGhB,EAAc,SAGV,IAAgB;CAC3B,SAAS;CACT,OAAO;CACR,EAEK,KAAc,MACX,KAAS,QAAa,KAAS,GAGlC,KAAkB,MAClB,EAAW,EAAM,GACZ,EAAc,KAGhB,EAAc,OAGV,IAAkB;CAC7B,QAAQ;CACR,MAAM;CACP,EAEK,KAAgB,MACb,KAAS,QAAa,KAAS,GAGlC,KAAoB,MACpB,EAAa,EAAQ,GAChB,EAAgB,KAGlB,EAAgB,MAGZ,IAAe;CAC1B,OAAO;CACP,QAAQ;CACR,OAAO;CACP,SAAS;CACT,WAAW;CACX,UAAU;CACX,EAEK,KAAa,MACV,KAAS,QAAa,KAAS,GAGlC,KAAiB,MACjB,EAAU,EAAK,GACV,EAAa,KAGf,EAAa,QAGT,KAAoB,EAAE,UAAO,SAAM,UAAO,iBAE9C,EACL,QACA,UACA,EAAe,EAAM,EACrB,EAAe,EAAM,EACrB,EAAiB,EAAQ,EACzB,EAAc,EAAK,CACpB"}

package/ui/forms/Filter.d.ts

@@ -1,9 +1,13 @@
-import { FormControlProps } from './FormControl';
-export interface FilterProps<Value = string> extends FormControlProps<Value> {
+import { ComponentPropsWithoutRef } from 'react';
+export interface FilterProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
     /**
      * Is it attached to a dropdown?
      */
     hasDropdown?: boolean;
-    onChange?: (name: string, value: Value | null) => void;
+    /**
+     * @deprecated use ["data-testid"] instead
+     */
+    dataTestId?: string;
+    'data-testid'?: string;
 }
-export declare function Filter<Value = string>(props: FilterProps<Value>): import("react/jsx-runtime").JSX.Element;
+export declare function Filter(props: FilterProps): import("react/jsx-runtime").JSX.Element;

package/ui/forms/Filter.js

@@ -1,68 +1,46 @@
 import { t as e } from "../../chunks/clsx.js";
-import { useInternalStatus as t } from "../hooks/useInternalStatus.js";
-import { useValue as n } from "../hooks/useValue.js";
-import { useId as r } from "react";
-import { Icon as i } from "@clubmed/trident-icons";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useId as t } from "react";
+import { Icon as n } from "@clubmed/trident-icons";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region lib/ui/forms/Filter.tsx
-function s(s) {
-	let c = r(), { id: l = c, name: u = l, className: d, dataTestId: f, disabled: p = !1, checked: m = !1, value: h, tabIndex: g = 0, validationStatus: _ = "default", errorMessage: v, onChange: y, hasDropdown: b, children: x, ...S } = s, { value: C, setValue: w } = n({
-		name: u,
-		initialValue: m,
-		onChange(e, t) {
-			y?.(e, t ? h === void 0 ? t : h : null);
-		}
-	}), T = t({
-		isDisabled: p,
-		validationStatus: _
-	}) === "error" && v;
-	return /* @__PURE__ */ o("div", {
-		className: e(d, "relative"),
-		children: [/* @__PURE__ */ o("label", {
-			"data-testid": `filter-container-${l}`,
+function a(a) {
+	let o = t(), { id: s = o, name: c = s, className: l, dataTestId: u, disabled: d = !1, "data-testid": f, tabIndex: p = 0, hasDropdown: m, children: h, ...g } = a;
+	return /* @__PURE__ */ r("div", {
+		className: e(l, "relative"),
+		children: /* @__PURE__ */ i("label", {
+			"data-testid": `filter-container-${s}`,
 			className: "relative",
-			children: [/* @__PURE__ */ a("input", {
-				...S,
-				name: u,
-				"data-testid": f,
+			children: [/* @__PURE__ */ r("input", {
+				...g,
+				id: s,
+				name: c,
+				"data-testid": f ?? u,
 				type: "checkbox",
-				tabIndex: g,
-				onChange: () => {
-					p || w(!C);
-				},
-				checked: C,
+				tabIndex: p,
 				"data-name": "Filter",
-				disabled: p,
-				value: h
-			}), /* @__PURE__ */ o("span", { children: [
-				/* @__PURE__ */ a("span", {
+				disabled: d
+			}), /* @__PURE__ */ i("span", { children: [
+				/* @__PURE__ */ r("span", {
 					className: "font-semibold",
-					children: x
+					children: h
 				}),
-				/* @__PURE__ */ a(i, {
+				/* @__PURE__ */ r(n, {
 					className: "check",
 					width: null,
 					name: "CheckDefault",
 					color: "black"
 				}),
-				b && /* @__PURE__ */ a(i, {
+				m && /* @__PURE__ */ r(n, {
 					name: "ArrowDefaultDown",
 					className: "ml-8",
 					width: "24px",
 					color: "black"
 				})
 			] })]
-		}), T && /* @__PURE__ */ o("span", {
-			className: "text-red text-b4 flex items-start space-x-4 ps-20",
-			role: "alert",
-			children: [/* @__PURE__ */ a(i, {
-				name: "Error",
-				width: "20px"
-			}), v]
-		})]
+		})
 	});
 }
 //#endregion
-export { s as Filter };
+export { a as Filter };
 
 //# sourceMappingURL=Filter.js.map