@clubmed/trident-ui 2.0.0-beta.4 → 2.0.0-beta.40

package/ui/Scrollbar.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+interface ScrollbarProps {
+    children: React.ReactNode;
+    timelineName?: string;
+    scrollbarWidth?: string;
+    variant?: 'light' | 'dark';
+    className?: string;
+    scrollerClassName?: string;
+    scrollbarClassName?: string;
+    'aria-label'?: string;
+}
+declare function Scrollbar({ children, timelineName, scrollbarWidth, variant, className, scrollerClassName, scrollbarClassName, 'aria-label': ariaLabel, }: ScrollbarProps): import("react/jsx-runtime").JSX.Element;
+export { Scrollbar };
+export type { ScrollbarProps };

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

@@ -88,19 +88,27 @@ var d = ({ item: e, isActive: n = !1, isCollapsed: r = !1, anchorName: i, onItem
 		})]
 	})
 });
-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: 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"
@@ -108,45 +116,45 @@ var m = ({ items: i, children: a, className: o, activeIndex: s = 0, ...u }) => {
 	return /* @__PURE__ */ l("div", {
 		"data-name": "SidebarLayout",
 		className: e("h-screen overflow-clip flex flex-col bg-ultramarine", o),
-		...u,
+		...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(f, { 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]"),
+					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%-108px)] 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
 			})]
 		})]
 	});

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            '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%-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 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/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/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/carousel/Carousel.context.d.ts

@@ -0,0 +1,27 @@
+import { default as useEmblaCarousel } from 'embla-carousel-react';
+import { ComponentPropsWithoutRef, FunctionComponent } from 'react';
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugins = UseCarouselParameters[1];
+interface CarouselContextProps {
+    api: ReturnType<typeof useEmblaCarousel>[1];
+    canScrollNext: boolean;
+    canScrollPrev: boolean;
+    carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+    inViews: number[];
+    isRTL: boolean;
+    items: number;
+    options?: CarouselOptions;
+    scrollNext: () => void;
+    scrollPrev: () => void;
+    scrollProgress: number;
+    snapped: number[];
+}
+interface CarouselProviderProps extends ComponentPropsWithoutRef<'div'> {
+    options?: CarouselOptions;
+    plugins?: CarouselPlugins;
+    scrollValue?: number;
+}
+export declare const CarouselProvider: FunctionComponent<CarouselProviderProps>;
+export declare const useCarousel: () => CarouselContextProps;
+export {};

package/ui/carousel/Carousel.context.js

@@ -0,0 +1,2 @@
+import { n as e, t } from "../../chunks/Carousel.context.js";
+export { t as CarouselProvider, e as useCarousel };

package/ui/carousel/Carousel.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps, FunctionComponent } from 'react';
+import { CarouselProvider } from './Carousel.context';
+export declare const Carousel: FunctionComponent<ComponentProps<typeof CarouselProvider>>;

package/ui/carousel/Carousel.js

@@ -0,0 +1,12 @@
+"use client";
+import { t as e } from "../../chunks/Carousel.context.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region lib/ui/carousel/Carousel.tsx
+var n = ({ children: n, ...r }) => /* @__PURE__ */ t(e, {
+	...r,
+	children: n
+});
+//#endregion
+export { n as Carousel };
+
+//# sourceMappingURL=Carousel.js.map

package/ui/carousel/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","names":[],"sources":["../../../lib/ui/carousel/Carousel.tsx"],"sourcesContent":["'use client';\nimport type { ComponentProps, FunctionComponent } from 'react';\n\nimport { CarouselProvider } from './Carousel.context';\n\nexport const Carousel: FunctionComponent<ComponentProps<typeof CarouselProvider>> = ({\n  children,\n  ...props\n}) => {\n  return <CarouselProvider {...props}>{children}</CarouselProvider>;\n};\n"],"mappings":";;;;AAKA,IAAa,KAAwE,EACnF,aACA,GAAG,QAEI,kBAAC,GAAD;CAAkB,GAAI;CAAQ;CAA4B,CAAA"}

