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

package/ui/ChatMessage.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export type ChatMessageSender = 'assistant' | 'user';
+export interface ChatMessageProps extends HTMLAttributes<HTMLDivElement> {
+    sender: ChatMessageSender;
+}
+export declare const ChatMessage: import('react').NamedExoticComponent<PropsWithChildren<ChatMessageProps>>;

package/ui/ChatMessage.js

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

package/ui/ChatTypingIndicator.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export declare const ChatTypingIndicator: import('react').NamedExoticComponent<HTMLAttributes<HTMLDivElement>>;

package/ui/ChatTypingIndicator.js

@@ -0,0 +1,30 @@
+import { twMerge as e } from "./helpers/twMerge.js";
+import { memo as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region lib/ui/ChatTypingIndicator.tsx
+var i = t(function({ className: t, ...i }) {
+	return /* @__PURE__ */ r("div", {
+		role: "status",
+		"aria-label": "Typing",
+		...i,
+		className: e("flex items-center gap-4 h-34 w-66 overflow-hidden rounded-pill bg-pearl px-20", t),
+		children: [
+			/* @__PURE__ */ n("span", {
+				"aria-hidden": "true",
+				className: "size-6 rounded-full bg-black animate-bounce [animation-delay:-300ms]"
+			}),
+			/* @__PURE__ */ n("span", {
+				"aria-hidden": "true",
+				className: "size-6 rounded-full bg-black animate-bounce [animation-delay:-150ms]"
+			}),
+			/* @__PURE__ */ n("span", {
+				"aria-hidden": "true",
+				className: "size-6 rounded-full bg-black animate-bounce"
+			})
+		]
+	});
+});
+//#endregion
+export { i as ChatTypingIndicator };
+
+//# sourceMappingURL=ChatTypingIndicator.js.map

package/ui/ChatTypingIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatTypingIndicator.js","names":[],"sources":["../../lib/ui/ChatTypingIndicator.tsx"],"sourcesContent":["import { memo, type HTMLAttributes } from 'react';\nimport { twMerge } from './helpers/twMerge';\n\nexport const ChatTypingIndicator = memo(function ChatTypingIndicator({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      role=\"status\"\n      aria-label=\"Typing\"\n      {...props}\n      className={twMerge(\n        'flex items-center gap-4 h-34 w-66 overflow-hidden rounded-pill bg-pearl px-20',\n        className,\n      )}\n    >\n      <span\n        aria-hidden=\"true\"\n        className=\"size-6 rounded-full bg-black animate-bounce [animation-delay:-300ms]\"\n      />\n      <span\n        aria-hidden=\"true\"\n        className=\"size-6 rounded-full bg-black animate-bounce [animation-delay:-150ms]\"\n      />\n      <span aria-hidden=\"true\" className=\"size-6 rounded-full bg-black animate-bounce\" />\n    </div>\n  );\n});\n"],"mappings":";;;;AAGA,IAAa,IAAsB,EAAK,SAA6B,EACnE,cACA,GAAG,KAC8B;AACjC,QACE,kBAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,GAAI;EACJ,WAAW,EACT,iFACA,EACD;YAPH;GASE,kBAAC,QAAD;IACE,eAAY;IACZ,WAAU;IACV,CAAA;GACF,kBAAC,QAAD;IACE,eAAY;IACZ,WAAU;IACV,CAAA;GACF,kBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;IAAgD,CAAA;GAC/E;;EAER"}

package/ui/ChatWindow.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { ChatMessageSender } from './ChatMessage';
+export interface ChatWindowMessage {
+    id: string;
+    sender: ChatMessageSender;
+    content: string;
+}
+export interface ChatWindowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    title?: string;
+    greeting?: string;
+    messages: ChatWindowMessage[];
+    inputValue: string;
+    inputPlaceholder?: string;
+    isTyping?: boolean;
+    onInputChange: (value: string) => void;
+    onSubmit: () => void;
+    onClose?: () => void;
+    onAudioClick?: () => void;
+    logo?: ReactNode;
+}
+export declare function ChatWindow({ title, greeting, messages, inputValue, inputPlaceholder, isTyping, onInputChange, onSubmit, onClose, onAudioClick, logo, className, ...props }: ChatWindowProps): import("react/jsx-runtime").JSX.Element;

package/ui/ChatWindow.js

@@ -0,0 +1,108 @@
+"use client";
+import { twMerge as e } from "./helpers/twMerge.js";
+import { ChatInput as t } from "./ChatInput.js";
+import { t as n } from "../chunks/ChatMessage.js";
+import { ChatTypingIndicator as r } from "./ChatTypingIndicator.js";
+import { useEffect as i, useRef as a } from "react";
+import { Icon as o } from "@clubmed/trident-icons";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region lib/ui/ChatWindow.tsx
+var l = /* @__PURE__ */ s("svg", {
+	className: "absolute top-full inset-x-[50%] -translate-x-1/2",
+	width: "118",
+	height: "27",
+	viewBox: "0 0 118 27",
+	children: /* @__PURE__ */ s("path", {
+		d: "M0 0C10.8283 0 21.1946 5.40419 28.7327 13.2062L30.2673 14.7945C45.991 31.0685 72.009 31.0685 87.7327 14.7945L89.2673 13.2062C96.8054 5.40419 107.172 0 118 0C118 0 80.6853 0 0 0Z",
+		fill: "#F6EFE7"
+	})
+});
+function u({ title: u = "Ask me a question", greeting: d, messages: f, inputValue: p, inputPlaceholder: m, isTyping: h = !1, onInputChange: g, onSubmit: _, onClose: v, onAudioClick: y, logo: b, className: x, ...S }) {
+	let C = a(null);
+	return i(() => {
+		let e = C.current;
+		e && e.scrollTo({
+			top: e.scrollHeight,
+			behavior: "smooth"
+		});
+	}, [f, h]), /* @__PURE__ */ c("div", {
+		...S,
+		className: e("flex flex-col gap-20 items-center", x),
+		children: [/* @__PURE__ */ c("div", {
+			className: "chat-border bg-white flex flex-col h-full w-full rounded-32 overflow-hidden",
+			children: [
+				/* @__PURE__ */ c("div", {
+					className: "relative flex flex-col items-center shrink-0 pt-4 px-4 h-133 overflow-hidden",
+					children: [/* @__PURE__ */ s("div", {
+						className: "absolute inset-x-4 top-4 h-102 bg-lightSand rounded-[24]",
+						children: l
+					}), /* @__PURE__ */ c("div", {
+						className: "relative flex flex-col flex-1 items-center justify-end pb-8 w-full z-10",
+						children: [/* @__PURE__ */ s("div", {
+							className: "flex items-center justify-center px-12 py-8 w-full",
+							children: /* @__PURE__ */ s("p", {
+								className: "font-serif font-bold italic text-h5 text-center text-black line-clamp-2",
+								children: u
+							})
+						}), b ?? /* @__PURE__ */ s("button", {
+							type: "button",
+							"aria-label": "AI assistant",
+							className: "chat-border flex items-center justify-center size-48 rounded-full bg-white",
+							children: /* @__PURE__ */ s(o, {
+								name: "Sparkles",
+								width: "24px"
+							})
+						})]
+					})]
+				}),
+				/* @__PURE__ */ c("div", {
+					ref: C,
+					role: "log",
+					"aria-label": "Chat messages",
+					"aria-live": "polite",
+					className: "chat-message-log flex flex-col flex-1 gap-20 overflow-y-auto py-20",
+					children: [
+						d ? /* @__PURE__ */ s("div", {
+							className: "px-20",
+							children: /* @__PURE__ */ s("p", {
+								className: "text-b3 text-black",
+								children: d
+							})
+						}) : null,
+						f.map((e) => /* @__PURE__ */ s(n, {
+							sender: e.sender,
+							children: e.content
+						}, e.id)),
+						h && /* @__PURE__ */ s("div", {
+							className: "px-12",
+							children: /* @__PURE__ */ s(r, {})
+						})
+					]
+				}),
+				/* @__PURE__ */ s("div", {
+					className: "shrink-0 px-8 pb-8 pt-12",
+					children: /* @__PURE__ */ s(t, {
+						value: p,
+						placeholder: m,
+						onValueChange: g,
+						onSubmit: _,
+						onAudioClick: y
+					})
+				})
+			]
+		}), v && /* @__PURE__ */ s("button", {
+			type: "button",
+			"aria-label": "Close chat",
+			onClick: v,
+			className: "flex items-center justify-center size-48 rounded-full bg-black border border-black text-white shrink-0 hover:opacity-80 transition-opacity",
+			children: /* @__PURE__ */ s(o, {
+				name: "CrossDefault",
+				width: "24px"
+			})
+		})]
+	});
+}
+//#endregion
+export { u as ChatWindow };
+
+//# sourceMappingURL=ChatWindow.js.map

package/ui/ChatWindow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindow.js","names":[],"sources":["../../lib/ui/ChatWindow.tsx"],"sourcesContent":["'use client';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport { twMerge } from './helpers/twMerge';\nimport { ChatInput } from './ChatInput';\nimport { ChatMessage } from './ChatMessage';\nimport type { ChatMessageSender } from './ChatMessage';\nimport { ChatTypingIndicator } from './ChatTypingIndicator';\n\nexport interface ChatWindowMessage {\n  id: string;\n  sender: ChatMessageSender;\n  content: string;\n}\n\nexport interface ChatWindowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  title?: string;\n  greeting?: string;\n  messages: ChatWindowMessage[];\n  inputValue: string;\n  inputPlaceholder?: string;\n  isTyping?: boolean;\n  onInputChange: (value: string) => void;\n  onSubmit: () => void;\n  onClose?: () => void;\n  onAudioClick?: () => void;\n  logo?: ReactNode;\n}\n\nconst headerCurve = (\n  <svg\n    className=\"absolute top-full inset-x-[50%] -translate-x-1/2\"\n    width=\"118\"\n    height=\"27\"\n    viewBox=\"0 0 118 27\"\n  >\n    <path\n      d=\"M0 0C10.8283 0 21.1946 5.40419 28.7327 13.2062L30.2673 14.7945C45.991 31.0685 72.009 31.0685 87.7327 14.7945L89.2673 13.2062C96.8054 5.40419 107.172 0 118 0C118 0 80.6853 0 0 0Z\"\n      fill=\"#F6EFE7\"\n    />\n  </svg>\n);\n\nexport function ChatWindow({\n  title = 'Ask me a question',\n  greeting,\n  messages,\n  inputValue,\n  inputPlaceholder,\n  isTyping = false,\n  onInputChange,\n  onSubmit,\n  onClose,\n  onAudioClick,\n  logo,\n  className,\n  ...props\n}: ChatWindowProps) {\n  const logRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    // Scroll to bottom on new message or typing indicator change\n    const el = logRef.current;\n    if (el) el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });\n  }, [messages, isTyping]);\n\n  return (\n    <div {...props} className={twMerge('flex flex-col gap-20 items-center', className)}>\n      <div className=\"chat-border bg-white flex flex-col h-full w-full rounded-32 overflow-hidden\">\n        <div className=\"relative flex flex-col items-center shrink-0 pt-4 px-4 h-133 overflow-hidden\">\n          <div className=\"absolute inset-x-4 top-4 h-102 bg-lightSand rounded-[24]\">\n            {headerCurve}\n          </div>\n          <div className=\"relative flex flex-col flex-1 items-center justify-end pb-8 w-full z-10\">\n            <div className=\"flex items-center justify-center px-12 py-8 w-full\">\n              <p className=\"font-serif font-bold italic text-h5 text-center text-black line-clamp-2\">\n                {title}\n              </p>\n            </div>\n            {logo ?? (\n              <button\n                type=\"button\"\n                aria-label=\"AI assistant\"\n                className=\"chat-border flex items-center justify-center size-48 rounded-full bg-white\"\n              >\n                <Icon name=\"Sparkles\" width=\"24px\" />\n              </button>\n            )}\n          </div>\n        </div>\n\n        <div\n          ref={logRef}\n          role=\"log\"\n          aria-label=\"Chat messages\"\n          aria-live=\"polite\"\n          className=\"chat-message-log flex flex-col flex-1 gap-20 overflow-y-auto py-20\"\n        >\n          {greeting ? (\n            <div className=\"px-20\">\n              <p className=\"text-b3 text-black\">{greeting}</p>\n            </div>\n          ) : null}\n          {messages.map((msg) => (\n            <ChatMessage key={msg.id} sender={msg.sender}>\n              {msg.content}\n            </ChatMessage>\n          ))}\n          {isTyping && (\n            <div className=\"px-12\">\n              <ChatTypingIndicator />\n            </div>\n          )}\n        </div>\n\n        <div className=\"shrink-0 px-8 pb-8 pt-12\">\n          <ChatInput\n            value={inputValue}\n            placeholder={inputPlaceholder}\n            onValueChange={onInputChange}\n            onSubmit={onSubmit}\n            onAudioClick={onAudioClick}\n          />\n        </div>\n      </div>\n\n      {onClose && (\n        <button\n          type=\"button\"\n          aria-label=\"Close chat\"\n          onClick={onClose}\n          className=\"flex items-center justify-center size-48 rounded-full bg-black border border-black text-white shrink-0 hover:opacity-80 transition-opacity\"\n        >\n          <Icon name=\"CrossDefault\" width=\"24px\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AA+BA,IAAM,IACJ,kBAAC,OAAD;CACE,WAAU;CACV,OAAM;CACN,QAAO;CACP,SAAQ;WAER,kBAAC,QAAD;EACE,GAAE;EACF,MAAK;EACL,CAAA;CACE,CAAA;AAGR,SAAgB,EAAW,EACzB,WAAQ,qBACR,aACA,aACA,eACA,qBACA,cAAW,IACX,kBACA,aACA,YACA,iBACA,SACA,cACA,GAAG,KACe;CAClB,IAAM,IAAS,EAAuB,KAAK;AAQ3C,QANA,QAAgB;EAEd,IAAM,IAAK,EAAO;AAClB,EAAI,KAAI,EAAG,SAAS;GAAE,KAAK,EAAG;GAAc,UAAU;GAAU,CAAC;IAChE,CAAC,GAAU,EAAS,CAAC,EAGtB,kBAAC,OAAD;EAAK,GAAI;EAAO,WAAW,EAAQ,qCAAqC,EAAU;YAAlF,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACZ;MACG,CAAA,EACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBACV;QACC,CAAA;OACA,CAAA,EACL,KACC,kBAAC,UAAD;OACE,MAAK;OACL,cAAW;OACX,WAAU;iBAEV,kBAAC,GAAD;QAAM,MAAK;QAAW,OAAM;QAAS,CAAA;OAC9B,CAAA,CAAA;;;IAKf,kBAAC,OAAD;KACE,KAAK;KACL,MAAK;KACL,cAAW;KACX,aAAU;KACV,WAAU;eALZ;MAOG,IACC,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBAAsB;QAAa,CAAA;OAC5C,CAAA,GACJ;MACH,EAAS,KAAK,MACb,kBAAC,GAAD;OAA0B,QAAQ,EAAI;iBACnC,EAAI;OACO,EAFI,EAAI,GAER,CACd;MACD,KACC,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD,EAAuB,CAAA;OACnB,CAAA;;;IAIV,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD;MACE,OAAO;MACP,aAAa;MACb,eAAe;MACL;MACI;MACd,CAAA;KACE,CAAA;;MAGP,KACC,kBAAC,UAAD;GACE,MAAK;GACL,cAAW;GACX,SAAS;GACT,WAAU;aAEV,kBAAC,GAAD;IAAM,MAAK;IAAe,OAAM;IAAS,CAAA;GAClC,CAAA,CAAA"}

