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

package/ui/Chapters/ChapterTitle.js

@@ -0,0 +1,35 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { Heading as t } from "../heading/Heading.js";
+import { getTheme as n } from "./Chapters.themes.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Icon as a } from "@clubmed/trident-icons";
+//#region lib/ui/Chapters/ChapterTitle.tsx
+var o = ({ children: o, className: s, hasNext: c = !1, hLevel: l = 2, index: u, isActive: d = !1, onClick: f, theme: p = "coreRange" }) => {
+	let { thTitle: m, thTitleUnActive: h } = n(p);
+	return /* @__PURE__ */ i(t, {
+		className: e("text-h5 @md:text-h2 sticky top-0 z-1 flex justify-between gap-x-8 p-20 font-serif transition-colors duration-300 @md:static @md:bg-transparent @md:p-0", m, s),
+		id: `chapter${u}`,
+		level: l,
+		children: [/* @__PURE__ */ i("a", {
+			className: e("flex-1", { [h]: !d }),
+			href: `#chapter${u}`,
+			onClick: f,
+			children: [/* @__PURE__ */ i("span", {
+				className: "@md:hidden",
+				children: [u + 1, " - "]
+			}), o]
+		}), c && /* @__PURE__ */ r("a", {
+			className: "@md:hidden",
+			href: `#chapter${u + 1}`,
+			children: /* @__PURE__ */ r(a, {
+				name: "ArrowTailDown",
+				width: "24px"
+			})
+		})]
+	});
+};
+//#endregion
+export { o as ChapterTitle };
+
+//# sourceMappingURL=ChapterTitle.js.map

package/ui/Chapters/ChapterTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChapterTitle.js","names":[],"sources":["../../../lib/ui/Chapters/ChapterTitle.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { ComponentProps, FunctionComponent, PropsWithChildren } from 'react';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport { Heading } from '../heading/Heading';\nimport type { Theme } from '../types/Theme';\n\nimport { getTheme } from './Chapters.themes';\n\ninterface Props {\n  className?: string;\n  hasNext?: boolean;\n  hLevel?: ComponentProps<typeof Heading>['level'];\n  index: number;\n  isActive?: boolean;\n  onClick?: () => void;\n  theme?: Theme;\n}\n\nexport const ChapterTitle: FunctionComponent<PropsWithChildren<Props>> = ({\n  children,\n  className,\n  hasNext = false,\n  hLevel = 2,\n  index,\n  isActive = false,\n  onClick,\n  theme = 'coreRange',\n}) => {\n  const { thTitle, thTitleUnActive } = getTheme(theme);\n\n  return (\n    <Heading\n      className={clsx(\n        'text-h5 @md:text-h2 sticky top-0 z-1 flex justify-between gap-x-8 p-20 font-serif transition-colors duration-300 @md:static @md:bg-transparent @md:p-0',\n        thTitle,\n        className,\n      )}\n      id={`chapter${index}`}\n      level={hLevel}\n    >\n      <a\n        className={clsx('flex-1', {\n          [thTitleUnActive]: !isActive,\n        })}\n        href={`#chapter${index}`}\n        onClick={onClick}\n      >\n        <span className=\"@md:hidden\">{index + 1} - </span>\n        {children}\n      </a>\n      {hasNext && (\n        <a className=\"@md:hidden\" href={`#chapter${index + 1}`}>\n          <Icon name=\"ArrowTailDown\" width=\"24px\" />\n        </a>\n      )}\n    </Heading>\n  );\n};\n"],"mappings":";;;;;;;AAoBA,IAAa,KAA6D,EACxE,aACA,cACA,aAAU,IACV,YAAS,GACT,UACA,cAAW,IACX,YACA,WAAQ,kBACJ;CACJ,IAAM,EAAE,YAAS,uBAAoB,EAAS,EAAM;AAEpD,QACE,kBAAC,GAAD;EACE,WAAW,EACT,0JACA,GACA,EACD;EACD,IAAI,UAAU;EACd,OAAO;YAPT,CASE,kBAAC,KAAD;GACE,WAAW,EAAK,UAAU,GACvB,IAAkB,CAAC,GACrB,CAAC;GACF,MAAM,WAAW;GACR;aALX,CAOE,kBAAC,QAAD;IAAM,WAAU;cAAhB,CAA8B,IAAQ,GAAE,MAAA;OACvC,EAAA;MAEF,KACC,kBAAC,KAAD;GAAG,WAAU;GAAa,MAAM,WAAW,IAAQ;aACjD,kBAAC,GAAD;IAAM,MAAK;IAAgB,OAAM;IAAS,CAAA;GACxC,CAAA,CAAA"}

package/ui/Chapters/Chapters.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef, FunctionComponent, ReactNode } from 'react';
+import { IconicNames } from '@clubmed/trident-icons';
+import { Theme } from '../types/Theme';
+export interface ChapterItem {
+    content: ReactNode;
+    title: string;
+}
+export interface ChaptersProps extends Omit<ComponentPropsWithoutRef<'section'>, 'onClick' | 'children'> {
+    chapters: ChapterItem[];
+    hLevel?: 2 | 3 | 4;
+    icon?: IconicNames;
+    onClick?: (chapter: ChapterItem) => void;
+    theme?: Theme;
+}
+export declare const Chapters: FunctionComponent<ChaptersProps>;

package/ui/Chapters/Chapters.js

