@clubmed/trident-ui 2.0.0-beta.9 → 2.0.0

package/ui/Scrollbar.js

@@ -0,0 +1,68 @@
+"use client";
+import { t as e } from "../chunks/clsx.js";
+import { useCallback as t, useRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/ui/Scrollbar.tsx
+function a({ children: a, timelineName: o = "--scroller", scrollbarWidth: s = "60%", variant: c = "light", className: l, scrollerClassName: u, scrollbarClassName: d, "aria-label": f = "Scrollable content" }) {
+	let p = n(null), m = n(null), h = n(null), g = t((e) => {
+		e.preventDefault();
+		let t = p.current, n = m.current, r = h.current;
+		if (!t || !n || !r) return;
+		n.setPointerCapture(e.pointerId);
+		let i = n.getBoundingClientRect(), a = n.clientWidth - r.offsetWidth - 2, o = t.scrollWidth - t.clientWidth;
+		if (e.target !== r) {
+			let n = e.clientX - i.left - 1;
+			t.scrollLeft = Math.max(0, Math.min(a, n - r.offsetWidth / 2)) / a * o;
+		}
+		let s = e.clientX, c = t.scrollLeft, l = (e) => {
+			let n = (e.clientX - s) / a * o;
+			t.scrollLeft = Math.max(0, Math.min(o, c + n));
+		}, u = () => {
+			n.removeEventListener("pointermove", l), n.removeEventListener("pointerup", u);
+		};
+		n.addEventListener("pointermove", l), n.addEventListener("pointerup", u);
+	}, []);
+	return /* @__PURE__ */ i("div", {
+		className: e(l),
+		style: { timelineScope: o },
+		children: [/* @__PURE__ */ r("div", {
+			ref: p,
+			"data-scroller": c,
+			className: u,
+			style: { scrollTimeline: `${o} x` },
+			role: "region",
+			"aria-label": f,
+			tabIndex: 0,
+			children: a
+		}), /* @__PURE__ */ r("div", {
+			ref: m,
+			"data-scrollbar": !0,
+			className: d,
+			style: {
+				"--scrollbar-width": s,
+				pointerEvents: "auto",
+				cursor: "pointer"
+			},
+			role: "scrollbar",
+			"aria-controls": "scrollable-content",
+			"aria-orientation": "horizontal",
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			"aria-valuenow": 0,
+			onPointerDown: g,
+			children: /* @__PURE__ */ r("div", {
+				ref: h,
+				"data-scrollprogress": !0,
+				style: {
+					animationTimeline: o,
+					pointerEvents: "auto"
+				},
+				role: "presentation"
+			})
+		})]
+	});
+}
+//#endregion
+export { a as Scrollbar };
+
+//# sourceMappingURL=Scrollbar.js.map

package/ui/Scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.js","names":[],"sources":["../../lib/ui/Scrollbar.tsx"],"sourcesContent":["'use client';\n\nimport { clsx } from 'clsx';\nimport React, { useCallback, useRef } from 'react';\n\ninterface ScrollbarProps {\n  children: React.ReactNode;\n  timelineName?: string;\n  scrollbarWidth?: string;\n  variant?: 'light' | 'dark';\n  className?: string;\n  scrollerClassName?: string;\n  scrollbarClassName?: string;\n  'aria-label'?: string;\n}\n\nfunction Scrollbar({\n  children,\n  timelineName = '--scroller',\n  scrollbarWidth = '60%',\n  variant = 'light',\n  className,\n  scrollerClassName,\n  scrollbarClassName,\n  'aria-label': ariaLabel = 'Scrollable content',\n}: ScrollbarProps) {\n  const scrollerRef = useRef<HTMLDivElement>(null);\n  const trackRef = useRef<HTMLDivElement>(null);\n  const nubRef = useRef<HTMLDivElement>(null);\n\n  const handleTrackPointerDown = useCallback((e: React.PointerEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    const scroller = scrollerRef.current;\n    const track = trackRef.current;\n    const nub = nubRef.current;\n    if (!scroller || !track || !nub) return;\n\n    track.setPointerCapture(e.pointerId);\n\n    const rect = track.getBoundingClientRect();\n    const maxNubOffset = track.clientWidth - nub.offsetWidth - 2;\n    const maxScrollLeft = scroller.scrollWidth - scroller.clientWidth;\n\n    if (e.target !== nub) {\n      const clickX = e.clientX - rect.left - 1;\n      const targetNubLeft = Math.max(0, Math.min(maxNubOffset, clickX - nub.offsetWidth / 2));\n      scroller.scrollLeft = (targetNubLeft / maxNubOffset) * maxScrollLeft;\n    }\n\n    const startX = e.clientX;\n    const startScrollLeft = scroller.scrollLeft;\n\n    const onPointerMove = (moveEvent: PointerEvent) => {\n      const scrollDelta = ((moveEvent.clientX - startX) / maxNubOffset) * maxScrollLeft;\n      scroller.scrollLeft = Math.max(0, Math.min(maxScrollLeft, startScrollLeft + scrollDelta));\n    };\n\n    const onPointerUp = () => {\n      track.removeEventListener('pointermove', onPointerMove);\n      track.removeEventListener('pointerup', onPointerUp);\n    };\n\n    track.addEventListener('pointermove', onPointerMove);\n    track.addEventListener('pointerup', onPointerUp);\n  }, []);\n\n  return (\n    <div className={clsx(className)} style={{ timelineScope: timelineName } as React.CSSProperties}>\n      <div\n        ref={scrollerRef}\n        data-scroller={variant}\n        className={scrollerClassName}\n        style={{ scrollTimeline: `${timelineName} x` } as React.CSSProperties}\n        role=\"region\"\n        aria-label={ariaLabel}\n        tabIndex={0}\n      >\n        {children}\n      </div>\n      <div\n        ref={trackRef}\n        data-scrollbar\n        className={scrollbarClassName}\n        style={\n          {\n            '--scrollbar-width': scrollbarWidth,\n            pointerEvents: 'auto',\n            cursor: 'pointer',\n          } as React.CSSProperties\n        }\n        role=\"scrollbar\"\n        aria-controls=\"scrollable-content\"\n        aria-orientation=\"horizontal\"\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-valuenow={0}\n        onPointerDown={handleTrackPointerDown}\n      >\n        <div\n          ref={nubRef}\n          data-scrollprogress\n          style={{ animationTimeline: timelineName, pointerEvents: 'auto' } as React.CSSProperties}\n          role=\"presentation\"\n        />\n      </div>\n    </div>\n  );\n}\n\nexport { Scrollbar };\nexport type { ScrollbarProps };\n"],"mappings":";;;;;AAgBA,SAAS,EAAU,EACjB,aACA,kBAAe,cACf,oBAAiB,OACjB,aAAU,SACV,cACA,sBACA,uBACA,cAAc,IAAY,wBACT;CACjB,IAAM,IAAc,EAAuB,KAAK,EAC1C,IAAW,EAAuB,KAAK,EACvC,IAAS,EAAuB,KAAK,EAErC,IAAyB,GAAa,MAA0C;AACpF,IAAE,gBAAgB;EAClB,IAAM,IAAW,EAAY,SACvB,IAAQ,EAAS,SACjB,IAAM,EAAO;AACnB,MAAI,CAAC,KAAY,CAAC,KAAS,CAAC,EAAK;AAEjC,IAAM,kBAAkB,EAAE,UAAU;EAEpC,IAAM,IAAO,EAAM,uBAAuB,EACpC,IAAe,EAAM,cAAc,EAAI,cAAc,GACrD,IAAgB,EAAS,cAAc,EAAS;AAEtD,MAAI,EAAE,WAAW,GAAK;GACpB,IAAM,IAAS,EAAE,UAAU,EAAK,OAAO;AAEvC,KAAS,aADa,KAAK,IAAI,GAAG,KAAK,IAAI,GAAc,IAAS,EAAI,cAAc,EAAE,CAAC,GAChD,IAAgB;;EAGzD,IAAM,IAAS,EAAE,SACX,IAAkB,EAAS,YAE3B,KAAiB,MAA4B;GACjD,IAAM,KAAgB,EAAU,UAAU,KAAU,IAAgB;AACpE,KAAS,aAAa,KAAK,IAAI,GAAG,KAAK,IAAI,GAAe,IAAkB,EAAY,CAAC;KAGrF,UAAoB;AAExB,GADA,EAAM,oBAAoB,eAAe,EAAc,EACvD,EAAM,oBAAoB,aAAa,EAAY;;AAIrD,EADA,EAAM,iBAAiB,eAAe,EAAc,EACpD,EAAM,iBAAiB,aAAa,EAAY;IAC/C,EAAE,CAAC;AAEN,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAU;EAAE,OAAO,EAAE,eAAe,GAAc;YAAvE,CACE,kBAAC,OAAD;GACE,KAAK;GACL,iBAAe;GACf,WAAW;GACX,OAAO,EAAE,gBAAgB,GAAG,EAAa,KAAK;GAC9C,MAAK;GACL,cAAY;GACZ,UAAU;GAET;GACG,CAAA,EACN,kBAAC,OAAD;GACE,KAAK;GACL,kBAAA;GACA,WAAW;GACX,OACE;IACE,qBAAqB;IACrB,eAAe;IACf,QAAQ;IACT;GAEH,MAAK;GACL,iBAAc;GACd,oBAAiB;GACjB,iBAAe;GACf,iBAAe;GACf,iBAAe;GACf,eAAe;aAEf,kBAAC,OAAD;IACE,KAAK;IACL,uBAAA;IACA,OAAO;KAAE,mBAAmB;KAAc,eAAe;KAAQ;IACjE,MAAK;IACL,CAAA;GACE,CAAA,CAAA"}

package/ui/SidebarLayout.d.ts

@@ -26,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

@@ -3,65 +3,65 @@ import { n as t } from "../chunks/bundle-mjs.js";
 import { useSlots as n } from "./hooks/useSlots.js";
 import { HamburgerIcon as r } from "./HamburgerIcon.js";
 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";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Icon as l } from "@clubmed/trident-icons";
 //#region lib/ui/SidebarLayout.tsx
 function u(e) {
 	if ("href" in e) {
 		let { children: t, icon: n, label: r, ...i } = e;
-		return /* @__PURE__ */ c("a", {
+		return /* @__PURE__ */ s("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", {
+	return /* @__PURE__ */ s("button", {
 		...i,
-		className: "flex whitespace-nowrap items-center text-white outline-none rounded-pill relative group/sidebar-item",
+		className: "flex whitespace-nowrap items-center text-white outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 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", {
+	return /* @__PURE__ */ c("div", {
 		className: "col-start-1 col-end-3",
-		children: [/* @__PURE__ */ l(u, {
+		children: [/* @__PURE__ */ c(u, {
 			...e,
 			onClick: (e) => {
 				o && a && (e.preventDefault(), a());
 			},
 			style: { anchorName: `--${i}` },
-			children: [/* @__PURE__ */ l("div", {
+			children: [/* @__PURE__ */ c("div", {
 				className: "relative",
-				children: [/* @__PURE__ */ c("div", {
+				children: [/* @__PURE__ */ s("div", {
 					className: t("aspect-square w-48 rounded-full flex items-center justify-center"),
-					children: /* @__PURE__ */ c(s, {
+					children: /* @__PURE__ */ s(l, {
 						name: e.icon,
 						className: "w-24 text-white"
 					})
-				}), /* @__PURE__ */ c("div", {
+				}), /* @__PURE__ */ s("div", {
 					className: "absolute inset-0 pointer-events-none",
 					"aria-hidden": "true",
 					inert: !0,
-					children: /* @__PURE__ */ c("div", {
-						className: t("max-md:hidden aspect-square w-48 rounded-full flex items-center justify-center bg-lightSand text-black", "[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 ? "[--sidebarItem_clipCircle:100%]" : "[--sidebarItem_clipCircle:0%]", "group-hover/sidebar-item:[--sidebarItem_clipCircle:100%] group-focus-within/sidebar-item:[--sidebarItem_clipCircle:100%]", !n && "group-hover/sidebar-item:bg-lightSand/80 group-focus-within/sidebar-item:bg-lightSand/80"),
-						children: /* @__PURE__ */ c(s, {
+					children: /* @__PURE__ */ s("div", {
+						className: t("max-md:hidden aspect-square w-48 rounded-full flex items-center justify-center bg-lightSand text-black", "[clip-path:circle(var(--sidebarItem_clipCircle))] transition-all duration-200 delay-100 ease-in-out group-focus-visible/sidebar-item:ring-4 group-focus-visible/sidebar-item:ring-black group-focus-visible/sidebar-item:ring-offset-2", n ? "[--sidebarItem_clipCircle:100%]" : "[--sidebarItem_clipCircle:0%]", "group-hover/sidebar-item:[--sidebarItem_clipCircle:100%] group-focus-within/sidebar-item:[--sidebarItem_clipCircle:100%]", !n && "group-hover/sidebar-item:bg-lightSand/80 group-focus-within/sidebar-item:bg-lightSand/80"),
+						children: /* @__PURE__ */ s(l, {
 							name: e.icon,
 							className: "w-24"
 						})
 					})
 				})]
-			}), /* @__PURE__ */ c("span", {
+			}), /* @__PURE__ */ s("span", {
 				className: t("transition-all duration-300 ease-in-out whitespace-nowrap ps-8 pe-12 truncate md:max-w-240", r ? "opacity-0" : "opacity-100"),
 				children: e.label
 			})]
-		}), o && /* @__PURE__ */ c("div", {
+		}), o && /* @__PURE__ */ s("div", {
 			className: t("grid transition-[grid-template-rows,opacity] duration-300 ease-in-out overflow-hidden max-md:grid-rows-[1fr] max-md:opacity-100", r ? "grid-rows-[0fr] opacity-0" : "grid-rows-[1fr] opacity-100 pb-12"),
 			inert: r,
-			children: /* @__PURE__ */ c("div", {
+			children: /* @__PURE__ */ s("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", {
+				children: e.items.map((e, t) => /* @__PURE__ */ s("a", {
 					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
@@ -69,84 +69,92 @@ var d = ({ item: e, isActive: n = !1, isCollapsed: r = !1, anchorName: i, onItem
 			})
 		})]
 	});
-}, f = ({ isCollapsed: e }) => /* @__PURE__ */ c("svg", {
+}, f = ({ isCollapsed: e }) => /* @__PURE__ */ s("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: "33",
 	height: "48",
-	children: /* @__PURE__ */ l("g", {
+	children: /* @__PURE__ */ c("g", {
 		fill: "none",
 		fillRule: "nonzero",
-		children: [/* @__PURE__ */ c("path", {
+		children: [/* @__PURE__ */ s("path", {
 			fill: "#FFF",
 			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"
-		}), /* @__PURE__ */ c("g", {
+		}), /* @__PURE__ */ s("g", {
 			className: t("transition-transform duration-500 ease-in-out origin-center [transform-box:fill-box]", e ? "rotate-180" : "rotate-0"),
-			children: /* @__PURE__ */ c("path", {
+			children: /* @__PURE__ */ s("path", {
 				fill: "#1E2643",
 				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"
 			})
 		})]
 	})
 });
-function p() {
-	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 m = ({ items: i, children: a, className: o, activeIndex: s = 0, ...u }) => {
-	let { isCollapsed: m, setIsCollapsed: h, handleToggleCollapse: g } = p(), { "header-logo": _, header: v, "header-actions": y, children: b } = n(a, [
+var m = ({ items: i, children: a, className: o, activeIndex: l = 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"
 	]);
-	return /* @__PURE__ */ l("div", {
+	return /* @__PURE__ */ c("div", {
 		"data-name": "SidebarLayout",
 		className: e("h-screen overflow-clip flex flex-col bg-ultramarine", o),
-		...u,
-		children: [/* @__PURE__ */ l("header", {
+		...h,
+		children: [/* @__PURE__ */ c("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,
-				/* @__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 })
+				b,
+				x,
+				/* @__PURE__ */ s("button", {
+					className: "md:hidden w-48 h-48 focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 rounded-full flex items-center justify-center text-white transition-opacity outline-none",
+					"aria-label": g ? "Open the navigation menu" : "Close the navigation menu",
+					onClick: v,
+					children: /* @__PURE__ */ s(r, { isActive: !g })
 				})
 			]
-		}), /* @__PURE__ */ l("div", {
+		}), /* @__PURE__ */ c("div", {
 			className: "flex h-full overflow-x-clip overflow-y-hidden",
-			children: [/* @__PURE__ */ l("aside", {
-				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", m ? "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",
-					style: { positionAnchor: `--sidebar-item-${s}` },
-					children: /* @__PURE__ */ c(f, { isCollapsed: m })
-				}), /* @__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(d, {
+			children: [/* @__PURE__ */ c("aside", {
+				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__ */ s("button", {
+					className: "hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]",
+					onClick: v,
+					"aria-label": g ? "Expand sidebar" : "Collapse sidebar",
+					style: { positionAnchor: `--sidebar-item-${l}` },
+					children: /* @__PURE__ */ s(f, { isCollapsed: g })
+				}), /* @__PURE__ */ s("nav", {
+					className: t("max-md:divide-y-1 p-8 max-md:h-full max-md:overflow-auto md:flex-1 md:min-h-0 md:overflow-y-auto md:overflow-x-hidden 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__ */ s(d, {
 						item: e,
-						isActive: t === s,
-						isCollapsed: m,
+						isActive: t === l,
+						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", {
+			}), /* @__PURE__ */ s("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",
-				children: b
+				children: S
 			})]
 		})]
 	});

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 PropsWithChildren,\n  type ReactNode,\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}\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            '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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"}
+{"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 focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 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-4 group-focus-visible/sidebar-item:ring-black group-focus-visible/sidebar-item:ring-offset-2',\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-4 focus-visible:ring-black focus-visible:ring-offset-2 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-4 focus-visible:ring-black focus-visible:ring-offset-2 [--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:flex-1 md:min-h-0 md:overflow-y-auto md:overflow-x-hidden 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/SparkleWrapper.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export interface SparkleWrapperProps extends HTMLAttributes<HTMLDivElement> {
+    count?: number;
+}
+export declare function SparkleWrapper({ children, className, count, ...props }: PropsWithChildren<SparkleWrapperProps>): import("react/jsx-runtime").JSX.Element;

package/ui/SparkleWrapper.js

@@ -0,0 +1,56 @@
+"use client";
+import { t as e } from "../chunks/clsx.js";
+import { useLayoutEffect as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Icon as o } from "@clubmed/trident-icons";
+//#region lib/ui/SparkleWrapper.tsx
+function s(e, t) {
+	return e + Math.random() * (t - e);
+}
+function c(e) {
+	return Array.from({ length: e }, () => ({
+		angle: Math.random() * 360,
+		distance: s(60, 110),
+		delay: Math.round(s(0, 150)),
+		size: Math.round(s(8, 20))
+	}));
+}
+function l(e, t, n, r) {
+	return Math.abs(e) < 1e-6 ? r / Math.abs(t) : Math.abs(t) < 1e-6 ? n / Math.abs(e) : Math.min(n / Math.abs(e), r / Math.abs(t));
+}
+function u({ children: u, className: d, count: f = 7, ...p }) {
+	let m = n(null), [h, g] = r([0, 0]), [_] = r(() => c(Math.round(s(f, f + 3))));
+	return t(() => {
+		if (!m.current) return;
+		let { width: e, height: t } = m.current.getBoundingClientRect();
+		g([e / 2, t / 2]);
+	}, []), /* @__PURE__ */ a("div", {
+		...p,
+		className: e("relative inline-flex items-center justify-center", d),
+		children: [_.map(({ angle: e, distance: t, delay: n, size: r }, a) => {
+			let s = e * Math.PI / 180, c = Math.cos(s), u = Math.sin(s), [d, f] = h, p = d > 0 || f > 0 ? l(c, u, d, f) : 0;
+			return /* @__PURE__ */ i(o, {
+				name: "Diamond",
+				"aria-hidden": "true",
+				className: "absolute top-1/2 left-1/2 animate-sparkle-fly pointer-events-none",
+				style: {
+					"--sparkle-start-x": `${Math.round(c * p)}px`,
+					"--sparkle-start-y": `${Math.round(u * p)}px`,
+					"--sparkle-end-x": `${Math.round(c * (p + t))}px`,
+					"--sparkle-end-y": `${Math.round(u * (p + t))}px`,
+					animationDelay: `${n}ms`,
+					width: `${r}px`,
+					height: `${r}px`
+				}
+			}, a);
+		}), /* @__PURE__ */ i("div", {
+			ref: m,
+			className: "relative z-10 animate-bounce-enter",
+			children: u
+		})]
+	});
+}
+//#endregion
+export { u as SparkleWrapper };
+
+//# sourceMappingURL=SparkleWrapper.js.map

package/ui/SparkleWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparkleWrapper.js","names":[],"sources":["../../lib/ui/SparkleWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport type { HTMLAttributes, PropsWithChildren } from 'react';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nfunction randomBetween(min: number, max: number) {\n  return min + Math.random() * (max - min);\n}\n\nfunction generateSparkles(count: number) {\n  return Array.from({ length: count }, () => ({\n    angle: Math.random() * 360,\n    distance: randomBetween(60, 110),\n    delay: Math.round(randomBetween(0, 150)),\n    size: Math.round(randomBetween(8, 20)),\n  }));\n}\n\nfunction edgeT(cos: number, sin: number, hw: number, hh: number): number {\n  if (Math.abs(cos) < 1e-6) return hh / Math.abs(sin);\n  if (Math.abs(sin) < 1e-6) return hw / Math.abs(cos);\n  return Math.min(hw / Math.abs(cos), hh / Math.abs(sin));\n}\n\nexport interface SparkleWrapperProps extends HTMLAttributes<HTMLDivElement> {\n  count?: number;\n}\n\nexport function SparkleWrapper({\n  children,\n  className,\n  count = 7,\n  ...props\n}: PropsWithChildren<SparkleWrapperProps>) {\n  const childRef = useRef<HTMLDivElement>(null);\n  const [halfSize, setHalfSize] = useState<[number, number]>([0, 0]);\n  const [sparkles] = useState(() => generateSparkles(Math.round(randomBetween(count, count + 3))));\n\n  useLayoutEffect(() => {\n    if (!childRef.current) return;\n    const { width, height } = childRef.current.getBoundingClientRect();\n    setHalfSize([width / 2, height / 2]);\n  }, []);\n\n  return (\n    <div {...props} className={clsx('relative inline-flex items-center justify-center', className)}>\n      {sparkles.map(({ angle, distance, delay, size }, i) => {\n        const rad = (angle * Math.PI) / 180;\n        const cos = Math.cos(rad);\n        const sin = Math.sin(rad);\n        const [hw, hh] = halfSize;\n        const t = hw > 0 || hh > 0 ? edgeT(cos, sin, hw, hh) : 0;\n\n        return (\n          <Icon\n            key={i}\n            name=\"Diamond\"\n            aria-hidden=\"true\"\n            className=\"absolute top-1/2 left-1/2 animate-sparkle-fly pointer-events-none\"\n            style={\n              {\n                '--sparkle-start-x': `${Math.round(cos * t)}px`,\n                '--sparkle-start-y': `${Math.round(sin * t)}px`,\n                '--sparkle-end-x': `${Math.round(cos * (t + distance))}px`,\n                '--sparkle-end-y': `${Math.round(sin * (t + distance))}px`,\n                animationDelay: `${delay}ms`,\n                width: `${size}px`,\n                height: `${size}px`,\n              } as React.CSSProperties\n            }\n          />\n        );\n      })}\n      <div ref={childRef} className=\"relative z-10 animate-bounce-enter\">\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAOA,SAAS,EAAc,GAAa,GAAa;AAC/C,QAAO,IAAM,KAAK,QAAQ,IAAI,IAAM;;AAGtC,SAAS,EAAiB,GAAe;AACvC,QAAO,MAAM,KAAK,EAAE,QAAQ,GAAO,SAAS;EAC1C,OAAO,KAAK,QAAQ,GAAG;EACvB,UAAU,EAAc,IAAI,IAAI;EAChC,OAAO,KAAK,MAAM,EAAc,GAAG,IAAI,CAAC;EACxC,MAAM,KAAK,MAAM,EAAc,GAAG,GAAG,CAAA;EACtC,EAAE;;AAGL,SAAS,EAAM,GAAa,GAAa,GAAY,GAAoB;AAGvE,QAFI,KAAK,IAAI,EAAI,GAAG,OAAa,IAAK,KAAK,IAAI,EAAI,GAC/C,KAAK,IAAI,EAAI,GAAG,OAAa,IAAK,KAAK,IAAI,EAAI,GAC5C,KAAK,IAAI,IAAK,KAAK,IAAI,EAAI,EAAE,IAAK,KAAK,IAAI,EAAI,CAAC;;AAOzD,SAAgB,EAAe,EAC7B,aACA,cACA,WAAQ,GACR,GAAG,KACsC;CACzC,IAAM,IAAW,EAAuB,KAAK,EACvC,CAAC,GAAU,KAAe,EAA2B,CAAC,GAAG,EAAE,CAAC,EAC5D,CAAC,KAAY,QAAe,EAAiB,KAAK,MAAM,EAAc,GAAO,IAAQ,EAAE,CAAC,CAAC,CAAC;AAQhG,QANA,QAAsB;AACpB,MAAI,CAAC,EAAS,QAAS;EACvB,IAAM,EAAE,UAAO,cAAW,EAAS,QAAQ,uBAAuB;AAClE,IAAY,CAAC,IAAQ,GAAG,IAAS,EAAE,CAAC;IACnC,EAAE,CAAC,EAGJ,kBAAC,OAAD;EAAK,GAAI;EAAO,WAAW,EAAK,oDAAoD,EAAU;YAA9F,CACG,EAAS,KAAK,EAAE,UAAO,aAAU,UAAO,WAAQ,MAAM;GACrD,IAAM,IAAO,IAAQ,KAAK,KAAM,KAC1B,IAAM,KAAK,IAAI,EAAI,EACnB,IAAM,KAAK,IAAI,EAAI,EACnB,CAAC,GAAI,KAAM,GACX,IAAI,IAAK,KAAK,IAAK,IAAI,EAAM,GAAK,GAAK,GAAI,EAAG,GAAG;AAEvD,UACE,kBAAC,GAAD;IAEE,MAAK;IACL,eAAY;IACZ,WAAU;IACV,OACE;KACE,qBAAqB,GAAG,KAAK,MAAM,IAAM,EAAE,CAAC;KAC5C,qBAAqB,GAAG,KAAK,MAAM,IAAM,EAAE,CAAC;KAC5C,mBAAmB,GAAG,KAAK,MAAM,KAAO,IAAI,GAAU,CAAC;KACvD,mBAAmB,GAAG,KAAK,MAAM,KAAO,IAAI,GAAU,CAAC;KACvD,gBAAgB,GAAG,EAAM;KACzB,OAAO,GAAG,EAAK;KACf,QAAQ,GAAG,EAAK;;IAGpB,EAfK,EAeL;IAEJ,EACF,kBAAC,OAAD;GAAK,KAAK;GAAU,WAAU;GAC3B;GACG,CAAA,CAAA"}

package/ui/Tag.js

@@ -1,13 +1,13 @@
 import { t as e } from "../chunks/clsx.js";
 import { getBgColor as t, getBorderColor as n, getTextColor as r } from "./helpers/colors/colors.js";
 import { twMerge as i } from "./helpers/twMerge.js";
-import { Icon as a } from "@clubmed/trident-icons";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Icon as s } from "@clubmed/trident-icons";
 //#region lib/ui/Tag.tsx
 var c = ({ className: c, backgroundColor: l = "saffron", border: u = l, color: d = "black", icon: f, label: p = "", theme: m = "both", iconClassName: h, labelClassName: g, iconWidth: _, ...v }) => {
 	if (!p && !f) return null;
 	let y = n(u), b = t(l), x = r(d), S = !!f, C = m === "both" && !S ? "label" : m, w = C === "both" || C === "swap" || C === "unfold" || C === "none", T = S && (C === "icon" || w), E = C === "label" || C === "pill" || w;
-	return /* @__PURE__ */ s("span", {
+	return /* @__PURE__ */ o("span", {
 		role: "note",
 		...v,
 		"data-name": "Tag",
@@ -24,16 +24,16 @@ var c = ({ className: c, backgroundColor: l = "saffron", border: u = l, color: d
 		}, y, b, x), c),
 		title: p,
 		children: [
-			C === "monogram" && /* @__PURE__ */ o("span", {
+			C === "monogram" && /* @__PURE__ */ a("span", {
 				className: "size-24 text-center leading-[1.5rem]",
 				children: p
 			}),
-			T && /* @__PURE__ */ o(a, {
+			T && /* @__PURE__ */ a(s, {
 				width: _ ?? "1.5rem",
 				name: f,
 				className: e({ "sm:hidden": C === "swap" }, h)
 			}),
-			E && /* @__PURE__ */ o("span", {
+			E && /* @__PURE__ */ a("span", {
 				className: e({ "hidden sm:block": C === "swap" || C === "unfold" }, g),
 				children: p
 			})

package/ui/Toggle.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef, FunctionComponent, ReactNode } from 'react';
+import { Colors } from './types/Colors';
+interface Item extends Omit<ComponentPropsWithoutRef<'button'>, 'children'> {
+    color: Colors;
+    id: string;
+    label: ReactNode;
+}
+export interface ToggleProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'onClick'> {
+    index?: number;
+    items: Item[];
+    onClick?: (index: number) => void;
+    size?: 'default' | 'small';
+}
+export declare const Toggle: FunctionComponent<ToggleProps>;
+export {};

package/ui/Toggle.js

@@ -0,0 +1,42 @@
+"use client";
+import { t as e } from "../chunks/clsx.js";
+import { getComplementaryTextColor as t } from "./helpers/colors/colors.js";
+import { createElement as n, useEffect as r, useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region lib/ui/Toggle.tsx
+var o = ({ className: o, index: s = 0, items: c = [], onClick: l, size: u = "default", ...d }) => {
+	let [f, p] = i(s);
+	if (r(() => {
+		p(s);
+	}, [s]), !c.length) return null;
+	let m = { "--toggle-color": `var(--color-${c[f].color || "black"})` };
+	return /* @__PURE__ */ a("div", {
+		...d,
+		className: e(`rounded-pill ${u === "small" ? "text-b4" : "text-b3"} border p-4 font-bold`, o),
+		role: "group",
+		children: /* @__PURE__ */ a("div", {
+			className: e("toggle relative isolate flex", "before:rounded-pill before:absolute before:z-0 before:bg-(--toggle-color) before:transition-all before:duration-300 before:ease-out"),
+			style: m,
+			children: c.map(({ color: r, label: i, ...a }, o) => {
+				let s = f === o;
+				return /* @__PURE__ */ n("button", {
+					...a,
+					"aria-pressed": s,
+					className: e(a.className, `rounded-pill relative cursor-pointer overflow-hidden ${u === "small" ? "px-12 py-4" : "px-20 py-8"} transition-colors`, {
+						active: s,
+						[t(r)]: s
+					}, "before:absolute before:inset-0 before:-z-1 before:transition-colors hover:before:bg-pearl outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2"),
+					key: a.id,
+					onClick: () => {
+						p(o), l?.(o);
+					},
+					type: "button"
+				}, i);
+			})
+		})
+	});
+};
+//#endregion
+export { o as Toggle };
+
+//# sourceMappingURL=Toggle.js.map

package/ui/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","names":[],"sources":["../../lib/ui/Toggle.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, CSSProperties, FunctionComponent, ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { getComplementaryTextColor } from './helpers/colors/colors';\nimport type { Colors } from './types/Colors';\n\ninterface Item extends Omit<ComponentPropsWithoutRef<'button'>, 'children'> {\n  color: Colors;\n  id: string;\n  label: ReactNode;\n}\n\nexport interface ToggleProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'onClick'> {\n  index?: number;\n  items: Item[];\n  onClick?: (index: number) => void;\n  size?: 'default' | 'small';\n}\n\nexport const Toggle: FunctionComponent<ToggleProps> = ({\n  className,\n  index = 0,\n  items = [],\n  onClick,\n  size = 'default',\n  ...attrs\n}) => {\n  const [active, setActive] = useState(index);\n\n  useEffect(() => {\n    setActive(index);\n  }, [index]);\n\n  if (!items.length) {\n    return null;\n  }\n\n  const style = {\n    '--toggle-color': `var(--color-${items[active].color || 'black'})`,\n  } as CSSProperties;\n\n  return (\n    <div\n      {...attrs}\n      className={clsx(\n        `rounded-pill ${size === 'small' ? 'text-b4' : 'text-b3'} border p-4 font-bold`,\n        className,\n      )}\n      role=\"group\"\n    >\n      <div\n        className={clsx(\n          'toggle relative isolate flex',\n          'before:rounded-pill before:absolute before:z-0 before:bg-(--toggle-color) before:transition-all before:duration-300 before:ease-out',\n        )}\n        style={style}\n      >\n        {items.map(({ color, label, ...item }, i) => {\n          const isActive = active === i;\n\n          return (\n            <button\n              {...item}\n              aria-pressed={isActive}\n              className={clsx(\n                item.className,\n                `rounded-pill relative cursor-pointer overflow-hidden ${size === 'small' ? 'px-12 py-4' : 'px-20 py-8'} transition-colors`,\n                { active: isActive, [getComplementaryTextColor(color)]: isActive },\n                'before:absolute before:inset-0 before:-z-1 before:transition-colors hover:before:bg-pearl outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n              )}\n              key={item.id}\n              onClick={() => {\n                setActive(i);\n                onClick?.(i);\n              }}\n              type=\"button\"\n            >\n              {label}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAqBA,IAAa,KAA0C,EACrD,cACA,WAAQ,GACR,WAAQ,EAAE,EACV,YACA,UAAO,WACP,GAAG,QACC;CACJ,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAM;AAM3C,KAJA,QAAgB;AACd,IAAU,EAAM;IACf,CAAC,EAAM,CAAC,EAEP,CAAC,EAAM,OACT,QAAO;CAGT,IAAM,IAAQ,EACZ,kBAAkB,eAAe,EAAM,GAAQ,SAAS,QAAQ,IACjE;AAED,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,EACT,gBAAgB,MAAS,UAAU,YAAY,UAAU,wBACzD,EACD;EACD,MAAK;YAEL,kBAAC,OAAD;GACE,WAAW,EACT,gCACA,sIACD;GACM;aAEN,EAAM,KAAK,EAAE,UAAO,UAAO,GAAG,KAAQ,MAAM;IAC3C,IAAM,IAAW,MAAW;AAE5B,WACE,kBAAC,UAAD;KACE,GAAI;KACJ,gBAAc;KACd,WAAW,EACT,EAAK,WACL,wDAAwD,MAAS,UAAU,eAAe,aAAa,qBACvG;MAAE,QAAQ;OAAW,EAA0B,EAAM,GAAG;MAAU,EAClE,mLACD;KACD,KAAK,EAAK;KACV,eAAe;AAEb,MADA,EAAU,EAAE,EACZ,IAAU,EAAE;;KAEd,MAAK;KAGE,EADN,EACM;;GAGT,CAAA;EACF,CAAA"}

package/ui/Tooltip.d.ts

@@ -0,0 +1,8 @@
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
+declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): import("react/jsx-runtime").JSX.Element;
+declare function Tooltip({ ...props }: TooltipPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+declare function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
+declare function TooltipContent({ className, side, sideOffset, align, alignOffset, theme, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {
+    theme?: 'dark' | 'light';
+}): import("react/jsx-runtime").JSX.Element;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/ui/Tooltip.js

@@ -0,0 +1,2 @@
+import { i as e, n as t, r as n, t as r } from "../chunks/Tooltip.js";
+export { r as Tooltip, t as TooltipContent, n as TooltipProvider, e as TooltipTrigger };

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

@@ -29,7 +29,7 @@ var t = {
 	primary: "button-medium",
 	secondary: "button-secondary",
 	tertiary: "button-tertiary"
-}, d = (e) => e != null && e in u, f = (e) => d(e) ? u[e] : u.medium, p = ({ color: t, size: n, theme: i, variant: a }) => e("flex", "button", o(i), r(t), l(a), f(n));
+}, d = (e) => e != null && e in u, f = (e) => d(e) ? u[e] : u.medium, p = ({ color: t, size: n, theme: i, variant: a }) => e("flex", "button", "outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", o(i), r(t), l(a), f(n));
 //#endregion
 export { t as BUTTON_COLORS, u as BUTTON_SIZES, i as BUTTON_THEMES, s as BUTTON_VARIANTS, p as getButtonClasses };