package/ui/ChoiceExpander.js

@@ -43,7 +43,7 @@ var d = ({ label: d, showCheckIcon: f = !1, children: p, expanded: m, defaultExp
 		children: /* @__PURE__ */ u("div", {
 			ref: O,
 			className: e("absolute top-0 grid transition-all duration-500", !M && [
-				"w-240 rounded-pill border-transparent",
+				"w-240 rounded-pill-transitionable border-transparent",
 				t(y),
 				n(b)
 			], M && [

package/ui/ChoiceExpander.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceExpander.js","names":[],"sources":["../../lib/ui/ChoiceExpander.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport { getBgColor, getTextColor } from './helpers/colors/colors';\nimport type { Colors } from './types/Colors';\n\nexport interface ChoiceExpanderProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Text shown when collapsed (e.g., \"From $255\")\n   */\n  label: string;\n\n  /**\n   * Show check icon in collapsed state (selected variant)\n   */\n  showCheckIcon?: boolean;\n\n  /**\n   * Content shown when expanded\n   */\n  children: ReactNode;\n\n  /**\n   * Controlled state - if provided, component is controlled\n   */\n  expanded?: boolean;\n\n  /**\n   * Initial state for uncontrolled mode\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Callback when expanded state changes\n   */\n  onExpandedChange?: (isExpanded: boolean) => void;\n\n  /**\n   * Disable interaction\n   */\n  disabled?: boolean;\n\n  /**\n   * Custom aria-label for button\n   */\n  ariaLabel?: string;\n\n  /**\n   * Background color for unexpanded button state\n   */\n  buttonBgColor?: Colors;\n\n  /**\n   * Text color for unexpanded button state\n   */\n  buttonTextColor?: Colors;\n\n  /**\n   * collapse label for screen readers\n   */\n  collapseLabel: string;\n\n  /**\n   * expand label for screen readers\n   */\n  expandLabel: string;\n}\n\nexport const ChoiceExpander: FunctionComponent<ChoiceExpanderProps> = ({\n  label,\n  showCheckIcon = false,\n  children,\n  expanded,\n  defaultExpanded = false,\n  onExpandedChange,\n  disabled = false,\n  ariaLabel,\n  buttonBgColor = 'black',\n  buttonTextColor = 'white',\n  collapseLabel,\n  expandLabel,\n  className,\n  ...props\n}) => {\n  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n  const contentId = useId();\n  const morphContainerRef = useRef<HTMLDivElement>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const hasInteractedRef = useRef(false);\n\n  const isExpanded = expanded !== undefined ? expanded : internalExpanded;\n\n  const handleToggle = useCallback(() => {\n    if (disabled) return;\n\n    hasInteractedRef.current = true;\n    const newState = !isExpanded;\n\n    if (expanded === undefined) {\n      setInternalExpanded(newState);\n    }\n\n    onExpandedChange?.(newState);\n  }, [disabled, isExpanded, expanded, onExpandedChange]);\n\n  useEffect(() => {\n    if (!isExpanded) return;\n\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        handleToggle();\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape);\n    return () => document.removeEventListener('keydown', handleEscape);\n  }, [isExpanded, handleToggle]);\n\n  useEffect(() => {\n    if (isExpanded && closeButtonRef.current) {\n      closeButtonRef.current.focus();\n    } else if (!isExpanded && hasInteractedRef.current && triggerButtonRef.current) {\n      triggerButtonRef.current.focus();\n    }\n  }, [isExpanded]);\n\n  useEffect(() => {\n    if (!isExpanded) return;\n\n    const handleClickOutside = (event: MouseEvent) => {\n      if (morphContainerRef.current && !morphContainerRef.current.contains(event.target as Node)) {\n        handleToggle();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [isExpanded, handleToggle]);\n\n  return (\n    <div\n      className={clsx('relative flex items-center justify-center', className)}\n      data-name=\"ChoiceExpander\"\n      data-testid=\"choice-expander\"\n      style={{ width: '240px', height: 48 }}\n      {...props}\n    >\n      <div\n        ref={morphContainerRef}\n        className={clsx(\n          'absolute top-0 grid transition-all duration-500',\n          !isExpanded && [\n            'w-240 rounded-pill border-transparent',\n            getBgColor(buttonBgColor),\n            getTextColor(buttonTextColor),\n          ],\n          isExpanded && [\n            'w-324 rounded-16 bg-white text-black border border-gray-900',\n            'z-10',\n            disabled && 'opacity-50',\n          ],\n        )}\n      >\n        <button\n          ref={triggerButtonRef}\n          type=\"button\"\n          data-testid=\"choice-expander-button\"\n          aria-expanded={isExpanded}\n          aria-controls={contentId}\n          aria-label={ariaLabel || label}\n          disabled={disabled}\n          onClick={handleToggle}\n          className={clsx(\n            'flex items-center justify-center w-240 mx-auto relative gap-20 transition-opacity duration-200',\n            'rounded-pill focus-visible:ring focus-visible:ring-8 focus-visible:ring-lavender/20 outline-none px-20 py-12 ',\n            disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',\n            '[@supports(anchor-name:_--label-anchor)]:[--anchorSupport:1]',\n          )}\n        >\n          {/* invisible top middle anchor position */}\n          <div\n            aria-hidden=\"true\"\n            className=\"absolute h-24 w-24 mx-auto pointer-events-none\"\n            style={{ anchorName: '--middle-anchor' } as React.CSSProperties}\n          ></div>\n          <span className=\"text-b3 flex items-center font-semibold\">\n            {/* label anchor */}\n            <span\n              className={clsx('transition-opacity duration-200 pe-8', isExpanded && 'opacity-0')}\n            >\n              {label}\n            </span>\n            <div\n              className=\"h-24 w-24\"\n              style={{ anchorName: '--label-anchor' } as React.CSSProperties}\n              aria-hidden=\"true\"\n            >\n              <Icon\n                name=\"ArrowDefaultDown\"\n                width=\"24px\"\n                aria-hidden=\"true\"\n                className={clsx(\n                  isExpanded ? 'absolute left-[calc(50%-12px)] rotate-180' : 'rotate-[0deg]',\n                )}\n                style={\n                  {\n                    transition: 'rotate 0.3s, left 0.3s',\n                    opacity: 'calc((1 - var(--anchorSupport)) * 1)',\n                  } as React.CSSProperties\n                }\n              />\n            </div>\n            <span className=\"sr-only\">{isExpanded ? collapseLabel : expandLabel}</span>\n          </span>\n          <Icon\n            name=\"ArrowDefaultDown\"\n            width=\"24px\"\n            aria-hidden=\"true\"\n            className={clsx('absolute', isExpanded ? 'rotate-180' : 'rotate-[0deg]')}\n            style={\n              {\n                positionAnchor: isExpanded ? '--middle-anchor' : '--label-anchor',\n                left: 'anchor(left)',\n                top: 'anchor(top)',\n                transition: 'left 0.3s, rotate 0.3s',\n              } as React.CSSProperties\n            }\n          />\n          {showCheckIcon && (\n            <Icon\n              name=\"CheckDefault\"\n              width=\"24px\"\n              aria-hidden=\"true\"\n              className={clsx('transition-opacity duration-200', isExpanded && 'opacity-0')}\n            />\n          )}\n        </button>\n\n        <div\n          className={clsx(\n            'grid overflow-hidden transition-[grid-template-rows,opacity] duration-500',\n            isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr] opacity-0',\n          )}\n        >\n          <div className=\"overflow-hidden\">\n            <div className=\"px-8 pb-8\" id={contentId}>\n              {children}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ChoiceExpander.js","names":[],"sources":["../../lib/ui/ChoiceExpander.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport { getBgColor, getTextColor } from './helpers/colors/colors';\nimport type { Colors } from './types/Colors';\n\nexport interface ChoiceExpanderProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Text shown when collapsed (e.g., \"From $255\")\n   */\n  label: string;\n\n  /**\n   * Show check icon in collapsed state (selected variant)\n   */\n  showCheckIcon?: boolean;\n\n  /**\n   * Content shown when expanded\n   */\n  children: ReactNode;\n\n  /**\n   * Controlled state - if provided, component is controlled\n   */\n  expanded?: boolean;\n\n  /**\n   * Initial state for uncontrolled mode\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Callback when expanded state changes\n   */\n  onExpandedChange?: (isExpanded: boolean) => void;\n\n  /**\n   * Disable interaction\n   */\n  disabled?: boolean;\n\n  /**\n   * Custom aria-label for button\n   */\n  ariaLabel?: string;\n\n  /**\n   * Background color for unexpanded button state\n   */\n  buttonBgColor?: Colors;\n\n  /**\n   * Text color for unexpanded button state\n   */\n  buttonTextColor?: Colors;\n\n  /**\n   * collapse label for screen readers\n   */\n  collapseLabel: string;\n\n  /**\n   * expand label for screen readers\n   */\n  expandLabel: string;\n}\n\nexport const ChoiceExpander: FunctionComponent<ChoiceExpanderProps> = ({\n  label,\n  showCheckIcon = false,\n  children,\n  expanded,\n  defaultExpanded = false,\n  onExpandedChange,\n  disabled = false,\n  ariaLabel,\n  buttonBgColor = 'black',\n  buttonTextColor = 'white',\n  collapseLabel,\n  expandLabel,\n  className,\n  ...props\n}) => {\n  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n  const contentId = useId();\n  const morphContainerRef = useRef<HTMLDivElement>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const hasInteractedRef = useRef(false);\n\n  const isExpanded = expanded !== undefined ? expanded : internalExpanded;\n\n  const handleToggle = useCallback(() => {\n    if (disabled) return;\n\n    hasInteractedRef.current = true;\n    const newState = !isExpanded;\n\n    if (expanded === undefined) {\n      setInternalExpanded(newState);\n    }\n\n    onExpandedChange?.(newState);\n  }, [disabled, isExpanded, expanded, onExpandedChange]);\n\n  useEffect(() => {\n    if (!isExpanded) return;\n\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        handleToggle();\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape);\n    return () => document.removeEventListener('keydown', handleEscape);\n  }, [isExpanded, handleToggle]);\n\n  useEffect(() => {\n    if (isExpanded && closeButtonRef.current) {\n      closeButtonRef.current.focus();\n    } else if (!isExpanded && hasInteractedRef.current && triggerButtonRef.current) {\n      triggerButtonRef.current.focus();\n    }\n  }, [isExpanded]);\n\n  useEffect(() => {\n    if (!isExpanded) return;\n\n    const handleClickOutside = (event: MouseEvent) => {\n      if (morphContainerRef.current && !morphContainerRef.current.contains(event.target as Node)) {\n        handleToggle();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [isExpanded, handleToggle]);\n\n  return (\n    <div\n      className={clsx('relative flex items-center justify-center', className)}\n      data-name=\"ChoiceExpander\"\n      data-testid=\"choice-expander\"\n      style={{ width: '240px', height: 48 }}\n      {...props}\n    >\n      <div\n        ref={morphContainerRef}\n        className={clsx(\n          'absolute top-0 grid transition-all duration-500',\n          !isExpanded && [\n            'w-240 rounded-pill-transitionable border-transparent',\n            getBgColor(buttonBgColor),\n            getTextColor(buttonTextColor),\n          ],\n          isExpanded && [\n            'w-324 rounded-16 bg-white text-black border border-gray-900',\n            'z-10',\n            disabled && 'opacity-50',\n          ],\n        )}\n      >\n        <button\n          ref={triggerButtonRef}\n          type=\"button\"\n          data-testid=\"choice-expander-button\"\n          aria-expanded={isExpanded}\n          aria-controls={contentId}\n          aria-label={ariaLabel || label}\n          disabled={disabled}\n          onClick={handleToggle}\n          className={clsx(\n            'flex items-center justify-center w-240 mx-auto relative gap-20 transition-opacity duration-200',\n            'rounded-pill focus-visible:ring focus-visible:ring-8 focus-visible:ring-lavender/20 outline-none px-20 py-12 ',\n            disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',\n            '[@supports(anchor-name:_--label-anchor)]:[--anchorSupport:1]',\n          )}\n        >\n          {/* invisible top middle anchor position */}\n          <div\n            aria-hidden=\"true\"\n            className=\"absolute h-24 w-24 mx-auto pointer-events-none\"\n            style={{ anchorName: '--middle-anchor' } as React.CSSProperties}\n          ></div>\n          <span className=\"text-b3 flex items-center font-semibold\">\n            {/* label anchor */}\n            <span\n              className={clsx('transition-opacity duration-200 pe-8', isExpanded && 'opacity-0')}\n            >\n              {label}\n            </span>\n            <div\n              className=\"h-24 w-24\"\n              style={{ anchorName: '--label-anchor' } as React.CSSProperties}\n              aria-hidden=\"true\"\n            >\n              <Icon\n                name=\"ArrowDefaultDown\"\n                width=\"24px\"\n                aria-hidden=\"true\"\n                className={clsx(\n                  isExpanded ? 'absolute left-[calc(50%-12px)] rotate-180' : 'rotate-[0deg]',\n                )}\n                style={\n                  {\n                    transition: 'rotate 0.3s, left 0.3s',\n                    opacity: 'calc((1 - var(--anchorSupport)) * 1)',\n                  } as React.CSSProperties\n                }\n              />\n            </div>\n            <span className=\"sr-only\">{isExpanded ? collapseLabel : expandLabel}</span>\n          </span>\n          <Icon\n            name=\"ArrowDefaultDown\"\n            width=\"24px\"\n            aria-hidden=\"true\"\n            className={clsx('absolute', isExpanded ? 'rotate-180' : 'rotate-[0deg]')}\n            style={\n              {\n                positionAnchor: isExpanded ? '--middle-anchor' : '--label-anchor',\n                left: 'anchor(left)',\n                top: 'anchor(top)',\n                transition: 'left 0.3s, rotate 0.3s',\n              } as React.CSSProperties\n            }\n          />\n          {showCheckIcon && (\n            <Icon\n              name=\"CheckDefault\"\n              width=\"24px\"\n              aria-hidden=\"true\"\n              className={clsx('transition-opacity duration-200', isExpanded && 'opacity-0')}\n            />\n          )}\n        </button>\n\n        <div\n          className={clsx(\n            'grid overflow-hidden transition-[grid-template-rows,opacity] duration-500',\n            isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr] opacity-0',\n          )}\n        >\n          <div className=\"overflow-hidden\">\n            <div className=\"px-8 pb-8\" id={contentId}>\n              {children}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/ui/Dropdown.d.ts

@@ -1,6 +1,23 @@
-import { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { IconicNames } from '@clubmed/trident-icons';
-export interface DropdownProps extends ComponentPropsWithoutRef<'button'> {
+interface DropdownRenderContext {
+    close: () => void;
+    open: boolean;
+    toggle: () => void;
+}
+type DropdownChildren = ReactNode | ((context: DropdownRenderContext) => ReactNode);
+export interface DropdownProps extends Omit<ComponentPropsWithoutRef<'button'>, 'children'> {
+    children?: DropdownChildren;
     icon?: IconicNames;
 }
-export declare function Dropdown({ icon, className, children: initialChildren, ...attrs }: PropsWithChildren<DropdownProps>): import("react/jsx-runtime").JSX.Element;
+export declare function useDropdown(initialChildren?: DropdownChildren): {
+    children: ReactNode[];
+    close: () => void;
+    containerRef: import('react').RefObject<HTMLDivElement | null>;
+    isLeaving: boolean;
+    label: ReactNode[];
+    open: boolean;
+    toggle: () => void;
+};
+export declare function Dropdown({ icon, className, children: initialChildren, ...attrs }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/ui/Dropdown.js

@@ -5,43 +5,77 @@ import { useCallback as r, useEffect as i, useRef as a, useState as o } from "re
 import { Icon as s } from "@clubmed/trident-icons";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region lib/ui/Dropdown.tsx
-function u({ icon: u = "ArrowOutlinedDown", className: d, children: f, ...p }) {
-	let { label: m, children: h } = n(f, ["label"]), [g, _] = o(!1), v = a(null), y = a(g), b = y.current, x = !g && b;
-	y.current = g;
-	let S = r(() => {
-		_((e) => !e);
-	}, []);
+function u(e) {
+	let [t, s] = o(!1), c = a(null), l = a(t), u = l.current, d = !t && u;
+	l.current = t;
+	let f = r(() => {
+		s((e) => !e);
+	}, []), p = r(() => {
+		s(!1);
+	}, []), m = typeof e == "function" ? e({
+		close: p,
+		open: t,
+		toggle: f
+	}) : e, { label: h, children: g } = n(m, ["label"]);
 	return i(() => {
-		if (!g) return;
+		if (!c.current) return;
+		let e = c.current.querySelectorAll(".dropdown-panel a[href], .dropdown-panel [data-dropdown-item]"), t = Array.from(e, (e) => {
+			let t = () => {
+				p();
+			};
+			return e.addEventListener("click", t), {
+				handleItemClick: t,
+				item: e
+			};
+		});
+		return () => {
+			t.forEach(({ handleItemClick: e, item: t }) => {
+				t.removeEventListener("click", e);
+			});
+		};
+	}, [p, m]), i(() => {
+		if (!t) return;
 		let e = (e) => {
-			!v.current || e.composedPath().includes(v.current) || _(!1);
+			!c.current || e.composedPath().includes(c.current) || p();
 		};
-		return document.addEventListener("pointerdown", e), () => {
-			document.removeEventListener("pointerdown", e);
+		return document.addEventListener("click", e), () => {
+			document.removeEventListener("click", e);
 		};
-	}, [g]), /* @__PURE__ */ l("div", {
-		ref: v,
-		className: t("flex items-center gap-8 relative", d),
+	}, [p, t]), {
+		children: g,
+		close: p,
+		containerRef: c,
+		isLeaving: d,
+		label: h,
+		open: t,
+		toggle: f
+	};
+}
+function d({ icon: n = "ArrowOutlinedDown", className: r, children: i, ...a }) {
+	let { children: o, containerRef: d, isLeaving: f, label: p, open: m, toggle: h } = u(i);
+	return /* @__PURE__ */ l("div", {
+		ref: d,
+		className: t("flex items-center gap-8 relative", r),
 		children: [/* @__PURE__ */ l("button", {
 			tabIndex: -1,
-			...p,
+			...a,
 			className: "flex gap-8 items-center relative",
-			onClick: S,
-			children: [m, /* @__PURE__ */ c(s, {
-				name: u,
+			onClick: h,
+			children: [p, /* @__PURE__ */ c(s, {
+				name: n,
 				className: "w-30"
 			})]
 		}), /* @__PURE__ */ c("div", {
-			className: t(e("z-5 flex items-center gap-12 bg-white rounded-16 border-1 border-lightGrey absolute top-[calc(100%+8px)] right-0 text-black p-20 min-w-[120px] origin-center will-change[transform,opacity]", {
-				"animate-zoomIn": g,
-				"animate-zoomOut": !g && x,
-				"opacity-0 scale-90 pointer-events-none": !g && !x
+			className: t(e("dropdown-panel z-5 flex items-center gap-12 bg-white rounded-16 border-1 border-lightGrey absolute top-[calc(100%+8px)] right-0 text-black p-20 min-w-[120px] origin-center will-change[transform,opacity]", {
+				"animate-zoom-in": m,
+				"animate-zoom-out": !m && f,
+				"opacity-0 scale-90 pointer-events-none": !m && !f
 			})),
-			children: h
+			children: o
 		})]
 	});
 }
 //#endregion
-export { u as Dropdown };
+export { d as Dropdown, u as useDropdown };
 
 //# sourceMappingURL=Dropdown.js.map

package/ui/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","names":[],"sources":["../../lib/ui/Dropdown.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport clsx from 'clsx';\nimport { twMerge } from '@/ui/helpers/twMerge';\nimport { useSlots } from '@/ui/hooks/useSlots';\n\nexport interface DropdownProps extends ComponentPropsWithoutRef<'button'> {\n  icon?: IconicNames;\n}\n\nexport function Dropdown({\n  icon = 'ArrowOutlinedDown',\n  className,\n  children: initialChildren,\n  ...attrs\n}: PropsWithChildren<DropdownProps>) {\n  const { label, children } = useSlots(initialChildren, ['label']);\n  const [open, setOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const wasVisibleRef = useRef(open);\n  const wasVisible = wasVisibleRef.current;\n  const isLeaving = !open && wasVisible;\n\n  // update ref for next render\n  wasVisibleRef.current = open;\n\n  const onClick = useCallback(() => {\n    setOpen((prev) => !prev);\n  }, []);\n\n  // Close overlay when clicking outside using composedPath\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const handlePointerDown = (event: PointerEvent) => {\n      if (!containerRef.current || event.composedPath().includes(containerRef.current)) {\n        return;\n      }\n\n      setOpen(false);\n    };\n\n    document.addEventListener('pointerdown', handlePointerDown);\n    return () => {\n      document.removeEventListener('pointerdown', handlePointerDown);\n    };\n  }, [open]);\n\n  return (\n    <div ref={containerRef} className={twMerge('flex items-center gap-8 relative', className)}>\n      <button\n        tabIndex={-1}\n        {...attrs}\n        className=\"flex gap-8 items-center relative\"\n        onClick={onClick}\n      >\n        {label}\n\n        <Icon name={icon} className=\"w-30\" />\n      </button>\n\n      <div\n        className={twMerge(\n          clsx(\n            'z-5 flex items-center gap-12 bg-white rounded-16 border-1 border-lightGrey absolute top-[calc(100%+8px)] right-0 text-black p-20 min-w-[120px] origin-center will-change[transform,opacity]',\n            {\n              'animate-zoomIn': open,\n              'animate-zoomOut': !open && isLeaving,\n              'opacity-0 scale-90 pointer-events-none': !open && !isLeaving,\n            },\n          ),\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAiBA,SAAgB,EAAS,EACvB,UAAO,qBACP,cACA,UAAU,GACV,GAAG,KACgC;CACnC,IAAM,EAAE,UAAO,gBAAa,EAAS,GAAiB,CAAC,QAAQ,CAAC,EAC1D,CAAC,GAAM,KAAW,EAAS,GAAM,EACjC,IAAe,EAAuB,KAAK,EAC3C,IAAgB,EAAO,EAAK,EAC5B,IAAa,EAAc,SAC3B,IAAY,CAAC,KAAQ;AAG3B,GAAc,UAAU;CAExB,IAAM,IAAU,QAAkB;AAChC,KAAS,MAAS,CAAC,EAAK;IACvB,EAAE,CAAC;AAsBN,QAnBA,QAAgB;AACd,MAAI,CAAC,EACH;EAGF,IAAM,KAAqB,MAAwB;AAC7C,IAAC,EAAa,WAAW,EAAM,cAAc,CAAC,SAAS,EAAa,QAAQ,IAIhF,EAAQ,GAAM;;AAIhB,SADA,SAAS,iBAAiB,eAAe,EAAkB,QAC9C;AACX,YAAS,oBAAoB,eAAe,EAAkB;;IAE/D,CAAC,EAAK,CAAC,EAGR,kBAAC,OAAD;EAAK,KAAK;EAAc,WAAW,EAAQ,oCAAoC,EAAU;YAAzF,CACE,kBAAC,UAAD;GACE,UAAU;GACV,GAAI;GACJ,WAAU;GACD;aAJX,CAMG,GAED,kBAAC,GAAD;IAAM,MAAM;IAAM,WAAU;IAAS,CAAA,CAC9B;MAET,kBAAC,OAAD;GACE,WAAW,EACT,EACE,+LACA;IACE,kBAAkB;IAClB,mBAAmB,CAAC,KAAQ;IAC5B,0CAA0C,CAAC,KAAQ,CAAC;IACrD,CACF,CACF;GAEA;GACG,CAAA,CACF"}
+{"version":3,"file":"Dropdown.js","names":[],"sources":["../../lib/ui/Dropdown.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport clsx from 'clsx';\nimport { twMerge } from '@/ui/helpers/twMerge';\nimport { useSlots } from '@/ui/hooks/useSlots';\n\ninterface DropdownRenderContext {\n  close: () => void;\n  open: boolean;\n  toggle: () => void;\n}\n\ntype DropdownChildren = ReactNode | ((context: DropdownRenderContext) => ReactNode);\n\nexport interface DropdownProps extends Omit<ComponentPropsWithoutRef<'button'>, 'children'> {\n  children?: DropdownChildren;\n  icon?: IconicNames;\n}\n\nexport function useDropdown(initialChildren?: DropdownChildren) {\n  const [open, setOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const wasVisibleRef = useRef(open);\n  const wasVisible = wasVisibleRef.current;\n  const isLeaving = !open && wasVisible;\n\n  // update ref for next render\n  wasVisibleRef.current = open;\n\n  const toggle = useCallback(() => {\n    setOpen((prev) => !prev);\n  }, []);\n\n  const close = useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  const renderedChildren =\n    typeof initialChildren === 'function'\n      ? initialChildren({ close, open, toggle })\n      : initialChildren;\n\n  const { label, children } = useSlots(renderedChildren, ['label']);\n\n  useEffect(() => {\n    if (!containerRef.current) {\n      return;\n    }\n\n    const items = containerRef.current.querySelectorAll(\n      '.dropdown-panel a[href], .dropdown-panel [data-dropdown-item]',\n    );\n    const listeners = Array.from(items, (item) => {\n      const handleItemClick = () => {\n        close();\n      };\n      item.addEventListener('click', handleItemClick);\n      return { handleItemClick, item };\n    });\n\n    return () => {\n      listeners.forEach(({ handleItemClick, item }) => {\n        item.removeEventListener('click', handleItemClick);\n      });\n    };\n  }, [close, renderedChildren]);\n\n  // Close overlay when clicking outside using composedPath\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const handleOutsideClick = (event: PointerEvent) => {\n      if (!containerRef.current || event.composedPath().includes(containerRef.current)) {\n        return;\n      }\n\n      close();\n    };\n\n    document.addEventListener('click', handleOutsideClick);\n    return () => {\n      document.removeEventListener('click', handleOutsideClick);\n    };\n  }, [close, open]);\n\n  return {\n    children,\n    close,\n    containerRef,\n    isLeaving,\n    label,\n    open,\n    toggle,\n  };\n}\n\nexport function Dropdown({\n  icon = 'ArrowOutlinedDown',\n  className,\n  children: initialChildren,\n  ...attrs\n}: DropdownProps) {\n  const { children, containerRef, isLeaving, label, open, toggle } = useDropdown(initialChildren);\n\n  return (\n    <div ref={containerRef} className={twMerge('flex items-center gap-8 relative', className)}>\n      <button\n        tabIndex={-1}\n        {...attrs}\n        className=\"flex gap-8 items-center relative\"\n        onClick={toggle}\n      >\n        {label}\n\n        <Icon name={icon} className=\"w-30\" />\n      </button>\n\n      <div\n        className={twMerge(\n          clsx(\n            'dropdown-panel z-5 flex items-center gap-12 bg-white rounded-16 border-1 border-lightGrey absolute top-[calc(100%+8px)] right-0 text-black p-20 min-w-[120px] origin-center will-change[transform,opacity]',\n            {\n              'animate-zoom-in': open,\n              'animate-zoom-out': !open && isLeaving,\n              'opacity-0 scale-90 pointer-events-none': !open && !isLeaving,\n            },\n          ),\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AA0BA,SAAgB,EAAY,GAAoC;CAC9D,IAAM,CAAC,GAAM,KAAW,EAAS,GAAM,EACjC,IAAe,EAAuB,KAAK,EAC3C,IAAgB,EAAO,EAAK,EAC5B,IAAa,EAAc,SAC3B,IAAY,CAAC,KAAQ;AAG3B,GAAc,UAAU;CAExB,IAAM,IAAS,QAAkB;AAC/B,KAAS,MAAS,CAAC,EAAK;IACvB,EAAE,CAAC,EAEA,IAAQ,QAAkB;AAC9B,IAAQ,GAAM;IACb,EAAE,CAAC,EAEA,IACJ,OAAO,KAAoB,aACvB,EAAgB;EAAE;EAAO;EAAM;EAAQ,CAAC,GACxC,GAEA,EAAE,UAAO,gBAAa,EAAS,GAAkB,CAAC,QAAQ,CAAC;AA6CjE,QA3CA,QAAgB;AACd,MAAI,CAAC,EAAa,QAChB;EAGF,IAAM,IAAQ,EAAa,QAAQ,iBACjC,gEACD,EACK,IAAY,MAAM,KAAK,IAAQ,MAAS;GAC5C,IAAM,UAAwB;AAC5B,OAAO;;AAGT,UADA,EAAK,iBAAiB,SAAS,EAAgB,EACxC;IAAE;IAAiB;IAAM;IAChC;AAEF,eAAa;AACX,KAAU,SAAS,EAAE,oBAAiB,cAAW;AAC/C,MAAK,oBAAoB,SAAS,EAAgB;KAClD;;IAEH,CAAC,GAAO,EAAiB,CAAC,EAG7B,QAAgB;AACd,MAAI,CAAC,EACH;EAGF,IAAM,KAAsB,MAAwB;AAC9C,IAAC,EAAa,WAAW,EAAM,cAAc,CAAC,SAAS,EAAa,QAAQ,IAIhF,GAAO;;AAIT,SADA,SAAS,iBAAiB,SAAS,EAAmB,QACzC;AACX,YAAS,oBAAoB,SAAS,EAAmB;;IAE1D,CAAC,GAAO,EAAK,CAAC,EAEV;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACD;;AAGH,SAAgB,EAAS,EACvB,UAAO,qBACP,cACA,UAAU,GACV,GAAG,KACa;CAChB,IAAM,EAAE,aAAU,iBAAc,cAAW,UAAO,SAAM,cAAW,EAAY,EAAgB;AAE/F,QACE,kBAAC,OAAD;EAAK,KAAK;EAAc,WAAW,EAAQ,oCAAoC,EAAU;YAAzF,CACE,kBAAC,UAAD;GACE,UAAU;GACV,GAAI;GACJ,WAAU;GACV,SAAS;aAJX,CAMG,GAED,kBAAC,GAAD;IAAM,MAAM;IAAM,WAAU;IAAS,CAAA,CAC9B;MAET,kBAAC,OAAD;GACE,WAAW,EACT,EACE,8MACA;IACE,mBAAmB;IACnB,oBAAoB,CAAC,KAAQ;IAC7B,0CAA0C,CAAC,KAAQ,CAAC;IACrD,CACF,CACF;GAEA;GACG,CAAA,CACF"}

package/ui/ElasticHeight.d.ts

@@ -3,7 +3,6 @@ interface ElasticHeightProps extends ComponentPropsWithoutRef<'div'> {
     innerClassName?: string;
     isExpanded?: boolean;
     min?: number;
-    onHeightChange?: (height: number) => void;
 }
 export declare const ElasticHeight: FunctionComponent<ElasticHeightProps>;
 export {};

package/ui/ElasticHeight.js

@@ -1,31 +1,22 @@
-"use client";
 import { t as e } from "../chunks/clsx.js";
-import t from "./hooks/useResizeObserver.js";
-import { useLayoutEffect as n, useRef as r, useState as i } from "react";
-import { jsx as a } from "react/jsx-runtime";
+import { useRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
 //#region lib/ui/ElasticHeight.tsx
-var o = ({ className: o, children: s, innerClassName: c, isExpanded: l = !1, min: u = 0, ...d }) => {
-	let f = r(null), [p, m] = i(0);
-	return t({
-		ref: f,
-		onResize: () => {
-			f.current && m(f.current?.offsetHeight);
-		}
-	}), n(() => {
-		f.current && m(f.current.offsetHeight);
-	}, [f]), /* @__PURE__ */ a("div", {
-		...d,
-		className: e("overflow-hidden transition-all duration-500", o),
-		"data-expanded": l,
-		style: { height: l ? p : u },
-		children: /* @__PURE__ */ a("div", {
-			className: c,
-			ref: f,
-			children: s
+var r = ({ className: r, children: i, innerClassName: a, isExpanded: o = !1, min: s = 0, ...c }) => {
+	let l = t(null);
+	return /* @__PURE__ */ n("div", {
+		...c,
+		className: e("overflow-hidden transition-all duration-500 grid", "data-[expanded=true]:grid-rows-[1fr]", "data-[expanded=false]:grid-rows-[0fr]", r),
+		"data-expanded": o,
+		children: /* @__PURE__ */ n("div", {
+			style: { minHeight: s },
+			className: e("overflow-hidden", a),
+			ref: l,
+			children: i
 		})
 	});
 };
 //#endregion
-export { o as ElasticHeight };
+export { r as ElasticHeight };
 
 //# sourceMappingURL=ElasticHeight.js.map

package/ui/ElasticHeight.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElasticHeight.js","names":[],"sources":["../../lib/ui/ElasticHeight.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport useResizeObserver from './hooks/useResizeObserver';\n\ninterface ElasticHeightProps extends ComponentPropsWithoutRef<'div'> {\n  innerClassName?: string;\n  isExpanded?: boolean;\n  min?: number;\n  onHeightChange?: (height: number) => void;\n}\n\nexport const ElasticHeight: FunctionComponent<ElasticHeightProps> = ({\n  className,\n  children,\n  innerClassName,\n  isExpanded = false,\n  min = 0,\n  ...attrs\n}) => {\n  const ref = useRef<HTMLDivElement>(null as any);\n  const [max, setMax] = useState(0);\n\n  useResizeObserver<HTMLDivElement>({\n    ref: ref,\n    onResize: () => {\n      if (ref.current) {\n        setMax(ref.current?.offsetHeight);\n      }\n    },\n  });\n\n  useLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n    setMax(ref.current.offsetHeight);\n  }, [ref]);\n\n  return (\n    <div\n      {...attrs}\n      className={clsx('overflow-hidden transition-all duration-500', className)}\n      data-expanded={isExpanded}\n      style={{ height: isExpanded ? max : min }}\n    >\n      <div className={innerClassName} ref={ref}>\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAmBA,IAAa,KAAwD,EACnE,cACA,aACA,mBACA,gBAAa,IACb,SAAM,GACN,GAAG,QACC;CACJ,IAAM,IAAM,EAAuB,KAAY,EACzC,CAAC,GAAK,KAAU,EAAS,EAAE;AAkBjC,QAhBA,EAAkC;EAC3B;EACL,gBAAgB;AACd,GAAI,EAAI,WACN,EAAO,EAAI,SAAS,aAAa;;EAGtC,CAAC,EAEF,QAAsB;AACf,IAAI,WAGT,EAAO,EAAI,QAAQ,aAAa;IAC/B,CAAC,EAAI,CAAC,EAGP,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,EAAK,+CAA+C,EAAU;EACzE,iBAAe;EACf,OAAO,EAAE,QAAQ,IAAa,IAAM,GAAK;YAEzC,kBAAC,OAAD;GAAK,WAAW;GAAqB;GAClC;GACG,CAAA;EACF,CAAA"}
+{"version":3,"file":"ElasticHeight.js","names":[],"sources":["../../lib/ui/ElasticHeight.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { type ComponentPropsWithoutRef, type FunctionComponent, useRef } from 'react';\n\ninterface ElasticHeightProps extends ComponentPropsWithoutRef<'div'> {\n  innerClassName?: string;\n  isExpanded?: boolean;\n  min?: number;\n}\n\nexport const ElasticHeight: FunctionComponent<ElasticHeightProps> = ({\n  className,\n  children,\n  innerClassName,\n  isExpanded = false,\n  min = 0,\n  ...attrs\n}) => {\n  const ref = useRef<HTMLDivElement>(null as any);\n\n  return (\n    <div\n      {...attrs}\n      className={clsx(\n        'overflow-hidden transition-all duration-500 grid',\n        'data-[expanded=true]:grid-rows-[1fr]',\n        'data-[expanded=false]:grid-rows-[0fr]',\n        className,\n      )}\n      data-expanded={isExpanded}\n    >\n      <div style={{ minHeight: min }} className={clsx('overflow-hidden', innerClassName)} ref={ref}>\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AASA,IAAa,KAAwD,EACnE,cACA,aACA,mBACA,gBAAa,IACb,SAAM,GACN,GAAG,QACC;CACJ,IAAM,IAAM,EAAuB,KAAY;AAE/C,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,EACT,oDACA,wCACA,yCACA,EACD;EACD,iBAAe;YAEf,kBAAC,OAAD;GAAK,OAAO,EAAE,WAAW,GAAK;GAAE,WAAW,EAAK,mBAAmB,EAAe;GAAO;GACtF;GACG,CAAA;EACF,CAAA"}

package/ui/Loader.d.ts

@@ -1,7 +1,8 @@
-import { FunctionComponent } from 'react';
-interface Props {
+import { ComponentProps, FunctionComponent } from 'react';
+import { Backdrop } from './Backdrop';
+export interface LoaderProps {
     isVisible?: boolean;
     label?: string;
+    portalId?: ComponentProps<typeof Backdrop>['target'];
 }
-export declare const Loader: FunctionComponent<Props>;
-export {};
+export declare const Loader: FunctionComponent<LoaderProps>;

package/ui/Loader.js

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

package/ui/Loader.js.map

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

package/ui/Popin.js

@@ -20,8 +20,8 @@ var c = ({ closeLabel: e, onClose: n }) => /* @__PURE__ */ o(t, {
 		onClose: d,
 		children: /* @__PURE__ */ o("div", {
 			className: r(e("border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white origin-center will-change[transform,opacity]", {
-				"animate-zoomIn": f,
-				"animate-zoomOut": !f && b,
+				"animate-zoom-in": f,
+				"animate-zoom-out": !f && b,
 				"opacity-0 scale-90": !f && !b
 			}), p),
 			children: /* @__PURE__ */ s("div", {

package/ui/Popin.js.map

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