@clubmed/trident-ui 2.0.0-beta.2 → 2.0.0-beta.21

package/examples/dropdown-demo.js

@@ -30,7 +30,15 @@ function a() {
 					height: "40px"
 				}
 			}),
-			/* @__PURE__ */ r(e, { children: "Logout" })
+			/* @__PURE__ */ r("a", {
+				href: "/account",
+				className: "text-b3 font-semibold",
+				children: "Account"
+			}),
+			/* @__PURE__ */ r(e, {
+				"data-dropdown-item": "",
+				children: "Logout"
+			})
 		]
 	});
 }

package/examples/dropdown-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-demo.js","names":[],"sources":["../../lib/examples/dropdown-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Avatar } from '@/ui/Avatar';\nimport { Dropdown } from '@/ui/Dropdown';\nimport { Button } from '@/ui/buttons/Button';\n\nexport default function DropdownDemo() {\n  const user = { firstName: 'John', lastName: 'Doe' };\n\n  return (\n    <Dropdown aria-label=\"Open user actions\">\n      <span data-slot=\"label\" className=\"hidden md:inline text-body\">\n        {user.firstName} {user.lastName}\n      </span>\n      <Avatar\n        data-slot=\"label\"\n        alt={`${user.firstName} ${user.lastName}`}\n        className=\"w-40 h-40 cursor-pointer hover:opacity-80 transition-opacity\"\n        style={{ width: '40px', height: '40px' }}\n      />\n\n      <Button>Logout</Button>\n    </Dropdown>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAe;CACrC,IAAM,IAAO;EAAE,WAAW;EAAQ,UAAU;EAAO;AAEnD,QACE,kBAAC,GAAD;EAAU,cAAW;YAArB;GACE,kBAAC,QAAD;IAAM,aAAU;IAAQ,WAAU;cAAlC;KACG,EAAK;KAAU;KAAE,EAAK;;;GAEzB,kBAAC,GAAD;IACE,aAAU;IACV,KAAK,GAAG,EAAK,UAAU,GAAG,EAAK;IAC/B,WAAU;IACV,OAAO;KAAE,OAAO;KAAQ,QAAQ;;IAChC,CAAA;GAEF,kBAAC,GAAD,EAAA,UAAQ,UAAe,CAAA"}
+{"version":3,"file":"dropdown-demo.js","names":[],"sources":["../../lib/examples/dropdown-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Avatar } from '@/ui/Avatar';\nimport { Dropdown } from '@/ui/Dropdown';\nimport { Button } from '@/ui/buttons/Button';\n\nexport default function DropdownDemo() {\n  const user = { firstName: 'John', lastName: 'Doe' };\n\n  return (\n    <Dropdown aria-label=\"Open user actions\">\n      <span data-slot=\"label\" className=\"hidden md:inline text-body\">\n        {user.firstName} {user.lastName}\n      </span>\n      <Avatar\n        data-slot=\"label\"\n        alt={`${user.firstName} ${user.lastName}`}\n        className=\"w-40 h-40 cursor-pointer hover:opacity-80 transition-opacity\"\n        style={{ width: '40px', height: '40px' }}\n      />\n\n      <a href=\"/account\" className=\"text-b3 font-semibold\">\n        Account\n      </a>\n      <Button data-dropdown-item=\"\">Logout</Button>\n    </Dropdown>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAe;CACrC,IAAM,IAAO;EAAE,WAAW;EAAQ,UAAU;EAAO;AAEnD,QACE,kBAAC,GAAD;EAAU,cAAW;YAArB;GACE,kBAAC,QAAD;IAAM,aAAU;IAAQ,WAAU;cAAlC;KACG,EAAK;KAAU;KAAE,EAAK;;;GAEzB,kBAAC,GAAD;IACE,aAAU;IACV,KAAK,GAAG,EAAK,UAAU,GAAG,EAAK;IAC/B,WAAU;IACV,OAAO;KAAE,OAAO;KAAQ,QAAQ;;IAChC,CAAA;GAEF,kBAAC,KAAD;IAAG,MAAK;IAAW,WAAU;cAAwB;IAEjD,CAAA;GACJ,kBAAC,GAAD;IAAQ,sBAAmB;cAAG;IAAe,CAAA"}

package/examples/elastic-height-demo.js

@@ -9,11 +9,12 @@ function i() {
 		className: "w-full max-w-md space-y-4",
 		children: [/* @__PURE__ */ n("button", {
 			onClick: () => a(!i),
-			className: "rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700",
+			className: "rounded-md bg-ultramarine px-4 py-2 text-white hover:bg-blue-700",
 			children: i ? "Collapse" : "Expand"
 		}), /* @__PURE__ */ n(e, {
 			isExpanded: i,
 			className: "border rounded-md",
+			min: 24,
 			children: /* @__PURE__ */ r("div", {
 				className: "p-4 space-y-2",
 				children: [

package/examples/elastic-height-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"elastic-height-demo.js","names":[],"sources":["../../lib/examples/elastic-height-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { ElasticHeight } from '@/ui/ElasticHeight';\n\nexport default function ElasticHeightDemo() {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  return (\n    <div className=\"w-full max-w-md space-y-4\">\n      <button\n        onClick={() => setIsExpanded(!isExpanded)}\n        className=\"rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700\"\n      >\n        {isExpanded ? 'Collapse' : 'Expand'}\n      </button>\n      <ElasticHeight isExpanded={isExpanded} className=\"border rounded-md\">\n        <div className=\"p-4 space-y-2\">\n          <p className=\"font-semibold\">Expandable Content</p>\n          <p>\n            This content smoothly animates when the container expands or collapses. The\n            ElasticHeight component automatically adjusts to the height of its children.\n          </p>\n          <p>\n            Perfect for accordions, collapsible sections, and any UI element that needs smooth\n            height transitions.\n          </p>\n        </div>\n      </ElasticHeight>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAoB;CAC1C,IAAM,CAAC,GAAY,KAAiB,EAAS,GAAM;AAEnD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,eAAe,EAAc,CAAC,EAAW;GACzC,WAAU;aAET,IAAa,aAAa;GACpB,CAAA,EACT,kBAAC,GAAD;GAA2B;GAAY,WAAU;aAC/C,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,KAAD;MAAG,WAAU;gBAAgB;MAAsB,CAAA;KACnD,kBAAC,KAAD,EAAA,UAAG,4JAGC,CAAA;KACJ,kBAAC,KAAD,EAAA,UAAG,0GAGC,CAAA;;;GAEQ,CAAA,CAAA"}
+{"version":3,"file":"elastic-height-demo.js","names":[],"sources":["../../lib/examples/elastic-height-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { ElasticHeight } from '@/ui/ElasticHeight';\n\nexport default function ElasticHeightDemo() {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  return (\n    <div className=\"w-full max-w-md space-y-4\">\n      <button\n        onClick={() => setIsExpanded(!isExpanded)}\n        className=\"rounded-md bg-ultramarine px-4 py-2 text-white hover:bg-blue-700\"\n      >\n        {isExpanded ? 'Collapse' : 'Expand'}\n      </button>\n      <ElasticHeight isExpanded={isExpanded} className=\"border rounded-md\" min={24}>\n        <div className=\"p-4 space-y-2\">\n          <p className=\"font-semibold\">Expandable Content</p>\n          <p>\n            This content smoothly animates when the container expands or collapses. The\n            ElasticHeight component automatically adjusts to the height of its children.\n          </p>\n          <p>\n            Perfect for accordions, collapsible sections, and any UI element that needs smooth\n            height transitions.\n          </p>\n        </div>\n      </ElasticHeight>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAoB;CAC1C,IAAM,CAAC,GAAY,KAAiB,EAAS,GAAM;AAEnD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,eAAe,EAAc,CAAC,EAAW;GACzC,WAAU;aAET,IAAa,aAAa;GACpB,CAAA,EACT,kBAAC,GAAD;GAA2B;GAAY,WAAU;GAAoB,KAAK;aACxE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,KAAD;MAAG,WAAU;gBAAgB;MAAsB,CAAA;KACnD,kBAAC,KAAD,EAAA,UAAG,4JAGC,CAAA;KACJ,kBAAC,KAAD,EAAA,UAAG,0GAGC,CAAA;;;GAEQ,CAAA,CAAA"}

package/examples/frame-demo.d.ts

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

package/examples/frame-demo.js

@@ -0,0 +1,18 @@
+"use client";
+import { Frame as e } from "../ui/Frame.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region lib/examples/frame-demo.tsx
+function n() {
+	return /* @__PURE__ */ t(e, {
+		format: "horizontal",
+		src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4",
+		alt: "Mountain landscape",
+		title: "Mountain Resort",
+		subtitle: "Winter",
+		className: "max-w-380"
+	});
+}
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=frame-demo.js.map

package/examples/frame-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-demo.js","names":[],"sources":["../../lib/examples/frame-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Frame } from '@/ui/Frame';\n\nexport default function FrameDemo() {\n  return (\n    <Frame\n      format=\"horizontal\"\n      src=\"https://images.unsplash.com/photo-1506905925346-21bda4d32df4\"\n      alt=\"Mountain landscape\"\n      title=\"Mountain Resort\"\n      subtitle=\"Winter\"\n      className=\"max-w-380\"\n    />\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAY;AAClC,QACE,kBAAC,GAAD;EACE,QAAO;EACP,KAAI;EACJ,KAAI;EACJ,OAAM;EACN,UAAS;EACT,WAAU;EACV,CAAA"}

package/examples/frame-horizontal-demo.d.ts

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

package/examples/frame-horizontal-demo.js

@@ -0,0 +1,18 @@
+"use client";
+import { Frame as e } from "../ui/Frame.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region lib/examples/frame-horizontal-demo.tsx
+function n() {
+	return /* @__PURE__ */ t(e, {
+		format: "horizontal",
+		src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4",
+		alt: "Mountain landscape",
+		title: "Alpine Adventures",
+		subtitle: "Explore",
+		className: "max-w-380"
+	});
+}
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=frame-horizontal-demo.js.map

package/examples/frame-horizontal-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-horizontal-demo.js","names":[],"sources":["../../lib/examples/frame-horizontal-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Frame } from '@/ui/Frame';\n\nexport default function FrameHorizontalDemo() {\n  return (\n    <Frame\n      format=\"horizontal\"\n      src=\"https://images.unsplash.com/photo-1506905925346-21bda4d32df4\"\n      alt=\"Mountain landscape\"\n      title=\"Alpine Adventures\"\n      subtitle=\"Explore\"\n      className=\"max-w-380\"\n    />\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAsB;AAC5C,QACE,kBAAC,GAAD;EACE,QAAO;EACP,KAAI;EACJ,KAAI;EACJ,OAAM;EACN,UAAS;EACT,WAAU;EACV,CAAA"}

package/examples/frame-vertical-demo.d.ts

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

package/examples/frame-vertical-demo.js

@@ -0,0 +1,18 @@
+"use client";
+import { Frame as e } from "../ui/Frame.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region lib/examples/frame-vertical-demo.tsx
+function n() {
+	return /* @__PURE__ */ t(e, {
+		format: "vertical",
+		src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4",
+		alt: "Mountain landscape",
+		title: "Ski Resort",
+		subtitle: "Winter",
+		className: "max-w-280"
+	});
+}
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=frame-vertical-demo.js.map

package/examples/frame-vertical-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-vertical-demo.js","names":[],"sources":["../../lib/examples/frame-vertical-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Frame } from '@/ui/Frame';\n\nexport default function FrameVerticalDemo() {\n  return (\n    <Frame\n      format=\"vertical\"\n      src=\"https://images.unsplash.com/photo-1506905925346-21bda4d32df4\"\n      alt=\"Mountain landscape\"\n      title=\"Ski Resort\"\n      subtitle=\"Winter\"\n      className=\"max-w-280\"\n    />\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAoB;AAC1C,QACE,kBAAC,GAAD;EACE,QAAO;EACP,KAAI;EACJ,KAAI;EACJ,OAAM;EACN,UAAS;EACT,WAAU;EACV,CAAA"}

package/examples/frame-with-tag-demo.d.ts

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

package/examples/frame-with-tag-demo.js

@@ -0,0 +1,23 @@
+"use client";
+import { Tag as e } from "../ui/Tag.js";
+import { Frame as t } from "../ui/Frame.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region lib/examples/frame-with-tag-demo.tsx
+function r() {
+	return /* @__PURE__ */ n(t, {
+		format: "horizontal",
+		src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4",
+		alt: "Mountain landscape",
+		title: "Mountain Resort",
+		subtitle: "Winter",
+		className: "max-w-380",
+		children: /* @__PURE__ */ n(e, {
+			label: "Best Seller",
+			className: "mx-12 mt-12 self-start px-8 sm:mx-24 sm:mt-24 sm:px-16"
+		})
+	});
+}
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=frame-with-tag-demo.js.map

package/examples/frame-with-tag-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-with-tag-demo.js","names":[],"sources":["../../lib/examples/frame-with-tag-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Frame } from '@/ui/Frame';\nimport { Tag } from '@/ui/Tag';\n\nexport default function FrameWithTagDemo() {\n  return (\n    <Frame\n      format=\"horizontal\"\n      src=\"https://images.unsplash.com/photo-1506905925346-21bda4d32df4\"\n      alt=\"Mountain landscape\"\n      title=\"Mountain Resort\"\n      subtitle=\"Winter\"\n      className=\"max-w-380\"\n    >\n      <Tag label=\"Best Seller\" className=\"mx-12 mt-12 self-start px-8 sm:mx-24 sm:mt-24 sm:px-16\" />\n    </Frame>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAmB;AACzC,QACE,kBAAC,GAAD;EACE,QAAO;EACP,KAAI;EACJ,KAAI;EACJ,OAAM;EACN,UAAS;EACT,WAAU;YAEV,kBAAC,GAAD;GAAK,OAAM;GAAc,WAAU;GAA2D,CAAA;EACxF,CAAA"}

package/examples/sidebar-layout-demo.js

@@ -9,7 +9,7 @@ var o = [
 	{
 		label: "Home",
 		icon: "Home",
-		url: "#"
+		href: "#"
 	},
 	{
 		label: "Projects",
@@ -17,22 +17,22 @@ var o = [
 		items: [
 			{
 				label: "Project A",
-				url: "#"
+				href: "#"
 			},
 			{
 				label: "Project B",
-				url: "#"
+				href: "#"
 			},
 			{
 				label: "Project C",
-				url: "#"
+				href: "#"
 			}
 		]
 	},
 	{
 		label: "Team",
 		icon: "PeopleDouble",
-		url: "#"
+		href: "#"
 	}
 ];
 function s() {

package/examples/sidebar-layout-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-layout-demo.js","names":[],"sources":["../../lib/examples/sidebar-layout-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Avatar } from '@/ui/Avatar';\nimport { Dropdown } from '@/ui/Dropdown';\nimport { SidebarLayout } from '@/ui/SidebarLayout';\nimport { Button } from '@/ui/buttons/Button';\n\nconst items = [\n  { label: 'Home', icon: 'Home' as const, url: '#' },\n  {\n    label: 'Projects',\n    icon: 'HeartOutlined' as const,\n    items: [\n      { label: 'Project A', url: '#' },\n      { label: 'Project B', url: '#' },\n      { label: 'Project C', url: '#' },\n    ],\n  },\n  { label: 'Team', icon: 'PeopleDouble' as const, url: '#' },\n];\n\nexport default function SidebarLayoutDemo() {\n  const user = { firstName: 'John', lastName: 'Doe' };\n\n  return (\n    <SidebarLayout items={items}>\n      <div data-slot=\"header-logo\" className=\"text-white text-b3 font-semibold\">\n        CM\n      </div>\n      <div data-slot=\"header\" className=\"text-white text-h6\">\n        Project Dashboard\n      </div>\n      <Dropdown data-slot=\"header-actions\" aria-label=\"Open user actions\">\n        <span data-slot=\"label\" className=\"hidden md:inline text-body\">\n          {user.firstName} {user.lastName}\n        </span>\n        <Avatar\n          data-slot=\"label\"\n          alt={`${user.firstName} ${user.lastName}`}\n          className=\"w-40 h-40\"\n          style={{ width: '40px', height: '40px' }}\n        />\n        <Button size=\"small\">Logout</Button>\n      </Dropdown>\n\n      <div>\n        <h1 className=\"text-h3 mb-16\">Welcome to your dashboard</h1>\n        <p className=\"text-body\">This example shows SidebarLayout with composable header slots.</p>\n      </div>\n    </SidebarLayout>\n  );\n}\n"],"mappings":";;;;;;;AAOA,IAAM,IAAQ;CACZ;EAAE,OAAO;EAAQ,MAAM;EAAiB,KAAK;EAAK;CAClD;EACE,OAAO;EACP,MAAM;EACN,OAAO;GACL;IAAE,OAAO;IAAa,KAAK;IAAK;GAChC;IAAE,OAAO;IAAa,KAAK;IAAK;GAChC;IAAE,OAAO;IAAa,KAAK;;;EAE9B;CACD;EAAE,OAAO;EAAQ,MAAM;EAAyB,KAAK;;CACtD;AAED,SAAwB,IAAoB;CAC1C,IAAM,IAAO;EAAE,WAAW;EAAQ,UAAU;EAAO;AAEnD,QACE,kBAAC,GAAD;EAAsB;YAAtB;GACE,kBAAC,OAAD;IAAK,aAAU;IAAc,WAAU;cAAmC;IAEpE,CAAA;GACN,kBAAC,OAAD;IAAK,aAAU;IAAS,WAAU;cAAqB;IAEjD,CAAA;GACN,kBAAC,GAAD;IAAU,aAAU;IAAiB,cAAW;cAAhD;KACE,kBAAC,QAAD;MAAM,aAAU;MAAQ,WAAU;gBAAlC;OACG,EAAK;OAAU;OAAE,EAAK;;;KAEzB,kBAAC,GAAD;MACE,aAAU;MACV,KAAK,GAAG,EAAK,UAAU,GAAG,EAAK;MAC/B,WAAU;MACV,OAAO;OAAE,OAAO;OAAQ,QAAQ;;MAChC,CAAA;KACF,kBAAC,GAAD;MAAQ,MAAK;gBAAQ;MAAe,CAAA;;;GAGtC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;cAAgB;IAA8B,CAAA,EAC5D,kBAAC,KAAD;IAAG,WAAU;cAAY;IAAkE,CAAA,CACvF,EAAA,CAAA"}
+{"version":3,"file":"sidebar-layout-demo.js","names":[],"sources":["../../lib/examples/sidebar-layout-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Avatar } from '@/ui/Avatar';\nimport { Dropdown } from '@/ui/Dropdown';\nimport { SidebarLayout } from '@/ui/SidebarLayout';\nimport { Button } from '@/ui/buttons/Button';\n\nconst items = [\n  { label: 'Home', icon: 'Home' as const, href: '#' },\n  {\n    label: 'Projects',\n    icon: 'HeartOutlined' as const,\n    items: [\n      { label: 'Project A', href: '#' },\n      { label: 'Project B', href: '#' },\n      { label: 'Project C', href: '#' },\n    ],\n  },\n  { label: 'Team', icon: 'PeopleDouble' as const, href: '#' },\n];\n\nexport default function SidebarLayoutDemo() {\n  const user = { firstName: 'John', lastName: 'Doe' };\n\n  return (\n    <SidebarLayout items={items}>\n      <div data-slot=\"header-logo\" className=\"text-white text-b3 font-semibold\">\n        CM\n      </div>\n      <div data-slot=\"header\" className=\"text-white text-h6\">\n        Project Dashboard\n      </div>\n      <Dropdown data-slot=\"header-actions\" aria-label=\"Open user actions\">\n        <span data-slot=\"label\" className=\"hidden md:inline text-body\">\n          {user.firstName} {user.lastName}\n        </span>\n        <Avatar\n          data-slot=\"label\"\n          alt={`${user.firstName} ${user.lastName}`}\n          className=\"w-40 h-40\"\n          style={{ width: '40px', height: '40px' }}\n        />\n        <Button size=\"small\">Logout</Button>\n      </Dropdown>\n\n      <div>\n        <h1 className=\"text-h3 mb-16\">Welcome to your dashboard</h1>\n        <p className=\"text-body\">This example shows SidebarLayout with composable header slots.</p>\n      </div>\n    </SidebarLayout>\n  );\n}\n"],"mappings":";;;;;;;AAOA,IAAM,IAAQ;CACZ;EAAE,OAAO;EAAQ,MAAM;EAAiB,MAAM;EAAK;CACnD;EACE,OAAO;EACP,MAAM;EACN,OAAO;GACL;IAAE,OAAO;IAAa,MAAM;IAAK;GACjC;IAAE,OAAO;IAAa,MAAM;IAAK;GACjC;IAAE,OAAO;IAAa,MAAM;;;EAE/B;CACD;EAAE,OAAO;EAAQ,MAAM;EAAyB,MAAM;;CACvD;AAED,SAAwB,IAAoB;CAC1C,IAAM,IAAO;EAAE,WAAW;EAAQ,UAAU;EAAO;AAEnD,QACE,kBAAC,GAAD;EAAsB;YAAtB;GACE,kBAAC,OAAD;IAAK,aAAU;IAAc,WAAU;cAAmC;IAEpE,CAAA;GACN,kBAAC,OAAD;IAAK,aAAU;IAAS,WAAU;cAAqB;IAEjD,CAAA;GACN,kBAAC,GAAD;IAAU,aAAU;IAAiB,cAAW;cAAhD;KACE,kBAAC,QAAD;MAAM,aAAU;MAAQ,WAAU;gBAAlC;OACG,EAAK;OAAU;OAAE,EAAK;;;KAEzB,kBAAC,GAAD;MACE,aAAU;MACV,KAAK,GAAG,EAAK,UAAU,GAAG,EAAK;MAC/B,WAAU;MACV,OAAO;OAAE,OAAO;OAAQ,QAAQ;;MAChC,CAAA;KACF,kBAAC,GAAD;MAAQ,MAAK;gBAAQ;MAAe,CAAA;;;GAGtC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;cAAgB;IAA8B,CAAA,EAC5D,kBAAC,KAAD;IAAG,WAAU;cAAY;IAAkE,CAAA,CACvF,EAAA,CAAA"}

package/examples/sidebar-layout-minimal-demo.js

@@ -5,11 +5,11 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 var r = [{
 	label: "Home",
 	icon: "Home",
-	url: "#"
+	href: "#"
 }, {
 	label: "Settings",
 	icon: "Compare",
-	url: "#"
+	href: "#"
 }];
 function i() {
 	return /* @__PURE__ */ n(e, {

package/examples/sidebar-layout-minimal-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-layout-minimal-demo.js","names":[],"sources":["../../lib/examples/sidebar-layout-minimal-demo.tsx"],"sourcesContent":["'use client';\n\nimport { SidebarLayout } from '@/ui/SidebarLayout';\n\nconst items = [\n  { label: 'Home', icon: 'Home' as const, url: '#' },\n  { label: 'Settings', icon: 'Compare' as const, url: '#' },\n];\n\nexport default function SidebarLayoutMinimalDemo() {\n  return (\n    <SidebarLayout items={items} activeIndex={1}>\n      <div data-slot=\"header\" className=\"text-white text-h6\">\n        Minimal Layout\n      </div>\n\n      <div>\n        <h1 className=\"text-h3 mb-16\">Minimal navigation</h1>\n        <p className=\"text-body\">This layout demonstrates a compact SidebarLayout setup.</p>\n      </div>\n    </SidebarLayout>\n  );\n}\n"],"mappings":";;;;AAIA,IAAM,IAAQ,CACZ;CAAE,OAAO;CAAQ,MAAM;CAAiB,KAAK;CAAK,EAClD;CAAE,OAAO;CAAY,MAAM;CAAoB,KAAK;CAAK,CAC1D;AAED,SAAwB,IAA2B;AACjD,QACE,kBAAC,GAAD;EAAsB;EAAO,aAAa;YAA1C,CACE,kBAAC,OAAD;GAAK,aAAU;GAAS,WAAU;aAAqB;GAEjD,CAAA,EAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;GAAI,WAAU;aAAgB;GAAuB,CAAA,EACrD,kBAAC,KAAD;GAAG,WAAU;aAAY;GAA2D,CAAA,CAChF,EAAA,CAAA,CAAA"}
+{"version":3,"file":"sidebar-layout-minimal-demo.js","names":[],"sources":["../../lib/examples/sidebar-layout-minimal-demo.tsx"],"sourcesContent":["'use client';\n\nimport { SidebarLayout } from '@/ui/SidebarLayout';\n\nconst items = [\n  { label: 'Home', icon: 'Home' as const, href: '#' },\n  { label: 'Settings', icon: 'Compare' as const, href: '#' },\n];\n\nexport default function SidebarLayoutMinimalDemo() {\n  return (\n    <SidebarLayout items={items} activeIndex={1}>\n      <div data-slot=\"header\" className=\"text-white text-h6\">\n        Minimal Layout\n      </div>\n\n      <div>\n        <h1 className=\"text-h3 mb-16\">Minimal navigation</h1>\n        <p className=\"text-body\">This layout demonstrates a compact SidebarLayout setup.</p>\n      </div>\n    </SidebarLayout>\n  );\n}\n"],"mappings":";;;;AAIA,IAAM,IAAQ,CACZ;CAAE,OAAO;CAAQ,MAAM;CAAiB,MAAM;CAAK,EACnD;CAAE,OAAO;CAAY,MAAM;CAAoB,MAAM;CAAK,CAC3D;AAED,SAAwB,IAA2B;AACjD,QACE,kBAAC,GAAD;EAAsB;EAAO,aAAa;YAA1C,CACE,kBAAC,OAAD;GAAK,aAAU;GAAS,WAAU;aAAqB;GAEjD,CAAA,EAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;GAAI,WAAU;aAAgB;GAAuB,CAAA,EACrD,kBAAC,KAAD;GAAG,WAAU;aAAY;GAA2D,CAAA,CAChF,EAAA,CAAA,CAAA"}

package/examples/sidebar-layout-with-header-demo.js

@@ -5,11 +5,11 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 var r = [{
 	label: "Dashboard",
 	icon: "Home",
-	url: "#"
+	href: "#"
 }, {
 	label: "Analytics",
 	icon: "CheckOutlined",
-	url: "#"
+	href: "#"
 }];
 function i() {
 	return /* @__PURE__ */ n(e, {

package/examples/sidebar-layout-with-header-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-layout-with-header-demo.js","names":[],"sources":["../../lib/examples/sidebar-layout-with-header-demo.tsx"],"sourcesContent":["'use client';\n\nimport { SidebarLayout } from '@/ui/SidebarLayout';\n\nconst items = [\n  { label: 'Dashboard', icon: 'Home' as const, url: '#' },\n  { label: 'Analytics', icon: 'CheckOutlined' as const, url: '#' },\n];\n\nexport default function SidebarLayoutWithHeaderDemo() {\n  return (\n    <SidebarLayout items={items}>\n      <div data-slot=\"header-logo\" className=\"text-white text-b3 font-semibold\">\n        CM\n      </div>\n      <div data-slot=\"header\" className=\"text-white text-h6\">\n        Project Dashboard\n      </div>\n\n      <div>\n        <h1 className=\"text-h3 mb-16\">Custom header example</h1>\n        <p className=\"text-body\">\n          This layout demonstrates custom `header-logo` and `header` slots.\n        </p>\n      </div>\n    </SidebarLayout>\n  );\n}\n"],"mappings":";;;;AAIA,IAAM,IAAQ,CACZ;CAAE,OAAO;CAAa,MAAM;CAAiB,KAAK;CAAK,EACvD;CAAE,OAAO;CAAa,MAAM;CAA0B,KAAK;CAAK,CACjE;AAED,SAAwB,IAA8B;AACpD,QACE,kBAAC,GAAD;EAAsB;YAAtB;GACE,kBAAC,OAAD;IAAK,aAAU;IAAc,WAAU;cAAmC;IAEpE,CAAA;GACN,kBAAC,OAAD;IAAK,aAAU;IAAS,WAAU;cAAqB;IAEjD,CAAA;GAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;cAAgB;IAA0B,CAAA,EACxD,kBAAC,KAAD;IAAG,WAAU;cAAY;IAErB,CAAA,CACA,EAAA,CAAA"}
+{"version":3,"file":"sidebar-layout-with-header-demo.js","names":[],"sources":["../../lib/examples/sidebar-layout-with-header-demo.tsx"],"sourcesContent":["'use client';\n\nimport { SidebarLayout } from '@/ui/SidebarLayout';\n\nconst items = [\n  { label: 'Dashboard', icon: 'Home' as const, href: '#' },\n  { label: 'Analytics', icon: 'CheckOutlined' as const, href: '#' },\n];\n\nexport default function SidebarLayoutWithHeaderDemo() {\n  return (\n    <SidebarLayout items={items}>\n      <div data-slot=\"header-logo\" className=\"text-white text-b3 font-semibold\">\n        CM\n      </div>\n      <div data-slot=\"header\" className=\"text-white text-h6\">\n        Project Dashboard\n      </div>\n\n      <div>\n        <h1 className=\"text-h3 mb-16\">Custom header example</h1>\n        <p className=\"text-body\">\n          This layout demonstrates custom `header-logo` and `header` slots.\n        </p>\n      </div>\n    </SidebarLayout>\n  );\n}\n"],"mappings":";;;;AAIA,IAAM,IAAQ,CACZ;CAAE,OAAO;CAAa,MAAM;CAAiB,MAAM;CAAK,EACxD;CAAE,OAAO;CAAa,MAAM;CAA0B,MAAM;CAAK,CAClE;AAED,SAAwB,IAA8B;AACpD,QACE,kBAAC,GAAD;EAAsB;YAAtB;GACE,kBAAC,OAAD;IAAK,aAAU;IAAc,WAAU;cAAmC;IAEpE,CAAA;GACN,kBAAC,OAAD;IAAK,aAAU;IAAS,WAAU;cAAqB;IAEjD,CAAA;GAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;cAAgB;IAA0B,CAAA,EACxD,kBAAC,KAAD;IAAG,WAAU;cAAY;IAErB,CAAA,CACA,EAAA,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.21",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [
@@ -92,6 +92,7 @@
   "devDependencies": {
     "@clubmed/trident-icons": ">=1.7.1",
     "@tailwindcss/vite": "4.1.18",
+    "@vitest/coverage-v8": "^4.1.2",
     "add": "^2.0.6",
     "autoprefixer": "^10.4.17",
     "change-case": "^5.4.3",

package/styles/animate.css

@@ -13,7 +13,7 @@
   }
 }
 
-@keyframes bounceEnter {
+@keyframes bounce-enter {
   0% {
     opacity: 0;
     transform: scale(0.5);
@@ -28,7 +28,7 @@
   }
 }
 
-@keyframes bounceEnterStrong {
+@keyframes bounce-enter-strong {
   0% {
     opacity: 0;
     transform: scale(0.5);
@@ -43,7 +43,7 @@
   }
 }
 
-@keyframes bounceExit {
+@keyframes bounce-exit {
   0% {
     opacity: 1;
     transform: scale(1);
@@ -63,7 +63,7 @@
   }
 }
 
-@keyframes loaderDash {
+@keyframes loader-dash {
   0% {
     stroke-dashoffset: 38;
     stroke-dasharray: 38;
@@ -93,7 +93,7 @@
   }
 }
 
-@keyframes rotatesIn {
+@keyframes rotates-in {
   0% {
     transform: translateY(-20px);
     opacity: 0;
@@ -104,16 +104,16 @@
   }
 }
 
-@keyframes slideDown {
+@keyframes slide-down {
   0% {
-    transform: translateY(var(--tw-slideDown, -100%));
+    transform: translateY(var(--tw-slide-down, -100%));
   }
   100% {
     transform: translateY(0%);
   }
 }
 
-@keyframes slideRightEnter {
+@keyframes slide-right-enter {
   0% {
     transform: translateX(100%);
     opacity: 0;
@@ -124,7 +124,7 @@
   }
 }
 
-@keyframes slideRightExit {
+@keyframes slide-right-exit {
   0% {
     transform: translateX(0%);
   }
@@ -133,9 +133,9 @@
   }
 }
 
-@keyframes slideUp {
+@keyframes slide-up {
   0% {
-    transform: translateY(var(--tw-slideUp, 100%));
+    transform: translateY(var(--tw-slide-up, 100%));
   }
   100% {
     transform: translateY(0%);
@@ -178,7 +178,7 @@
   }
 }
 
-@keyframes backdropFadeIn {
+@keyframes backdrop-fade-in {
   0% {
     backdrop-filter: blur(0px);
     opacity: 0;
@@ -189,7 +189,7 @@
   }
 }
 
-@keyframes backdropFadeOut {
+@keyframes backdrop-fade-out {
   0% {
     backdrop-filter: blur(10px);
     opacity: 0.8;
@@ -200,7 +200,7 @@
   }
 }
 
-@keyframes backdropSweepIn {
+@keyframes backdrop-sweep-in {
   0% {
     backdrop-filter: blur(0px);
     opacity: 0;
@@ -213,7 +213,7 @@
   }
 }
 
-@keyframes backdropSweepOut {
+@keyframes backdrop-sweep-out {
   0% {
     backdrop-filter: blur(10px);
     opacity: 0.8;
@@ -246,7 +246,7 @@
   }
 }
 
-@keyframes toastEnter {
+@keyframes toast-enter {
   0% {
     transform: translateX(100%);
     opacity: 0;
@@ -257,7 +257,7 @@
   }
 }
 
-@keyframes toastExit {
+@keyframes toast-exit {
   0% {
     transform: translateX(0%);
   }
@@ -266,7 +266,7 @@
   }
 }
 
-@keyframes zoomIn {
+@keyframes zoom-in {
   0% {
     transform: scale(0.3);
     opacity: 0.3;
@@ -277,7 +277,7 @@
   }
 }
 
-@keyframes zoomOut {
+@keyframes zoom-out {
   0% {
     transform: scale(1);
     opacity: 1;

package/styles/theme.css

@@ -98,7 +98,12 @@
   --radius-16: 1rem;
   --radius-22: 1.375rem;
   --radius-32: 2rem;
-  --radius-pill: 7.5rem;
+  --radius-pill: calc(infinity * 1px);
+  /*
+    Transitioning from Infinity*1px to another value causes jumps in the layout
+    This is not ideal, but currently necessary to achieve a pill that can transition to other border-radius values without jank.
+   */
+  --radius-pill-transitionable: 8rem;
   --radius-full: 100%;
 
   /* Breakpoints */
@@ -143,32 +148,32 @@
   --transition-duration-boop: 0.4s;
 
   --animate-none: none;
-  --animate-backdropFadeIn: backdropFadeIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
-  --animate-backdropFadeOut: backdropFadeOut 180ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
-  --animate-backdropSweepIn: backdropSweepIn 300ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
-  --animate-backdropSweepOut: backdropSweepOut 260ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
+  --animate-backdrop-fade-in: backdrop-fade-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
+  --animate-backdrop-fade-out: backdrop-fade-out 180ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
+  --animate-backdrop-sweep-in: backdrop-sweep-in 300ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
+  --animate-backdrop-sweep-out: backdrop-sweep-out 260ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
   --animate-boop: boop 230ms cubic-bezier(0.76, 0.24, 0.65, 0.85) normal both;
   --animate-bounce: bounce 1s infinite; /* NOT IN DCX */
-  --animate-bounceEnter: bounceEnter 500ms linear;
-  --animate-bounceEnterStrong: bounceEnterStrong 600ms linear;
-  --animate-bounceExit: bounceExit 500ms linear;
+  --animate-bounce-enter: bounce-enter 500ms linear;
+  --animate-bounce-enter-strong: bounce-enter-strong 600ms linear;
+  --animate-bounce-exit: bounce-exit 500ms linear;
   --animate-filling: filling 10s linear;
-  --animate-loaderDash: loaderDash 1.5s ease-in-out infinite;
+  --animate-loader-dash: loader-dash 1.5s ease-in-out infinite;
   --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; /* NOT IN DCX */
   --animate-pulsation: pulsation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   --animate-pulse: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  --animate-rotatesIn: rotatesIn 0.4s ease-in-out;
-  --animate-slideDown: slideDown 0.5s ease-out;
-  --animate-slideRightEnter: slideRightEnter 0.4s ease;
-  --animate-slideRightExit: slideRightExit 0.4s ease;
-  --animate-slideUp: slideUp 0.5s ease-out;
+  --animate-rotates-in: rotates-in 0.4s ease-in-out;
+  --animate-slide-down: slide-down 0.5s ease-out;
+  --animate-slide-right-enter: slide-right-enter 0.4s ease;
+  --animate-slide-right-exit: slide-right-exit 0.4s ease;
+  --animate-slide-up: slide-up 0.5s ease-out;
   --animate-spin: spin 1s linear infinite;
   --animate-tick: tick 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
-  --animate-toastEnter: toastEnter 0.4s ease; /* NOT IN DCX */
-  --animate-toastExit: toastExit 0.4s ease; /* NOT IN DCX */
+  --animate-toast-enter: toast-enter 0.4s ease; /* NOT IN DCX */
+  --animate-toast-exit: toast-exit 0.4s ease; /* NOT IN DCX */
   --animate-tock: tock 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
   --animate-wave: wave 4s linear infinite;
-  --animate-zoomIn: zoomIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* NOT IN DCX */
-  --animate-zoomOut: zoomOut 180ms cubic-bezier(0.4, 0, 1, 1) forwards; /* NOT IN DCX */
+  --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;
 }

package/styles/ui/button.css

@@ -18,14 +18,6 @@
     pointer-events: none;
   }
 
-  @media (hover: hover) and (pointer: fine) {
-    .button:active:not(:disabled) {
-      transform: scale(0.98);
-      /* TODO: replace with: */
-      /* @apply active:animate-boop; */
-    }
-  }
-
   /* themes */
   .button-outline,
   .button-solid {
@@ -45,7 +37,25 @@
     color: var(--button-primary);
   }
 
+  .button-solid {
+    background-color: color-mix(
+      in oklab,
+      var(--button-primary) var(--button-bg-opacity),
+      transparent
+    );
+    border-color: color-mix(
+      in oklab,
+      var(--button-primary) var(--button-border-opacity),
+      transparent
+    );
+    color: var(--button-secondary);
+  }
+
   @media (hover: hover) and (pointer: fine) {
+    .button:active:not(:disabled) {
+      transform: scale(0.98);
+    }
+
     .button-outline:active:not(:disabled),
     .button-outline:hover:not(:disabled),
     .button-outline:focus:not(:disabled),
@@ -62,23 +72,7 @@
       );
       color: var(--button-secondary);
     }
-  }
-
-  .button-solid {
-    background-color: color-mix(
-      in oklab,
-      var(--button-primary) var(--button-bg-opacity),
-      transparent
-    );
-    border-color: color-mix(
-      in oklab,
-      var(--button-primary) var(--button-border-opacity),
-      transparent
-    );
-    color: var(--button-secondary);
-  }
 
-  @media (hover: hover) and (pointer: fine) {
     .button-solid:active:not(:disabled),
     .button-solid:hover:not(:disabled),
     .button-solid:focus:not(:disabled),

package/styles/ui/controls.css

@@ -1,8 +1,7 @@
 @layer utilities {
   /* This file is for styling the controls of the form inputs (checkbox, radio, switch, filter) */
   /* Styling the controls by their HTML semantic allows us to visually guarantee the non-regression of this semantic */
-  /* Radio and Checkbox */
-  label > span > input[type='checkbox']:not([role='switch']),
+  /* Radio  */
   label > span > input[type='radio'] {
     opacity: 0;
     position: absolute;
@@ -10,7 +9,6 @@
     height: 100%;
     border: 0;
   }
-  label > span > input[type='checkbox']:not([role='switch']) + span,
   label > span > input[type='radio'] + span {
     @apply border transition-all duration-200;
     --tw-ring-color: transparent;
@@ -20,25 +18,20 @@
     align-items: center;
     justify-content: center;
   }
-  label > span > input[type='checkbox']:not([role='switch']) + span svg,
   label > span > input[type='radio'] + span svg {
     opacity: 0;
     transform: scale(0);
     transform-origin: center;
     transition: all var(--transition-duration-boop) var(--transition-fn-boop);
   }
-  label > span > input[type='checkbox']:not([role='switch']):checked + span svg,
   label > span > input[type='radio']:checked + span svg {
     opacity: 1;
     transform: scale(1);
   }
-  label > span > input[type='checkbox']:not([role='switch']):checked + span,
-  label > span > input[type='checkbox']:not([role='switch']):not([disabled]):hover + span,
   label > span > input[type='radio']:checked + span,
   label > span > input[type='radio']:not([disabled]):hover + span {
     @apply border-black;
   }
-  label > span > input[type='checkbox']:not([role='switch']):focus-visible + span,
   label > span > input[type='radio']:focus-visible + span {
     @apply ring-8;
     --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
@@ -46,9 +39,6 @@
   label > span > input[type='radio'] + span {
     @apply rounded-full;
   }
-  label > span > input[type='checkbox']:not([role='switch']) + span {
-    border-radius: calc(var(--spacing) * 8);
-  }
   /* Filter */
   @media (hover: hover) and (pointer: fine) {
     label:active > input[type='checkbox'][data-name='Filter']:not(:disabled) {

package/styles/variants.css

@@ -10,5 +10,3 @@
 }
 
 @custom-variant hoverable (@media (hover: hover) and (pointer: fine));
-
-@custom-variant popover ('open', '&:popover-open');