package/ui/carousel/CarouselBody.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps, FunctionComponent } from 'react';
+interface Props extends ComponentProps<'div'> {
+    scrollClassName?: string;
+}
+export declare const CarouselBody: FunctionComponent<Props>;
+export {};

package/ui/carousel/CarouselBody.js

@@ -0,0 +1,21 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { n as t } from "../../chunks/Carousel.context.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region lib/ui/carousel/CarouselBody.tsx
+var r = ({ children: r, className: i, scrollClassName: a, ...o }) => {
+	let { canScrollPrev: s, canScrollNext: c, carouselRef: l, options: u } = t(), d = !s && !c;
+	return /* @__PURE__ */ n("div", {
+		...o,
+		className: e(i, "overflow-hidden"),
+		ref: l,
+		children: /* @__PURE__ */ n("div", {
+			className: e(a, "grid", u?.axis === "y" ? "grid-flow-row" : "grid-flow-col", { "transform-none!": d }),
+			children: r
+		})
+	});
+};
+//#endregion
+export { r as CarouselBody };
+
+//# sourceMappingURL=CarouselBody.js.map

package/ui/carousel/CarouselBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselBody.js","names":[],"sources":["../../../lib/ui/carousel/CarouselBody.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { ComponentProps, FunctionComponent } from 'react';\n\nimport { useCarousel } from './Carousel.context';\n\ninterface Props extends ComponentProps<'div'> {\n  scrollClassName?: string;\n}\n\nexport const CarouselBody: FunctionComponent<Props> = ({\n  children,\n  className,\n  scrollClassName,\n  ...attrs\n}) => {\n  const { canScrollPrev, canScrollNext, carouselRef, options } = useCarousel();\n\n  const noScroll = !canScrollPrev && !canScrollNext;\n\n  return (\n    <div {...attrs} className={clsx(className, 'overflow-hidden')} ref={carouselRef}>\n      <div\n        className={clsx(\n          scrollClassName,\n          'grid',\n          options?.axis === 'y' ? 'grid-flow-row' : 'grid-flow-col',\n          {\n            'transform-none!': noScroll,\n          },\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAUA,IAAa,KAA0C,EACrD,aACA,cACA,oBACA,GAAG,QACC;CACJ,IAAM,EAAE,kBAAe,kBAAe,gBAAa,eAAY,GAAa,EAEtE,IAAW,CAAC,KAAiB,CAAC;AAEpC,QACE,kBAAC,OAAD;EAAK,GAAI;EAAO,WAAW,EAAK,GAAW,kBAAkB;EAAE,KAAK;YAClE,kBAAC,OAAD;GACE,WAAW,EACT,GACA,QACA,GAAS,SAAS,MAAM,kBAAkB,iBAC1C,EACE,mBAAmB,GACpB,CACF;GAEA;GACG,CAAA;EACF,CAAA"}

package/ui/carousel/CarouselItem.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent, PropsWithChildren } from 'react';
+interface Props {
+    index: number;
+}
+export declare const CarouselItem: FunctionComponent<PropsWithChildren<Props>>;
+export {};

package/ui/carousel/CarouselItem.js

@@ -0,0 +1,21 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { n as t } from "../../chunks/Carousel.context.js";
+import { cloneElement as n, isValidElement as r } from "react";
+//#region lib/ui/carousel/CarouselItem.tsx
+var i = ({ children: i, index: a }) => {
+	let { canScrollPrev: o, canScrollNext: s, inViews: c = [], snapped: l = [] } = t(), u = c.includes(a), d = l.includes(a), f = r(i) ? {
+		"aria-hidden": !u,
+		className: e(i?.props?.className, "group/carousel-item", {
+			"is-visible": u,
+			"is-snapped": d
+		}),
+		inert: !u,
+		tabIndex: o || s ? -1 : void 0
+	} : void 0;
+	return r(i) ? n(i, f) : i;
+};
+//#endregion
+export { i as CarouselItem };
+
+//# sourceMappingURL=CarouselItem.js.map

package/ui/carousel/CarouselItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselItem.js","names":[],"sources":["../../../lib/ui/carousel/CarouselItem.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { FunctionComponent, PropsWithChildren } from 'react';\nimport { cloneElement, isValidElement } from 'react';\n\nimport { useCarousel } from './Carousel.context';\n\ninterface Props {\n  index: number;\n}\n\nexport const CarouselItem: FunctionComponent<PropsWithChildren<Props>> = ({ children, index }) => {\n  const { canScrollPrev, canScrollNext, inViews = [], snapped = [] } = useCarousel();\n\n  const isVisible = inViews.includes(index);\n  const isSnapped = snapped.includes(index);\n\n  const props = isValidElement<{ className?: string }>(children)\n    ? {\n        'aria-hidden': !isVisible,\n        className: clsx(children?.props?.className, 'group/carousel-item', {\n          'is-visible': isVisible,\n          'is-snapped': isSnapped,\n        }),\n        inert: !isVisible,\n        tabIndex: canScrollPrev || canScrollNext ? -1 : undefined,\n      }\n    : undefined;\n\n  return isValidElement(children) ? cloneElement(children, props) : children;\n};\n"],"mappings":";;;;;AAWA,IAAa,KAA6D,EAAE,aAAU,eAAY;CAChG,IAAM,EAAE,kBAAe,kBAAe,aAAU,EAAE,EAAE,aAAU,EAAE,KAAK,GAAa,EAE5E,IAAY,EAAQ,SAAS,EAAM,EACnC,IAAY,EAAQ,SAAS,EAAM,EAEnC,IAAQ,EAAuC,EAAS,GAC1D;EACE,eAAe,CAAC;EAChB,WAAW,EAAK,GAAU,OAAO,WAAW,uBAAuB;GACjE,cAAc;GACd,cAAc;GACf,CAAC;EACF,OAAO,CAAC;EACR,UAAU,KAAiB,IAAgB,KAAK,KAAA;EACjD,GACD,KAAA;AAEJ,QAAO,EAAe,EAAS,GAAG,EAAa,GAAU,EAAM,GAAG"}

package/ui/carousel/CarouselNext.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from 'react';
+import { ArrowButton } from '../buttons/ArrowButton';
+interface Props extends Omit<ComponentProps<typeof ArrowButton>, 'icon'> {
+    icon?: ComponentProps<typeof ArrowButton>['icon'];
+    label: string;
+}
+export declare const CarouselNext: ({ className, label, onClick, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/ui/carousel/CarouselNext.js

@@ -0,0 +1,23 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { ArrowButton as t } from "../buttons/ArrowButton.js";
+import { n } from "../../chunks/Carousel.context.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region lib/ui/carousel/CarouselNext.tsx
+var i = ({ className: i, label: a, onClick: o, ...s }) => {
+	let { canScrollNext: c, scrollNext: l } = n();
+	return /* @__PURE__ */ r(t, {
+		icon: "ArrowDefaultRight",
+		...s,
+		className: e("pointer-events-auto", i),
+		disabled: !c,
+		onClick: (e) => {
+			l(), o?.(e);
+		},
+		children: a
+	});
+};
+//#endregion
+export { i as CarouselNext };
+
+//# sourceMappingURL=CarouselNext.js.map

package/ui/carousel/CarouselNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselNext.js","names":[],"sources":["../../../lib/ui/carousel/CarouselNext.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { ComponentProps, MouseEvent } from 'react';\n\nimport { ArrowButton } from '../buttons/ArrowButton';\n\nimport { useCarousel } from './Carousel.context';\n\ninterface Props extends Omit<ComponentProps<typeof ArrowButton>, 'icon'> {\n  icon?: ComponentProps<typeof ArrowButton>['icon'];\n  label: string;\n}\n\nexport const CarouselNext = ({ className, label, onClick, ...props }: Props) => {\n  const { canScrollNext, scrollNext } = useCarousel();\n\n  return (\n    <ArrowButton\n      icon=\"ArrowDefaultRight\"\n      {...props}\n      className={clsx('pointer-events-auto', className)}\n      disabled={!canScrollNext}\n      onClick={(e: MouseEvent<HTMLButtonElement>) => {\n        scrollNext();\n        onClick?.(e as never);\n      }}\n    >\n      {label}\n    </ArrowButton>\n  );\n};\n"],"mappings":";;;;;;AAaA,IAAa,KAAgB,EAAE,cAAW,UAAO,YAAS,GAAG,QAAmB;CAC9E,IAAM,EAAE,kBAAe,kBAAe,GAAa;AAEnD,QACE,kBAAC,GAAD;EACE,MAAK;EACL,GAAI;EACJ,WAAW,EAAK,uBAAuB,EAAU;EACjD,UAAU,CAAC;EACX,UAAU,MAAqC;AAE7C,GADA,GAAY,EACZ,IAAU,EAAW;;YAGtB;EACW,CAAA"}

package/ui/carousel/CarouselPrevious.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from 'react';
+import { ArrowButton } from '../buttons/ArrowButton';
+interface Props extends Omit<ComponentProps<typeof ArrowButton>, 'icon'> {
+    icon?: ComponentProps<typeof ArrowButton>['icon'];
+    label: string;
+}
+export declare const CarouselPrevious: ({ className, label, onClick, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/ui/carousel/CarouselPrevious.js

@@ -0,0 +1,23 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { ArrowButton as t } from "../buttons/ArrowButton.js";
+import { n } from "../../chunks/Carousel.context.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region lib/ui/carousel/CarouselPrevious.tsx
+var i = ({ className: i, label: a, onClick: o, ...s }) => {
+	let { canScrollPrev: c, scrollPrev: l } = n();
+	return /* @__PURE__ */ r(t, {
+		icon: "ArrowDefaultLeft",
+		...s,
+		className: e("pointer-events-auto", i),
+		disabled: !c,
+		onClick: (e) => {
+			l(), o?.(e);
+		},
+		children: a
+	});
+};
+//#endregion
+export { i as CarouselPrevious };
+
+//# sourceMappingURL=CarouselPrevious.js.map

package/ui/carousel/CarouselPrevious.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselPrevious.js","names":[],"sources":["../../../lib/ui/carousel/CarouselPrevious.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { ComponentProps, MouseEvent } from 'react';\n\nimport { ArrowButton } from '../buttons/ArrowButton';\n\nimport { useCarousel } from './Carousel.context';\n\ninterface Props extends Omit<ComponentProps<typeof ArrowButton>, 'icon'> {\n  icon?: ComponentProps<typeof ArrowButton>['icon'];\n  label: string;\n}\n\nexport const CarouselPrevious = ({ className, label, onClick, ...props }: Props) => {\n  const { canScrollPrev, scrollPrev } = useCarousel();\n\n  return (\n    <ArrowButton\n      icon=\"ArrowDefaultLeft\"\n      {...props}\n      className={clsx('pointer-events-auto', className)}\n      disabled={!canScrollPrev}\n      onClick={(e: MouseEvent<HTMLButtonElement>) => {\n        scrollPrev();\n        onClick?.(e as never);\n      }}\n    >\n      {label}\n    </ArrowButton>\n  );\n};\n"],"mappings":";;;;;;AAaA,IAAa,KAAoB,EAAE,cAAW,UAAO,YAAS,GAAG,QAAmB;CAClF,IAAM,EAAE,kBAAe,kBAAe,GAAa;AAEnD,QACE,kBAAC,GAAD;EACE,MAAK;EACL,GAAI;EACJ,WAAW,EAAK,uBAAuB,EAAU;EACjD,UAAU,CAAC;EACX,UAAU,MAAqC;AAE7C,GADA,GAAY,EACZ,IAAU,EAAW;;YAGtB;EACW,CAAA"}