@@ -0,0 +1,42 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { Chapter as t } from "./Chapter.js";
+import { ChapterTitle as n } from "./ChapterTitle.js";
+import { ChaptersSummary as r } from "./ChaptersSummary.js";
+import { useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region lib/ui/Chapters/Chapters.tsx
+var s = ({ chapters: s, className: c, hLevel: l = 2, icon: u, onClick: d, theme: f = "coreRange", ...p }) => {
+	let [m, h] = i(0);
+	return /* @__PURE__ */ o("section", {
+		...p,
+		className: e(c, "flex @container/chapters"),
+		children: [/* @__PURE__ */ a(r, {
+			activeChapter: m,
+			chapters: s,
+			className: "hidden w-3/10 @md:block @xl:w-[calc(50%-380px)]",
+			icon: u,
+			onClick: d,
+			theme: f
+		}), /* @__PURE__ */ a("div", {
+			className: e("relative isolate w-full flex-1 @md:max-w-7/10 @xl:max-w-[calc(50%+380px)]", "@md:ps-20 @lg:ps-40 @xl:ps-120"),
+			children: s.map((e, r) => /* @__PURE__ */ o(t, {
+				index: r,
+				setActiveChapter: h,
+				children: [/* @__PURE__ */ a(n, {
+					hasNext: r < s.length - 1,
+					hLevel: l,
+					index: r,
+					isActive: r === m,
+					onClick: () => d?.(e),
+					theme: f,
+					children: e.title
+				}), e.content]
+			}, e.title))
+		})]
+	});
+};
+//#endregion
+export { s as Chapters };
+
+//# sourceMappingURL=Chapters.js.map

package/ui/Chapters/Chapters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chapters.js","names":[],"sources":["../../../lib/ui/Chapters/Chapters.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport {\n  useState,\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n  type ReactNode,\n} from 'react';\n\nimport type { IconicNames } from '@clubmed/trident-icons';\nimport type { Theme } from '../types/Theme';\n\nimport { Chapter } from './Chapter';\nimport { ChapterTitle } from './ChapterTitle';\nimport { ChaptersSummary } from './ChaptersSummary';\n\nexport interface ChapterItem {\n  content: ReactNode;\n  title: string;\n}\n\nexport interface ChaptersProps\n  extends Omit<ComponentPropsWithoutRef<'section'>, 'onClick' | 'children'> {\n  chapters: ChapterItem[];\n  hLevel?: 2 | 3 | 4;\n  icon?: IconicNames;\n  onClick?: (chapter: ChapterItem) => void;\n  theme?: Theme;\n}\n\nexport const Chapters: FunctionComponent<ChaptersProps> = ({\n  chapters,\n  className,\n  hLevel = 2,\n  icon,\n  onClick,\n  theme = 'coreRange',\n  ...attrs\n}) => {\n  const [activeChapter, setActiveChapter] = useState(0);\n\n  return (\n    <section {...attrs} className={clsx(className, 'flex @container/chapters')}>\n      <ChaptersSummary\n        activeChapter={activeChapter}\n        chapters={chapters}\n        className=\"hidden w-3/10 @md:block @xl:w-[calc(50%-380px)]\"\n        icon={icon}\n        onClick={onClick}\n        theme={theme}\n      />\n\n      <div\n        className={clsx(\n          'relative isolate w-full flex-1 @md:max-w-7/10 @xl:max-w-[calc(50%+380px)]',\n          '@md:ps-20 @lg:ps-40 @xl:ps-120',\n        )}\n      >\n        {chapters.map((chapter, index) => (\n          <Chapter index={index} key={chapter.title} setActiveChapter={setActiveChapter}>\n            <ChapterTitle\n              hasNext={index < chapters.length - 1}\n              hLevel={hLevel}\n              index={index}\n              isActive={index === activeChapter}\n              onClick={() => onClick?.(chapter)}\n              theme={theme}\n            >\n              {chapter.title}\n            </ChapterTitle>\n            {chapter.content}\n          </Chapter>\n        ))}\n      </div>\n    </section>\n  );\n};\n"],"mappings":";;;;;;;;AA8BA,IAAa,KAA8C,EACzD,aACA,cACA,YAAS,GACT,SACA,YACA,WAAQ,aACR,GAAG,QACC;CACJ,IAAM,CAAC,GAAe,KAAoB,EAAS,EAAE;AAErD,QACE,kBAAC,WAAD;EAAS,GAAI;EAAO,WAAW,EAAK,GAAW,2BAA2B;YAA1E,CACE,kBAAC,GAAD;GACiB;GACL;GACV,WAAU;GACJ;GACG;GACF;GACP,CAAA,EAEF,kBAAC,OAAD;GACE,WAAW,EACT,6EACA,iCACD;aAEA,EAAS,KAAK,GAAS,MACtB,kBAAC,GAAD;IAAgB;IAA6C;cAA7D,CACE,kBAAC,GAAD;KACE,SAAS,IAAQ,EAAS,SAAS;KAC3B;KACD;KACP,UAAU,MAAU;KACpB,eAAe,IAAU,EAAQ;KAC1B;eAEN,EAAQ;KACI,CAAA,EACd,EAAQ,QAAA;MAXiB,EAAQ,MAY1B,CAAA;GAER,CAAA,CAAA"}

package/ui/Chapters/Chapters.themes.d.ts

@@ -0,0 +1,9 @@
+import { Theme } from '../types/Theme';
+export declare const getTheme: (theme: Theme) => {
+    thSummary: string;
+    thSummaryIcon: string;
+    thSummaryIconName: string;
+    thSummaryIconWidth: string;
+    thTitle: string;
+    thTitleUnActive: string;
+};

package/ui/Chapters/Chapters.themes.js

@@ -0,0 +1,65 @@
+//#region lib/ui/Chapters/Chapters.themes.ts
+var e = {
+	BLACK: {
+		thSummary: "bg-black text-white",
+		thSummaryIcon: "text-white max-w-140",
+		thSummaryIconName: "Trident",
+		thSummaryIconWidth: "100%",
+		thTitle: "bg-black text-white",
+		thTitleUnActive: "max-md:text-white/50"
+	},
+	CORE_RANGE: {
+		thSummary: "bg-lightSand text-black",
+		thSummaryIcon: "text-sand max-w-140",
+		thSummaryIconName: "Trident",
+		thSummaryIconWidth: "100%",
+		thTitle: "bg-lightSand text-black",
+		thTitleUnActive: "max-md:text-black/50"
+	},
+	EXCLUSIVE_COLLECTION: {
+		thSummary: "bg-ultramarine text-white",
+		thSummaryIcon: "text-white max-w-220",
+		thSummaryIconName: "ExclusiveCollection",
+		thSummaryIconWidth: "100%",
+		thTitle: "bg-ultramarine text-white md:text-black",
+		thTitleUnActive: "max-md:text-white/50"
+	},
+	HAPPY_TO_CARE: {
+		thSummary: "bg-verdigris text-black",
+		thSummaryIcon: "text-black max-w-220",
+		thSummaryIconName: "HappyToCare",
+		thSummaryIconWidth: "100%",
+		thTitle: "bg-verdigris text-black",
+		thTitleUnActive: "max-md:text-black/50"
+	},
+	SIENNA: {
+		thSummary: "bg-sienna text-white",
+		thSummaryIcon: "text-white max-w-140",
+		thSummaryIconName: "Trident",
+		thSummaryIconWidth: "100%",
+		thTitle: "bg-sienna text-white md:text-black",
+		thTitleUnActive: "max-md:text-white/50"
+	},
+	WHITE: {
+		thSummary: "bg-white text-black",
+		thSummaryIcon: "text-sand max-w-140",
+		thSummaryIconName: "Trident",
+		thSummaryIconWidth: "100%",
+		thTitle: "bg-white text-black",
+		thTitleUnActive: "max-md:text-black/50"
+	}
+}, t = (t) => {
+	switch (t) {
+		case "black": return e.BLACK;
+		case "dark":
+		case "exclusiveCollection": return e.EXCLUSIVE_COLLECTION;
+		case "happyToCare": return e.HAPPY_TO_CARE;
+		case "sienna": return e.SIENNA;
+		case "white": return e.WHITE;
+		default: return e.CORE_RANGE;
+	}
+};
+//#endregion
+export { t as getTheme };
+
+//# sourceMappingURL=Chapters.themes.js.map

package/ui/Chapters/Chapters.themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chapters.themes.js","names":[],"sources":["../../../lib/ui/Chapters/Chapters.themes.ts"],"sourcesContent":["import type { Theme } from '../types/Theme';\n\nconst THEMES = {\n  BLACK: {\n    thSummary: 'bg-black text-white',\n    thSummaryIcon: 'text-white max-w-140',\n    thSummaryIconName: 'Trident',\n    thSummaryIconWidth: '100%',\n    thTitle: 'bg-black text-white',\n    thTitleUnActive: 'max-md:text-white/50',\n  },\n  CORE_RANGE: {\n    thSummary: 'bg-lightSand text-black',\n    thSummaryIcon: 'text-sand max-w-140',\n    thSummaryIconName: 'Trident',\n    thSummaryIconWidth: '100%',\n    thTitle: 'bg-lightSand text-black',\n    thTitleUnActive: 'max-md:text-black/50',\n  },\n  EXCLUSIVE_COLLECTION: {\n    thSummary: 'bg-ultramarine text-white',\n    thSummaryIcon: 'text-white max-w-220',\n    thSummaryIconName: 'ExclusiveCollection',\n    thSummaryIconWidth: '100%',\n    thTitle: 'bg-ultramarine text-white md:text-black',\n    thTitleUnActive: 'max-md:text-white/50',\n  },\n  HAPPY_TO_CARE: {\n    thSummary: 'bg-verdigris text-black',\n    thSummaryIcon: 'text-black max-w-220',\n    thSummaryIconName: 'HappyToCare',\n    thSummaryIconWidth: '100%',\n    thTitle: 'bg-verdigris text-black',\n    thTitleUnActive: 'max-md:text-black/50',\n  },\n  SIENNA: {\n    thSummary: 'bg-sienna text-white',\n    thSummaryIcon: 'text-white max-w-140',\n    thSummaryIconName: 'Trident',\n    thSummaryIconWidth: '100%',\n    thTitle: 'bg-sienna text-white md:text-black',\n    thTitleUnActive: 'max-md:text-white/50',\n  },\n  WHITE: {\n    thSummary: 'bg-white text-black',\n    thSummaryIcon: 'text-sand max-w-140',\n    thSummaryIconName: 'Trident',\n    thSummaryIconWidth: '100%',\n    thTitle: 'bg-white text-black',\n    thTitleUnActive: 'max-md:text-black/50',\n  },\n};\n\nexport const getTheme = (theme: Theme) => {\n  switch (theme) {\n    case 'black':\n      return THEMES.BLACK;\n    case 'dark':\n    case 'exclusiveCollection':\n      return THEMES.EXCLUSIVE_COLLECTION;\n    case 'happyToCare':\n      return THEMES.HAPPY_TO_CARE;\n    case 'sienna':\n      return THEMES.SIENNA;\n    case 'white':\n      return THEMES.WHITE;\n    case 'light':\n    case 'coreRange':\n    default:\n      return THEMES.CORE_RANGE;\n  }\n};\n"],"mappings":";AAEA,IAAM,IAAS;CACb,OAAO;EACL,WAAW;EACX,eAAe;EACf,mBAAmB;EACnB,oBAAoB;EACpB,SAAS;EACT,iBAAiB;EAClB;CACD,YAAY;EACV,WAAW;EACX,eAAe;EACf,mBAAmB;EACnB,oBAAoB;EACpB,SAAS;EACT,iBAAiB;EAClB;CACD,sBAAsB;EACpB,WAAW;EACX,eAAe;EACf,mBAAmB;EACnB,oBAAoB;EACpB,SAAS;EACT,iBAAiB;EAClB;CACD,eAAe;EACb,WAAW;EACX,eAAe;EACf,mBAAmB;EACnB,oBAAoB;EACpB,SAAS;EACT,iBAAiB;EAClB;CACD,QAAQ;EACN,WAAW;EACX,eAAe;EACf,mBAAmB;EACnB,oBAAoB;EACpB,SAAS;EACT,iBAAiB;EAClB;CACD,OAAO;EACL,WAAW;EACX,eAAe;EACf,mBAAmB;EACnB,oBAAoB;EACpB,SAAS;EACT,iBAAiB;EAClB;CACF,EAEY,KAAY,MAAiB;AACxC,SAAQ,GAAR;EACE,KAAK,QACH,QAAO,EAAO;EAChB,KAAK;EACL,KAAK,sBACH,QAAO,EAAO;EAChB,KAAK,cACH,QAAO,EAAO;EAChB,KAAK,SACH,QAAO,EAAO;EAChB,KAAK,QACH,QAAO,EAAO;EAGhB,QACE,QAAO,EAAO"}

package/ui/Chapters/ChaptersSummary.d.ts

@@ -0,0 +1,17 @@
+import { FunctionComponent, ReactNode } from 'react';
+import { IconicNames } from '@clubmed/trident-icons';
+import { Theme } from '../types/Theme';
+interface ChapterSummaryItem {
+    content: ReactNode;
+    title: string;
+}
+interface Props {
+    activeChapter: number;
+    chapters: ChapterSummaryItem[];
+    className?: string;
+    icon?: IconicNames;
+    onClick?: (chapter: ChapterSummaryItem) => void;
+    theme?: Theme;
+}
+export declare const ChaptersSummary: FunctionComponent<Props>;
+export {};

package/ui/Chapters/ChaptersSummary.js

@@ -0,0 +1,29 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { getTheme as t } from "./Chapters.themes.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Icon as i } from "@clubmed/trident-icons";
+//#region lib/ui/Chapters/ChaptersSummary.tsx
+var a = { HappyToCareFRCA: "translate-y-[28px]" }, o = ({ activeChapter: o, chapters: s, className: c, icon: l, onClick: u, theme: d = "coreRange" }) => {
+	let { thSummary: f, thSummaryIcon: p, thSummaryIconName: m, thSummaryIconWidth: h } = t(d), g = l ?? m, _ = a[g];
+	return /* @__PURE__ */ n("div", {
+		className: e("rounded-e-16", f, c),
+		children: /* @__PURE__ */ r("nav", {
+			className: "sticky top-0 ms-auto flex w-full max-w-380 flex-col gap-y-20 p-40",
+			children: [s.map((t, r) => /* @__PURE__ */ n("a", {
+				className: e("text-h5 block font-serif", { "opacity-50": r !== o }),
+				href: `#chapter${r}`,
+				onClick: () => u?.(t),
+				children: t.title
+			}, t.title)), /* @__PURE__ */ n(i, {
+				className: e("mt-90 self-center", p, _),
+				name: g,
+				width: h
+			})]
+		})
+	});
+};
+//#endregion
+export { o as ChaptersSummary };
+
+//# sourceMappingURL=ChaptersSummary.js.map

package/ui/Chapters/ChaptersSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChaptersSummary.js","names":[],"sources":["../../../lib/ui/Chapters/ChaptersSummary.tsx"],"sourcesContent":["'use client';\nimport clsx from 'clsx';\nimport type { FunctionComponent, ReactNode } from 'react';\n\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport type { Theme } from '../types/Theme';\n\nimport { getTheme } from './Chapters.themes';\n\nconst ICON_VERTICAL_OFFSET_CLASS: Partial<Record<IconicNames, string>> = {\n  // FR-CA asset has an intrinsic Y offset; compensate to match EN-CA visual alignment.\n  HappyToCareFRCA: 'translate-y-[28px]',\n};\n\ninterface ChapterSummaryItem {\n  content: ReactNode;\n  title: string;\n}\n\ninterface Props {\n  activeChapter: number;\n  chapters: ChapterSummaryItem[];\n  className?: string;\n  icon?: IconicNames;\n  onClick?: (chapter: ChapterSummaryItem) => void;\n  theme?: Theme;\n}\n\nexport const ChaptersSummary: FunctionComponent<Props> = ({\n  activeChapter,\n  chapters,\n  className,\n  icon,\n  onClick,\n  theme = 'coreRange',\n}) => {\n  const { thSummary, thSummaryIcon, thSummaryIconName, thSummaryIconWidth } = getTheme(theme);\n  const summaryIconName = (icon ?? thSummaryIconName) as IconicNames;\n  const iconVerticalOffsetClass = ICON_VERTICAL_OFFSET_CLASS[summaryIconName];\n\n  return (\n    <div className={clsx('rounded-e-16', thSummary, className)}>\n      <nav className=\"sticky top-0 ms-auto flex w-full max-w-380 flex-col gap-y-20 p-40\">\n        {chapters.map((chapter, index) => (\n          <a\n            className={clsx('text-h5 block font-serif', {\n              'opacity-50': index !== activeChapter,\n            })}\n            href={`#chapter${index}`}\n            key={chapter.title}\n            onClick={() => onClick?.(chapter)}\n          >\n            {chapter.title}\n          </a>\n        ))}\n        <Icon\n          className={clsx('mt-90 self-center', thSummaryIcon, iconVerticalOffsetClass)}\n          name={summaryIconName}\n          width={thSummaryIconWidth}\n        />\n      </nav>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AASA,IAAM,IAAmE,EAEvE,iBAAiB,sBAClB,EAgBY,KAA6C,EACxD,kBACA,aACA,cACA,SACA,YACA,WAAQ,kBACJ;CACJ,IAAM,EAAE,cAAW,kBAAe,sBAAmB,0BAAuB,EAAS,EAAM,EACrF,IAAmB,KAAQ,GAC3B,IAA0B,EAA2B;AAE3D,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,gBAAgB,GAAW,EAAU;YACxD,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,EAAS,KAAK,GAAS,MACtB,kBAAC,KAAD;IACE,WAAW,EAAK,4BAA4B,EAC1C,cAAc,MAAU,GACzB,CAAC;IACF,MAAM,WAAW;IAEjB,eAAe,IAAU,EAAQ;cAEhC,EAAQ;IACP,EAJG,EAAQ,MAIX,CACJ,EACF,kBAAC,GAAD;IACE,WAAW,EAAK,qBAAqB,GAAe,EAAwB;IAC5E,MAAM;IACN,OAAO;IACP,CAAA,CAAA;;EAEA,CAAA"}

package/ui/ChatButton.js

@@ -1,25 +1,25 @@
 import { twMerge as e } from "./helpers/twMerge.js";
-import { Icon as t } from "@clubmed/trident-icons";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Icon as r } from "@clubmed/trident-icons";
 //#region lib/ui/ChatButton.tsx
-var i = "Hello, Ask me a question", a = "Chat with your assistant";
+var i = "AI Agent: Have you got a question?", a = "Chat with your assistant";
 function o({ children: o = i, className: s, type: c = "button", "aria-label": l, tabIndex: u, offset: d, unfoldOn: f = "hover", ...p }) {
 	let m = l ?? (typeof o == "string" && o.trim().length > 0 ? o.trim() : a);
-	return /* @__PURE__ */ r("button", {
+	return /* @__PURE__ */ n("button", {
 		type: c,
 		"aria-label": m,
 		tabIndex: u ?? 0,
 		...p,
-		className: e("chat-button grid grid-cols-[24px_0fr] transition-[grid-template-columns] justify-center items-center overflow-hidden cursor-pointer transition-all rounded-pill px-8 md:px-16 outline-none group/Chatbutton focus-visible:ring-8 focus-visible:ring-lavender/20 pointer-events-auto h-48 min-h-48 md:min-w-80 md:h-80 active:scale-[0.98]", d && "md:translate-x-[40px] focus-visible:translate-x-0", f === "hover" && "group/hoverChatbutton hover:grid-cols-[24px_1fr] hover:translate-x-0", f === "active" && "group/activeChatbutton active:grid-cols-[24px_1fr] active:translate-x-0", "focus-visible:grid-cols-[24px_1fr]", s),
-		children: [/* @__PURE__ */ n(t, {
+		className: e("chat-border grid grid-cols-[24px_0fr] transition-[grid-template-columns] justify-center items-center overflow-hidden cursor-pointer transition-all rounded-pill px-8 md:px-16 outline-none group/Chatbutton focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 pointer-events-auto h-48 min-h-48 md:min-w-80 md:h-80 active:scale-[0.98]", d && "md:translate-x-[40px] focus-visible:translate-x-0", f === "hover" && "group/hoverChatbutton hover:grid-cols-[24px_1fr] hover:translate-x-0", f === "active" && "group/activeChatbutton active:grid-cols-[24px_1fr] active:translate-x-0", "focus-visible:grid-cols-[24px_1fr]", s),
+		children: [/* @__PURE__ */ t(r, {
 			name: "Sparkles",
 			className: e("chat-button-icon w-24 transition-all", d && "relative md:start-[calc(-16px)] group-focus-visible/Chatbutton:start-0 group-hover/hoverChatbutton:start-0 group-active/activeChatbutton:start-0")
-		}), /* @__PURE__ */ n("div", {
+		}), /* @__PURE__ */ t("div", {
 			className: "grid grid-cols-[0fr] overflow-hidden opacity-0 transition-opacity group-hover/hoverChatbutton:opacity-100 group-focus-visible/Chatbutton:opacity-100 group-active/activeChatbutton:opacity-100 duration-500",
-			children: /* @__PURE__ */ r("span", {
+			children: /* @__PURE__ */ n("span", {
 				"aria-hidden": "true",
 				className: "chat-button-text items-center ps-20 flex gap-10 whitespace-nowrap font-semibold text-b3 text-black",
-				children: [o, /* @__PURE__ */ n(t, {
+				children: [o, /* @__PURE__ */ t(r, {
 					name: "ArrowTailRight",
 					width: "24px"
 				})]

package/ui/ChatButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatButton.js","names":[],"sources":["../../lib/ui/ChatButton.tsx"],"sourcesContent":["import { Icon } from '@clubmed/trident-icons';\nimport type { ButtonHTMLAttributes } from 'react';\nimport { twMerge } from './helpers/twMerge';\n\nconst DEFAULT_TEASER_COPY = 'Hello, Ask me a question';\nconst FALLBACK_ARIA_LABEL = 'Chat with your assistant';\n\nexport type ChatButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n  offset?: boolean;\n  unfoldOn?: 'hover' | 'active';\n};\n\nexport function ChatButton({\n  children = DEFAULT_TEASER_COPY,\n  className,\n  type = 'button',\n  'aria-label': ariaLabel,\n  tabIndex,\n  offset,\n  unfoldOn = 'hover',\n  ...rest\n}: ChatButtonProps) {\n  const label =\n    ariaLabel ??\n    (typeof children === 'string' && children.trim().length > 0\n      ? children.trim()\n      : FALLBACK_ARIA_LABEL);\n\n  return (\n    <button\n      type={type}\n      aria-label={label}\n      tabIndex={tabIndex ?? 0}\n      {...rest}\n      className={twMerge(\n        'chat-button grid grid-cols-[24px_0fr] transition-[grid-template-columns] justify-center items-center overflow-hidden cursor-pointer transition-all rounded-pill px-8 md:px-16 outline-none group/Chatbutton focus-visible:ring-8 focus-visible:ring-lavender/20 pointer-events-auto h-48 min-h-48 md:min-w-80 md:h-80 active:scale-[0.98]',\n        offset && 'md:translate-x-[40px] focus-visible:translate-x-0',\n        unfoldOn === 'hover' &&\n          'group/hoverChatbutton hover:grid-cols-[24px_1fr] hover:translate-x-0',\n        unfoldOn === 'active' &&\n          'group/activeChatbutton active:grid-cols-[24px_1fr] active:translate-x-0',\n        'focus-visible:grid-cols-[24px_1fr]',\n        className,\n      )}\n    >\n      <Icon\n        name=\"Sparkles\"\n        className={twMerge(\n          'chat-button-icon w-24 transition-all',\n          offset &&\n            'relative md:start-[calc(-16px)] group-focus-visible/Chatbutton:start-0 group-hover/hoverChatbutton:start-0 group-active/activeChatbutton:start-0',\n        )}\n      />\n      <div className=\"grid grid-cols-[0fr] overflow-hidden opacity-0 transition-opacity group-hover/hoverChatbutton:opacity-100 group-focus-visible/Chatbutton:opacity-100 group-active/activeChatbutton:opacity-100 duration-500\">\n        <span\n          aria-hidden=\"true\"\n          className=\"chat-button-text items-center ps-20 flex gap-10 whitespace-nowrap font-semibold text-b3 text-black\"\n        >\n          {children}\n          <Icon name=\"ArrowTailRight\" width=\"24px\" />\n        </span>\n      </div>\n    </button>\n  );\n}\n"],"mappings":";;;;AAIA,IAAM,IAAsB,4BACtB,IAAsB;AAO5B,SAAgB,EAAW,EACzB,cAAW,GACX,cACA,UAAO,UACP,cAAc,GACd,aACA,WACA,cAAW,SACX,GAAG,KACe;CAClB,IAAM,IACJ,MACC,OAAO,KAAa,YAAY,EAAS,MAAM,CAAC,SAAS,IACtD,EAAS,MAAM,GACf;AAEN,QACE,kBAAC,UAAD;EACQ;EACN,cAAY;EACZ,UAAU,KAAY;EACtB,GAAI;EACJ,WAAW,EACT,6UACA,KAAU,qDACV,MAAa,WACX,wEACF,MAAa,YACX,2EACF,sCACA,EACD;YAdH,CAgBE,kBAAC,GAAD;GACE,MAAK;GACL,WAAW,EACT,wCACA,KACE,mJACH;GACD,CAAA,EACF,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,QAAD;IACE,eAAY;IACZ,WAAU;cAFZ,CAIG,GACD,kBAAC,GAAD;KAAM,MAAK;KAAiB,OAAM;KAAS,CAAA,CACtC;;GACH,CAAA,CACC"}
+{"version":3,"file":"ChatButton.js","names":[],"sources":["../../lib/ui/ChatButton.tsx"],"sourcesContent":["import { Icon } from '@clubmed/trident-icons';\nimport type { ButtonHTMLAttributes } from 'react';\nimport { twMerge } from './helpers/twMerge';\n\nconst DEFAULT_TEASER_COPY = 'AI Agent: Have you got a question?';\nconst FALLBACK_ARIA_LABEL = 'Chat with your assistant';\n\nexport type ChatButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n  offset?: boolean;\n  unfoldOn?: 'hover' | 'active';\n};\n\nexport function ChatButton({\n  children = DEFAULT_TEASER_COPY,\n  className,\n  type = 'button',\n  'aria-label': ariaLabel,\n  tabIndex,\n  offset,\n  unfoldOn = 'hover',\n  ...rest\n}: ChatButtonProps) {\n  const label =\n    ariaLabel ??\n    (typeof children === 'string' && children.trim().length > 0\n      ? children.trim()\n      : FALLBACK_ARIA_LABEL);\n\n  return (\n    <button\n      type={type}\n      aria-label={label}\n      tabIndex={tabIndex ?? 0}\n      {...rest}\n      className={twMerge(\n        'chat-border grid grid-cols-[24px_0fr] transition-[grid-template-columns] justify-center items-center overflow-hidden cursor-pointer transition-all rounded-pill px-8 md:px-16 outline-none group/Chatbutton focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 pointer-events-auto h-48 min-h-48 md:min-w-80 md:h-80 active:scale-[0.98]',\n        offset && 'md:translate-x-[40px] focus-visible:translate-x-0',\n        unfoldOn === 'hover' &&\n          'group/hoverChatbutton hover:grid-cols-[24px_1fr] hover:translate-x-0',\n        unfoldOn === 'active' &&\n          'group/activeChatbutton active:grid-cols-[24px_1fr] active:translate-x-0',\n        'focus-visible:grid-cols-[24px_1fr]',\n        className,\n      )}\n    >\n      <Icon\n        name=\"Sparkles\"\n        className={twMerge(\n          'chat-button-icon w-24 transition-all',\n          offset &&\n            'relative md:start-[calc(-16px)] group-focus-visible/Chatbutton:start-0 group-hover/hoverChatbutton:start-0 group-active/activeChatbutton:start-0',\n        )}\n      />\n      <div className=\"grid grid-cols-[0fr] overflow-hidden opacity-0 transition-opacity group-hover/hoverChatbutton:opacity-100 group-focus-visible/Chatbutton:opacity-100 group-active/activeChatbutton:opacity-100 duration-500\">\n        <span\n          aria-hidden=\"true\"\n          className=\"chat-button-text items-center ps-20 flex gap-10 whitespace-nowrap font-semibold text-b3 text-black\"\n        >\n          {children}\n          <Icon name=\"ArrowTailRight\" width=\"24px\" />\n        </span>\n      </div>\n    </button>\n  );\n}\n"],"mappings":";;;;AAIA,IAAM,IAAsB,sCACtB,IAAsB;AAO5B,SAAgB,EAAW,EACzB,cAAW,GACX,cACA,UAAO,UACP,cAAc,GACd,aACA,WACA,cAAW,SACX,GAAG,KACe;CAClB,IAAM,IACJ,MACC,OAAO,KAAa,YAAY,EAAS,MAAM,CAAC,SAAS,IACtD,EAAS,MAAM,GACf;AAEN,QACE,kBAAC,UAAD;EACQ;EACN,cAAY;EACZ,UAAU,KAAY;EACtB,GAAI;EACJ,WAAW,EACT,mWACA,KAAU,qDACV,MAAa,WACX,wEACF,MAAa,YACX,2EACF,sCACA,EACD;YAdH,CAgBE,kBAAC,GAAD;GACE,MAAK;GACL,WAAW,EACT,wCACA,KACE,mJACH;GACD,CAAA,EACF,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,QAAD;IACE,eAAY;IACZ,WAAU;cAFZ,CAIG,GACD,kBAAC,GAAD;KAAM,MAAK;KAAiB,OAAM;KAAS,CAAA,CACtC;;GACH,CAAA,CACC"}

package/ui/ChatInput.d.ts

@@ -0,0 +1,10 @@
+import { FormHTMLAttributes } from 'react';
+export interface ChatInputProps extends FormHTMLAttributes<HTMLFormElement> {
+    value: string;
+    placeholder?: string;
+    onValueChange: (value: string) => void;
+    onSubmit: () => void;
+    /** Fallback for when the browser does not support the Web Speech API */
+    onAudioClick?: () => void;
+}
+export declare function ChatInput({ value, placeholder, onValueChange, onSubmit, onAudioClick, className, ...props }: ChatInputProps): import("react/jsx-runtime").JSX.Element;

package/ui/ChatInput.js

@@ -0,0 +1,149 @@
+"use client";
+import { Button as e } from "./buttons/Button.js";
+import { twMerge as t } from "./helpers/twMerge.js";
+import { useEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region lib/ui/ChatInput.tsx
+var s = 12, c = 48, l = 8;
+function u(e) {
+	let t = r(e);
+	return n(() => {
+		t.current = e;
+	}), t;
+}
+var d = 3e3;
+function f(e) {
+	let [t, a] = i(!1), [o, s] = i(!1), c = r(null), l = r(null), f = r(!1), p = u(e);
+	function m() {
+		l.current && clearTimeout(l.current);
+	}
+	function h() {
+		m(), l.current = setTimeout(() => {
+			f.current = !1, s(!1), c.current?.stop();
+		}, d);
+	}
+	n(() => {
+		let e = window.webkitSpeechRecognition ?? window.SpeechRecognition;
+		if (!e) return;
+		a(!0);
+		let t = new e();
+		return t.continuous = !0, t.interimResults = !0, t.lang = navigator.language, t.onresult = (e) => {
+			let t = Array.from(e.results).map((e) => e[0].transcript).join("");
+			p.current(t), h();
+		}, t.onend = () => {
+			if (m(), f.current) try {
+				t.start();
+			} catch {}
+			else s(!1);
+		}, t.onerror = (e) => {
+			(e.error === "not-allowed" || e.error === "aborted") && (f.current = !1, s(!1), m());
+		}, c.current = t, () => {
+			t.abort(), m();
+		};
+	}, []);
+	function g() {
+		let e = c.current;
+		e && (f.current ? (f.current = !1, e.stop()) : (f.current = !0, s(!0), e.start(), h()));
+	}
+	return {
+		isSupported: t,
+		isListening: o,
+		toggle: g
+	};
+}
+function p(e) {
+	let t = r(null);
+	return n(() => {
+		let n = t.current;
+		if (!e) {
+			n && (n.style.height = "0px");
+			return;
+		}
+		let r, i = null, a = null;
+		return navigator.mediaDevices.getUserMedia({
+			audio: !0,
+			video: !1
+		}).then((e) => {
+			i = e, a = new AudioContext();
+			let n = a.createMediaStreamSource(i), o = a.createAnalyser();
+			o.fftSize = 256, n.connect(o);
+			let s = new Uint8Array(o.frequencyBinCount);
+			function c() {
+				o.getByteFrequencyData(s);
+				let e = s.reduce((e, t) => e + t, 0) / s.length, n = t.current;
+				n && (n.style.height = `${Math.sqrt(e / 255) * 10}px`), r = requestAnimationFrame(c);
+			}
+			r = requestAnimationFrame(c);
+		}), () => {
+			cancelAnimationFrame(r), i?.getTracks().forEach((e) => e.stop()), a?.close();
+		};
+	}, [e]), t;
+}
+function m({ value: n, placeholder: r = "Ask a question?", onValueChange: u, onSubmit: d, onAudioClick: m, className: h, ...g }) {
+	let [_, v] = i(!1), y = n.trim(), b = _ || y.length > 0, { isSupported: x, isListening: S, toggle: C } = f(u), w = p(S), T = x || !!m, E = T ? c + l + c : c;
+	function D() {
+		x ? C() : m?.();
+	}
+	function O(e) {
+		e.preventDefault(), y && d();
+	}
+	return /* @__PURE__ */ o("form", {
+		onSubmit: O,
+		onMouseDown: (e) => {
+			e.target.tagName !== "TEXTAREA" && e.preventDefault();
+		},
+		...g,
+		style: { paddingBottom: b ? s + l + c : s },
+		className: t("relative flex items-start overflow-hidden bg-white border border-light-grey p-12 w-full", "transition-[padding-bottom,border-radius] duration-250 ease-out rounded-b-[24]", b ? "rounded-32" : "rounded-[40]", h),
+		children: [/* @__PURE__ */ a("textarea", {
+			rows: b ? 3 : 1,
+			value: n,
+			onChange: (e) => u(e.target.value),
+			onKeyDown: (e) => {
+				e.key === "Enter" && (e.metaKey || e.ctrlKey) && y && (e.preventDefault(), d());
+			},
+			onFocus: () => v(!0),
+			onBlur: () => v(!1),
+			placeholder: r,
+			"aria-label": r,
+			style: { marginInlineEnd: b ? 0 : E + l },
+			className: t("scrollbar-hidden bg-transparent text-b3 py-12 outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 resize-none w-full px-20 border border-middleGrey", "transition-[margin-inline-end,border-radius] duration-250 ease-out", b ? "text-black rounded-[20]" : "text-darkGrey placeholder:text-darkGrey rounded-[40]")
+		}), /* @__PURE__ */ o("div", {
+			style: {
+				insetInlineStart: b ? `calc(50% - ${E / 2}px)` : `calc(100% - ${s + E}px)`,
+				bottom: s
+			},
+			className: "absolute flex gap-8 items-center transition-[inset-inline-start] duration-250 ease-out",
+			children: [/* @__PURE__ */ a(e, {
+				type: "submit",
+				"aria-label": "Send message",
+				disabled: !y,
+				variant: "circle",
+				color: "saffron",
+				icon: "ArrowTailRight",
+				iconWidth: "24px"
+			}), T && /* @__PURE__ */ a(e, {
+				type: "button",
+				"aria-label": S ? "Stop recording" : "Use microphone",
+				"aria-pressed": S,
+				onClick: D,
+				variant: "circle",
+				theme: S ? "solid" : "outline",
+				color: S ? "sienna" : "black",
+				icon: "Audio",
+				iconWidth: "24px",
+				className: t("relative", S && "animate-pulse", !S && "border-lightGrey"),
+				children: /* @__PURE__ */ a("span", {
+					ref: w,
+					"aria-hidden": "true",
+					className: "bg-current absolute w-5 bottom-21",
+					style: { height: "0px" }
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { m as ChatInput };
+
+//# sourceMappingURL=ChatInput.js.map

package/ui/ChatInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInput.js","names":[],"sources":["../../lib/ui/ChatInput.tsx"],"sourcesContent":["/// <reference types=\"@types/dom-speech-recognition\" />\n'use client';\n\nimport type { FormHTMLAttributes } from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport { Button } from './buttons/Button';\nimport { twMerge } from './helpers/twMerge';\n\nexport interface ChatInputProps extends FormHTMLAttributes<HTMLFormElement> {\n  value: string;\n  placeholder?: string;\n  onValueChange: (value: string) => void;\n  onSubmit: () => void;\n  /** Fallback for when the browser does not support the Web Speech API */\n  onAudioClick?: () => void;\n}\n\nconst FORM_PAD = 12; // matches p-12\nconst BTN_SIZE = 48; // matches size-48\nconst BTN_GAP = 8; // matches gap-8\n\n// Keep onValueChange stable inside the recognition handler without re-creating the SR instance\nfunction useCallbackRef<T extends (...args: never[]) => unknown>(fn: T) {\n  const ref = useRef(fn);\n  useEffect(() => {\n    ref.current = fn;\n  });\n  return ref;\n}\n\nconst SILENCE_TIMEOUT_MS = 3_000;\n\nfunction useSpeechRecognition(onValueChange: (v: string) => void) {\n  const [isSupported, setIsSupported] = useState(false);\n  const [isListening, setIsListening] = useState(false);\n  const recognitionRef = useRef<SpeechRecognition | null>(null);\n  const silenceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const isListeningRef = useRef(false);\n  const onValueChangeRef = useCallbackRef(onValueChange);\n\n  function clearSilenceTimer() {\n    if (silenceTimerRef.current) clearTimeout(silenceTimerRef.current);\n  }\n\n  function resetSilenceTimer() {\n    clearSilenceTimer();\n    silenceTimerRef.current = setTimeout(() => {\n      isListeningRef.current = false;\n      setIsListening(false);\n      recognitionRef.current?.stop();\n    }, SILENCE_TIMEOUT_MS);\n  }\n\n  useEffect(() => {\n    const SR: typeof SpeechRecognition | undefined =\n      (window as Window & { webkitSpeechRecognition?: typeof SpeechRecognition })\n        .webkitSpeechRecognition ?? window.SpeechRecognition;\n    if (!SR) return;\n\n    setIsSupported(true);\n\n    const recognition = new SR();\n    recognition.continuous = true;\n    recognition.interimResults = true;\n    recognition.lang = navigator.language;\n\n    recognition.onresult = (event: SpeechRecognitionEvent) => {\n      const transcript = Array.from(event.results)\n        .map((r: SpeechRecognitionResult) => r[0].transcript)\n        .join('');\n      onValueChangeRef.current(transcript);\n      resetSilenceTimer();\n    };\n\n    recognition.onend = () => {\n      clearSilenceTimer();\n      // Restart automatically if the user hasn't manually stopped (browser cut us off)\n      if (isListeningRef.current) {\n        try {\n          recognition.start();\n        } catch {\n          /* already starting */\n        }\n      } else {\n        setIsListening(false);\n      }\n    };\n\n    recognition.onerror = (e: SpeechRecognitionErrorEvent) => {\n      if (e.error === 'not-allowed' || e.error === 'aborted') {\n        isListeningRef.current = false;\n        setIsListening(false);\n        clearSilenceTimer();\n      }\n    };\n\n    recognitionRef.current = recognition;\n    return () => {\n      recognition.abort();\n      clearSilenceTimer();\n    };\n    // SR detection and instance creation only needs to run once on mount\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  function toggle() {\n    const recognition = recognitionRef.current;\n    if (!recognition) return;\n    if (isListeningRef.current) {\n      isListeningRef.current = false;\n      recognition.stop();\n    } else {\n      isListeningRef.current = true;\n      setIsListening(true);\n      recognition.start();\n      resetSilenceTimer();\n    }\n  }\n\n  return { isSupported, isListening, toggle };\n}\n\n/**\n * Drives the audio-level indicator by writing directly to the DOM element's\n * style — avoids triggering a React re-render on every animation frame\n * (rule: rerender-use-ref-transient-values).\n *\n * Returns a ref to attach to the indicator <span>.\n */\nfunction useAudioLevel(isListening: boolean) {\n  const indicatorRef = useRef<HTMLSpanElement>(null);\n\n  useEffect(() => {\n    const el = indicatorRef.current;\n\n    if (!isListening) {\n      if (el) el.style.height = '0px';\n      return;\n    }\n\n    let animId: number;\n    let stream: MediaStream | null = null;\n    let ctx: AudioContext | null = null;\n\n    navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then((s) => {\n      stream = s;\n      ctx = new AudioContext();\n      const source = ctx.createMediaStreamSource(stream);\n      const analyser = ctx.createAnalyser();\n      analyser.fftSize = 256;\n      source.connect(analyser);\n      const data = new Uint8Array(analyser.frequencyBinCount);\n\n      function tick() {\n        analyser.getByteFrequencyData(data);\n        const avg = data.reduce((sum, v) => sum + v, 0) / data.length;\n        // Square-root curve so quiet sounds register more visibly\n        const node = indicatorRef.current;\n        if (node) node.style.height = `${Math.sqrt(avg / 255) * 10}px`;\n        animId = requestAnimationFrame(tick);\n      }\n      animId = requestAnimationFrame(tick);\n    });\n\n    return () => {\n      cancelAnimationFrame(animId);\n      stream?.getTracks().forEach((t) => t.stop());\n      ctx?.close();\n    };\n  }, [isListening]);\n\n  return indicatorRef;\n}\n\nexport function ChatInput({\n  value,\n  placeholder = 'Ask a question?',\n  onValueChange,\n  onSubmit,\n  onAudioClick,\n  className,\n  ...props\n}: ChatInputProps) {\n  const [isFocused, setIsFocused] = useState(false);\n  const trimmed = value.trim();\n  const isOpen = isFocused || trimmed.length > 0;\n  const { isSupported, isListening, toggle } = useSpeechRecognition(onValueChange);\n  const audioIndicatorRef = useAudioLevel(isListening);\n\n  const showAudio = isSupported || !!onAudioClick;\n  const btnW = showAudio ? BTN_SIZE + BTN_GAP + BTN_SIZE : BTN_SIZE;\n\n  function handleAudioClick() {\n    if (isSupported) {\n      toggle();\n    } else {\n      onAudioClick?.();\n    }\n  }\n\n  function handleSubmit(e: React.FormEvent) {\n    e.preventDefault();\n    if (trimmed) onSubmit();\n  }\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      onMouseDown={(e) => {\n        if ((e.target as HTMLElement).tagName !== 'TEXTAREA') e.preventDefault();\n      }}\n      {...props}\n      style={{\n        paddingBottom: isOpen ? FORM_PAD + BTN_GAP + BTN_SIZE : FORM_PAD,\n      }}\n      className={twMerge(\n        'relative flex items-start overflow-hidden bg-white border border-light-grey p-12 w-full',\n        'transition-[padding-bottom,border-radius] duration-250 ease-out rounded-b-[24]',\n        isOpen ? 'rounded-32' : 'rounded-[40]',\n        className,\n      )}\n    >\n      <textarea\n        rows={isOpen ? 3 : 1}\n        value={value}\n        onChange={(e) => onValueChange(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && trimmed) {\n            e.preventDefault();\n            onSubmit();\n          }\n        }}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n        placeholder={placeholder}\n        aria-label={placeholder}\n        style={{\n          marginInlineEnd: isOpen ? 0 : btnW + BTN_GAP,\n        }}\n        className={twMerge(\n          'scrollbar-hidden bg-transparent text-b3 py-12 outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 resize-none w-full px-20 border border-middleGrey',\n          'transition-[margin-inline-end,border-radius] duration-250 ease-out',\n          isOpen\n            ? 'text-black rounded-[20]'\n            : 'text-darkGrey placeholder:text-darkGrey rounded-[40]',\n        )}\n      />\n\n      <div\n        style={{\n          insetInlineStart: isOpen\n            ? `calc(50% - ${btnW / 2}px)`\n            : `calc(100% - ${FORM_PAD + btnW}px)`,\n          bottom: FORM_PAD,\n        }}\n        className=\"absolute flex gap-8 items-center transition-[inset-inline-start] duration-250 ease-out\"\n      >\n        <Button\n          type=\"submit\"\n          aria-label=\"Send message\"\n          disabled={!trimmed}\n          variant=\"circle\"\n          color=\"saffron\"\n          icon=\"ArrowTailRight\"\n          iconWidth=\"24px\"\n        />\n        {showAudio && (\n          <Button\n            type=\"button\"\n            aria-label={isListening ? 'Stop recording' : 'Use microphone'}\n            aria-pressed={isListening}\n            onClick={handleAudioClick}\n            variant=\"circle\"\n            theme={isListening ? 'solid' : 'outline'}\n            color={isListening ? 'sienna' : 'black'}\n            icon=\"Audio\"\n            iconWidth=\"24px\"\n            className={twMerge(\n              'relative',\n              isListening && 'animate-pulse',\n              !isListening && 'border-lightGrey',\n            )}\n          >\n            <span\n              ref={audioIndicatorRef}\n              aria-hidden=\"true\"\n              className=\"bg-current absolute w-5 bottom-21\"\n              style={{ height: '0px' }}\n            />\n          </Button>\n        )}\n      </div>\n    </form>\n  );\n}\n"],"mappings":"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"}

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,34 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { ChatMessageSender } from './ChatMessage';
+import { ChatWindowCsatPromptLabels } from './ChatWindowCsatPrompt';
+import { ChatWindowCsatThankYouLabels } from './ChatWindowCsatThankYou';
+import { ChatWindowQuoteItem } from './ChatWindowQuote';
+export type { ChatWindowCsatPromptLabels, ChatWindowCsatThankYouLabels, ChatWindowQuoteItem };
+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;
+    onFeedbackRate?: (rating: number) => void;
+    csatLabels?: ChatWindowCsatPromptLabels;
+    csatRenderRatingLabel?: (rating: number) => ReactNode;
+    csatThankYouLabels?: ChatWindowCsatThankYouLabels;
+    onQuoteCtaClick?: (quote: ChatWindowQuoteItem) => void;
+}
+export interface ChatWindowHandle {
+    askForFeedback: () => void;
+    showQuotes: (quotes: ChatWindowQuoteItem[]) => void;
+}
+export declare const ChatWindow: import('react').ForwardRefExoticComponent<ChatWindowProps & import('react').RefAttributes<ChatWindowHandle>>;