@clubmed/trident-ui 2.0.0-beta.55 → 2.0.0-beta.57

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,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-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, {
+			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        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,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.js

@@ -1,10 +1,29 @@
 "use client";
 import { ChatWindow as e } from "../ui/ChatWindow.js";
-import { useState as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
+import { useRef as t, useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
 //#region lib/examples/chat-window-demo.tsx
-function r() {
-	let [r, i] = t([{
+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."
@@ -12,34 +31,39 @@ function r() {
 		id: "2",
 		sender: "user",
 		content: "My son is 14 years old, and I would like to find activities for him during our stay."
-	}]), [a, o] = t(""), [s, c] = t(!1);
-	function l() {
-		if (!a.trim()) return;
+	}]), [u, d] = n(""), [f, p] = n(!1);
+	function m() {
+		if (!u.trim()) return;
 		let e = {
 			id: Date.now().toString(),
 			sender: "user",
-			content: a
+			content: u
 		};
-		i((t) => [...t, e]), o(""), c(!0), setTimeout(() => {
-			c(!1), i((e) => [...e, {
+		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__ */ n(e, {
-		messages: r,
-		inputValue: a,
-		isTyping: s,
-		onInputChange: o,
-		onSubmit: l,
+	return /* @__PURE__ */ r(e, {
+		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 { r as default };
+export { s as default };
 
 //# sourceMappingURL=chat-window-demo.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"chat-window-demo.js","names":[],"sources":["../../lib/examples/chat-window-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { ChatWindow } from '@/ui/ChatWindow';\nimport type { ChatWindowMessage } from '@/ui/ChatWindow';\n\nexport default function ChatWindowDemo() {\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      messages={messages}\n      inputValue={inputValue}\n      isTyping={isTyping}\n      onInputChange={setInputValue}\n      onSubmit={handleSubmit}\n      onClose={() => {}}\n      onAudioClick={() => {}}\n      className=\"w-380 h-660\"\n    />\n  );\n}\n"],"mappings":";;;;;AAMA,SAAwB,IAAiB;CACvC,IAAM,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;EACY;EACE;EACF;EACV,eAAe;EACf,UAAU;EACV,eAAe;EACf,oBAAoB;EACpB,WAAU;EACV,CAAA"}
+{"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      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,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/tabs-demo.js

@@ -2,11 +2,7 @@ import { Tab as e, TabList as t, TabPanel as n, Tabs as r, TabsBody as i } from
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region lib/examples/tabs-demo.tsx
 function s() {
-	let s = [
-		,
-		,
-		,
-	].fill(void 0).map((e, t) => ({
+	let s = Array(24).fill(void 0).map((e, t) => ({
 		label: `${t + 1}`,
 		value: t + 1
 	})), c = (e) => {
@@ -19,6 +15,7 @@ function s() {
 	};
 	return /* @__PURE__ */ o(r, {
 		selected: 1,
+		className: "max-w-500",
 		children: [/* @__PURE__ */ a(t, { children: s.map((t) => /* @__PURE__ */ a(e, {
 			label: `Tab - ${t.label}`,
 			value: t.value

package/examples/tabs-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-demo.js","names":[],"sources":["../../lib/examples/tabs-demo.tsx"],"sourcesContent":["import { Tab, TabList, TabPanel, Tabs, TabsBody } from '../ui/tabs/Tabs';\n\nexport default function TabsDemo() {\n  const tabs = new Array(3).fill(undefined).map((_, n) => ({ label: `${n + 1}`, value: n + 1 }));\n\n  const bgs = (count: number) => {\n    switch (count % 3) {\n      case 0:\n        return 'bg-lightSand';\n      case 1:\n        return 'bg-saffron';\n      case 2:\n        return 'bg-lavender';\n      default:\n        return 'bg-sienna';\n    }\n  };\n  return (\n    <Tabs selected={1}>\n      <TabList>\n        {tabs.map((tab) => {\n          return <Tab key={tab.label} label={`Tab - ${tab.label}`} value={tab.value} />;\n        })}\n      </TabList>\n      <TabsBody>\n        {tabs.map((tab) => {\n          return (\n            <TabPanel key={tab.label} value={tab.value}>\n              <div className={`p-16 ${bgs(tab.value)}`}>Panel - {tab.label}</div>\n            </TabPanel>\n          );\n        })}\n      </TabsBody>\n    </Tabs>\n  );\n}\n"],"mappings":";;;AAEA,SAAwB,IAAW;CACjC,IAAM,IAAO;;;;EAAY,CAAC,KAAK,KAAA,EAAU,CAAC,KAAK,GAAG,OAAO;EAAE,OAAO,GAAG,IAAI;EAAK,OAAO,IAAI;EAAG,EAAE,EAExF,KAAO,MAAkB;AAC7B,UAAQ,IAAQ,GAAhB;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO;;;AAGb,QACE,kBAAC,GAAD;EAAM,UAAU;YAAhB,CACE,kBAAC,GAAD,EAAA,UACG,EAAK,KAAK,MACF,kBAAC,GAAD;GAAqB,OAAO,SAAS,EAAI;GAAS,OAAO,EAAI;GAAS,EAA5D,EAAI,MAAwD,CAC7E,EACM,CAAA,EACV,kBAAC,GAAD,EAAA,UACG,EAAK,KAAK,MAEP,kBAAC,GAAD;GAA0B,OAAO,EAAI;aACnC,kBAAC,OAAD;IAAK,WAAW,QAAQ,EAAI,EAAI,MAAM;cAAtC,CAA0C,YAAS,EAAI,MAAY;;GAC1D,EAFI,EAAI,MAER,CAEb,EACO,CAAA,CACN"}
+{"version":3,"file":"tabs-demo.js","names":[],"sources":["../../lib/examples/tabs-demo.tsx"],"sourcesContent":["import { Tab, TabList, TabPanel, Tabs, TabsBody } from '../ui/tabs/Tabs';\n\nexport default function TabsDemo() {\n  const tabs = new Array(24).fill(undefined).map((_, n) => ({ label: `${n + 1}`, value: n + 1 }));\n\n  const bgs = (count: number) => {\n    switch (count % 3) {\n      case 0:\n        return 'bg-lightSand';\n      case 1:\n        return 'bg-saffron';\n      case 2:\n        return 'bg-lavender';\n      default:\n        return 'bg-sienna';\n    }\n  };\n  return (\n    <Tabs selected={1} className=\"max-w-500\">\n      <TabList>\n        {tabs.map((tab) => {\n          return <Tab key={tab.label} label={`Tab - ${tab.label}`} value={tab.value} />;\n        })}\n      </TabList>\n      <TabsBody>\n        {tabs.map((tab) => {\n          return (\n            <TabPanel key={tab.label} value={tab.value}>\n              <div className={`p-16 ${bgs(tab.value)}`}>Panel - {tab.label}</div>\n            </TabPanel>\n          );\n        })}\n      </TabsBody>\n    </Tabs>\n  );\n}\n"],"mappings":";;;AAEA,SAAwB,IAAW;CACjC,IAAM,IAAW,MAAM,GAAG,CAAC,KAAK,KAAA,EAAU,CAAC,KAAK,GAAG,OAAO;EAAE,OAAO,GAAG,IAAI;EAAK,OAAO,IAAI;EAAG,EAAE,EAEzF,KAAO,MAAkB;AAC7B,UAAQ,IAAQ,GAAhB;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO;;;AAGb,QACE,kBAAC,GAAD;EAAM,UAAU;EAAG,WAAU;YAA7B,CACE,kBAAC,GAAD,EAAA,UACG,EAAK,KAAK,MACF,kBAAC,GAAD;GAAqB,OAAO,SAAS,EAAI;GAAS,OAAO,EAAI;GAAS,EAA5D,EAAI,MAAwD,CAC7E,EACM,CAAA,EACV,kBAAC,GAAD,EAAA,UACG,EAAK,KAAK,MAEP,kBAAC,GAAD;GAA0B,OAAO,EAAI;aACnC,kBAAC,OAAD;IAAK,WAAW,QAAQ,EAAI,EAAI,MAAM;cAAtC,CAA0C,YAAS,EAAI,MAAY;;GAC1D,EAFI,EAAI,MAER,CAEb,EACO,CAAA,CACN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "2.0.0-beta.55",
+  "version": "2.0.0-beta.57",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [

package/ui/ChatWindow.d.ts

@@ -1,5 +1,8 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { ChatMessageSender } from './ChatMessage';
+import { ChatWindowCsatPromptLabels } from './ChatWindowCsatPrompt';
+import { ChatWindowCsatThankYouLabels } from './ChatWindowCsatThankYou';
+export type { ChatWindowCsatPromptLabels, ChatWindowCsatThankYouLabels };
 export interface ChatWindowMessage {
     id: string;
     sender: ChatMessageSender;
@@ -17,5 +20,12 @@ export interface ChatWindowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
     onClose?: () => void;
     onAudioClick?: () => void;
     logo?: ReactNode;
+    onFeedbackRate?: (rating: number) => void;
+    csatLabels?: ChatWindowCsatPromptLabels;
+    csatRenderRatingLabel?: (rating: number) => ReactNode;
+    csatThankYouLabels?: ChatWindowCsatThankYouLabels;
 }
-export declare function ChatWindow({ title, greeting, messages, inputValue, inputPlaceholder, isTyping, onInputChange, onSubmit, onClose, onAudioClick, logo, className, ...props }: ChatWindowProps): import("react/jsx-runtime").JSX.Element;
+export interface ChatWindowHandle {
+    askForFeedback: () => void;
+}
+export declare const ChatWindow: import('react').ForwardRefExoticComponent<ChatWindowProps & import('react').RefAttributes<ChatWindowHandle>>;

package/ui/ChatWindow.js

@@ -3,106 +3,129 @@ 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";
+import { ChatWindowCsatPrompt as i } from "./ChatWindowCsatPrompt.js";
+import { ChatWindowCsatThankYou as a } from "./ChatWindowCsatThankYou.js";
+import { forwardRef as o, useEffect as s, useImperativeHandle as c, useRef as l, useState as u } from "react";
+import { Icon as d } from "@clubmed/trident-icons";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region lib/ui/ChatWindow.tsx
-var l = /* @__PURE__ */ s("svg", {
+var m = /* @__PURE__ */ f("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", {
+	children: /* @__PURE__ */ f("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;
+}), h = o(function({ title: o = "Ask me a question", greeting: h, messages: g, inputValue: _, inputPlaceholder: v, isTyping: y = !1, onInputChange: b, onSubmit: x, onClose: S, onAudioClick: C, logo: w, onFeedbackRate: T, csatLabels: E, csatRenderRatingLabel: D, csatThankYouLabels: O, className: k, ...A }, j) {
+	let M = l(null), [N, P] = u(!1), [F, I] = u(null);
+	c(j, () => ({ askForFeedback() {
+		P(!0);
+	} })), s(() => {
+		let e = M.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", {
+	}, [
+		g,
+		y,
+		N,
+		F
+	]);
+	function L(e) {
+		I(String(D ? D(e) : e)), T?.(e);
+	}
+	let R = N && E && D;
+	return /* @__PURE__ */ p("div", {
+		...A,
+		className: e("flex flex-col gap-20 items-center", k),
+		children: [/* @__PURE__ */ p("div", {
 			className: "chat-border bg-white flex flex-col h-full w-full rounded-32 overflow-hidden",
 			children: [
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ p("div", {
 					className: "relative flex flex-col items-center shrink-0 pt-4 px-4 h-133 overflow-hidden",
-					children: [/* @__PURE__ */ s("div", {
+					children: [/* @__PURE__ */ f("div", {
 						className: "absolute inset-x-4 top-4 h-102 bg-lightSand rounded-[24]",
-						children: l
-					}), /* @__PURE__ */ c("div", {
+						children: m
+					}), /* @__PURE__ */ p("div", {
 						className: "relative flex flex-col flex-1 items-center justify-end pb-8 w-full z-10",
-						children: [/* @__PURE__ */ s("div", {
+						children: [/* @__PURE__ */ f("div", {
 							className: "flex items-center justify-center px-12 py-8 w-full",
-							children: /* @__PURE__ */ s("p", {
+							children: /* @__PURE__ */ f("p", {
 								className: "font-serif font-bold italic text-h5 text-center text-black line-clamp-2",
-								children: u
+								children: o
 							})
-						}), b ?? /* @__PURE__ */ s("button", {
+						}), w ?? /* @__PURE__ */ f("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, {
+							children: /* @__PURE__ */ f(d, {
 								name: "Sparkles",
 								width: "24px"
 							})
 						})]
 					})]
 				}),
-				/* @__PURE__ */ c("div", {
-					ref: C,
+				/* @__PURE__ */ p("div", {
+					ref: M,
 					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", {
+						h ? /* @__PURE__ */ f("div", {
 							className: "px-20",
-							children: /* @__PURE__ */ s("p", {
+							children: /* @__PURE__ */ f("p", {
 								className: "text-b3 text-black",
-								children: d
+								children: h
 							})
 						}) : null,
-						f.map((e) => /* @__PURE__ */ s(n, {
+						g.map((e) => /* @__PURE__ */ f(n, {
 							sender: e.sender,
 							children: e.content
 						}, e.id)),
-						h && /* @__PURE__ */ s("div", {
+						y && /* @__PURE__ */ f("div", {
 							className: "px-12",
-							children: /* @__PURE__ */ s(r, {})
-						})
+							children: /* @__PURE__ */ f(r, {})
+						}),
+						R && /* @__PURE__ */ f(i, {
+							onRate: L,
+							labels: E,
+							renderRatingLabel: D
+						}),
+						F && /* @__PURE__ */ f(n, {
+							sender: "user",
+							children: F
+						}),
+						F && O && /* @__PURE__ */ f(a, { labels: O })
 					]
 				}),
-				/* @__PURE__ */ s("div", {
+				/* @__PURE__ */ f("div", {
 					className: "shrink-0 px-8 pb-8 pt-12",
-					children: /* @__PURE__ */ s(t, {
-						value: p,
-						placeholder: m,
-						onValueChange: g,
-						onSubmit: _,
-						onAudioClick: y
+					children: /* @__PURE__ */ f(t, {
+						value: _,
+						placeholder: v,
+						onValueChange: b,
+						onSubmit: x,
+						onAudioClick: C
 					})
 				})
 			]
-		}), v && /* @__PURE__ */ s("button", {
+		}), S && /* @__PURE__ */ f("button", {
 			type: "button",
 			"aria-label": "Close chat",
-			onClick: v,
+			onClick: S,
 			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, {
+			children: /* @__PURE__ */ f(d, {
 				name: "CrossDefault",
 				width: "24px"
 			})
 		})]
 	});
-}
+});
 //#endregion
-export { u as ChatWindow };
+export { h as ChatWindow };
 
 //# sourceMappingURL=ChatWindow.js.map

package/ui/ChatWindow.js.map

@@ -1 +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"}
+{"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 { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport { twMerge } from './helpers/twMerge';\nimport { ChatInput } from './ChatInput';\nimport { ChatMessage } from './ChatMessage';\nimport type { ChatMessageSender } from './ChatMessage';\nimport { ChatTypingIndicator } from './ChatTypingIndicator';\nimport { ChatWindowCsatPrompt } from './ChatWindowCsatPrompt';\nimport type { ChatWindowCsatPromptLabels } from './ChatWindowCsatPrompt';\nimport { ChatWindowCsatThankYou } from './ChatWindowCsatThankYou';\nimport type { ChatWindowCsatThankYouLabels } from './ChatWindowCsatThankYou';\n\nexport type { ChatWindowCsatPromptLabels, ChatWindowCsatThankYouLabels };\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  onFeedbackRate?: (rating: number) => void;\n  csatLabels?: ChatWindowCsatPromptLabels;\n  csatRenderRatingLabel?: (rating: number) => ReactNode;\n  csatThankYouLabels?: ChatWindowCsatThankYouLabels;\n}\n\nexport interface ChatWindowHandle {\n  askForFeedback: () => void;\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 const ChatWindow = forwardRef<ChatWindowHandle, ChatWindowProps>(function ChatWindow(\n  {\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    onFeedbackRate,\n    csatLabels,\n    csatRenderRatingLabel,\n    csatThankYouLabels,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const logRef = useRef<HTMLDivElement>(null);\n  const [showCsat, setShowCsat] = useState(false);\n  const [csatRatingMessage, setCsatRatingMessage] = useState<string | null>(null);\n\n  useImperativeHandle(ref, () => ({\n    askForFeedback() {\n      setShowCsat(true);\n    },\n  }));\n\n  useEffect(() => {\n    const el = logRef.current;\n    if (el) el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });\n  }, [messages, isTyping, showCsat, csatRatingMessage]);\n\n  function handleRate(rating: number) {\n    const label = csatRenderRatingLabel ? String(csatRenderRatingLabel(rating)) : String(rating);\n    setCsatRatingMessage(label);\n    onFeedbackRate?.(rating);\n  }\n\n  const csatReady = showCsat && csatLabels && csatRenderRatingLabel;\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          {csatReady && (\n            <ChatWindowCsatPrompt\n              onRate={handleRate}\n              labels={csatLabels}\n              renderRatingLabel={csatRenderRatingLabel}\n            />\n          )}\n          {csatRatingMessage && <ChatMessage sender=\"user\">{csatRatingMessage}</ChatMessage>}\n          {csatRatingMessage && csatThankYouLabels && (\n            <ChatWindowCsatThankYou labels={csatThankYouLabels} />\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":";;;;;;;;;;;AA6CA,IAAM,IACJ,kBAAC,OAAD;CACE,WAAU;CACV,OAAM;CACN,QAAO;CACP,SAAQ;WAER,kBAAC,QAAD;EACE,GAAE;EACF,MAAK;EACL,CAAA;CACE,CAAA,EAGK,IAAa,EAA8C,SACtE,EACE,WAAQ,qBACR,aACA,aACA,eACA,qBACA,cAAW,IACX,kBACA,aACA,YACA,iBACA,SACA,mBACA,eACA,0BACA,uBACA,cACA,GAAG,KAEL,GACA;CACA,IAAM,IAAS,EAAuB,KAAK,EACrC,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,CAAC,GAAmB,KAAwB,EAAwB,KAAK;AAQ/E,CANA,EAAoB,UAAY,EAC9B,iBAAiB;AACf,IAAY,GAAK;IAEpB,EAAE,EAEH,QAAgB;EACd,IAAM,IAAK,EAAO;AAClB,EAAI,KAAI,EAAG,SAAS;GAAE,KAAK,EAAG;GAAc,UAAU;GAAU,CAAC;IAChE;EAAC;EAAU;EAAU;EAAU;EAAkB,CAAC;CAErD,SAAS,EAAW,GAAgB;AAGlC,EADA,EADsC,OAAxB,IAA+B,EAAsB,EAAO,GAAW,EAAO,CACjE,EAC3B,IAAiB,EAAO;;CAG1B,IAAM,IAAY,KAAY,KAAc;AAE5C,QACE,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;MAEP,KACC,kBAAC,GAAD;OACE,QAAQ;OACR,QAAQ;OACR,mBAAmB;OACnB,CAAA;MAEH,KAAqB,kBAAC,GAAD;OAAa,QAAO;iBAAQ;OAAgC,CAAA;MACjF,KAAqB,KACpB,kBAAC,GAAD,EAAwB,QAAQ,GAAsB,CAAA;;;IAI1D,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;;EAIf"}

package/ui/ChatWindowCsatPrompt.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export interface ChatWindowCsatPromptLabels {
+    intro: string;
+    question: string;
+    questionNote: string;
+    groupAriaLabel: string;
+    starLabels: [string, string, string, string, string];
+}
+export interface ChatWindowCsatPromptProps {
+    onRate: (rating: number) => void;
+    labels: ChatWindowCsatPromptLabels;
+    renderRatingLabel: (rating: number) => ReactNode;
+    className?: string;
+}
+export declare function ChatWindowCsatPrompt({ onRate, labels, renderRatingLabel, className, }: ChatWindowCsatPromptProps): import("react/jsx-runtime").JSX.Element;

package/ui/ChatWindowCsatPrompt.js

@@ -0,0 +1,71 @@
+"use client";
+import { twMerge as e } from "./helpers/twMerge.js";
+import { useState as t } from "react";
+import { Icon as n } from "@clubmed/trident-icons";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/ui/ChatWindowCsatPrompt.tsx
+function a({ onRate: a, labels: o, renderRatingLabel: s, className: c }) {
+	let [l, u] = t(0), [d, f] = t(0);
+	function p(e) {
+		d > 0 || (f(e), a(e));
+	}
+	let m = l || d, h = d > 0;
+	return /* @__PURE__ */ i("div", {
+		className: e("flex flex-col gap-20 px-20", c),
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "flex flex-col gap-4",
+				children: [/* @__PURE__ */ r("p", {
+					className: "text-b3 text-black",
+					children: o.intro
+				}), /* @__PURE__ */ i("p", {
+					className: "text-b3 text-black",
+					children: [
+						o.question,
+						" ",
+						/* @__PURE__ */ r("span", {
+							className: "text-b4 text-black",
+							children: o.questionNote
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ r("div", {
+				role: "group",
+				"aria-label": o.groupAriaLabel,
+				className: "flex items-center gap-0",
+				children: o.starLabels.map((t, i) => {
+					let a = i + 1, o = a <= m;
+					return /* @__PURE__ */ r("button", {
+						type: "button",
+						"aria-label": `${a} star${a > 1 ? "s" : ""} — ${t}`,
+						"aria-pressed": d === a,
+						"aria-disabled": h,
+						onClick: () => p(a),
+						onMouseEnter: () => {
+							h || u(a);
+						},
+						onMouseLeave: () => {
+							h || u(0);
+						},
+						className: e("flex items-center justify-center size-48 rounded-full transition-colors", h ? "cursor-default" : "hover:bg-lightSand"),
+						children: /* @__PURE__ */ r(n, {
+							name: o ? "StarFilled" : "StarOutlined",
+							width: "24px",
+							className: "text-black"
+						})
+					}, a);
+				})
+			}),
+			m > 0 && /* @__PURE__ */ r("p", {
+				className: "text-b4 text-darkGrey",
+				"aria-live": "polite",
+				children: s(m)
+			})
+		]
+	});
+}
+//#endregion
+export { a as ChatWindowCsatPrompt };
+
+//# sourceMappingURL=ChatWindowCsatPrompt.js.map

package/ui/ChatWindowCsatPrompt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindowCsatPrompt.js","names":[],"sources":["../../lib/ui/ChatWindowCsatPrompt.tsx"],"sourcesContent":["'use client';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\nimport { twMerge } from './helpers/twMerge';\n\nexport interface ChatWindowCsatPromptLabels {\n  intro: string;\n  question: string;\n  questionNote: string;\n  groupAriaLabel: string;\n  starLabels: [string, string, string, string, string];\n}\n\nexport interface ChatWindowCsatPromptProps {\n  onRate: (rating: number) => void;\n  labels: ChatWindowCsatPromptLabels;\n  renderRatingLabel: (rating: number) => ReactNode;\n  className?: string;\n}\n\nexport function ChatWindowCsatPrompt({\n  onRate,\n  labels,\n  renderRatingLabel,\n  className,\n}: ChatWindowCsatPromptProps) {\n  const [hovered, setHovered] = useState(0);\n  const [selected, setSelected] = useState(0);\n\n  function handleSelect(rating: number) {\n    if (selected > 0) return;\n    setSelected(rating);\n    onRate(rating);\n  }\n\n  const activeRating = hovered || selected;\n  const isLocked = selected > 0;\n\n  return (\n    <div className={twMerge('flex flex-col gap-20 px-20', className)}>\n      <div className=\"flex flex-col gap-4\">\n        <p className=\"text-b3 text-black\">{labels.intro}</p>\n        <p className=\"text-b3 text-black\">\n          {labels.question} <span className=\"text-b4 text-black\">{labels.questionNote}</span>\n        </p>\n      </div>\n\n      <div role=\"group\" aria-label={labels.groupAriaLabel} className=\"flex items-center gap-0\">\n        {labels.starLabels.map((label, i) => {\n          const rating = i + 1;\n          const isFilled = rating <= activeRating;\n          return (\n            <button\n              key={rating}\n              type=\"button\"\n              aria-label={`${rating} star${rating > 1 ? 's' : ''} — ${label}`}\n              aria-pressed={selected === rating}\n              aria-disabled={isLocked}\n              onClick={() => handleSelect(rating)}\n              onMouseEnter={() => {\n                if (!isLocked) setHovered(rating);\n              }}\n              onMouseLeave={() => {\n                if (!isLocked) setHovered(0);\n              }}\n              className={twMerge(\n                'flex items-center justify-center size-48 rounded-full transition-colors',\n                isLocked ? 'cursor-default' : 'hover:bg-lightSand',\n              )}\n            >\n              <Icon\n                name={isFilled ? 'StarFilled' : 'StarOutlined'}\n                width=\"24px\"\n                className=\"text-black\"\n              />\n            </button>\n          );\n        })}\n      </div>\n\n      {activeRating > 0 && (\n        <p className=\"text-b4 text-darkGrey\" aria-live=\"polite\">\n          {renderRatingLabel(activeRating)}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAsBA,SAAgB,EAAqB,EACnC,WACA,WACA,sBACA,gBAC4B;CAC5B,IAAM,CAAC,GAAS,KAAc,EAAS,EAAE,EACnC,CAAC,GAAU,KAAe,EAAS,EAAE;CAE3C,SAAS,EAAa,GAAgB;AAChC,MAAW,MACf,EAAY,EAAO,EACnB,EAAO,EAAO;;CAGhB,IAAM,IAAe,KAAW,GAC1B,IAAW,IAAW;AAE5B,QACE,kBAAC,OAAD;EAAK,WAAW,EAAQ,8BAA8B,EAAU;YAAhE;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,KAAD;KAAG,WAAU;eAAsB,EAAO;KAAU,CAAA,EACpD,kBAAC,KAAD;KAAG,WAAU;eAAb;MACG,EAAO;MAAS;MAAC,kBAAC,QAAD;OAAM,WAAU;iBAAsB,EAAO;OAAoB,CAAA;;;;GAIvF,kBAAC,OAAD;IAAK,MAAK;IAAQ,cAAY,EAAO;IAAgB,WAAU;cAC5D,EAAO,WAAW,KAAK,GAAO,MAAM;KACnC,IAAM,IAAS,IAAI,GACb,IAAW,KAAU;AAC3B,YACE,kBAAC,UAAD;MAEE,MAAK;MACL,cAAY,GAAG,EAAO,OAAO,IAAS,IAAI,MAAM,GAAG,KAAK;MACxD,gBAAc,MAAa;MAC3B,iBAAe;MACf,eAAe,EAAa,EAAO;MACnC,oBAAoB;AAClB,OAAK,KAAU,EAAW,EAAO;;MAEnC,oBAAoB;AAClB,OAAK,KAAU,EAAW,EAAE;;MAE9B,WAAW,EACT,2EACA,IAAW,mBAAmB,qBAC/B;gBAED,kBAAC,GAAD;OACE,MAAM,IAAW,eAAe;OAChC,OAAM;OACN,WAAU;OACV,CAAA;MACK,EAtBF,EAsBE;;IAGT,CAAA;GAEL,IAAe,KACd,kBAAC,KAAD;IAAG,WAAU;IAAwB,aAAU;cAC5C,EAAkB,EAAA;IACjB,CAAA"}

package/ui/ChatWindowCsatThankYou.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+export interface ChatWindowCsatThankYouLabels {
+    title: string;
+    body: string;
+}
+export interface ChatWindowCsatThankYouProps extends HTMLAttributes<HTMLDivElement> {
+    labels: ChatWindowCsatThankYouLabels;
+}
+export declare function ChatWindowCsatThankYou({ labels, className, ...props }: ChatWindowCsatThankYouProps): import("react/jsx-runtime").JSX.Element;

package/ui/ChatWindowCsatThankYou.js

@@ -0,0 +1,29 @@
+"use client";
+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";
+//#region lib/ui/ChatWindowCsatThankYou.tsx
+function i({ labels: i, className: a, ...o }) {
+	return /* @__PURE__ */ r("div", {
+		...o,
+		className: e("flex flex-col gap-20 px-20", a),
+		children: [/* @__PURE__ */ r("div", {
+			className: "flex items-center gap-4 text-green",
+			children: [/* @__PURE__ */ n(t, {
+				name: "CheckFilled",
+				width: "24px",
+				className: "shrink-0"
+			}), /* @__PURE__ */ n("p", {
+				className: "text-b3 font-semibold text-black",
+				children: i.title
+			})]
+		}), /* @__PURE__ */ n("p", {
+			className: "text-b3 text-black",
+			children: i.body
+		})]
+	});
+}
+//#endregion
+export { i as ChatWindowCsatThankYou };
+
+//# sourceMappingURL=ChatWindowCsatThankYou.js.map

package/ui/ChatWindowCsatThankYou.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindowCsatThankYou.js","names":[],"sources":["../../lib/ui/ChatWindowCsatThankYou.tsx"],"sourcesContent":["'use client';\n\nimport { Icon } from '@clubmed/trident-icons';\nimport type { HTMLAttributes } from 'react';\nimport { twMerge } from './helpers/twMerge';\n\nexport interface ChatWindowCsatThankYouLabels {\n  title: string;\n  body: string;\n}\n\nexport interface ChatWindowCsatThankYouProps extends HTMLAttributes<HTMLDivElement> {\n  labels: ChatWindowCsatThankYouLabels;\n}\n\nexport function ChatWindowCsatThankYou({\n  labels,\n  className,\n  ...props\n}: ChatWindowCsatThankYouProps) {\n  return (\n    <div {...props} className={twMerge('flex flex-col gap-20 px-20', className)}>\n      <div className=\"flex items-center gap-4 text-green\">\n        <Icon name=\"CheckFilled\" width=\"24px\" className=\"shrink-0\" />\n        <p className=\"text-b3 font-semibold text-black\">{labels.title}</p>\n      </div>\n      <p className=\"text-b3 text-black\">{labels.body}</p>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAeA,SAAgB,EAAuB,EACrC,WACA,cACA,GAAG,KAC2B;AAC9B,QACE,kBAAC,OAAD;EAAK,GAAI;EAAO,WAAW,EAAQ,8BAA8B,EAAU;YAA3E,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IAAM,MAAK;IAAc,OAAM;IAAO,WAAU;IAAa,CAAA,EAC7D,kBAAC,KAAD;IAAG,WAAU;cAAoC,EAAO;IAAU,CAAA,CAAA;MAEpE,kBAAC,KAAD;GAAG,WAAU;aAAsB,EAAO;GAAS,CAAA,CAAA"}

package/ui/forms/Switch.js

@@ -48,7 +48,7 @@ function a({ id: a, name: o, checked: s, className: c, color: l = "saffron", onC
 							r: 4,
 							fill: "var(--color-middleGrey)"
 						}),
-						/* @__PURE__ */ r("path", { d: "M18.73 6c.35 0 .68.14.9.37.5.5.5 1.35 0 1.85l-8.54 8.75q-.37.38-.9.38t-.9-.38l-4.91-5.02a1.33 1.33 0 0 1 0-1.85 1.26 1.26 0 0 1 1.8 0l4.01 4.09 7.64-7.82c.23-.24.56-.37.9-.37" })
+						/* @__PURE__ */ r("path", { d: "M18.1 7.5c.4.4.4 1.08 0 1.48l-6.83 7q-.3.3-.72.3a1 1 0 0 1-.72-.3L5.9 11.96c-.4-.41-.4-1.07 0-1.48a1 1 0 0 1 1.44 0l3.2 3.27 6.12-6.25a1 1 0 0 1 .72-.3 1 1 0 0 1 .72.3" })
 					] })
 				})
 			}),

package/ui/forms/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":[],"sources":["../../../lib/ui/forms/Switch.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ComponentPropsWithoutRef, useId } from 'react';\n\nimport { getBgColor } from '../helpers/colors/colors';\nimport type { Colors } from '../types/Colors';\n\nexport interface SwitchProps\n  extends Omit<\n    ComponentPropsWithoutRef<'input'>,\n    'size' | 'type' | 'defaultChecked' | 'onChange' | 'value'\n  > {\n  checked: boolean;\n  color?: Colors;\n  value?: string | number | boolean;\n  onChange?: (event: Event, value: boolean) => void;\n}\n\nexport function Switch({\n  id,\n  name,\n  checked,\n  className,\n  color = 'saffron',\n  onChange,\n  disabled = false,\n  tabIndex = 0,\n  children,\n  role = 'switch',\n  value,\n  ...attrs\n}: SwitchProps) {\n  const internalId = useId();\n  const inputId = id ?? internalId;\n  const inputName = name ?? inputId;\n  const hasChildren = children !== undefined && children !== null;\n  const rootClassName = clsx('inline-flex items-center relative', {\n    'gap-4': hasChildren,\n    'cursor-pointer': !disabled,\n    'cursor-not-allowed': disabled,\n  });\n  const Node = hasChildren ? 'label' : 'span';\n\n  return (\n    <Node htmlFor={inputId} className={rootClassName}>\n      <input\n        {...attrs}\n        id={inputId}\n        name={inputName}\n        checked={checked}\n        data-name=\"Switch\"\n        disabled={disabled}\n        role={role}\n        tabIndex={tabIndex}\n        type=\"checkbox\"\n        value={typeof value === 'boolean' ? String(value) : value}\n        className=\"absolute opacity-0 left-0 w-full top-0 m-0 p-0 z-1 h-full\"\n        onChange={(e) => {\n          onChange?.(e.nativeEvent, e.target.checked);\n        }}\n      />\n\n      <span\n        className={clsx(\n          className,\n          'rounded-pill inline-flex min-w-56 items-center p-4 align-middle transition-colors',\n          { 'bg-middleGrey': !checked },\n          { [getBgColor(color)]: checked },\n        )}\n      >\n        <svg className=\"size-24\" viewBox=\"0 0 24 24\">\n          <g>\n            <circle cx={12} cy={12} r={12} fill=\"var(--color-white)\" />\n            <circle cx={12} cy={12} r={4} fill=\"var(--color-middleGrey)\" />\n            <path d=\"M18.73 6c.35 0 .68.14.9.37.5.5.5 1.35 0 1.85l-8.54 8.75q-.37.38-.9.38t-.9-.38l-4.91-5.02a1.33 1.33 0 0 1 0-1.85 1.26 1.26 0 0 1 1.8 0l4.01 4.09 7.64-7.82c.23-.24.56-.37.9-.37\" />\n          </g>\n        </svg>\n      </span>\n      {children}\n    </Node>\n  );\n}\n"],"mappings":";;;;;;AAmBA,SAAgB,EAAO,EACrB,OACA,SACA,YACA,cACA,WAAQ,WACR,aACA,cAAW,IACX,cAAW,GACX,aACA,UAAO,UACP,UACA,GAAG,KACW;CACd,IAAM,IAAa,GAAO,EACpB,IAAU,KAAM,GAChB,IAAY,KAAQ,GACpB,IAAc,KAAuC,MACrD,IAAgB,EAAK,qCAAqC;EAC9D,SAAS;EACT,kBAAkB,CAAC;EACnB,sBAAsB;EACvB,CAAC;AAGF,QACE,kBAHW,IAAc,UAAU,QAGnC;EAAM,SAAS;EAAS,WAAW;YAAnC;GACE,kBAAC,SAAD;IACE,GAAI;IACJ,IAAI;IACJ,MAAM;IACG;IACT,aAAU;IACA;IACJ;IACI;IACV,MAAK;IACL,OAAO,OAAO,KAAU,YAAY,OAAO,EAAM,GAAG;IACpD,WAAU;IACV,WAAW,MAAM;AACf,SAAW,EAAE,aAAa,EAAE,OAAO,QAAQ;;IAE7C,CAAA;GAEF,kBAAC,QAAD;IACE,WAAW,EACT,GACA,qFACA,EAAE,iBAAiB,CAAC,GAAS,EAC7B,GAAG,EAAW,EAAM,GAAG,GAAS,CACjC;cAED,kBAAC,OAAD;KAAK,WAAU;KAAU,SAAQ;eAC/B,kBAAC,KAAD,EAAA,UAAA;MACE,kBAAC,UAAD;OAAQ,IAAI;OAAI,IAAI;OAAI,GAAG;OAAI,MAAK;OAAuB,CAAA;MAC3D,kBAAC,UAAD;OAAQ,IAAI;OAAI,IAAI;OAAI,GAAG;OAAG,MAAK;OAA4B,CAAA;MAC/D,kBAAC,QAAD,EAAM,GAAE,kLAAmL,CAAA;MACzL,EAAA,CAAA;KACA,CAAA;IACD,CAAA;GACN"}
+{"version":3,"file":"Switch.js","names":[],"sources":["../../../lib/ui/forms/Switch.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ComponentPropsWithoutRef, useId } from 'react';\n\nimport { getBgColor } from '../helpers/colors/colors';\nimport type { Colors } from '../types/Colors';\n\nexport interface SwitchProps\n  extends Omit<\n    ComponentPropsWithoutRef<'input'>,\n    'size' | 'type' | 'defaultChecked' | 'onChange' | 'value'\n  > {\n  checked: boolean;\n  color?: Colors;\n  value?: string | number | boolean;\n  onChange?: (event: Event, value: boolean) => void;\n}\n\nexport function Switch({\n  id,\n  name,\n  checked,\n  className,\n  color = 'saffron',\n  onChange,\n  disabled = false,\n  tabIndex = 0,\n  children,\n  role = 'switch',\n  value,\n  ...attrs\n}: SwitchProps) {\n  const internalId = useId();\n  const inputId = id ?? internalId;\n  const inputName = name ?? inputId;\n  const hasChildren = children !== undefined && children !== null;\n  const rootClassName = clsx('inline-flex items-center relative', {\n    'gap-4': hasChildren,\n    'cursor-pointer': !disabled,\n    'cursor-not-allowed': disabled,\n  });\n  const Node = hasChildren ? 'label' : 'span';\n\n  return (\n    <Node htmlFor={inputId} className={rootClassName}>\n      <input\n        {...attrs}\n        id={inputId}\n        name={inputName}\n        checked={checked}\n        data-name=\"Switch\"\n        disabled={disabled}\n        role={role}\n        tabIndex={tabIndex}\n        type=\"checkbox\"\n        value={typeof value === 'boolean' ? String(value) : value}\n        className=\"absolute opacity-0 left-0 w-full top-0 m-0 p-0 z-1 h-full\"\n        onChange={(e) => {\n          onChange?.(e.nativeEvent, e.target.checked);\n        }}\n      />\n\n      <span\n        className={clsx(\n          className,\n          'rounded-pill inline-flex min-w-56 items-center p-4 align-middle transition-colors',\n          { 'bg-middleGrey': !checked },\n          { [getBgColor(color)]: checked },\n        )}\n      >\n        <svg className=\"size-24\" viewBox=\"0 0 24 24\">\n          <g>\n            <circle cx={12} cy={12} r={12} fill=\"var(--color-white)\" />\n            <circle cx={12} cy={12} r={4} fill=\"var(--color-middleGrey)\" />\n            <path d=\"M18.1 7.5c.4.4.4 1.08 0 1.48l-6.83 7q-.3.3-.72.3a1 1 0 0 1-.72-.3L5.9 11.96c-.4-.41-.4-1.07 0-1.48a1 1 0 0 1 1.44 0l3.2 3.27 6.12-6.25a1 1 0 0 1 .72-.3 1 1 0 0 1 .72.3\" />\n          </g>\n        </svg>\n      </span>\n      {children}\n    </Node>\n  );\n}\n"],"mappings":";;;;;;AAmBA,SAAgB,EAAO,EACrB,OACA,SACA,YACA,cACA,WAAQ,WACR,aACA,cAAW,IACX,cAAW,GACX,aACA,UAAO,UACP,UACA,GAAG,KACW;CACd,IAAM,IAAa,GAAO,EACpB,IAAU,KAAM,GAChB,IAAY,KAAQ,GACpB,IAAc,KAAuC,MACrD,IAAgB,EAAK,qCAAqC;EAC9D,SAAS;EACT,kBAAkB,CAAC;EACnB,sBAAsB;EACvB,CAAC;AAGF,QACE,kBAHW,IAAc,UAAU,QAGnC;EAAM,SAAS;EAAS,WAAW;YAAnC;GACE,kBAAC,SAAD;IACE,GAAI;IACJ,IAAI;IACJ,MAAM;IACG;IACT,aAAU;IACA;IACJ;IACI;IACV,MAAK;IACL,OAAO,OAAO,KAAU,YAAY,OAAO,EAAM,GAAG;IACpD,WAAU;IACV,WAAW,MAAM;AACf,SAAW,EAAE,aAAa,EAAE,OAAO,QAAQ;;IAE7C,CAAA;GAEF,kBAAC,QAAD;IACE,WAAW,EACT,GACA,qFACA,EAAE,iBAAiB,CAAC,GAAS,EAC7B,GAAG,EAAW,EAAM,GAAG,GAAS,CACjC;cAED,kBAAC,OAAD;KAAK,WAAU;KAAU,SAAQ;eAC/B,kBAAC,KAAD,EAAA,UAAA;MACE,kBAAC,UAAD;OAAQ,IAAI;OAAI,IAAI;OAAI,GAAG;OAAI,MAAK;OAAuB,CAAA;MAC3D,kBAAC,UAAD;OAAQ,IAAI;OAAI,IAAI;OAAI,GAAG;OAAG,MAAK;OAA4B,CAAA;MAC/D,kBAAC,QAAD,EAAM,GAAE,2KAA4K,CAAA;MAClL,EAAA,CAAA;KACA,CAAA;IACD,CAAA;GACN"}

package/ui/tabs/Tabs.js

@@ -1,80 +1,148 @@
 "use client";
-import { Select as e } from "../forms/Select.js";
-import { TabsProvider as t } from "../contexts/TabControl.js";
-import { useActiveTab as n, useActiveTabControl as r, useRegisterTabControl as i, useTabDispatch as a, useTabsUid as o } from "../hooks/tabControl.js";
-import { useKeyboardControls as s } from "../hooks/useKeyboardControls.js";
-import { cn as c } from "../helpers/cn.js";
-import { useCallback as l, useEffect as u, useRef as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { ArrowButton as e } from "../buttons/ArrowButton.js";
+import { Select as t } from "../forms/Select.js";
+import { TabsProvider as n } from "../contexts/TabControl.js";
+import { useActiveTab as r, useActiveTabControl as i, useRegisterTabControl as a, useTabDispatch as o, useTabsUid as s } from "../hooks/tabControl.js";
+import { useKeyboardControls as c } from "../hooks/useKeyboardControls.js";
+import { cn as l } from "../helpers/cn.js";
+import { useCallback as u, useEffect as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region lib/ui/tabs/Tabs.tsx
-var m = ({ className: e, compacted: n = !1, selected: r, children: i }) => /* @__PURE__ */ f("div", {
-	className: c("flex flex-col", { "sm:gap-y-20": !n }, e),
+var g = ({ className: e, compacted: t = !1, selected: r, children: i }) => /* @__PURE__ */ m("div", {
+	className: l("flex flex-col", { "sm:gap-y-20": !t }, e),
 	"data-name": "Tabs",
-	children: /* @__PURE__ */ f(t, {
+	children: /* @__PURE__ */ m(n, {
 		selected: r,
 		children: i
 	})
-}), h = ({ className: e, children: t }) => /* @__PURE__ */ f("div", {
+}), _ = ({ className: e, children: t }) => /* @__PURE__ */ m("div", {
 	"data-name": "TabsBody",
-	className: c("grid grid-rows-1 overflow-hidden", e),
+	className: l("grid grid-rows-1 overflow-hidden", e),
 	children: t
-}), g = ({ value: e, className: t, onSelect: r, children: i, ...a }) => {
-	let s = o(), l = d(!1), p = n() === e;
-	return u(() => {
-		if (!l.current) {
-			l.current = !0;
+}), v = ({ value: e, className: t, onSelect: n, children: i, ...a }) => {
+	let o = s(), c = f(!1), u = r() === e;
+	return d(() => {
+		if (!c.current) {
+			c.current = !0;
 			return;
 		}
-		p && r?.({ value: e });
+		u && n?.({ value: e });
 	}, [
-		p,
+		u,
 		e,
-		r
-	]), /* @__PURE__ */ f("div", {
+		n
+	]), /* @__PURE__ */ m("div", {
 		...a,
-		"aria-hidden": !p,
-		className: c("relative col-start-1 row-start-1 transition-opacity duration-500", {
-			"pointer-events-none z-0 h-0 opacity-0": !p,
-			"pointer-events-auto z-1 h-auto opacity-100": p
+		"aria-hidden": !u,
+		className: l("relative col-start-1 row-start-1 transition-opacity duration-500", {
+			"pointer-events-none z-0 h-0 opacity-0": !u,
+			"pointer-events-auto z-1 h-auto opacity-100": u
 		}, t),
-		inert: p ? void 0 : !0,
-		tabIndex: p ? 0 : -1,
-		id: `TabPanel_${e}_${s}`,
+		inert: u ? void 0 : !0,
+		tabIndex: u ? 0 : -1,
+		id: `TabPanel_${e}_${o}`,
 		"data-name": `TabPanel_${e}`,
 		role: "tabpanel",
-		"aria-labelledby": `Tab_${e}_${s}`,
+		"aria-labelledby": `Tab_${e}_${o}`,
 		children: i
 	});
-}, _ = ({ className: e, constrained: t = !1, children: n }) => {
-	let i = d(null), a = d(null), [o, s] = r();
-	u(() => {
-		if (!s?.current || !i.current) return;
-		let e = a.current.offsetWidth ?? 0, t = s.current.getBoundingClientRect(), n = i.current.getBoundingClientRect(), r = i.current.scrollLeft;
-		i.current.scrollLeft = r + (t.left - n.left) - e;
-	}, [s]);
-	let l = { "--active-tab": o };
-	return /* @__PURE__ */ f("div", {
+}, y = ({ className: t, constrained: n = !1, children: r }) => {
+	let a = f(null), o = f(null), [s, c] = i(), [g, _] = p(!1), [v, y] = p(!1), b = u(() => {
+		let e = a.current;
+		e && (_(e.scrollLeft > 0), y(Math.ceil(e.scrollLeft) < e.scrollWidth - e.clientWidth));
+	}, []);
+	d(() => {
+		let e = a.current;
+		if (!e) return;
+		b();
+		let t = new ResizeObserver(b);
+		return t.observe(e), e.addEventListener("scroll", b, { passive: !0 }), () => {
+			t.disconnect(), e.removeEventListener("scroll", b);
+		};
+	}, [b]), d(() => {
+		if (!c?.current || !a.current) return;
+		let e = o.current.offsetWidth ?? 0, t = c.current.getBoundingClientRect(), n = a.current.getBoundingClientRect();
+		a.current.scrollBy({
+			left: t.left - n.left - e,
+			behavior: "smooth"
+		});
+	}, [c]);
+	let x = f(null), S = u(() => {
+		x.current !== null && (cancelAnimationFrame(x.current), x.current = null);
+	}, []), C = u((e) => {
+		if (x.current !== null) return;
+		let t = () => {
+			a.current?.scrollBy({ left: e * 6 }), x.current = requestAnimationFrame(t);
+		};
+		x.current = requestAnimationFrame(t);
+	}, []), w = u((e) => {
+		(e.key === " " || e.key === "Enter") && S();
+	}, [S]), T = u((e) => {
+		(e.key === " " || e.key === "Enter") && (e.preventDefault(), C(-1));
+	}, [C]), E = u((e) => {
+		(e.key === " " || e.key === "Enter") && (e.preventDefault(), C(1));
+	}, [C]);
+	d(() => S, [S]);
+	let D = { "--active-tab": s }, O = g || v;
+	return /* @__PURE__ */ h("div", {
+		className: "relative",
 		"data-name": "TabsHeader",
-		className: c("scrollbar-hidden relative isolate flex max-w-full overflow-x-auto scroll-smooth py-20", e),
-		ref: i,
-		children: /* @__PURE__ */ p("div", {
-			role: "tablist",
-			className: "flex flex-row",
-			style: l,
-			children: [
-				/* @__PURE__ */ f("div", {
-					ref: a,
-					className: c("shrink-0", { "w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !t })
-				}),
-				n,
-				/* @__PURE__ */ f("div", { className: c("shrink-0", { "w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !t }) })
-			]
-		})
+		children: [
+			O && /* @__PURE__ */ m("div", {
+				className: "pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center",
+				children: /* @__PURE__ */ m(e, {
+					icon: "ArrowDefaultLeft",
+					size: "small",
+					className: l("pointer-events-auto transition-opacity duration-200 focus-visible:ring-8 focus-visible:ring-lavender/20", g ? "opacity-100" : "pointer-events-none opacity-0"),
+					onMouseDown: () => C(-1),
+					onMouseUp: S,
+					onMouseLeave: S,
+					onKeyDown: T,
+					onKeyUp: w,
+					inert: !g,
+					tabIndex: g ? 0 : -1,
+					children: "Scroll tabs left"
+				})
+			}),
+			/* @__PURE__ */ m("div", {
+				className: l("scrollbar-hidden relative isolate flex max-w-full overflow-x-auto py-20", t),
+				ref: a,
+				children: /* @__PURE__ */ h("div", {
+					role: "tablist",
+					className: "flex flex-row",
+					style: D,
+					children: [
+						/* @__PURE__ */ m("div", {
+							ref: o,
+							className: l("shrink-0", { "w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !n })
+						}),
+						r,
+						/* @__PURE__ */ m("div", { className: l("shrink-0", { "w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !n }) })
+					]
+				})
+			}),
+			O && /* @__PURE__ */ m("div", {
+				className: "pointer-events-none absolute inset-y-0 right-0 z-10 flex items-center",
+				children: /* @__PURE__ */ m(e, {
+					icon: "ArrowDefaultRight",
+					size: "small",
+					className: l("pointer-events-auto transition-opacity duration-200 focus-visible:ring-8 focus-visible:ring-lavender/20", v ? "opacity-100" : "pointer-events-none opacity-0"),
+					onMouseDown: () => C(1),
+					onMouseUp: S,
+					onMouseLeave: S,
+					onKeyDown: E,
+					onKeyUp: w,
+					inert: !v,
+					tabIndex: v ? 0 : -1,
+					children: "Scroll tabs right"
+				})
+			})
+		]
 	});
-}, v = ({ items: t, className: r, "aria-label": i = "Select tab" }) => {
-	let o = n(), s = a();
-	return /* @__PURE__ */ f(e, {
-		value: (o === -1 ? void 0 : o)?.toString(),
+}, b = ({ items: e, className: n, "aria-label": i = "Select tab" }) => {
+	let a = r(), s = o();
+	return /* @__PURE__ */ m(t, {
+		value: (a === -1 ? void 0 : a)?.toString(),
 		onChange: (e, t) => {
 			s({
 				type: "update",
@@ -82,50 +150,50 @@ var m = ({ className: e, compacted: n = !1, selected: r, children: i }) => /* @_
 			});
 		},
 		name: i,
-		className: c(r),
-		children: t.map((e) => /* @__PURE__ */ f("option", {
+		className: l(n),
+		children: e.map((e) => /* @__PURE__ */ m("option", {
 			value: e.value,
 			children: e.label
 		}, e.value))
 	});
-}, y = ({ as: e = "h2", label: t, children: r, value: a, onSelect: m, className: h, ...g }) => {
-	let _ = d(null), v = n(), y = o(), b = i({
-		value: a,
+}, x = ({ as: e = "h2", label: t, children: n, value: i, onSelect: o, className: p, ...g }) => {
+	let _ = f(null), v = r(), y = s(), b = a({
+		value: i,
 		ref: _
-	}), x = d(v), S = d(v === a);
-	S.current = v === a;
-	let C = { "--tab-index": a };
-	u(() => {
-		x.current !== v && a === v && (_.current?.focus(), m?.({
-			value: a,
+	}), x = f(v), S = f(v === i);
+	S.current = v === i;
+	let C = { "--tab-index": i };
+	d(() => {
+		x.current !== v && i === v && (_.current?.focus(), o?.({
+			value: i,
 			label: t
 		})), x.current !== v && (x.current = v);
 	}, [
 		t,
-		a,
-		m,
+		i,
+		o,
 		v
 	]);
-	let w = s({
-		start: l(() => {
+	let w = c({
+		start: u(() => {
 			b({ type: "start" });
 		}, [b]),
-		end: l(() => {
+		end: u(() => {
 			b({ type: "end" });
 		}, [b]),
-		up: l(() => {
+		up: u(() => {
 			b({ type: "previous" });
 		}, [b]),
-		down: l(() => {
+		down: u(() => {
 			b({ type: "next" });
 		}, [b]),
-		left: l(() => {
+		left: u(() => {
 			b({ type: document.documentElement.dir === "rtl" ? "next" : "previous" });
 		}, [b]),
-		right: l(() => {
+		right: u(() => {
 			b({ type: document.documentElement.dir === "rtl" ? "previous" : "next" });
 		}, [b])
-	}), T = l((e) => {
+	}), T = u((e) => {
 		let t = e.key === " " || e.key === "Spacebar" || e.code === "Space", n = e.key === "Enter" || e.code === "Enter";
 		if (S.current && (t || n)) {
 			e.preventDefault();
@@ -135,36 +203,36 @@ var m = ({ className: e, compacted: n = !1, selected: r, children: i }) => /* @_
 	}, [w]), E = () => {
 		S.current || b({
 			type: "update",
-			payload: a
+			payload: i
 		});
 	};
-	return /* @__PURE__ */ f("div", {
+	return /* @__PURE__ */ m("div", {
 		...g,
-		id: g.id || `Tab_${a}_${y}`,
+		id: g.id || `Tab_${i}_${y}`,
 		"data-name": "Tab",
 		ref: _,
 		role: "tab",
 		"aria-selected": S.current,
-		"aria-controls": `TabPanel_${a}_${y}`,
+		"aria-controls": `TabPanel_${i}_${y}`,
 		tabIndex: S.current ? 0 : -1,
-		className: c("group text-b3 inline-block cursor-pointer overflow-hidden bg-transparent pe-4 align-middle font-semibold whitespace-nowrap outline-none", {
+		className: l("group text-b3 inline-block cursor-pointer overflow-hidden bg-transparent pe-4 align-middle font-semibold whitespace-nowrap outline-none", {
 			"text-white": S.current,
 			"text-black": !S.current,
 			"transition-transform active:scale-[1.03]": S.current
 		}),
 		onKeyDown: T,
 		onClick: E,
-		children: /* @__PURE__ */ p(e, {
-			className: c("relative inline-block px-20 py-12", "before:rounded-pill before:transition-colors/opacity before:absolute before:inset-0 before:-z-1 before:duration-300 group-focus-within:before:bg-(--color-pearl) group-hover:before:bg-(--color-pearl) group-focus:before:bg-(--color-pearl)", h),
+		children: /* @__PURE__ */ h(e, {
+			className: l("relative inline-block px-20 py-12", "before:rounded-pill before:transition-colors/opacity before:absolute before:inset-0 before:-z-1 before:duration-300 group-focus-within:before:bg-(--color-pearl) group-hover:before:bg-(--color-pearl) group-focus:before:bg-(--color-pearl)", p),
 			...S ? {} : { role: "presentation" },
-			children: [/* @__PURE__ */ f("span", {
-				className: c("tab-focus-pill ease transition-transform/colors", "rounded-pill absolute inset-0 -z-1 duration-300", "bg-black"),
+			children: [/* @__PURE__ */ m("span", {
+				className: l("tab-focus-pill ease transition-transform/colors", "rounded-pill absolute inset-0 -z-1 duration-300", "bg-black"),
 				style: C
-			}), r ?? t]
+			}), n ?? t]
 		})
 	});
 };
 //#endregion
-export { y as Tab, _ as TabList, g as TabPanel, v as TabSelect, m as Tabs, h as TabsBody };
+export { x as Tab, y as TabList, v as TabPanel, b as TabSelect, g as Tabs, _ as TabsBody };
 
 //# sourceMappingURL=Tabs.js.map

package/ui/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":[],"sources":["../../../lib/ui/tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type FunctionComponent,\n  type PropsWithChildren,\n  type RefObject,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\n\nimport { TabsProvider } from '../contexts/TabControl';\nimport {\n  useActiveTab,\n  useActiveTabControl,\n  useRegisterTabControl,\n  useTabDispatch,\n  useTabsUid,\n} from '../hooks/tabControl';\nimport { useKeyboardControls } from '../hooks/useKeyboardControls';\nimport { Select } from '../forms/Select';\nimport { cn } from '../helpers/cn';\n\ntype ProviderProps = ComponentProps<typeof TabsProvider>;\n\ninterface Props extends ProviderProps {\n  className?: string;\n  /**\n   * Shrink the spacing between tabs and panels\n   */\n  compacted?: boolean;\n}\n\nexport const Tabs: FunctionComponent<PropsWithChildren<Props>> = ({\n  className,\n  compacted = false,\n  selected,\n  children,\n}) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col',\n        {\n          'sm:gap-y-20': !compacted,\n        },\n        className,\n      )}\n      data-name=\"Tabs\"\n    >\n      <TabsProvider selected={selected}>{children}</TabsProvider>\n    </div>\n  );\n};\n\ninterface TabsBodyProps {\n  className?: string;\n}\n\nexport const TabsBody: FunctionComponent<PropsWithChildren<TabsBodyProps>> = ({\n  className,\n  children,\n}) => {\n  return (\n    <div data-name=\"TabsBody\" className={cn('grid grid-rows-1 overflow-hidden', className)}>\n      {children}\n    </div>\n  );\n};\n\ninterface TabPanelProps {\n  className?: string;\n  /**\n   * Tab panel index<br/>\n   * _Can be **0** or **1** indexed_\n   */\n  value: number;\n  /**\n   * on panel select handler\n   */\n  onSelect?: (context: { value: TabPanelProps['value'] }) => void;\n}\n\nexport const TabPanel: FunctionComponent<PropsWithChildren<TabPanelProps>> = ({\n  value,\n  className,\n  onSelect,\n  children,\n  ...attrs\n}) => {\n  const uid = useTabsUid();\n  const mounted = useRef(false);\n  const tabSelected = useActiveTab();\n  const isActive = tabSelected === value;\n\n  useEffect(() => {\n    if (!mounted.current) {\n      mounted.current = true;\n      return;\n    }\n\n    if (isActive) {\n      onSelect?.({ value });\n    }\n  }, [isActive, value, onSelect]);\n\n  return (\n    <div\n      {...attrs}\n      aria-hidden={!isActive}\n      className={cn(\n        'relative col-start-1 row-start-1 transition-opacity duration-500',\n        {\n          'pointer-events-none z-0 h-0 opacity-0': !isActive,\n          'pointer-events-auto z-1 h-auto opacity-100': isActive,\n        },\n        className,\n      )}\n      inert={isActive ? undefined : true}\n      tabIndex={isActive ? 0 : -1}\n      id={`TabPanel_${value}_${uid}`}\n      data-name={`TabPanel_${value}`}\n      role=\"tabpanel\"\n      aria-labelledby={`Tab_${value}_${uid}`}\n    >\n      {children}\n    </div>\n  );\n};\n\ninterface TabListProps {\n  className?: string;\n  /**\n   * Remove filler placeholders\n   */\n  constrained?: boolean;\n}\n\nexport const TabList: FunctionComponent<PropsWithChildren<TabListProps>> = ({\n  className,\n  constrained = false,\n  children,\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const spacerRef = useRef<HTMLDivElement>(null);\n  const [currentTab, currentControl] = useActiveTabControl();\n\n  useEffect(() => {\n    if (!currentControl?.current || !ref.current) {\n      return;\n    }\n\n    const spacerWidth = spacerRef.current!.offsetWidth ?? 0;\n    const currentRect = currentControl.current.getBoundingClientRect();\n    const containerRect = ref.current!.getBoundingClientRect();\n    const scroll = ref.current!.scrollLeft;\n\n    ref.current.scrollLeft = scroll + (currentRect.left - containerRect.left) - spacerWidth;\n  }, [currentControl]);\n\n  const style = { '--active-tab': currentTab } as CSSProperties;\n\n  return (\n    <div\n      data-name=\"TabsHeader\"\n      className={cn(\n        'scrollbar-hidden relative isolate flex max-w-full overflow-x-auto scroll-smooth py-20',\n        className,\n      )}\n      ref={ref}\n    >\n      <div role=\"tablist\" className=\"flex flex-row\" style={style}>\n        <div\n          ref={spacerRef}\n          className={cn('shrink-0', {\n            'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n              !constrained,\n          })}\n        />\n        {children}\n        <div\n          className={cn('shrink-0', {\n            'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n              !constrained,\n          })}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport interface TabSelectProps {\n  items: { label: string; value: number }[];\n  className?: string;\n  'aria-label'?: string;\n}\n\nexport const TabSelect: FunctionComponent<TabSelectProps> = ({\n  items,\n  className,\n  'aria-label': ariaLabel = 'Select tab',\n}) => {\n  const activeTab = useActiveTab();\n  const dispatch = useTabDispatch();\n\n  const handleChange = (_event: Event, value: string) => {\n    dispatch({ type: 'update', payload: Number(value) });\n  };\n\n  const selectValue = activeTab === -1 ? undefined : activeTab;\n\n  return (\n    <Select\n      value={selectValue?.toString()}\n      onChange={handleChange}\n      name={ariaLabel}\n      className={cn(className)}\n    >\n      {items.map((item) => (\n        <option key={item.value} value={item.value}>\n          {item.label}\n        </option>\n      ))}\n    </Select>\n  );\n};\n\ninterface TabProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n  /**\n   * Tab Heading text\n   */\n  label?: string;\n  /**\n   * Tab heading index<br/>\n   * _Can be **0** or **1** indexed_\n   */\n  value: number;\n  /**\n   * on tab select handler\n   */\n  onSelect?: (context: { value: TabProps['value']; label: TabProps['label'] }) => void;\n  /**\n   * Heading type\n   * _default: **h2**_\n   */\n  as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n}\n\nexport const Tab: FunctionComponent<PropsWithChildren<TabProps>> = ({\n  as: TagName = 'h2',\n  label,\n  children,\n  value,\n  onSelect,\n  className,\n  ...attr\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const activeTab = useActiveTab();\n  const uid = useTabsUid();\n  const dispatch = useRegisterTabControl({ value, ref: ref as RefObject<HTMLDivElement> });\n  const previousActiveTab = useRef(activeTab);\n\n  const isActive = useRef(activeTab === value);\n  isActive.current = activeTab === value;\n\n  const pillStyle = { '--tab-index': value } as CSSProperties;\n\n  useEffect(() => {\n    if (previousActiveTab.current !== activeTab && value === activeTab) {\n      ref.current?.focus();\n      onSelect?.({ value, label });\n    }\n    if (previousActiveTab.current !== activeTab) {\n      previousActiveTab.current = activeTab;\n    }\n  }, [label, value, onSelect, activeTab]);\n\n  const start = useCallback(() => {\n    dispatch({ type: 'start' });\n  }, [dispatch]);\n\n  const end = useCallback(() => {\n    dispatch({ type: 'end' });\n  }, [dispatch]);\n\n  const up = useCallback(() => {\n    dispatch({ type: 'previous' });\n  }, [dispatch]);\n\n  const down = useCallback(() => {\n    dispatch({ type: 'next' });\n  }, [dispatch]);\n\n  const left = useCallback(() => {\n    const isRTL = document.documentElement.dir === 'rtl';\n\n    dispatch({ type: isRTL ? 'next' : 'previous' });\n  }, [dispatch]);\n\n  const right = useCallback(() => {\n    const isRTL = document.documentElement.dir === 'rtl';\n\n    dispatch({ type: isRTL ? 'previous' : 'next' });\n  }, [dispatch]);\n\n  const keyboardHandler = useKeyboardControls({\n    start,\n    end,\n    up,\n    down,\n    left,\n    right,\n  });\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const isSpace = e.key === ' ' || e.key === 'Spacebar' || e.code === 'Space';\n      const isEnter = e.key === 'Enter' || e.code === 'Enter';\n\n      if (isActive.current && (isSpace || isEnter)) {\n        e.preventDefault();\n        return;\n      }\n\n      keyboardHandler(e);\n    },\n    [keyboardHandler],\n  );\n\n  const handleClick = () => {\n    if (isActive.current) {\n      return;\n    }\n\n    dispatch({ type: 'update', payload: value });\n  };\n\n  return (\n    <div\n      {...attr}\n      id={attr.id || `Tab_${value}_${uid}`}\n      data-name=\"Tab\"\n      ref={ref}\n      role=\"tab\"\n      aria-selected={isActive.current}\n      aria-controls={`TabPanel_${value}_${uid}`}\n      tabIndex={isActive.current ? 0 : -1}\n      className={cn(\n        'group text-b3 inline-block cursor-pointer overflow-hidden bg-transparent pe-4 align-middle font-semibold whitespace-nowrap outline-none',\n        {\n          'text-white': isActive.current,\n          'text-black': !isActive.current,\n          'transition-transform active:scale-[1.03]': isActive.current,\n        },\n      )}\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n    >\n      <TagName\n        className={cn(\n          'relative inline-block px-20 py-12',\n          'before:rounded-pill before:transition-colors/opacity before:absolute before:inset-0 before:-z-1 before:duration-300 group-focus-within:before:bg-(--color-pearl) group-hover:before:bg-(--color-pearl) group-focus:before:bg-(--color-pearl)',\n          className,\n        )}\n        {...(!isActive ? { role: 'presentation' } : {})}\n      >\n        <span\n          className={cn(\n            'tab-focus-pill ease transition-transform/colors',\n            'rounded-pill absolute inset-0 -z-1 duration-300',\n            'bg-black',\n          )}\n          style={pillStyle}\n        />\n        {children ?? label}\n      </TagName>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../../lib/ui/tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type FunctionComponent,\n  type PropsWithChildren,\n  type RefObject,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { TabsProvider } from '../contexts/TabControl';\nimport {\n  useActiveTab,\n  useActiveTabControl,\n  useRegisterTabControl,\n  useTabDispatch,\n  useTabsUid,\n} from '../hooks/tabControl';\nimport { useKeyboardControls } from '../hooks/useKeyboardControls';\nimport { Select } from '../forms/Select';\nimport { cn } from '../helpers/cn';\nimport { ArrowButton } from '../buttons/ArrowButton';\n\ntype ProviderProps = ComponentProps<typeof TabsProvider>;\n\ninterface Props extends ProviderProps {\n  className?: string;\n  /**\n   * Shrink the spacing between tabs and panels\n   */\n  compacted?: boolean;\n}\n\nexport const Tabs: FunctionComponent<PropsWithChildren<Props>> = ({\n  className,\n  compacted = false,\n  selected,\n  children,\n}) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col',\n        {\n          'sm:gap-y-20': !compacted,\n        },\n        className,\n      )}\n      data-name=\"Tabs\"\n    >\n      <TabsProvider selected={selected}>{children}</TabsProvider>\n    </div>\n  );\n};\n\ninterface TabsBodyProps {\n  className?: string;\n}\n\nexport const TabsBody: FunctionComponent<PropsWithChildren<TabsBodyProps>> = ({\n  className,\n  children,\n}) => {\n  return (\n    <div data-name=\"TabsBody\" className={cn('grid grid-rows-1 overflow-hidden', className)}>\n      {children}\n    </div>\n  );\n};\n\ninterface TabPanelProps {\n  className?: string;\n  /**\n   * Tab panel index<br/>\n   * _Can be **0** or **1** indexed_\n   */\n  value: number;\n  /**\n   * on panel select handler\n   */\n  onSelect?: (context: { value: TabPanelProps['value'] }) => void;\n}\n\nexport const TabPanel: FunctionComponent<PropsWithChildren<TabPanelProps>> = ({\n  value,\n  className,\n  onSelect,\n  children,\n  ...attrs\n}) => {\n  const uid = useTabsUid();\n  const mounted = useRef(false);\n  const tabSelected = useActiveTab();\n  const isActive = tabSelected === value;\n\n  useEffect(() => {\n    if (!mounted.current) {\n      mounted.current = true;\n      return;\n    }\n\n    if (isActive) {\n      onSelect?.({ value });\n    }\n  }, [isActive, value, onSelect]);\n\n  return (\n    <div\n      {...attrs}\n      aria-hidden={!isActive}\n      className={cn(\n        'relative col-start-1 row-start-1 transition-opacity duration-500',\n        {\n          'pointer-events-none z-0 h-0 opacity-0': !isActive,\n          'pointer-events-auto z-1 h-auto opacity-100': isActive,\n        },\n        className,\n      )}\n      inert={isActive ? undefined : true}\n      tabIndex={isActive ? 0 : -1}\n      id={`TabPanel_${value}_${uid}`}\n      data-name={`TabPanel_${value}`}\n      role=\"tabpanel\"\n      aria-labelledby={`Tab_${value}_${uid}`}\n    >\n      {children}\n    </div>\n  );\n};\n\ninterface TabListProps {\n  className?: string;\n  /**\n   * Remove filler placeholders\n   */\n  constrained?: boolean;\n}\n\nexport const TabList: FunctionComponent<PropsWithChildren<TabListProps>> = ({\n  className,\n  constrained = false,\n  children,\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const spacerRef = useRef<HTMLDivElement>(null);\n  const [currentTab, currentControl] = useActiveTabControl();\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n\n  const updateScrollState = useCallback(() => {\n    const el = ref.current;\n    if (!el) return;\n    setCanScrollLeft(el.scrollLeft > 0);\n    setCanScrollRight(Math.ceil(el.scrollLeft) < el.scrollWidth - el.clientWidth);\n  }, []);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    updateScrollState();\n\n    const observer = new ResizeObserver(updateScrollState);\n    observer.observe(el);\n    el.addEventListener('scroll', updateScrollState, { passive: true });\n\n    return () => {\n      observer.disconnect();\n      el.removeEventListener('scroll', updateScrollState);\n    };\n  }, [updateScrollState]);\n\n  useEffect(() => {\n    if (!currentControl?.current || !ref.current) {\n      return;\n    }\n\n    const spacerWidth = spacerRef.current!.offsetWidth ?? 0;\n    const currentRect = currentControl.current.getBoundingClientRect();\n    const containerRect = ref.current!.getBoundingClientRect();\n\n    ref.current.scrollBy({\n      left: currentRect.left - containerRect.left - spacerWidth,\n      behavior: 'smooth',\n    });\n  }, [currentControl]);\n\n  const scrollRafRef = useRef<number | null>(null);\n\n  const stopScroll = useCallback(() => {\n    if (scrollRafRef.current !== null) {\n      cancelAnimationFrame(scrollRafRef.current);\n      scrollRafRef.current = null;\n    }\n  }, []);\n\n  const startScroll = useCallback((direction: -1 | 1) => {\n    if (scrollRafRef.current !== null) return;\n    const step = () => {\n      ref.current?.scrollBy({ left: direction * 6 });\n      scrollRafRef.current = requestAnimationFrame(step);\n    };\n    scrollRafRef.current = requestAnimationFrame(step);\n  }, []);\n\n  const handleScrollKeyUp = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      if (e.key === ' ' || e.key === 'Enter') stopScroll();\n    },\n    [stopScroll],\n  );\n\n  const handleScrollLeftKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      if (e.key === ' ' || e.key === 'Enter') {\n        e.preventDefault();\n        startScroll(-1);\n      }\n    },\n    [startScroll],\n  );\n\n  const handleScrollRightKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      if (e.key === ' ' || e.key === 'Enter') {\n        e.preventDefault();\n        startScroll(1);\n      }\n    },\n    [startScroll],\n  );\n\n  useEffect(() => stopScroll, [stopScroll]);\n\n  const style = { '--active-tab': currentTab } as CSSProperties;\n  const isScrollable = canScrollLeft || canScrollRight;\n\n  return (\n    <div className=\"relative\" data-name=\"TabsHeader\">\n      {isScrollable && (\n        <div className=\"pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center\">\n          <ArrowButton\n            icon=\"ArrowDefaultLeft\"\n            size=\"small\"\n            className={cn(\n              'pointer-events-auto transition-opacity duration-200 focus-visible:ring-8 focus-visible:ring-lavender/20',\n              canScrollLeft ? 'opacity-100' : 'pointer-events-none opacity-0',\n            )}\n            onMouseDown={() => startScroll(-1)}\n            onMouseUp={stopScroll}\n            onMouseLeave={stopScroll}\n            onKeyDown={handleScrollLeftKeyDown}\n            onKeyUp={handleScrollKeyUp}\n            inert={!canScrollLeft}\n            tabIndex={canScrollLeft ? 0 : -1}\n          >\n            Scroll tabs left\n          </ArrowButton>\n        </div>\n      )}\n      <div\n        className={cn(\n          'scrollbar-hidden relative isolate flex max-w-full overflow-x-auto py-20',\n          className,\n        )}\n        ref={ref}\n      >\n        <div role=\"tablist\" className=\"flex flex-row\" style={style}>\n          <div\n            ref={spacerRef}\n            className={cn('shrink-0', {\n              'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n                !constrained,\n            })}\n          />\n          {children}\n          <div\n            className={cn('shrink-0', {\n              'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n                !constrained,\n            })}\n          />\n        </div>\n      </div>\n      {isScrollable && (\n        <div className=\"pointer-events-none absolute inset-y-0 right-0 z-10 flex items-center\">\n          <ArrowButton\n            icon=\"ArrowDefaultRight\"\n            size=\"small\"\n            className={cn(\n              'pointer-events-auto transition-opacity duration-200 focus-visible:ring-8 focus-visible:ring-lavender/20',\n              canScrollRight ? 'opacity-100' : 'pointer-events-none opacity-0',\n            )}\n            onMouseDown={() => startScroll(1)}\n            onMouseUp={stopScroll}\n            onMouseLeave={stopScroll}\n            onKeyDown={handleScrollRightKeyDown}\n            onKeyUp={handleScrollKeyUp}\n            inert={!canScrollRight}\n            tabIndex={canScrollRight ? 0 : -1}\n          >\n            Scroll tabs right\n          </ArrowButton>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport interface TabSelectProps {\n  items: { label: string; value: number }[];\n  className?: string;\n  'aria-label'?: string;\n}\n\nexport const TabSelect: FunctionComponent<TabSelectProps> = ({\n  items,\n  className,\n  'aria-label': ariaLabel = 'Select tab',\n}) => {\n  const activeTab = useActiveTab();\n  const dispatch = useTabDispatch();\n\n  const handleChange = (_event: Event, value: string) => {\n    dispatch({ type: 'update', payload: Number(value) });\n  };\n\n  const selectValue = activeTab === -1 ? undefined : activeTab;\n\n  return (\n    <Select\n      value={selectValue?.toString()}\n      onChange={handleChange}\n      name={ariaLabel}\n      className={cn(className)}\n    >\n      {items.map((item) => (\n        <option key={item.value} value={item.value}>\n          {item.label}\n        </option>\n      ))}\n    </Select>\n  );\n};\n\ninterface TabProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n  /**\n   * Tab Heading text\n   */\n  label?: string;\n  /**\n   * Tab heading index<br/>\n   * _Can be **0** or **1** indexed_\n   */\n  value: number;\n  /**\n   * on tab select handler\n   */\n  onSelect?: (context: { value: TabProps['value']; label: TabProps['label'] }) => void;\n  /**\n   * Heading type\n   * _default: **h2**_\n   */\n  as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n}\n\nexport const Tab: FunctionComponent<PropsWithChildren<TabProps>> = ({\n  as: TagName = 'h2',\n  label,\n  children,\n  value,\n  onSelect,\n  className,\n  ...attr\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const activeTab = useActiveTab();\n  const uid = useTabsUid();\n  const dispatch = useRegisterTabControl({ value, ref: ref as RefObject<HTMLDivElement> });\n  const previousActiveTab = useRef(activeTab);\n\n  const isActive = useRef(activeTab === value);\n  isActive.current = activeTab === value;\n\n  const pillStyle = { '--tab-index': value } as CSSProperties;\n\n  useEffect(() => {\n    if (previousActiveTab.current !== activeTab && value === activeTab) {\n      ref.current?.focus();\n      onSelect?.({ value, label });\n    }\n    if (previousActiveTab.current !== activeTab) {\n      previousActiveTab.current = activeTab;\n    }\n  }, [label, value, onSelect, activeTab]);\n\n  const start = useCallback(() => {\n    dispatch({ type: 'start' });\n  }, [dispatch]);\n\n  const end = useCallback(() => {\n    dispatch({ type: 'end' });\n  }, [dispatch]);\n\n  const up = useCallback(() => {\n    dispatch({ type: 'previous' });\n  }, [dispatch]);\n\n  const down = useCallback(() => {\n    dispatch({ type: 'next' });\n  }, [dispatch]);\n\n  const left = useCallback(() => {\n    const isRTL = document.documentElement.dir === 'rtl';\n\n    dispatch({ type: isRTL ? 'next' : 'previous' });\n  }, [dispatch]);\n\n  const right = useCallback(() => {\n    const isRTL = document.documentElement.dir === 'rtl';\n\n    dispatch({ type: isRTL ? 'previous' : 'next' });\n  }, [dispatch]);\n\n  const keyboardHandler = useKeyboardControls({\n    start,\n    end,\n    up,\n    down,\n    left,\n    right,\n  });\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const isSpace = e.key === ' ' || e.key === 'Spacebar' || e.code === 'Space';\n      const isEnter = e.key === 'Enter' || e.code === 'Enter';\n\n      if (isActive.current && (isSpace || isEnter)) {\n        e.preventDefault();\n        return;\n      }\n\n      keyboardHandler(e);\n    },\n    [keyboardHandler],\n  );\n\n  const handleClick = () => {\n    if (isActive.current) {\n      return;\n    }\n\n    dispatch({ type: 'update', payload: value });\n  };\n\n  return (\n    <div\n      {...attr}\n      id={attr.id || `Tab_${value}_${uid}`}\n      data-name=\"Tab\"\n      ref={ref}\n      role=\"tab\"\n      aria-selected={isActive.current}\n      aria-controls={`TabPanel_${value}_${uid}`}\n      tabIndex={isActive.current ? 0 : -1}\n      className={cn(\n        'group text-b3 inline-block cursor-pointer overflow-hidden bg-transparent pe-4 align-middle font-semibold whitespace-nowrap outline-none',\n        {\n          'text-white': isActive.current,\n          'text-black': !isActive.current,\n          'transition-transform active:scale-[1.03]': isActive.current,\n        },\n      )}\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n    >\n      <TagName\n        className={cn(\n          'relative inline-block px-20 py-12',\n          'before:rounded-pill before:transition-colors/opacity before:absolute before:inset-0 before:-z-1 before:duration-300 group-focus-within:before:bg-(--color-pearl) group-hover:before:bg-(--color-pearl) group-focus:before:bg-(--color-pearl)',\n          className,\n        )}\n        {...(!isActive ? { role: 'presentation' } : {})}\n      >\n        <span\n          className={cn(\n            'tab-focus-pill ease transition-transform/colors',\n            'rounded-pill absolute inset-0 -z-1 duration-300',\n            'bg-black',\n          )}\n          style={pillStyle}\n        />\n        {children ?? label}\n      </TagName>\n    </div>\n  );\n};\n"],"mappings":"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"}