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

package/examples/tabs-with-select-demo.js

@@ -22,6 +22,7 @@ function c() {
 		selected: 1,
 		children: [
 			/* @__PURE__ */ o(r, {
+				"aria-label": "Choose a tab",
 				className: "md:hidden w-full",
 				items: c
 			}),

package/examples/tabs-with-select-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-with-select-demo.js","names":[],"sources":["../../lib/examples/tabs-with-select-demo.tsx"],"sourcesContent":["import { Tab, TabList, TabPanel, Tabs, TabsBody, TabSelect } from '../ui/tabs/Tabs';\n\nexport default function TabsWithSelectDemo() {\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 className=\"w-full\" selected={1}>\n      <TabSelect className=\"md:hidden w-full\" items={tabs} />\n      <TabList className=\"hidden md:flex\">\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,IAAqB;CAC3C,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,WAAU;EAAS,UAAU;YAAnC;GACE,kBAAC,GAAD;IAAW,WAAU;IAAmB,OAAO;IAAQ,CAAA;GACvD,kBAAC,GAAD;IAAS,WAAU;cAChB,EAAK,KAAK,MACF,kBAAC,GAAD;KAAqB,OAAO,SAAS,EAAI;KAAS,OAAO,EAAI;KAAS,EAA5D,EAAI,MAAwD,CAC7E;IACM,CAAA;GACV,kBAAC,GAAD,EAAA,UACG,EAAK,KAAK,MAEP,kBAAC,GAAD;IAA0B,OAAO,EAAI;cACnC,kBAAC,OAAD;KAAK,WAAW,QAAQ,EAAI,EAAI,MAAM;eAAtC,CAA0C,YAAS,EAAI,MAAY;;IAC1D,EAFI,EAAI,MAER,CAEb,EACO,CAAA;GACN"}
+{"version":3,"file":"tabs-with-select-demo.js","names":[],"sources":["../../lib/examples/tabs-with-select-demo.tsx"],"sourcesContent":["import { Tab, TabList, TabPanel, Tabs, TabsBody, TabSelect } from '../ui/tabs/Tabs';\n\nexport default function TabsWithSelectDemo() {\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 className=\"w-full\" selected={1}>\n      <TabSelect aria-label=\"Choose a tab\" className=\"md:hidden w-full\" items={tabs} />\n      <TabList className=\"hidden md:flex\">\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,IAAqB;CAC3C,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,WAAU;EAAS,UAAU;YAAnC;GACE,kBAAC,GAAD;IAAW,cAAW;IAAe,WAAU;IAAmB,OAAO;IAAQ,CAAA;GACjF,kBAAC,GAAD;IAAS,WAAU;cAChB,EAAK,KAAK,MACF,kBAAC,GAAD;KAAqB,OAAO,SAAS,EAAI;KAAS,OAAO,EAAI;KAAS,EAA5D,EAAI,MAAwD,CAC7E;IACM,CAAA;GACV,kBAAC,GAAD,EAAA,UACG,EAAK,KAAK,MAEP,kBAAC,GAAD;IAA0B,OAAO,EAAI;cACnC,kBAAC,OAAD;KAAK,WAAW,QAAQ,EAAI,EAAI,MAAM;eAAtC,CAA0C,YAAS,EAAI,MAAY;;IAC1D,EAFI,EAAI,MAER,CAEb,EACO,CAAA;GACN"}

package/examples/text-field-demo.js

@@ -7,12 +7,14 @@ function r() {
 		className: "flex flex-col gap-16",
 		children: [
 			/* @__PURE__ */ t(e, {
+				name: "email",
 				label: "Email Address",
 				description: "Enter your email address",
 				placeholder: "you@example.com",
 				className: "max-w-sm"
 			}),
 			/* @__PURE__ */ t(e, {
+				name: "disabled",
 				label: "Disabled",
 				description: "This field is disabled",
 				placeholder: "Disabled input",
@@ -20,6 +22,7 @@ function r() {
 				className: "max-w-sm"
 			}),
 			/* @__PURE__ */ t(e, {
+				name: "search",
 				label: "With Icon",
 				description: "This field has an icon",
 				placeholder: "Search...",
@@ -28,14 +31,17 @@ function r() {
 				validationStatus: "success"
 			}),
 			/* @__PURE__ */ t(e, {
+				name: "error",
 				label: "Error",
 				description: "This field has an error message",
 				placeholder: "Enter your text",
 				className: "max-w-sm",
+				clear: "eke",
 				validationStatus: "error",
 				errorMessage: "This is an error message"
 			}),
 			/* @__PURE__ */ t(e, {
+				name: "success",
 				label: "Success",
 				description: "This field has a success message",
 				placeholder: "Enter your text",

package/examples/text-field-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field-demo.js","names":[],"sources":["../../lib/examples/text-field-demo.tsx"],"sourcesContent":["'use client';\n\nimport { TextField } from '@/ui/forms/TextField';\n\nexport default function TextFieldDemo() {\n  return (\n    <div className=\"flex flex-col gap-16\">\n      <TextField\n        label=\"Email Address\"\n        description=\"Enter your email address\"\n        placeholder=\"you@example.com\"\n        className=\"max-w-sm\"\n      />\n      <TextField\n        label=\"Disabled\"\n        description=\"This field is disabled\"\n        placeholder=\"Disabled input\"\n        disabled\n        className=\"max-w-sm\"\n      />\n      <TextField\n        label=\"With Icon\"\n        description=\"This field has an icon\"\n        placeholder=\"Search...\"\n        icon=\"PeopleSingle\"\n        className=\"max-w-sm\"\n        validationStatus=\"success\"\n      />\n      <TextField\n        label=\"Error\"\n        description=\"This field has an error message\"\n        placeholder=\"Enter your text\"\n        className=\"max-w-sm\"\n        validationStatus=\"error\"\n        errorMessage=\"This is an error message\"\n      />\n      <TextField\n        label=\"Success\"\n        description=\"This field has a success message\"\n        placeholder=\"Enter your text\"\n        className=\"max-w-sm\"\n        validationStatus=\"success\"\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAgB;AACtC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IACE,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,WAAU;IACV,CAAA;GACF,kBAAC,GAAD;IACE,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,UAAA;IACA,WAAU;IACV,CAAA;GACF,kBAAC,GAAD;IACE,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,MAAK;IACL,WAAU;IACV,kBAAiB;IACjB,CAAA;GACF,kBAAC,GAAD;IACE,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,WAAU;IACV,kBAAiB;IACjB,cAAa;IACb,CAAA;GACF,kBAAC,GAAD;IACE,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,WAAU;IACV,kBAAiB;IACjB,CAAA"}
+{"version":3,"file":"text-field-demo.js","names":[],"sources":["../../lib/examples/text-field-demo.tsx"],"sourcesContent":["'use client';\n\nimport { TextField } from '@/ui/forms/TextField';\n\nexport default function TextFieldDemo() {\n  return (\n    <div className=\"flex flex-col gap-16\">\n      <TextField\n        name=\"email\"\n        label=\"Email Address\"\n        description=\"Enter your email address\"\n        placeholder=\"you@example.com\"\n        className=\"max-w-sm\"\n      />\n      <TextField\n        name=\"disabled\"\n        label=\"Disabled\"\n        description=\"This field is disabled\"\n        placeholder=\"Disabled input\"\n        disabled\n        className=\"max-w-sm\"\n      />\n      <TextField\n        name=\"search\"\n        label=\"With Icon\"\n        description=\"This field has an icon\"\n        placeholder=\"Search...\"\n        icon=\"PeopleSingle\"\n        className=\"max-w-sm\"\n        validationStatus=\"success\"\n      />\n      <TextField\n        name=\"error\"\n        label=\"Error\"\n        description=\"This field has an error message\"\n        placeholder=\"Enter your text\"\n        className=\"max-w-sm\"\n        clear=\"eke\"\n        validationStatus=\"error\"\n        errorMessage=\"This is an error message\"\n      />\n      <TextField\n        name=\"success\"\n        label=\"Success\"\n        description=\"This field has a success message\"\n        placeholder=\"Enter your text\"\n        className=\"max-w-sm\"\n        validationStatus=\"success\"\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAgB;AACtC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IACE,MAAK;IACL,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,WAAU;IACV,CAAA;GACF,kBAAC,GAAD;IACE,MAAK;IACL,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,UAAA;IACA,WAAU;IACV,CAAA;GACF,kBAAC,GAAD;IACE,MAAK;IACL,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,MAAK;IACL,WAAU;IACV,kBAAiB;IACjB,CAAA;GACF,kBAAC,GAAD;IACE,MAAK;IACL,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,WAAU;IACV,OAAM;IACN,kBAAiB;IACjB,cAAa;IACb,CAAA;GACF,kBAAC,GAAD;IACE,MAAK;IACL,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,WAAU;IACV,kBAAiB;IACjB,CAAA"}

package/examples/toggle-demo.d.ts

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

package/examples/toggle-demo.js

@@ -0,0 +1,44 @@
+"use client";
+import { Toggle as e } from "../ui/Toggle.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region lib/examples/toggle-demo.tsx
+function i() {
+	let [i, a] = t(0), o = [
+		"Our selection",
+		"Exclusive Collection",
+		"Safari"
+	];
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-16",
+		children: [/* @__PURE__ */ n(e, {
+			"aria-label": "Choose a collection",
+			items: [
+				{
+					color: "saffron",
+					label: "Our selection",
+					id: "id1"
+				},
+				{
+					color: "ultramarine",
+					label: "Exclusive Collection",
+					id: "id2"
+				},
+				{
+					color: "sienna",
+					label: "Safari",
+					id: "id3"
+				}
+			],
+			index: i,
+			onClick: a
+		}), /* @__PURE__ */ r("p", {
+			className: "text-b3",
+			children: ["Active: ", o[i]]
+		})]
+	});
+}
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=toggle-demo.js.map

package/examples/toggle-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-demo.js","names":[],"sources":["../../lib/examples/toggle-demo.tsx"],"sourcesContent":["'use client';\nimport { useState } from 'react';\n\nimport { Toggle } from '@/ui/Toggle';\n\nexport default function ToggleDemo() {\n  const [active, setActive] = useState(0);\n  const labels = ['Our selection', 'Exclusive Collection', 'Safari'];\n\n  return (\n    <div className=\"space-y-16\">\n      <Toggle\n        aria-label=\"Choose a collection\"\n        items={[\n          { color: 'saffron', label: 'Our selection', id: 'id1' },\n          { color: 'ultramarine', label: 'Exclusive Collection', id: 'id2' },\n          { color: 'sienna', label: 'Safari', id: 'id3' },\n        ]}\n        index={active}\n        onClick={setActive}\n      />\n      <p className=\"text-b3\">Active: {labels[active]}</p>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAa;CACnC,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAE,EACjC,IAAS;EAAC;EAAiB;EAAwB;EAAS;AAElE,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GACE,cAAW;GACX,OAAO;IACL;KAAE,OAAO;KAAW,OAAO;KAAiB,IAAI;KAAO;IACvD;KAAE,OAAO;KAAe,OAAO;KAAwB,IAAI;KAAO;IAClE;KAAE,OAAO;KAAU,OAAO;KAAU,IAAI;;IACzC;GACD,OAAO;GACP,SAAS;GACT,CAAA,EACF,kBAAC,KAAD;GAAG,WAAU;aAAb,CAAuB,YAAS,EAAO,GAAA"}

package/examples/toggle-small-demo.d.ts

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

package/examples/toggle-small-demo.js

@@ -0,0 +1,33 @@
+"use client";
+import { Toggle as e } from "../ui/Toggle.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region lib/examples/toggle-small-demo.tsx
+function i() {
+	let [i, a] = t(0), o = ["Year", "Month"];
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-16",
+		children: [/* @__PURE__ */ n(e, {
+			"aria-label": "Choose a period",
+			size: "small",
+			items: [{
+				color: "saffron",
+				label: "Year",
+				id: "id1"
+			}, {
+				color: "saffron",
+				label: "Month",
+				id: "id2"
+			}],
+			index: i,
+			onClick: a
+		}), /* @__PURE__ */ r("p", {
+			className: "text-b3",
+			children: ["Active: ", o[i]]
+		})]
+	});
+}
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=toggle-small-demo.js.map

package/examples/toggle-small-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-small-demo.js","names":[],"sources":["../../lib/examples/toggle-small-demo.tsx"],"sourcesContent":["'use client';\nimport { useState } from 'react';\n\nimport { Toggle } from '@/ui/Toggle';\n\nexport default function ToggleSmallDemo() {\n  const [active, setActive] = useState(0);\n  const labels = ['Year', 'Month'];\n\n  return (\n    <div className=\"space-y-16\">\n      <Toggle\n        aria-label=\"Choose a period\"\n        size=\"small\"\n        items={[\n          { color: 'saffron', label: 'Year', id: 'id1' },\n          { color: 'saffron', label: 'Month', id: 'id2' },\n        ]}\n        index={active}\n        onClick={setActive}\n      />\n      <p className=\"text-b3\">Active: {labels[active]}</p>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAkB;CACxC,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAE,EACjC,IAAS,CAAC,QAAQ,QAAQ;AAEhC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GACE,cAAW;GACX,MAAK;GACL,OAAO,CACL;IAAE,OAAO;IAAW,OAAO;IAAQ,IAAI;IAAO,EAC9C;IAAE,OAAO;IAAW,OAAO;IAAS,IAAI;IAAO,CAChD;GACD,OAAO;GACP,SAAS;GACT,CAAA,EACF,kBAAC,KAAD;GAAG,WAAU;aAAb,CAAuB,YAAS,EAAO,GAAA"}

package/examples/tooltip-demo.d.ts

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

package/examples/tooltip-demo.js

@@ -0,0 +1,103 @@
+"use client";
+import { Clickable as e } from "../ui/Clickable.js";
+import { i as t, n, r, t as i } from "../chunks/Tooltip.js";
+import { useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region lib/examples/tooltip-demo.tsx
+function c() {
+	let [c, l] = a(!1);
+	return /* @__PURE__ */ o("div", {
+		className: "flex flex-col gap-24 h-300",
+		children: /* @__PURE__ */ s(r, { children: [
+			"DARK MODE",
+			/* @__PURE__ */ s("div", {
+				className: "flex gap-48 items-center",
+				children: [
+					/* @__PURE__ */ s(i, { children: [/* @__PURE__ */ o(t, {
+						className: "underline decoration-dashed cursor-help",
+						children: "Hover me"
+					}), /* @__PURE__ */ o(n, { children: "This is a helpful tooltip" })] }),
+					/* @__PURE__ */ s(i, {
+						open: c,
+						children: [/* @__PURE__ */ o(t, { render: /* @__PURE__ */ o(e, {
+							className: "rounded-lg border-2 border-dashed border-gray-300 p-6 text-center hover:border-gray-400 hover:bg-gray-50",
+							onClick: () => l(!c),
+							children: "Click me"
+						}) }), /* @__PURE__ */ o(n, { children: "This tooltip opens on click" })]
+					}),
+					/* @__PURE__ */ s(i, {
+						open: !0,
+						children: [/* @__PURE__ */ o(t, {
+							className: "underline decoration-dashed cursor-help",
+							children: "Always open"
+						}), /* @__PURE__ */ o(n, { children: "This tooltip is always open" })]
+					})
+				]
+			}),
+			"LIGHT MODE",
+			/* @__PURE__ */ s("div", {
+				className: "flex gap-48 items-center",
+				children: [
+					/* @__PURE__ */ s(i, { children: [/* @__PURE__ */ o(t, {
+						className: "underline decoration-dashed cursor-help",
+						children: "Hover me"
+					}), /* @__PURE__ */ o(n, {
+						theme: "light",
+						children: "This is a helpful tooltip"
+					})] }),
+					/* @__PURE__ */ s(i, {
+						open: c,
+						children: [/* @__PURE__ */ o(t, { render: /* @__PURE__ */ o(e, {
+							className: "rounded-lg border-2 border-dashed border-gray-300 p-6 text-center hover:border-gray-400 hover:bg-gray-50",
+							onClick: () => l(!c),
+							children: "Click me"
+						}) }), /* @__PURE__ */ o(n, {
+							theme: "light",
+							children: "This tooltip opens on click"
+						})]
+					}),
+					/* @__PURE__ */ s(i, {
+						open: !0,
+						children: [/* @__PURE__ */ o(t, {
+							className: "underline decoration-dashed cursor-help",
+							children: "Always open"
+						}), /* @__PURE__ */ o(n, {
+							theme: "light",
+							children: "This tooltip is always open"
+						})]
+					})
+				]
+			}),
+			"POSITIONS",
+			/* @__PURE__ */ o("div", {
+				className: "flex gap-48 items-center",
+				children: /* @__PURE__ */ s(i, { children: [
+					/* @__PURE__ */ o(t, {
+						className: "underline decoration-dashed cursor-help",
+						children: "Hover me"
+					}),
+					/* @__PURE__ */ o(n, {
+						side: "top",
+						children: "This tooltip is on the top"
+					}),
+					/* @__PURE__ */ o(n, {
+						side: "bottom",
+						children: "This tooltip is on the bottom"
+					}),
+					/* @__PURE__ */ o(n, {
+						side: "right",
+						children: "This tooltip is on the right"
+					}),
+					/* @__PURE__ */ o(n, {
+						side: "left",
+						children: "This tooltip is on the left"
+					})
+				] })
+			})
+		] })
+	});
+}
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=tooltip-demo.js.map

package/examples/tooltip-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-demo.js","names":[],"sources":["../../lib/examples/tooltip-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/ui/Tooltip';\nimport { Clickable } from '@/ui/Clickable';\n\nexport default function TooltipDemo() {\n  const [clickTooltipOpen, setClickTooltipOpen] = useState(false);\n\n  return (\n    <div className=\"flex flex-col gap-24 h-300\">\n      <TooltipProvider>\n        DARK MODE\n        <div className=\"flex gap-48 items-center\">\n          <Tooltip>\n            <TooltipTrigger className=\"underline decoration-dashed cursor-help\">\n              Hover me\n            </TooltipTrigger>\n            <TooltipContent>This is a helpful tooltip</TooltipContent>\n          </Tooltip>\n\n          <Tooltip open={clickTooltipOpen}>\n            <TooltipTrigger\n              render={\n                <Clickable\n                  className=\"rounded-lg border-2 border-dashed border-gray-300 p-6 text-center hover:border-gray-400 hover:bg-gray-50\"\n                  onClick={() => setClickTooltipOpen(!clickTooltipOpen)}\n                >\n                  Click me\n                </Clickable>\n              }\n            ></TooltipTrigger>\n            <TooltipContent>This tooltip opens on click</TooltipContent>\n          </Tooltip>\n\n          {/* Always open */}\n          <Tooltip open>\n            <TooltipTrigger className=\"underline decoration-dashed cursor-help\">\n              Always open\n            </TooltipTrigger>\n            <TooltipContent>This tooltip is always open</TooltipContent>\n          </Tooltip>\n        </div>\n        LIGHT MODE\n        <div className=\"flex gap-48 items-center\">\n          <Tooltip>\n            <TooltipTrigger className=\"underline decoration-dashed cursor-help\">\n              Hover me\n            </TooltipTrigger>\n            <TooltipContent theme=\"light\">This is a helpful tooltip</TooltipContent>\n          </Tooltip>\n\n          <Tooltip open={clickTooltipOpen}>\n            <TooltipTrigger\n              render={\n                <Clickable\n                  className=\"rounded-lg border-2 border-dashed border-gray-300 p-6 text-center hover:border-gray-400 hover:bg-gray-50\"\n                  onClick={() => setClickTooltipOpen(!clickTooltipOpen)}\n                >\n                  Click me\n                </Clickable>\n              }\n            ></TooltipTrigger>\n            <TooltipContent theme=\"light\">This tooltip opens on click</TooltipContent>\n          </Tooltip>\n\n          {/* Always open */}\n          <Tooltip open>\n            <TooltipTrigger className=\"underline decoration-dashed cursor-help\">\n              Always open\n            </TooltipTrigger>\n            <TooltipContent theme=\"light\">This tooltip is always open</TooltipContent>\n          </Tooltip>\n        </div>\n        POSITIONS\n        <div className=\"flex gap-48 items-center\">\n          <Tooltip>\n            <TooltipTrigger className=\"underline decoration-dashed cursor-help\">\n              Hover me\n            </TooltipTrigger>\n            <TooltipContent side=\"top\">This tooltip is on the top</TooltipContent>\n            <TooltipContent side=\"bottom\">This tooltip is on the bottom</TooltipContent>\n            <TooltipContent side=\"right\">This tooltip is on the right</TooltipContent>\n            <TooltipContent side=\"left\">This tooltip is on the left</TooltipContent>\n          </Tooltip>\n        </div>\n      </TooltipProvider>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAc;CACpC,IAAM,CAAC,GAAkB,KAAuB,EAAS,GAAM;AAE/D,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD,EAAA,UAAA;GAAiB;GAEf,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;MAAgB,WAAU;gBAA0C;MAEnD,CAAA,EACjB,kBAAC,GAAD,EAAA,UAAgB,6BAA0C,CAAA,CAClD,EAAA,CAAA;KAEV,kBAAC,GAAD;MAAS,MAAM;gBAAf,CACE,kBAAC,GAAD,EACE,QACE,kBAAC,GAAD;OACE,WAAU;OACV,eAAe,EAAoB,CAAC,EAAiB;iBACtD;OAEW,CAAA,EAEE,CAAA,EAClB,kBAAC,GAAD,EAAA,UAAgB,+BAA4C,CAAA,CAAA;;KAI9D,kBAAC,GAAD;MAAS,MAAA;gBAAT,CACE,kBAAC,GAAD;OAAgB,WAAU;iBAA0C;OAEnD,CAAA,EACjB,kBAAC,GAAD,EAAA,UAAgB,+BAA4C,CAAA,CAAA;;;;;GAIhE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;MAAgB,WAAU;gBAA0C;MAEnD,CAAA,EACjB,kBAAC,GAAD;MAAgB,OAAM;gBAAQ;MAA0C,CAAA,CAChE,EAAA,CAAA;KAEV,kBAAC,GAAD;MAAS,MAAM;gBAAf,CACE,kBAAC,GAAD,EACE,QACE,kBAAC,GAAD;OACE,WAAU;OACV,eAAe,EAAoB,CAAC,EAAiB;iBACtD;OAEW,CAAA,EAEE,CAAA,EAClB,kBAAC,GAAD;OAAgB,OAAM;iBAAQ;OAA4C,CAAA,CAAA;;KAI5E,kBAAC,GAAD;MAAS,MAAA;gBAAT,CACE,kBAAC,GAAD;OAAgB,WAAU;iBAA0C;OAEnD,CAAA,EACjB,kBAAC,GAAD;OAAgB,OAAM;iBAAQ;OAA4C,CAAA,CAAA;;;;;GAI9E,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAA,UAAA;KACE,kBAAC,GAAD;MAAgB,WAAU;gBAA0C;MAEnD,CAAA;KACjB,kBAAC,GAAD;MAAgB,MAAK;gBAAM;MAA2C,CAAA;KACtE,kBAAC,GAAD;MAAgB,MAAK;gBAAS;MAA8C,CAAA;KAC5E,kBAAC,GAAD;MAAgB,MAAK;gBAAQ;MAA6C,CAAA;KAC1E,kBAAC,GAAD;MAAgB,MAAK;gBAAO;MAA4C,CAAA;KAChE,EAAA,CAAA;IACN,CAAA;GACU,EAAA,CAAA;EACd,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "2.0.0-beta.9",
+  "version": "2.0.0",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [
@@ -78,10 +78,15 @@
     "build:exports": "NODE_NO_WARNINGS=1 node --loader ts-node/esm ../../tools/exports-builder/index.ts"
   },
   "dependencies": {
+    "@base-ui/react": ">=1.3.0",
+    "@chenglou/pretext": "^0.0.7",
     "@juggle/resize-observer": ">=3.4.0",
     "@use-gesture/react": ">=10.2.26",
     "clsx": ">=2.1.1",
     "date-fns": ">=2.30.0",
+    "embla-carousel-react": "^8.6.0",
+    "embla-carousel-wheel-gestures": "^8.1.0",
+    "leva": "^0.10.1",
     "react-day-picker": ">=8.10.0",
     "react-hot-toast": ">=2.4.1",
     "react-transition-state": ">=2.3.2",
@@ -90,8 +95,9 @@
     "tw-animate-css": ">=1.3.6"
   },
   "devDependencies": {
-    "@clubmed/trident-icons": ">=1.7.1",
+    "@clubmed/trident-icons": ">=1.16.0",
     "@tailwindcss/vite": "4.1.18",
+    "@types/dom-speech-recognition": "^0.0.11",
     "@vitest/coverage-v8": "^4.1.2",
     "add": "^2.0.6",
     "autoprefixer": "^10.4.17",
@@ -106,7 +112,7 @@
     "tw-animate-css": "^1.3.6"
   },
   "peerDependencies": {
-    "@clubmed/trident-icons": ">=1.3.3",
+    "@clubmed/trident-icons": ">=1.16.0",
     "@tailwindcss/container-queries": ">=0.1.1",
     "@tailwindcss/typography": ">=0.5.19",
     "react": ">=18.0.0",

package/styles/animate.css

@@ -299,3 +299,22 @@
     transform: translateX(0px);
   }
 }
+
+@keyframes sparkle-fly {
+  0% {
+    opacity: 1;
+    transform: translate(
+        calc(-50% + var(--sparkle-start-x, 0px)),
+        calc(-50% + var(--sparkle-start-y, 0px))
+      )
+      scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(
+        calc(-50% + var(--sparkle-end-x, 0px)),
+        calc(-50% + var(--sparkle-end-y, 0px))
+      )
+      scale(0);
+  }
+}

package/styles/components.css

@@ -91,9 +91,102 @@
     }
   }
 
-  @property --1fr {
-    syntax: '<length>';
-    initial-value: 0px;
-    inherits: false;
+  .scrollbar-hidden {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    --scrollbar-x-padding-bottom: 0;
+  }
+
+  .scrollbar-hidden::-webkit-scrollbar {
+    display: none;
+  }
+
+  [data-scroller] {
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  [data-scroller]::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Custom scroll track */
+  [data-scrollbar] {
+    position: relative;
+    width: 100%;
+    height: 6px;
+    padding: 1px;
+    background: var(--color-ultramarine);
+    border-radius: 4px;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  /* Custom scroll bar */
+  [data-scrollbar] [data-scrollprogress] {
+    content: '';
+    position: absolute;
+    bottom: 1px;
+    inset-inline-start: 1px;
+    width: var(--scrollbar-width, 60%);
+    height: 4px;
+    background: var(--color-saffron);
+    border-radius: 4px;
+    animation: scroll-position linear both;
+    display: block;
+    cursor: grab;
+    transition: background-color 150ms ease;
+  }
+
+  [data-scrollbar] [data-scrollprogress]:hover {
+    background: color-mix(in srgb, var(--color-saffron) 85%, black);
+  }
+
+  [data-scrollbar] [data-scrollprogress]:active {
+    cursor: grabbing;
+    background: color-mix(in srgb, var(--color-saffron) 70%, black);
+  }
+
+  [data-scroller='dark'] + [data-scrollbar] {
+    background: var(--color-white);
+  }
+
+  [data-scroller='dark'] + [data-scrollbar] [data-scrollprogress] {
+    background: var(--color-ultramarine);
+  }
+
+  [data-scroller='dark'] + [data-scrollbar] [data-scrollprogress]:hover {
+    background: color-mix(in srgb, var(--color-ultramarine) 85%, white);
+  }
+
+  [data-scroller='dark'] + [data-scrollbar] [data-scrollprogress]:active {
+    background: color-mix(in srgb, var(--color-ultramarine) 70%, white);
+  }
+
+  @keyframes scroll-position {
+    from {
+      inset-inline-start: 1px;
+    }
+    to {
+      inset-inline-start: calc(100% - var(--scrollbar-width, 60%) - 1px);
+    }
+  }
+
+  .toggle button.active {
+    background-color: var(--toggle-color);
+  }
+
+  /* CSS Anchor Positioning (Chrome 125+) - animated sliding background */
+  @supports (position-anchor: --active) {
+    .toggle button.active {
+      background-color: transparent;
+      anchor-name: --active;
+    }
+
+    .toggle:before {
+      position-anchor: --active;
+      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
+    }
   }
 }

package/styles/index.css

@@ -15,5 +15,4 @@
 @import './ui/controls.css';
 @import './ui/number-field.css';
 @import './ui/range.css';
-@import './ui/tabs.css';
 @import './ui/chat-button.css';

package/styles/theme.css

@@ -1,7 +1,5 @@
 @theme {
   /* Colors */
-
-  --color-*: initial;
   --color-current: currentColor;
   --color-transparent: transparent;
 
@@ -176,4 +174,5 @@
   --animate-zoom-in: zoom-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
   --animate-zoom-out: zoom-out 180ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
   --animate-wiggle: wiggle 0.75s ease-in-out;
+  --animate-sparkle-fly: sparkle-fly 900ms ease-out both;
 }

package/styles/ui/button.css

@@ -3,7 +3,7 @@
     @apply border;
     @apply border-solid;
     @apply font-sans;
-    @apply font-semibold;
+    font-weight: 600;
     transition-duration: 200ms;
     column-gap: 8px;
     align-items: center;

package/styles/ui/chat-button.css

@@ -1,4 +1,4 @@
-.chat-button {
+.chat-border {
   border: 4px solid #0000;
   background:
     linear-gradient(white, white) padding-box,
@@ -23,3 +23,70 @@
   initial-value: 0deg;
   inherits: false;
 }
+
+/*
+ * Scroll-driven fade mask on the message log.
+ *
+ * Two @property custom properties hold the current fade band sizes and are
+ * animated via scroll(self) — no JS required.
+ *
+ * Top fade:    0px → 48px as scroll goes 0 → 48px from the top
+ * Bottom fade: 48px → 0px as scroll goes from (max − 48px) → max
+ *
+ * When content doesn't overflow the bottom animation is past its end range
+ * at rest, so --chat-fade-bottom stays at 0px (no spurious bottom fade).
+ */
+@property --chat-fade-top {
+  syntax: '<length>';
+  initial-value: 0px;
+  inherits: false;
+}
+
+@property --chat-fade-bottom {
+  syntax: '<length>';
+  initial-value: 48px;
+  inherits: false;
+}
+
+.chat-message-log {
+  mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    black var(--chat-fade-top),
+    black calc(100% - var(--chat-fade-bottom)),
+    transparent
+  );
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    black var(--chat-fade-top),
+    black calc(100% - var(--chat-fade-bottom)),
+    transparent
+  );
+
+  animation:
+    chat-fade-top-in linear both,
+    chat-fade-bottom-out linear both;
+  animation-timeline: scroll(self), scroll(self);
+  animation-range:
+    0px 48px,
+    calc(100% - 48px) 100%;
+}
+
+@keyframes chat-fade-top-in {
+  from {
+    --chat-fade-top: 0px;
+  }
+  to {
+    --chat-fade-top: 48px;
+  }
+}
+
+@keyframes chat-fade-bottom-out {
+  from {
+    --chat-fade-bottom: 48px;
+  }
+  to {
+    --chat-fade-bottom: 0px;
+  }
+}