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

package/examples/chat-typing-indicator-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-typing-indicator-demo.js","names":[],"sources":["../../lib/examples/chat-typing-indicator-demo.tsx"],"sourcesContent":["'use client';\n\nimport { ChatTypingIndicator } from '@/ui/ChatTypingIndicator';\n\nexport default function ChatTypingIndicatorDemo() {\n  return (\n    <div className=\"flex flex-col gap-4 p-8\">\n      <ChatTypingIndicator />\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAA0B;AAChD,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD,EAAuB,CAAA;EACnB,CAAA"}

package/examples/chat-window-csat-demo.d.ts

@@ -0,0 +1 @@
+export default function ChatWindowCsatDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/chat-window-csat-demo.js

@@ -0,0 +1,69 @@
+"use client";
+import { ChatWindow as e } from "../ui/ChatWindow.js";
+import { useRef as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region lib/examples/chat-window-csat-demo.tsx
+var i = [
+	{
+		id: "1",
+		sender: "assistant",
+		content: "Hi. Ask me anything about Club Med. I'm here to help you find the right information quickly."
+	},
+	{
+		id: "2",
+		sender: "user",
+		content: "My son is 14 years old, what activities are available for him during our stay?"
+	},
+	{
+		id: "3",
+		sender: "assistant",
+		content: "Great question! For teenagers aged 13–17, Club Med offers the Passworld programme — supervised sports, creative workshops, and evening events designed specifically for that age group."
+	}
+], a = {
+	intro: "Your opinion matters! Tell us what you think. Your feedback helps us improve.",
+	question: "Following our conversation, from 1 to 5, how satisfied are you with the level of service you received,",
+	questionNote: "1 star being \"Very dissatisfied\" and 5 stars \"Very satisfied\".",
+	groupAriaLabel: "Rate your experience from 1 to 5 stars",
+	starLabels: [
+		"Very dissatisfied",
+		"Dissatisfied",
+		"Neutral",
+		"Satisfied",
+		"Very satisfied"
+	]
+}, o = {
+	title: "Thank you for your feedback!",
+	body: "Your opinion means a lot to us. Thanks to your responses, we keep improving our services to offer you an even more exceptional Club Med experience."
+};
+function s(e) {
+	return `${e} star${e > 1 ? "s" : ""} — ${a.starLabels[e - 1]}`;
+}
+function c() {
+	let c = t(null);
+	return /* @__PURE__ */ r("div", {
+		className: "flex flex-col items-center gap-12",
+		children: [/* @__PURE__ */ n(e, {
+			"aria-label": "Assistant chat",
+			ref: c,
+			messages: i,
+			inputValue: "",
+			onInputChange: () => {},
+			onSubmit: () => {},
+			csatLabels: a,
+			csatRenderRatingLabel: s,
+			csatThankYouLabels: o,
+			onFeedbackRate: (e) => console.log("Feedback rating:", e),
+			onClose: () => {},
+			className: "w-380 h-660"
+		}), /* @__PURE__ */ n("button", {
+			type: "button",
+			onClick: () => c.current?.askForFeedback(),
+			className: "px-16 py-8 bg-saffron rounded-pill text-black text-b4 font-semibold hover:opacity-80 transition-opacity",
+			children: "Trigger feedback prompt"
+		})]
+	});
+}
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=chat-window-csat-demo.js.map

package/examples/chat-window-csat-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-window-csat-demo.js","names":[],"sources":["../../lib/examples/chat-window-csat-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useRef } from 'react';\nimport { ChatWindow } from '@/ui/ChatWindow';\nimport type {\n  ChatWindowCsatPromptLabels,\n  ChatWindowCsatThankYouLabels,\n  ChatWindowHandle,\n  ChatWindowMessage,\n} from '@/ui/ChatWindow';\n\nconst messages: ChatWindowMessage[] = [\n  {\n    id: '1',\n    sender: 'assistant',\n    content:\n      \"Hi. Ask me anything about Club Med. I'm here to help you find the right information quickly.\",\n  },\n  {\n    id: '2',\n    sender: 'user',\n    content: 'My son is 14 years old, what activities are available for him during our stay?',\n  },\n  {\n    id: '3',\n    sender: 'assistant',\n    content:\n      'Great question! For teenagers aged 13–17, Club Med offers the Passworld programme — supervised sports, creative workshops, and evening events designed specifically for that age group.',\n  },\n];\n\nconst csatLabels: ChatWindowCsatPromptLabels = {\n  intro: 'Your opinion matters! Tell us what you think. Your feedback helps us improve.',\n  question:\n    'Following our conversation, from 1 to 5, how satisfied are you with the level of service you received,',\n  questionNote: '1 star being \"Very dissatisfied\" and 5 stars \"Very satisfied\".',\n  groupAriaLabel: 'Rate your experience from 1 to 5 stars',\n  starLabels: ['Very dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Very satisfied'],\n};\n\nconst csatThankYouLabels: ChatWindowCsatThankYouLabels = {\n  title: 'Thank you for your feedback!',\n  body: 'Your opinion means a lot to us. Thanks to your responses, we keep improving our services to offer you an even more exceptional Club Med experience.',\n};\n\nfunction csatRenderRatingLabel(rating: number) {\n  return `${rating} star${rating > 1 ? 's' : ''} — ${csatLabels.starLabels[rating - 1]}`;\n}\n\nexport default function ChatWindowCsatDemo() {\n  const chatRef = useRef<ChatWindowHandle>(null);\n\n  return (\n    <div className=\"flex flex-col items-center gap-12\">\n      <ChatWindow\n        aria-label=\"Assistant chat\"\n        ref={chatRef}\n        messages={messages}\n        inputValue=\"\"\n        onInputChange={() => {}}\n        onSubmit={() => {}}\n        csatLabels={csatLabels}\n        csatRenderRatingLabel={csatRenderRatingLabel}\n        csatThankYouLabels={csatThankYouLabels}\n        onFeedbackRate={(rating) => console.log('Feedback rating:', rating)}\n        onClose={() => {}}\n        className=\"w-380 h-660\"\n      />\n      <button\n        type=\"button\"\n        onClick={() => chatRef.current?.askForFeedback()}\n        className=\"px-16 py-8 bg-saffron rounded-pill text-black text-b4 font-semibold hover:opacity-80 transition-opacity\"\n      >\n        Trigger feedback prompt\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAWA,IAAM,IAAgC;CACpC;EACE,IAAI;EACJ,QAAQ;EACR,SACE;EACH;CACD;EACE,IAAI;EACJ,QAAQ;EACR,SAAS;EACV;CACD;EACE,IAAI;EACJ,QAAQ;EACR,SACE;;CAEL,EAEK,IAAyC;CAC7C,OAAO;CACP,UACE;CACF,cAAc;CACd,gBAAgB;CAChB,YAAY;EAAC;EAAqB;EAAgB;EAAW;EAAa;;CAC3E,EAEK,IAAmD;CACvD,OAAO;CACP,MAAM;CACP;AAED,SAAS,EAAsB,GAAgB;AAC7C,QAAO,GAAG,EAAO,OAAO,IAAS,IAAI,MAAM,GAAG,KAAK,EAAW,WAAW,IAAS;;AAGpF,SAAwB,IAAqB;CAC3C,IAAM,IAAU,EAAyB,KAAK;AAE9C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GACE,cAAW;GACX,KAAK;GACK;GACV,YAAW;GACX,qBAAqB;GACrB,gBAAgB;GACJ;GACW;GACH;GACpB,iBAAiB,MAAW,QAAQ,IAAI,oBAAoB,EAAO;GACnE,eAAe;GACf,WAAU;GACV,CAAA,EACF,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,EAAQ,SAAS,gBAAgB;GAChD,WAAU;aACX;GAEQ,CAAA,CAAA"}

package/examples/chat-window-csat-prompt-demo.d.ts

@@ -0,0 +1 @@
+export default function ChatWindowCsatPromptDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/chat-window-csat-prompt-demo.js

@@ -0,0 +1,40 @@
+"use client";
+import { ChatWindowCsatPrompt as e } from "../ui/ChatWindowCsatPrompt.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region lib/examples/chat-window-csat-prompt-demo.tsx
+var i = {
+	intro: "Your opinion matters! Tell us what you think. Your feedback helps us improve.",
+	question: "Following our conversation, from 1 to 5, how satisfied are you with the level of service you received,",
+	questionNote: "1 star being \"Very dissatisfied\" and 5 stars \"Very satisfied\".",
+	groupAriaLabel: "Rate your experience from 1 to 5 stars",
+	starLabels: [
+		"Very dissatisfied",
+		"Dissatisfied",
+		"Neutral",
+		"Satisfied",
+		"Very satisfied"
+	]
+};
+function a(e) {
+	let t = i.starLabels;
+	return `${e} star${e > 1 ? "s" : ""} — ${t[e - 1]}`;
+}
+function o() {
+	let [o, s] = t(null);
+	return /* @__PURE__ */ r("div", {
+		className: "flex flex-col gap-20 w-380",
+		children: [/* @__PURE__ */ n(e, {
+			labels: i,
+			renderRatingLabel: a,
+			onRate: s
+		}), o !== null && /* @__PURE__ */ r("p", {
+			className: "text-b4 text-darkGrey text-center",
+			children: ["onRate called with: ", /* @__PURE__ */ n("strong", { children: o })]
+		})]
+	});
+}
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=chat-window-csat-prompt-demo.js.map

package/examples/chat-window-csat-prompt-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-window-csat-prompt-demo.js","names":[],"sources":["../../lib/examples/chat-window-csat-prompt-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { ChatWindowCsatPrompt } from '@/ui/ChatWindowCsatPrompt';\nimport type { ChatWindowCsatPromptLabels } from '@/ui/ChatWindowCsatPrompt';\n\nconst defaultCsatLabels: ChatWindowCsatPromptLabels = {\n  intro: 'Your opinion matters! Tell us what you think. Your feedback helps us improve.',\n  question:\n    'Following our conversation, from 1 to 5, how satisfied are you with the level of service you received,',\n  questionNote: '1 star being \"Very dissatisfied\" and 5 stars \"Very satisfied\".',\n  groupAriaLabel: 'Rate your experience from 1 to 5 stars',\n  starLabels: ['Very dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Very satisfied'],\n};\n\nfunction defaultRenderRatingLabel(rating: number) {\n  const labels = defaultCsatLabels.starLabels;\n  return `${rating} star${rating > 1 ? 's' : ''} — ${labels[rating - 1]}`;\n}\n\nexport default function ChatWindowCsatPromptDemo() {\n  const [lastRating, setLastRating] = useState<number | null>(null);\n\n  return (\n    <div className=\"flex flex-col gap-20 w-380\">\n      <ChatWindowCsatPrompt\n        labels={defaultCsatLabels}\n        renderRatingLabel={defaultRenderRatingLabel}\n        onRate={setLastRating}\n      />\n      {lastRating !== null && (\n        <p className=\"text-b4 text-darkGrey text-center\">\n          onRate called with: <strong>{lastRating}</strong>\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAMA,IAAM,IAAgD;CACpD,OAAO;CACP,UACE;CACF,cAAc;CACd,gBAAgB;CAChB,YAAY;EAAC;EAAqB;EAAgB;EAAW;EAAa;;CAC3E;AAED,SAAS,EAAyB,GAAgB;CAChD,IAAM,IAAS,EAAkB;AACjC,QAAO,GAAG,EAAO,OAAO,IAAS,IAAI,MAAM,GAAG,KAAK,EAAO,IAAS;;AAGrE,SAAwB,IAA2B;CACjD,IAAM,CAAC,GAAY,KAAiB,EAAwB,KAAK;AAEjE,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GACE,QAAQ;GACR,mBAAmB;GACnB,QAAQ;GACR,CAAA,EACD,MAAe,QACd,kBAAC,KAAD;GAAG,WAAU;aAAb,CAAiD,wBAC3B,kBAAC,UAAD,EAAA,UAAS,GAAoB,CAAA,CAAA"}

package/examples/chat-window-demo.d.ts

@@ -0,0 +1 @@
+export default function ChatWindowDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/chat-window-demo.js

@@ -0,0 +1,70 @@
+"use client";
+import { ChatWindow as e } from "../ui/ChatWindow.js";
+import { useRef as t, useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region lib/examples/chat-window-demo.tsx
+var i = {
+	intro: "Your opinion matters! Tell us what you think. Your feedback helps us improve.",
+	question: "Following our conversation, from 1 to 5, how satisfied are you with the level of service you received,",
+	questionNote: "1 star being \"Very dissatisfied\" and 5 stars \"Very satisfied\".",
+	groupAriaLabel: "Rate your experience from 1 to 5 stars",
+	starLabels: [
+		"Very dissatisfied",
+		"Dissatisfied",
+		"Neutral",
+		"Satisfied",
+		"Very satisfied"
+	]
+}, a = {
+	title: "Thank you for your feedback!",
+	body: "Your opinion means a lot to us. Thanks to your responses, we keep improving our services to offer you an even more exceptional Club Med experience."
+};
+function o(e) {
+	return `${e} star${e > 1 ? "s" : ""} — ${i.starLabels[e - 1]}`;
+}
+function s() {
+	let s = t(null), [c, l] = n([{
+		id: "1",
+		sender: "assistant",
+		content: "Hi. Ask me anything about Club Med. I'm here to help you find the right information quickly."
+	}, {
+		id: "2",
+		sender: "user",
+		content: "My son is 14 years old, and I would like to find activities for him during our stay."
+	}]), [u, d] = n(""), [f, p] = n(!1);
+	function m() {
+		if (!u.trim()) return;
+		let e = {
+			id: Date.now().toString(),
+			sender: "user",
+			content: u
+		};
+		l((t) => [...t, e]), d(""), p(!0), setTimeout(() => {
+			p(!1), l((e) => [...e, {
+				id: (Date.now() + 1).toString(),
+				sender: "assistant",
+				content: "Let me look into that for you…"
+			}]);
+		}, 2e3);
+	}
+	return /* @__PURE__ */ r(e, {
+		"aria-label": "Assistant chat",
+		ref: s,
+		messages: c,
+		inputValue: u,
+		isTyping: f,
+		onInputChange: d,
+		onSubmit: m,
+		onClose: () => {},
+		onAudioClick: () => {},
+		onFeedbackRate: (e) => console.log("Feedback rating:", e),
+		csatLabels: i,
+		csatRenderRatingLabel: o,
+		csatThankYouLabels: a,
+		className: "w-380 h-660"
+	});
+}
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=chat-window-demo.js.map

package/examples/chat-window-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-window-demo.js","names":[],"sources":["../../lib/examples/chat-window-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useState } from 'react';\nimport { ChatWindow } from '@/ui/ChatWindow';\nimport type {\n  ChatWindowCsatPromptLabels,\n  ChatWindowCsatThankYouLabels,\n  ChatWindowHandle,\n  ChatWindowMessage,\n} from '@/ui/ChatWindow';\n\nconst csatLabels: ChatWindowCsatPromptLabels = {\n  intro: 'Your opinion matters! Tell us what you think. Your feedback helps us improve.',\n  question:\n    'Following our conversation, from 1 to 5, how satisfied are you with the level of service you received,',\n  questionNote: '1 star being \"Very dissatisfied\" and 5 stars \"Very satisfied\".',\n  groupAriaLabel: 'Rate your experience from 1 to 5 stars',\n  starLabels: ['Very dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Very satisfied'],\n};\n\nconst csatThankYouLabels: ChatWindowCsatThankYouLabels = {\n  title: 'Thank you for your feedback!',\n  body: 'Your opinion means a lot to us. Thanks to your responses, we keep improving our services to offer you an even more exceptional Club Med experience.',\n};\n\nfunction csatRenderRatingLabel(rating: number) {\n  return `${rating} star${rating > 1 ? 's' : ''} — ${csatLabels.starLabels[rating - 1]}`;\n}\n\nexport default function ChatWindowDemo() {\n  const chatRef = useRef<ChatWindowHandle>(null);\n  const [messages, setMessages] = useState<ChatWindowMessage[]>([\n    {\n      id: '1',\n      sender: 'assistant',\n      content:\n        \"Hi. Ask me anything about Club Med. I'm here to help you find the right information quickly.\",\n    },\n    {\n      id: '2',\n      sender: 'user',\n      content:\n        'My son is 14 years old, and I would like to find activities for him during our stay.',\n    },\n  ]);\n  const [inputValue, setInputValue] = useState('');\n  const [isTyping, setIsTyping] = useState(false);\n\n  function handleSubmit() {\n    if (!inputValue.trim()) return;\n    const userMsg: ChatWindowMessage = {\n      id: Date.now().toString(),\n      sender: 'user',\n      content: inputValue,\n    };\n    setMessages((prev) => [...prev, userMsg]);\n    setInputValue('');\n    setIsTyping(true);\n    setTimeout(() => {\n      setIsTyping(false);\n      setMessages((prev) => [\n        ...prev,\n        {\n          id: (Date.now() + 1).toString(),\n          sender: 'assistant',\n          content: 'Let me look into that for you…',\n        },\n      ]);\n    }, 2000);\n  }\n\n  return (\n    <ChatWindow\n      aria-label=\"Assistant chat\"\n      ref={chatRef}\n      messages={messages}\n      inputValue={inputValue}\n      isTyping={isTyping}\n      onInputChange={setInputValue}\n      onSubmit={handleSubmit}\n      onClose={() => {}}\n      onAudioClick={() => {}}\n      onFeedbackRate={(rating) => console.log('Feedback rating:', rating)}\n      csatLabels={csatLabels}\n      csatRenderRatingLabel={csatRenderRatingLabel}\n      csatThankYouLabels={csatThankYouLabels}\n      className=\"w-380 h-660\"\n    />\n  );\n}\n"],"mappings":";;;;;AAWA,IAAM,IAAyC;CAC7C,OAAO;CACP,UACE;CACF,cAAc;CACd,gBAAgB;CAChB,YAAY;EAAC;EAAqB;EAAgB;EAAW;EAAa;;CAC3E,EAEK,IAAmD;CACvD,OAAO;CACP,MAAM;CACP;AAED,SAAS,EAAsB,GAAgB;AAC7C,QAAO,GAAG,EAAO,OAAO,IAAS,IAAI,MAAM,GAAG,KAAK,EAAW,WAAW,IAAS;;AAGpF,SAAwB,IAAiB;CACvC,IAAM,IAAU,EAAyB,KAAK,EACxC,CAAC,GAAU,KAAe,EAA8B,CAC5D;EACE,IAAI;EACJ,QAAQ;EACR,SACE;EACH,EACD;EACE,IAAI;EACJ,QAAQ;EACR,SACE;EACH,CACF,CAAC,EACI,CAAC,GAAY,KAAiB,EAAS,GAAG,EAC1C,CAAC,GAAU,KAAe,EAAS,GAAM;CAE/C,SAAS,IAAe;AACtB,MAAI,CAAC,EAAW,MAAM,CAAE;EACxB,IAAM,IAA6B;GACjC,IAAI,KAAK,KAAK,CAAC,UAAU;GACzB,QAAQ;GACR,SAAS;GACV;AAID,EAHA,GAAa,MAAS,CAAC,GAAG,GAAM,EAAQ,CAAC,EACzC,EAAc,GAAG,EACjB,EAAY,GAAK,EACjB,iBAAiB;AAEf,GADA,EAAY,GAAM,EAClB,GAAa,MAAS,CACpB,GAAG,GACH;IACE,KAAK,KAAK,KAAK,GAAG,GAAG,UAAU;IAC/B,QAAQ;IACR,SAAS;IACV,CACF,CAAC;KACD,IAAK;;AAGV,QACE,kBAAC,GAAD;EACE,cAAW;EACX,KAAK;EACK;EACE;EACF;EACV,eAAe;EACf,UAAU;EACV,eAAe;EACf,oBAAoB;EACpB,iBAAiB,MAAW,QAAQ,IAAI,oBAAoB,EAAO;EACvD;EACW;EACH;EACpB,WAAU;EACV,CAAA"}

package/examples/chat-window-quote-demo.d.ts

@@ -0,0 +1 @@
+export default function ChatWindowQuoteDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/chat-window-quote-demo.js

@@ -0,0 +1,47 @@
+"use client";
+import { ChatWindowQuote as e } from "../ui/ChatWindowQuote.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region lib/examples/chat-window-quote-demo.tsx
+var r = {
+	id: "1",
+	resortName: "Cancún",
+	country: "Mexico",
+	imageUrl: "https://picsum.photos/seed/cancun/400/300",
+	dateRange: "15 June 2026 to 24 June 2026",
+	pax: "for 2 adults 2 children",
+	packageIncludes: [
+		"Meals and snacks at any time",
+		"Drinks, alcoholic and non-alcoholic",
+		"Sports and activities"
+	],
+	additionalInfo: "You can customise your transport and room category directly on the website."
+}, i = {
+	id: "2",
+	resortName: "Punta Cana",
+	country: "Dominican Republic",
+	imageUrl: "https://picsum.photos/seed/puntacana/400/300",
+	dateRange: "20 July 2026 to 29 July 2026",
+	pax: "for 2 adults 2 children"
+};
+function a() {
+	return /* @__PURE__ */ n("div", {
+		className: "flex flex-col gap-32 w-340",
+		children: [/* @__PURE__ */ n("div", {
+			className: "flex flex-col gap-8",
+			children: [/* @__PURE__ */ t("p", {
+				className: "text-b4 font-semibold text-black",
+				children: "Single quote"
+			}), /* @__PURE__ */ t(e, { quotes: [r] })]
+		}), /* @__PURE__ */ n("div", {
+			className: "flex flex-col gap-8",
+			children: [/* @__PURE__ */ t("p", {
+				className: "text-b4 font-semibold text-black",
+				children: "Multiple quotes"
+			}), /* @__PURE__ */ t(e, { quotes: [r, i] })]
+		})]
+	});
+}
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=chat-window-quote-demo.js.map

package/examples/chat-window-quote-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-window-quote-demo.js","names":[],"sources":["../../lib/examples/chat-window-quote-demo.tsx"],"sourcesContent":["'use client';\n\nimport { ChatWindowQuote } from '@/ui/ChatWindowQuote';\nimport type { ChatWindowQuoteItem } from '@/ui/ChatWindowQuote';\n\nconst cancun: ChatWindowQuoteItem = {\n  id: '1',\n  resortName: 'Cancún',\n  country: 'Mexico',\n  imageUrl: 'https://picsum.photos/seed/cancun/400/300',\n  dateRange: '15 June 2026 to 24 June 2026',\n  pax: 'for 2 adults 2 children',\n  packageIncludes: [\n    'Meals and snacks at any time',\n    'Drinks, alcoholic and non-alcoholic',\n    'Sports and activities',\n  ],\n  additionalInfo: 'You can customise your transport and room category directly on the website.',\n};\n\nconst puntaCana: ChatWindowQuoteItem = {\n  id: '2',\n  resortName: 'Punta Cana',\n  country: 'Dominican Republic',\n  imageUrl: 'https://picsum.photos/seed/puntacana/400/300',\n  dateRange: '20 July 2026 to 29 July 2026',\n  pax: 'for 2 adults 2 children',\n};\n\nexport default function ChatWindowQuoteDemo() {\n  return (\n    <div className=\"flex flex-col gap-32 w-340\">\n      <div className=\"flex flex-col gap-8\">\n        <p className=\"text-b4 font-semibold text-black\">Single quote</p>\n        <ChatWindowQuote quotes={[cancun]} />\n      </div>\n      <div className=\"flex flex-col gap-8\">\n        <p className=\"text-b4 font-semibold text-black\">Multiple quotes</p>\n        <ChatWindowQuote quotes={[cancun, puntaCana]} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAKA,IAAM,IAA8B;CAClC,IAAI;CACJ,YAAY;CACZ,SAAS;CACT,UAAU;CACV,WAAW;CACX,KAAK;CACL,iBAAiB;EACf;EACA;EACA;EACD;CACD,gBAAgB;CACjB,EAEK,IAAiC;CACrC,IAAI;CACJ,YAAY;CACZ,SAAS;CACT,UAAU;CACV,WAAW;CACX,KAAK;CACN;AAED,SAAwB,IAAsB;AAC5C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,KAAD;IAAG,WAAU;cAAmC;IAAgB,CAAA,EAChE,kBAAC,GAAD,EAAiB,QAAQ,CAAC,EAAO,EAAI,CAAA,CAAA;MAEvC,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,KAAD;IAAG,WAAU;cAAmC;IAAmB,CAAA,EACnE,kBAAC,GAAD,EAAiB,QAAQ,CAAC,GAAQ,EAAU,EAAI,CAAA,CAAA"}

package/examples/chat-window-quotes-demo.d.ts

@@ -0,0 +1 @@
+export default function ChatWindowQuotesDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/chat-window-quotes-demo.js

@@ -0,0 +1,68 @@
+"use client";
+import { ChatWindow as e } from "../ui/ChatWindow.js";
+import { useRef as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region lib/examples/chat-window-quotes-demo.tsx
+var i = [
+	{
+		id: "1",
+		sender: "assistant",
+		content: "Hi. Ask me anything about Club Med. I'm here to help you find the right information quickly."
+	},
+	{
+		id: "2",
+		sender: "user",
+		content: "Can you show me some quotes for a family trip to the Caribbean?"
+	},
+	{
+		id: "3",
+		sender: "assistant",
+		content: "Of course! Here are some resorts in the Caribbean that could be perfect for your family vacation."
+	}
+], a = [{
+	id: "1",
+	resortName: "Cancún",
+	country: "Mexico",
+	imageUrl: "https://picsum.photos/seed/cancun/400/300",
+	dateRange: "15 June 2026 to 24 June 2026",
+	pax: "for 2 adults 2 children",
+	packageIncludes: [
+		"Meals and snacks at any time",
+		"Drinks, alcoholic and non-alcoholic",
+		"Sports and activities"
+	],
+	additionalInfo: "You can customise your transport and room category directly on the website."
+}, {
+	id: "2",
+	resortName: "Punta Cana",
+	country: "Dominican Republic",
+	imageUrl: "https://picsum.photos/seed/puntacana/400/300",
+	dateRange: "15 June 2026 to 24 June 2026",
+	pax: "for 2 adults 2 children"
+}];
+function o() {
+	let o = t(null);
+	return /* @__PURE__ */ r("div", {
+		className: "flex flex-col items-center gap-12",
+		children: [/* @__PURE__ */ n(e, {
+			"aria-label": "Assistant chat",
+			ref: o,
+			messages: i,
+			inputValue: "",
+			onInputChange: () => {},
+			onSubmit: () => {},
+			onQuoteCtaClick: (e) => console.log("Selected quote:", e.resortName),
+			onClose: () => {},
+			className: "w-380 h-660"
+		}), /* @__PURE__ */ n("button", {
+			type: "button",
+			onClick: () => o.current?.showQuotes(a),
+			className: "px-16 py-8 bg-saffron rounded-pill text-black text-b4 font-semibold hover:opacity-80 transition-opacity",
+			children: "Trigger quotes"
+		})]
+	});
+}
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=chat-window-quotes-demo.js.map

package/examples/chat-window-quotes-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-window-quotes-demo.js","names":[],"sources":["../../lib/examples/chat-window-quotes-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useRef } from 'react';\nimport { ChatWindow } from '@/ui/ChatWindow';\nimport type { ChatWindowHandle, ChatWindowMessage, ChatWindowQuoteItem } from '@/ui/ChatWindow';\n\nconst messages: ChatWindowMessage[] = [\n  {\n    id: '1',\n    sender: 'assistant',\n    content:\n      \"Hi. Ask me anything about Club Med. I'm here to help you find the right information quickly.\",\n  },\n  {\n    id: '2',\n    sender: 'user',\n    content: 'Can you show me some quotes for a family trip to the Caribbean?',\n  },\n  {\n    id: '3',\n    sender: 'assistant',\n    content:\n      'Of course! Here are some resorts in the Caribbean that could be perfect for your family vacation.',\n  },\n];\n\nconst quotes: ChatWindowQuoteItem[] = [\n  {\n    id: '1',\n    resortName: 'Cancún',\n    country: 'Mexico',\n    imageUrl: 'https://picsum.photos/seed/cancun/400/300',\n    dateRange: '15 June 2026 to 24 June 2026',\n    pax: 'for 2 adults 2 children',\n    packageIncludes: [\n      'Meals and snacks at any time',\n      'Drinks, alcoholic and non-alcoholic',\n      'Sports and activities',\n    ],\n    additionalInfo: 'You can customise your transport and room category directly on the website.',\n  },\n  {\n    id: '2',\n    resortName: 'Punta Cana',\n    country: 'Dominican Republic',\n    imageUrl: 'https://picsum.photos/seed/puntacana/400/300',\n    dateRange: '15 June 2026 to 24 June 2026',\n    pax: 'for 2 adults 2 children',\n  },\n];\n\nexport default function ChatWindowQuotesDemo() {\n  const chatRef = useRef<ChatWindowHandle>(null);\n\n  return (\n    <div className=\"flex flex-col items-center gap-12\">\n      <ChatWindow\n        aria-label=\"Assistant chat\"\n        ref={chatRef}\n        messages={messages}\n        inputValue=\"\"\n        onInputChange={() => {}}\n        onSubmit={() => {}}\n        onQuoteCtaClick={(quote) => console.log('Selected quote:', quote.resortName)}\n        onClose={() => {}}\n        className=\"w-380 h-660\"\n      />\n      <button\n        type=\"button\"\n        onClick={() => chatRef.current?.showQuotes(quotes)}\n        className=\"px-16 py-8 bg-saffron rounded-pill text-black text-b4 font-semibold hover:opacity-80 transition-opacity\"\n      >\n        Trigger quotes\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAMA,IAAM,IAAgC;CACpC;EACE,IAAI;EACJ,QAAQ;EACR,SACE;EACH;CACD;EACE,IAAI;EACJ,QAAQ;EACR,SAAS;EACV;CACD;EACE,IAAI;EACJ,QAAQ;EACR,SACE;;CAEL,EAEK,IAAgC,CACpC;CACE,IAAI;CACJ,YAAY;CACZ,SAAS;CACT,UAAU;CACV,WAAW;CACX,KAAK;CACL,iBAAiB;EACf;EACA;EACA;EACD;CACD,gBAAgB;CACjB,EACD;CACE,IAAI;CACJ,YAAY;CACZ,SAAS;CACT,UAAU;CACV,WAAW;CACX,KAAK;CACN,CACF;AAED,SAAwB,IAAuB;CAC7C,IAAM,IAAU,EAAyB,KAAK;AAE9C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GACE,cAAW;GACX,KAAK;GACK;GACV,YAAW;GACX,qBAAqB;GACrB,gBAAgB;GAChB,kBAAkB,MAAU,QAAQ,IAAI,mBAAmB,EAAM,WAAW;GAC5E,eAAe;GACf,WAAU;GACV,CAAA,EACF,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,EAAQ,SAAS,WAAW,EAAO;GAClD,WAAU;aACX;GAEQ,CAAA,CAAA"}

package/examples/checkbox-demo.js

@@ -11,8 +11,8 @@ function r() {
 			name: "terms",
 			value: "accepted",
 			checked: r,
-			onChange: (e) => {
-				i(e.target.checked), o(e.target.checked ? "" : "This field is required");
+			onChange: (e, t) => {
+				i(t), o(t ? "" : "This field is required");
 			},
 			validationStatus: a ? "error" : "default",
 			errorMessage: a,

package/examples/checkbox-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-demo.js","names":[],"sources":["../../lib/examples/checkbox-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox } from '@/ui/forms/checkboxes/Checkbox';\nimport { useState } from 'react';\n\nexport default function CheckboxDemo() {\n  const [checked, setChecked] = useState(false);\n  const [error, setError] = useState('This field is required');\n\n  return (\n    <div className=\"space-y-4\">\n      <Checkbox\n        name=\"terms\"\n        value=\"accepted\"\n        checked={checked}\n        onChange={(e) => {\n          setChecked(e.target.checked);\n          setError(e.target.checked ? '' : 'This field is required');\n        }}\n        validationStatus={error ? 'error' : 'default'}\n        errorMessage={error}\n      >\n        I agree to the terms and conditions\n      </Checkbox>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAe;CACrC,IAAM,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,CAAC,GAAO,KAAY,EAAS,yBAAyB;AAE5D,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GACE,MAAK;GACL,OAAM;GACG;GACT,WAAW,MAAM;AAEf,IADA,EAAW,EAAE,OAAO,QAAQ,EAC5B,EAAS,EAAE,OAAO,UAAU,KAAK,yBAAyB;;GAE5D,kBAAkB,IAAQ,UAAU;GACpC,cAAc;aACf;GAEU,CAAA;EACP,CAAA"}
+{"version":3,"file":"checkbox-demo.js","names":[],"sources":["../../lib/examples/checkbox-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox } from '@/ui/forms/checkboxes/Checkbox';\nimport { useState } from 'react';\n\nexport default function CheckboxDemo() {\n  const [checked, setChecked] = useState(false);\n  const [error, setError] = useState('This field is required');\n\n  return (\n    <div className=\"space-y-4\">\n      <Checkbox\n        name=\"terms\"\n        value=\"accepted\"\n        checked={checked}\n        onChange={(_, value) => {\n          setChecked(value);\n          setError(value ? '' : 'This field is required');\n        }}\n        validationStatus={error ? 'error' : 'default'}\n        errorMessage={error}\n      >\n        I agree to the terms and conditions\n      </Checkbox>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAe;CACrC,IAAM,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,CAAC,GAAO,KAAY,EAAS,yBAAyB;AAE5D,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GACE,MAAK;GACL,OAAM;GACG;GACT,WAAW,GAAG,MAAU;AAEtB,IADA,EAAW,EAAM,EACjB,EAAS,IAAQ,KAAK,yBAAyB;;GAEjD,kBAAkB,IAAQ,UAAU;GACpC,cAAc;aACf;GAEU,CAAA;EACP,CAAA"}

package/examples/checkbox-select-demo.d.ts

@@ -0,0 +1 @@
+export default function CheckboxSelectDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/checkbox-select-demo.js

@@ -0,0 +1,101 @@
+"use client";
+import { CheckboxSelect as e } from "../ui/forms/CheckboxSelect.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region lib/examples/checkbox-select-demo.tsx
+var i = [
+	{
+		value: "open",
+		label: "Open"
+	},
+	{
+		value: "fixed",
+		label: "Fixed"
+	},
+	{
+		value: "in-progress",
+		label: "In Progress"
+	},
+	{
+		value: "closed",
+		label: "Closed"
+	}
+];
+function a() {
+	let [a, o] = t(["open"]), [s, c] = t([]);
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-24",
+		style: { minWidth: 300 },
+		children: [
+			/* @__PURE__ */ n(e, {
+				label: "Status",
+				placeholder: "Select statuses...",
+				options: i,
+				value: a,
+				onChange: (e, t) => o(t)
+			}),
+			/* @__PURE__ */ n(e, {
+				label: "Category",
+				placeholder: "Select categories...",
+				groups: [{
+					label: "Travel",
+					options: [{
+						value: "flight",
+						label: "Flight"
+					}, {
+						value: "hotel",
+						label: "Hotel"
+					}]
+				}, {
+					label: "Activities",
+					options: [
+						{
+							value: "ski",
+							label: "Ski"
+						},
+						{
+							value: "golf",
+							label: "Golf"
+						},
+						{
+							value: "spa",
+							label: "Spa"
+						}
+					]
+				}],
+				value: s,
+				onChange: (e, t) => c(t),
+				renderValue: (e) => `${e.length} selected`
+			}),
+			/* @__PURE__ */ n(e, {
+				label: "Priority",
+				options: [
+					{
+						value: "high",
+						label: "High"
+					},
+					{
+						value: "medium",
+						label: "Medium"
+					},
+					{
+						value: "low",
+						label: "Low"
+					}
+				],
+				validationStatus: "error",
+				errorMessage: "Please select at least one priority"
+			}),
+			/* @__PURE__ */ n(e, {
+				label: "Tags",
+				options: i,
+				value: ["open"],
+				disabled: !0
+			})
+		]
+	});
+}
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=checkbox-select-demo.js.map

package/examples/checkbox-select-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-select-demo.js","names":[],"sources":["../../lib/examples/checkbox-select-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { CheckboxSelect } from '@/ui/forms/CheckboxSelect';\n\nconst statusOptions = [\n  { value: 'open', label: 'Open' },\n  { value: 'fixed', label: 'Fixed' },\n  { value: 'in-progress', label: 'In Progress' },\n  { value: 'closed', label: 'Closed' },\n];\n\nexport default function CheckboxSelectDemo() {\n  const [status, setStatus] = useState<string[]>(['open']);\n  const [categories, setCategories] = useState<string[]>([]);\n\n  return (\n    <div className=\"space-y-24\" style={{ minWidth: 300 }}>\n      <CheckboxSelect\n        label=\"Status\"\n        placeholder=\"Select statuses...\"\n        options={statusOptions}\n        value={status}\n        onChange={(_, v) => setStatus(v)}\n      />\n\n      <CheckboxSelect\n        label=\"Category\"\n        placeholder=\"Select categories...\"\n        groups={[\n          {\n            label: 'Travel',\n            options: [\n              { value: 'flight', label: 'Flight' },\n              { value: 'hotel', label: 'Hotel' },\n            ],\n          },\n          {\n            label: 'Activities',\n            options: [\n              { value: 'ski', label: 'Ski' },\n              { value: 'golf', label: 'Golf' },\n              { value: 'spa', label: 'Spa' },\n            ],\n          },\n        ]}\n        value={categories}\n        onChange={(_, v) => setCategories(v)}\n        renderValue={(vals) => `${vals.length} selected`}\n      />\n\n      <CheckboxSelect\n        label=\"Priority\"\n        options={[\n          { value: 'high', label: 'High' },\n          { value: 'medium', label: 'Medium' },\n          { value: 'low', label: 'Low' },\n        ]}\n        validationStatus=\"error\"\n        errorMessage=\"Please select at least one priority\"\n      />\n\n      <CheckboxSelect label=\"Tags\" options={statusOptions} value={['open']} disabled />\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,IAAM,IAAgB;CACpB;EAAE,OAAO;EAAQ,OAAO;EAAQ;CAChC;EAAE,OAAO;EAAS,OAAO;EAAS;CAClC;EAAE,OAAO;EAAe,OAAO;EAAe;CAC9C;EAAE,OAAO;EAAU,OAAO;;CAC3B;AAED,SAAwB,IAAqB;CAC3C,IAAM,CAAC,GAAQ,KAAa,EAAmB,CAAC,OAAO,CAAC,EAClD,CAAC,GAAY,KAAiB,EAAmB,EAAE,CAAC;AAE1D,QACE,kBAAC,OAAD;EAAK,WAAU;EAAa,OAAO,EAAE,UAAU,KAAK;YAApD;GACE,kBAAC,GAAD;IACE,OAAM;IACN,aAAY;IACZ,SAAS;IACT,OAAO;IACP,WAAW,GAAG,MAAM,EAAU,EAAA;IAC9B,CAAA;GAEF,kBAAC,GAAD;IACE,OAAM;IACN,aAAY;IACZ,QAAQ,CACN;KACE,OAAO;KACP,SAAS,CACP;MAAE,OAAO;MAAU,OAAO;MAAU,EACpC;MAAE,OAAO;MAAS,OAAO;MAAS,CAAA;KAErC,EACD;KACE,OAAO;KACP,SAAS;MACP;OAAE,OAAO;OAAO,OAAO;OAAO;MAC9B;OAAE,OAAO;OAAQ,OAAO;OAAQ;MAChC;OAAE,OAAO;OAAO,OAAO;;;KAE1B,CACF;IACD,OAAO;IACP,WAAW,GAAG,MAAM,EAAc,EAAE;IACpC,cAAc,MAAS,GAAG,EAAK,OAAO;IACtC,CAAA;GAEF,kBAAC,GAAD;IACE,OAAM;IACN,SAAS;KACP;MAAE,OAAO;MAAQ,OAAO;MAAQ;KAChC;MAAE,OAAO;MAAU,OAAO;MAAU;KACpC;MAAE,OAAO;MAAO,OAAO;;KACxB;IACD,kBAAiB;IACjB,cAAa;IACb,CAAA;GAEF,kBAAC,GAAD;IAAgB,OAAM;IAAO,SAAS;IAAe,OAAO,CAAC,OAAO;IAAE,UAAA;IAAW,CAAA"}

package/examples/checkboxes-demo.js

@@ -6,6 +6,7 @@ import { jsx as n, jsxs as r } from "react/jsx-runtime";
 function i() {
 	return /* @__PURE__ */ r(e, {
 		name: "options",
+		overrideTabIndex: !1,
 		children: [
 			/* @__PURE__ */ n(t, {
 				value: "option1",

package/examples/checkboxes-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxes-demo.js","names":[],"sources":["../../lib/examples/checkboxes-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Checkboxes } from '@/ui/forms/checkboxes/Checkboxes';\nimport { Filter } from '@/ui/forms/Filter';\n\nexport default function CheckboxesDemo() {\n  return (\n    <Checkboxes name=\"options\">\n      <Filter value=\"option1\">Option 1</Filter>\n      <Filter value=\"option2\">Option 2</Filter>\n      <Filter value=\"option3\">Option 3</Filter>\n    </Checkboxes>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAiB;AACvC,QACE,kBAAC,GAAD;EAAY,MAAK;YAAjB;GACE,kBAAC,GAAD;IAAQ,OAAM;cAAU;IAAiB,CAAA;GACzC,kBAAC,GAAD;IAAQ,OAAM;cAAU;IAAiB,CAAA;GACzC,kBAAC,GAAD;IAAQ,OAAM;cAAU;IAAiB,CAAA"}
+{"version":3,"file":"checkboxes-demo.js","names":[],"sources":["../../lib/examples/checkboxes-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Checkboxes } from '@/ui/forms/checkboxes/Checkboxes';\nimport { Filter } from '@/ui/forms/Filter';\n\nexport default function CheckboxesDemo() {\n  return (\n    <Checkboxes name=\"options\" overrideTabIndex={false}>\n      <Filter value=\"option1\">Option 1</Filter>\n      <Filter value=\"option2\">Option 2</Filter>\n      <Filter value=\"option3\">Option 3</Filter>\n    </Checkboxes>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAiB;AACvC,QACE,kBAAC,GAAD;EAAY,MAAK;EAAU,kBAAkB;YAA7C;GACE,kBAAC,GAAD;IAAQ,OAAM;cAAU;IAAiB,CAAA;GACzC,kBAAC,GAAD;IAAQ,OAAM;cAAU;IAAiB,CAAA;GACzC,kBAAC,GAAD;IAAQ,OAAM;cAAU;IAAiB,CAAA"}

package/examples/checkboxes-with-form-control-demo.js

@@ -1,14 +1,14 @@
 "use client";
 import { Checkbox as e } from "../ui/forms/checkboxes/Checkbox.js";
-import { Checkboxes as t } from "../ui/forms/checkboxes/Checkboxes.js";
-import { FormControl as n } from "../ui/forms/FormControl.js";
+import { FormControl as t } from "../ui/forms/FormControl.js";
+import { Checkboxes as n } from "../ui/forms/checkboxes/Checkboxes.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region lib/examples/checkboxes-with-form-control-demo.tsx
 function a() {
-	return /* @__PURE__ */ r(n, {
+	return /* @__PURE__ */ r(t, {
 		label: "Select options",
 		description: "Choose one or more options",
-		children: /* @__PURE__ */ i(t, {
+		children: /* @__PURE__ */ i(n, {
 			name: "options",
 			"aria-labelledby": "options-label",
 			children: [

package/examples/chip-demo.js

@@ -1,14 +1,14 @@
 "use client";
 import { Chip as e } from "../ui/Chip.js";
-import { Icon as t } from "@clubmed/trident-icons";
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
+import { Icon as n } from "@clubmed/trident-icons";
 //#region lib/examples/chip-demo.tsx
 function r() {
-	return /* @__PURE__ */ n(e, {
+	return /* @__PURE__ */ t(e, {
 		color: "sienna",
 		size: "size-32",
 		theme: "solid",
-		children: /* @__PURE__ */ n(t, {
+		children: /* @__PURE__ */ t(n, {
 			name: "Error",
 			width: "16px"
 		})