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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/examples/sidebar-layout-demo.js +5 -5
  2. package/examples/sidebar-layout-demo.js.map +1 -1
  3. package/examples/sidebar-layout-minimal-demo.js +2 -2
  4. package/examples/sidebar-layout-minimal-demo.js.map +1 -1
  5. package/examples/sidebar-layout-with-header-demo.js +2 -2
  6. package/examples/sidebar-layout-with-header-demo.js.map +1 -1
  7. package/package.json +1 -1
  8. package/ui/SidebarLayout.d.ts +8 -6
  9. package/ui/SidebarLayout.js +29 -16
  10. package/ui/SidebarLayout.js.map +1 -1
package/examples/sidebar-layout-demo.js CHANGED
@@ -9,7 +9,7 @@ var o = [
9
9
  {
10
10
  label: "Home",
11
11
  icon: "Home",
12
- url: "#"
12
+ href: "#"
13
13
  },
14
14
  {
15
15
  label: "Projects",
@@ -17,22 +17,22 @@ var o = [
17
17
  items: [
18
18
  {
19
19
  label: "Project A",
20
- url: "#"
20
+ href: "#"
21
21
  },
22
22
  {
23
23
  label: "Project B",
24
- url: "#"
24
+ href: "#"
25
25
  },
26
26
  {
27
27
  label: "Project C",
28
- url: "#"
28
+ href: "#"
29
29
  }
30
30
  ]
31
31
  },
32
32
  {
33
33
  label: "Team",
34
34
  icon: "PeopleDouble",
35
- url: "#"
35
+ href: "#"
36
36
  }
37
37
  ];
38
38
  function s() {
package/examples/sidebar-layout-demo.js.map CHANGED
@@ -1 +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"}
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, 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 CHANGED
@@ -5,11 +5,11 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
5
5
  var r = [{
6
6
  label: "Home",
7
7
  icon: "Home",
8
- url: "#"
8
+ href: "#"
9
9
  }, {
10
10
  label: "Settings",
11
11
  icon: "Compare",
12
- url: "#"
12
+ href: "#"
13
13
  }];
14
14
  function i() {
15
15
  return /* @__PURE__ */ n(e, {
package/examples/sidebar-layout-minimal-demo.js.map CHANGED
@@ -1 +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"}
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, 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 CHANGED
@@ -5,11 +5,11 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
5
5
  var r = [{
6
6
  label: "Dashboard",
7
7
  icon: "Home",
8
- url: "#"
8
+ href: "#"
9
9
  }, {
10
10
  label: "Analytics",
11
11
  icon: "CheckOutlined",
12
- url: "#"
12
+ href: "#"
13
13
  }];
14
14
  function i() {
15
15
  return /* @__PURE__ */ n(e, {
package/examples/sidebar-layout-with-header-demo.js.map CHANGED
@@ -1 +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"}
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, 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clubmed/trident-ui",
3
- "version": "2.0.0-beta.2",
3
+ "version": "2.0.0-beta.4",
4
4
  "type": "module",
5
5
  "description": "Shared ClubMed React UI components",
6
6
  "keywords": [
package/ui/SidebarLayout.d.ts CHANGED
@@ -1,14 +1,16 @@
1
1
  import { IconicNames } from '@clubmed/trident-icons';
2
2
  import { ComponentPropsWithoutRef, ReactNode } from 'react';
3
+ type SidebarSubItem = {
4
+ label: string;
5
+ href: string;
6
+ } & ComponentPropsWithoutRef<'a'>;
3
7
  type SidebarItem = {
4
8
  label: string;
5
9
  icon: IconicNames;
6
- url?: string;
7
- items?: {
8
- label: string;
9
- url: string;
10
- }[];
11
- };
10
+ items?: SidebarSubItem[];
11
+ } & ((ComponentPropsWithoutRef<'a'> & {
12
+ href: string;
13
+ }) | ComponentPropsWithoutRef<'button'>);
12
14
  interface SidebarItemProps {
13
15
  item: SidebarItem;
14
16
  isActive?: boolean;
package/ui/SidebarLayout.js CHANGED
@@ -6,15 +6,28 @@ import { useCallback as i, useRef as a, useState as o } from "react";
6
6
  import { Icon as s } from "@clubmed/trident-icons";
7
7
  import { jsx as c, jsxs as l } from "react/jsx-runtime";
8
8
  //#region lib/ui/SidebarLayout.tsx
9
- var u = ({ item: e, isActive: n = !1, isCollapsed: r = !1, anchorName: i, onItemClick: a }) => {
9
+ function u(e) {
10
+ if ("href" in e) {
11
+ let { children: t, icon: n, label: r, ...i } = e;
12
+ return /* @__PURE__ */ c("a", {
13
+ ...i,
14
+ className: "flex whitespace-nowrap items-center text-white hover:text-saffron transition-colors outline-none focus-visible:bg-white/20 rounded-pill relative group/sidebar-item",
15
+ children: t
16
+ });
17
+ }
18
+ let { children: t, icon: n, label: r, ...i } = e;
19
+ return /* @__PURE__ */ c("button", {
20
+ ...i,
21
+ className: "flex whitespace-nowrap items-center text-white outline-none rounded-pill relative group/sidebar-item",
22
+ children: t
23
+ });
24
+ }
25
+ var d = ({ item: e, isActive: n = !1, isCollapsed: r = !1, anchorName: i, onItemClick: a }) => {
10
26
  let o = e.items && e.items.length > 0;
11
27
  return /* @__PURE__ */ l("div", {
12
28
  className: "col-start-1 col-end-3",
13
- children: [/* @__PURE__ */ l(e.url ? "a" : "button", {
14
- ...e.url ? {
15
- href: e.url,
16
- className: "flex whitespace-nowrap items-center text-white hover:text-saffron transition-colors outline-none focus-visible:bg-white/20 rounded-pill relative group/sidebar-item"
17
- } : { className: "flex whitespace-nowrap items-center text-white outline-none rounded-pill relative group/sidebar-item" },
29
+ children: [/* @__PURE__ */ l(u, {
30
+ ...e,
18
31
  onClick: (e) => {
19
32
  o && a && (e.preventDefault(), a());
20
33
  },
@@ -49,14 +62,14 @@ var u = ({ item: e, isActive: n = !1, isCollapsed: r = !1, anchorName: i, onItem
49
62
  children: /* @__PURE__ */ c("div", {
50
63
  className: "outline-none relative overflow-hidden flex flex-col gap-8 ps-48 font-normal",
51
64
  children: e.items.map((e, t) => /* @__PURE__ */ c("a", {
52
- href: e.url,
65
+ href: e.href,
53
66
  className: "text-white hover:text-saffron transition-colors text-b4 whitespace-nowrap outline-none focus-visible:bg-white/20 ps-8 pe-16 rounded-pill",
54
67
  children: e.label
55
68
  }, t))
56
69
  })
57
70
  })]
58
71
  });
59
- }, d = ({ isCollapsed: e }) => /* @__PURE__ */ c("svg", {
72
+ }, f = ({ isCollapsed: e }) => /* @__PURE__ */ c("svg", {
60
73
  xmlns: "http://www.w3.org/2000/svg",
61
74
  width: "33",
62
75
  height: "48",
@@ -75,7 +88,7 @@ var u = ({ item: e, isActive: n = !1, isCollapsed: r = !1, anchorName: i, onItem
75
88
  })]
76
89
  })
77
90
  });
78
- function f() {
91
+ function p() {
79
92
  let [e, t] = o(!0);
80
93
  return {
81
94
  isCollapsed: e,
@@ -86,8 +99,8 @@ function f() {
86
99
  }, [])
87
100
  };
88
101
  }
89
- var p = ({ items: i, children: a, className: o, activeIndex: s = 0, ...p }) => {
90
- let { isCollapsed: m, setIsCollapsed: h, handleToggleCollapse: g } = f(), { "header-logo": _, header: v, "header-actions": y, children: b } = n(a, [
102
+ var m = ({ items: i, children: a, className: o, activeIndex: s = 0, ...u }) => {
103
+ let { isCollapsed: m, setIsCollapsed: h, handleToggleCollapse: g } = p(), { "header-logo": _, header: v, "header-actions": y, children: b } = n(a, [
91
104
  "header-logo",
92
105
  "header",
93
106
  "header-actions"
@@ -95,7 +108,7 @@ var p = ({ items: i, children: a, className: o, activeIndex: s = 0, ...p }) => {
95
108
  return /* @__PURE__ */ l("div", {
96
109
  "data-name": "SidebarLayout",
97
110
  className: e("h-screen overflow-clip flex flex-col bg-ultramarine", o),
98
- ...p,
111
+ ...u,
99
112
  children: [/* @__PURE__ */ l("header", {
100
113
  className: "bg-ultramarine h-64 flex items-center justify-between gap-8 p-8 ps-20 md:px-24 text-white shrink-0",
101
114
  children: [
@@ -118,10 +131,10 @@ var p = ({ items: i, children: a, className: o, activeIndex: s = 0, ...p }) => {
118
131
  onClick: g,
119
132
  "aria-label": m ? "Expand sidebar" : "Collapse sidebar",
120
133
  style: { positionAnchor: `--sidebar-item-${s}` },
121
- children: /* @__PURE__ */ c(d, { isCollapsed: m })
134
+ children: /* @__PURE__ */ c(f, { isCollapsed: m })
122
135
  }), /* @__PURE__ */ c("nav", {
123
136
  className: t("max-md:divide-y-1 p-8 max-md:h-full max-md:overflow-auto md:gap-y-20 grid overflow-hidden text-b3 font-semibold relative transition-grid-template-columns duration-300 ease-in-out", m ? "grid-cols-[48px_0fr]" : "grid-cols-[48px_1fr]"),
124
- children: i.map((e, t) => /* @__PURE__ */ c(u, {
137
+ children: i.map((e, t) => /* @__PURE__ */ c(d, {
125
138
  item: e,
126
139
  isActive: t === s,
127
140
  isCollapsed: m,
@@ -132,13 +145,13 @@ var p = ({ items: i, children: a, className: o, activeIndex: s = 0, ...p }) => {
132
145
  }, t))
133
146
  })]
134
147
  }), /* @__PURE__ */ c("main", {
135
- className: "min-w-full md:min-w-0 md:w-[calc(100%-96px)] bg-white p-24 overflow-auto md:rounded-ss-16 h-full shrink-0",
148
+ className: "min-w-full md:min-w-0 md:w-[calc(100%-108px)] bg-white p-24 overflow-auto md:rounded-ss-16 h-full shrink-0",
136
149
  children: b
137
150
  })]
138
151
  })]
139
152
  });
140
153
  };
141
154
  //#endregion
142
- export { d as CollapseIndicatorSVG, p as SidebarLayout };
155
+ export { f as CollapseIndicatorSVG, m as SidebarLayout };
143
156
 
144
157
  //# sourceMappingURL=SidebarLayout.js.map
package/ui/SidebarLayout.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SidebarLayout.js","names":[],"sources":["../../lib/ui/SidebarLayout.tsx"],"sourcesContent":["import { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport clsx from 'clsx';\nimport {\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type ReactNode,\n useCallback,\n useRef,\n useState,\n} from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { HamburgerIcon } from './HamburgerIcon';\nimport { useSlots } from '@/ui/hooks/useSlots';\n\ntype SidebarItem = {\n label: string;\n icon: IconicNames;\n url?: string;\n items?: {\n label: string;\n url: string;\n }[];\n};\n\ninterface SidebarItemProps {\n item: SidebarItem;\n isActive?: boolean;\n isCollapsed?: boolean;\n anchorName: string;\n onItemClick?: () => void;\n}\n\nconst SidebarItem = ({\n item,\n isActive = false,\n isCollapsed = false,\n anchorName,\n onItemClick,\n}: SidebarItemProps) => {\n const hasSubItems = item.items && item.items.length > 0;\n\n const Comp = item.url ? 'a' : 'button';\n\n const componentProps = item.url\n ? {\n href: item.url,\n className:\n 'flex whitespace-nowrap items-center text-white hover:text-saffron transition-colors outline-none focus-visible:bg-white/20 rounded-pill relative group/sidebar-item',\n }\n : {\n className:\n 'flex whitespace-nowrap items-center text-white outline-none rounded-pill relative group/sidebar-item',\n };\n\n return (\n <div className=\"col-start-1 col-end-3\">\n <Comp\n {...componentProps}\n onClick={(e) => {\n if (hasSubItems && onItemClick) {\n e.preventDefault();\n onItemClick();\n }\n }}\n style={{ anchorName: `--${anchorName}` } as React.CSSProperties}\n >\n <div className=\"relative\">\n <div\n className={twMerge('aspect-square w-48 rounded-full flex items-center justify-center')}\n >\n <Icon name={item.icon} className=\"w-24 text-white\" />\n </div>\n <div className=\"absolute inset-0 pointer-events-none\" aria-hidden=\"true\" inert>\n <div\n className={twMerge(\n 'max-md:hidden aspect-square w-48 rounded-full flex items-center justify-center bg-lightSand text-black',\n '[clip-path:circle(var(--sidebarItem_clipCircle))] transition-all duration-200 delay-100 ease-in-out group-focus-visible/sidebar-item:ring-8 group-focus-visible/sidebar-item:ring-lavender/20',\n isActive ? '[--sidebarItem_clipCircle:100%]' : '[--sidebarItem_clipCircle:0%]',\n 'group-hover/sidebar-item:[--sidebarItem_clipCircle:100%] group-focus-within/sidebar-item:[--sidebarItem_clipCircle:100%]',\n !isActive &&\n 'group-hover/sidebar-item:bg-lightSand/80 group-focus-within/sidebar-item:bg-lightSand/80',\n )}\n >\n <Icon name={item.icon} className=\"w-24\" />\n </div>\n </div>\n </div>\n <span\n className={twMerge(\n 'transition-all duration-300 ease-in-out whitespace-nowrap ps-8 pe-12 truncate md:max-w-240',\n isCollapsed ? 'opacity-0' : 'opacity-100',\n )}\n >\n {item.label}\n </span>\n </Comp>\n {hasSubItems && (\n <div\n className={twMerge(\n 'grid transition-[grid-template-rows,opacity] duration-300 ease-in-out overflow-hidden max-md:grid-rows-[1fr] max-md:opacity-100',\n isCollapsed ? 'grid-rows-[0fr] opacity-0' : 'grid-rows-[1fr] opacity-100 pb-12',\n )}\n inert={isCollapsed}\n >\n <div className=\"outline-none relative overflow-hidden flex flex-col gap-8 ps-48 font-normal\">\n {item.items!.map((subItem, subIndex) => (\n <a\n key={subIndex}\n href={subItem.url}\n className=\"text-white hover:text-saffron transition-colors text-b4 whitespace-nowrap outline-none focus-visible:bg-white/20 ps-8 pe-16 rounded-pill\"\n >\n {subItem.label}\n </a>\n ))}\n </div>\n </div>\n )}\n </div>\n );\n};\n\nexport const CollapseIndicatorSVG = ({ isCollapsed }: { isCollapsed: boolean }) => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"48\">\n <g fill=\"none\" fillRule=\"nonzero\">\n <path\n fill=\"#FFF\"\n d=\"M10.008 48v-1.829c0-4.116-1.722-8.045-4.75-10.835-6.331-5.837-6.331-15.835 0-21.672a14.736 14.736 0 0 0 4.75-10.835V0h27.417v48H10.008Z\"\n />\n <g\n className={twMerge(\n 'transition-transform duration-500 ease-in-out origin-center [transform-box:fill-box]',\n isCollapsed ? 'rotate-180' : 'rotate-0',\n )}\n >\n <path\n fill=\"#1E2643\"\n d=\"M19.686 12.547c6.617 0 12 5.383 12 12s-5.383 12-12 12-12-5.383-12-12 5.383-12 12-12Zm0 1.986c-5.522 0-10.015 4.492-10.015 10.014 0 5.523 4.493 10.015 10.016 10.015 5.52 0 10.012-4.492 10.012-10.015 0-5.522-4.492-10.014-10.012-10.014Zm-2.097 4.382c.376-.366 1.032-.366 1.409 0l5.037 4.895a.948.948 0 0 1 0 1.37l-5.037 4.894a1.002 1.002 0 0 1-.705.285 1 1 0 0 1-.704-.285.947.947 0 0 1 0-1.369l4.332-4.21-4.332-4.21a.95.95 0 0 1 0-1.37Z\"\n />\n </g>\n </g>\n </svg>\n);\n\nexport interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {\n items: SidebarItem[];\n children: ReactNode;\n activeIndex?: number;\n}\n\nfunction useSidebarLayout() {\n const [isCollapsed, setIsCollapsed] = useState(true);\n const overlayRef = useRef<HTMLDivElement>(null);\n\n const handleToggleCollapse = useCallback(() => {\n setIsCollapsed((prev) => !prev);\n }, []);\n\n return {\n isCollapsed,\n setIsCollapsed,\n overlayRef,\n handleToggleCollapse,\n };\n}\n\nexport const SidebarLayout = ({\n items,\n children: initialChildren,\n className,\n activeIndex = 0,\n ...attrs\n}: SidebarLayoutProps) => {\n const { isCollapsed, setIsCollapsed, handleToggleCollapse } = useSidebarLayout();\n const {\n 'header-logo': headerLogo,\n header,\n ['header-actions']: headerActions,\n children,\n } = useSlots(initialChildren, ['header-logo', 'header', 'header-actions']);\n\n return (\n <div\n data-name=\"SidebarLayout\"\n className={clsx('h-screen overflow-clip flex flex-col bg-ultramarine', className)}\n {...attrs}\n >\n {/* Header */}\n <header className=\"bg-ultramarine h-64 flex items-center justify-between gap-8 p-8 ps-20 md:px-24 text-white shrink-0\">\n {headerLogo}\n {header}\n {headerActions}\n <button\n className=\"md:hidden w-48 h-48 focus-visible:ring-8 focus-visible:ring-lavender/20 rounded-full flex items-center justify-center text-white transition-opacity outline-none\"\n aria-label={isCollapsed ? 'Open the navigation menu' : 'Close the navigation menu'}\n onClick={handleToggleCollapse}\n >\n <HamburgerIcon isActive={!isCollapsed} />\n </button>\n </header>\n\n {/* Main container with sidebar and content */}\n <div className=\"flex h-full overflow-x-clip overflow-y-hidden\">\n {/* Sidebar */}\n <aside\n className={twMerge(\n 'max-md:absolute max-md:top-64 max-md:h-[calc(100dvh-64px)] max-md:w-screen flex bg-ultramarine px-8 md:py-16 md:ps-28 md:pe-16 text-white flex-col gap-24 transition-all duration-300 ease-in-out relative h-full shrink-0',\n isCollapsed ? 'max-md:-translate-x-full' : 'md:pe-24',\n )}\n >\n {/* Indicator */}\n <button\n className=\"hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-8 focus-visible:ring-lavender/20 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]\"\n onClick={handleToggleCollapse}\n aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n style={\n {\n positionAnchor: `--sidebar-item-${activeIndex}`,\n } as CSSProperties\n }\n >\n <CollapseIndicatorSVG isCollapsed={isCollapsed} />\n </button>\n\n <nav\n className={twMerge(\n 'max-md:divide-y-1 p-8 max-md:h-full max-md:overflow-auto md:gap-y-20 grid overflow-hidden text-b3 font-semibold relative transition-grid-template-columns duration-300 ease-in-out',\n isCollapsed ? 'grid-cols-[48px_0fr]' : 'grid-cols-[48px_1fr]',\n )}\n >\n {items.map((item, index) => (\n <SidebarItem\n key={index}\n item={item}\n isActive={index === activeIndex}\n isCollapsed={isCollapsed}\n anchorName={`sidebar-item-${index}`}\n onItemClick={() => {\n if (item.items && item.items.length > 0) {\n setIsCollapsed((prev) => (prev ? false : prev));\n }\n }}\n />\n ))}\n </nav>\n </aside>\n\n <main className=\"min-w-full md:min-w-0 md:w-[calc(100%-96px)] bg-white p-24 overflow-auto md:rounded-ss-16 h-full shrink-0\">\n {children}\n </main>\n </div>\n </div>\n );\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"SidebarLayout.js","names":[],"sources":["../../lib/ui/SidebarLayout.tsx"],"sourcesContent":["import { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport clsx from 'clsx';\nimport {\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type PropsWithChildren,\n type ReactNode,\n type MouseEvent,\n useCallback,\n useRef,\n useState,\n} from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { HamburgerIcon } from './HamburgerIcon';\nimport { useSlots } from '@/ui/hooks/useSlots';\n\ntype SidebarSubItem = {\n label: string;\n href: string;\n} & ComponentPropsWithoutRef<'a'>;\n\ntype SidebarItem = {\n label: string;\n icon: IconicNames;\n items?: SidebarSubItem[];\n} & ((ComponentPropsWithoutRef<'a'> & { href: string }) | ComponentPropsWithoutRef<'button'>);\n\ninterface SidebarItemProps {\n item: SidebarItem;\n isActive?: boolean;\n isCollapsed?: boolean;\n anchorName: string;\n onItemClick?: () => void;\n}\n\nfunction Cta(item: PropsWithChildren<SidebarItem>) {\n if ('href' in item) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { children, icon, label, ...attrs } = item;\n\n return (\n <a\n {...attrs}\n className=\"flex whitespace-nowrap items-center text-white hover:text-saffron transition-colors outline-none focus-visible:bg-white/20 rounded-pill relative group/sidebar-item\"\n >\n {children}\n </a>\n );\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { children, icon, label, ...attrs } = item;\n\n return (\n <button\n {...attrs}\n className=\"flex whitespace-nowrap items-center text-white outline-none rounded-pill relative group/sidebar-item\"\n >\n {children}\n </button>\n );\n}\n\nconst SidebarItem = ({\n item,\n isActive = false,\n isCollapsed = false,\n anchorName,\n onItemClick,\n}: SidebarItemProps) => {\n const hasSubItems = item.items && item.items.length > 0;\n\n return (\n <div className=\"col-start-1 col-end-3\">\n <Cta\n {...item}\n onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n if (hasSubItems && onItemClick) {\n e.preventDefault();\n onItemClick();\n }\n }}\n style={{ anchorName: `--${anchorName}` } as CSSProperties}\n >\n <div className=\"relative\">\n <div\n className={twMerge('aspect-square w-48 rounded-full flex items-center justify-center')}\n >\n <Icon name={item.icon} className=\"w-24 text-white\" />\n </div>\n <div className=\"absolute inset-0 pointer-events-none\" aria-hidden=\"true\" inert>\n <div\n className={twMerge(\n 'max-md:hidden aspect-square w-48 rounded-full flex items-center justify-center bg-lightSand text-black',\n '[clip-path:circle(var(--sidebarItem_clipCircle))] transition-all duration-200 delay-100 ease-in-out group-focus-visible/sidebar-item:ring-8 group-focus-visible/sidebar-item:ring-lavender/20',\n isActive ? '[--sidebarItem_clipCircle:100%]' : '[--sidebarItem_clipCircle:0%]',\n 'group-hover/sidebar-item:[--sidebarItem_clipCircle:100%] group-focus-within/sidebar-item:[--sidebarItem_clipCircle:100%]',\n !isActive &&\n 'group-hover/sidebar-item:bg-lightSand/80 group-focus-within/sidebar-item:bg-lightSand/80',\n )}\n >\n <Icon name={item.icon} className=\"w-24\" />\n </div>\n </div>\n </div>\n <span\n className={twMerge(\n 'transition-all duration-300 ease-in-out whitespace-nowrap ps-8 pe-12 truncate md:max-w-240',\n isCollapsed ? 'opacity-0' : 'opacity-100',\n )}\n >\n {item.label}\n </span>\n </Cta>\n {hasSubItems && (\n <div\n className={twMerge(\n 'grid transition-[grid-template-rows,opacity] duration-300 ease-in-out overflow-hidden max-md:grid-rows-[1fr] max-md:opacity-100',\n isCollapsed ? 'grid-rows-[0fr] opacity-0' : 'grid-rows-[1fr] opacity-100 pb-12',\n )}\n inert={isCollapsed}\n >\n <div className=\"outline-none relative overflow-hidden flex flex-col gap-8 ps-48 font-normal\">\n {item.items!.map((subItem, subIndex) => (\n <a\n key={subIndex}\n href={subItem.href}\n className=\"text-white hover:text-saffron transition-colors text-b4 whitespace-nowrap outline-none focus-visible:bg-white/20 ps-8 pe-16 rounded-pill\"\n >\n {subItem.label}\n </a>\n ))}\n </div>\n </div>\n )}\n </div>\n );\n};\n\nexport const CollapseIndicatorSVG = ({ isCollapsed }: { isCollapsed: boolean }) => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"48\">\n <g fill=\"none\" fillRule=\"nonzero\">\n <path\n fill=\"#FFF\"\n d=\"M10.008 48v-1.829c0-4.116-1.722-8.045-4.75-10.835-6.331-5.837-6.331-15.835 0-21.672a14.736 14.736 0 0 0 4.75-10.835V0h27.417v48H10.008Z\"\n />\n <g\n className={twMerge(\n 'transition-transform duration-500 ease-in-out origin-center [transform-box:fill-box]',\n isCollapsed ? 'rotate-180' : 'rotate-0',\n )}\n >\n <path\n fill=\"#1E2643\"\n d=\"M19.686 12.547c6.617 0 12 5.383 12 12s-5.383 12-12 12-12-5.383-12-12 5.383-12 12-12Zm0 1.986c-5.522 0-10.015 4.492-10.015 10.014 0 5.523 4.493 10.015 10.016 10.015 5.52 0 10.012-4.492 10.012-10.015 0-5.522-4.492-10.014-10.012-10.014Zm-2.097 4.382c.376-.366 1.032-.366 1.409 0l5.037 4.895a.948.948 0 0 1 0 1.37l-5.037 4.894a1.002 1.002 0 0 1-.705.285 1 1 0 0 1-.704-.285.947.947 0 0 1 0-1.369l4.332-4.21-4.332-4.21a.95.95 0 0 1 0-1.37Z\"\n />\n </g>\n </g>\n </svg>\n);\n\nexport interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {\n items: SidebarItem[];\n children: ReactNode;\n activeIndex?: number;\n}\n\nfunction useSidebarLayout() {\n const [isCollapsed, setIsCollapsed] = useState(true);\n const overlayRef = useRef<HTMLDivElement>(null);\n\n const handleToggleCollapse = useCallback(() => {\n setIsCollapsed((prev) => !prev);\n }, []);\n\n return {\n isCollapsed,\n setIsCollapsed,\n overlayRef,\n handleToggleCollapse,\n };\n}\n\nexport const SidebarLayout = ({\n items,\n children: initialChildren,\n className,\n activeIndex = 0,\n ...attrs\n}: SidebarLayoutProps) => {\n const { isCollapsed, setIsCollapsed, handleToggleCollapse } = useSidebarLayout();\n const {\n 'header-logo': headerLogo,\n header,\n ['header-actions']: headerActions,\n children,\n } = useSlots(initialChildren, ['header-logo', 'header', 'header-actions']);\n\n return (\n <div\n data-name=\"SidebarLayout\"\n className={clsx('h-screen overflow-clip flex flex-col bg-ultramarine', className)}\n {...attrs}\n >\n {/* Header */}\n <header className=\"bg-ultramarine h-64 flex items-center justify-between gap-8 p-8 ps-20 md:px-24 text-white shrink-0\">\n {headerLogo}\n {header}\n {headerActions}\n <button\n className=\"md:hidden w-48 h-48 focus-visible:ring-8 focus-visible:ring-lavender/20 rounded-full flex items-center justify-center text-white transition-opacity outline-none\"\n aria-label={isCollapsed ? 'Open the navigation menu' : 'Close the navigation menu'}\n onClick={handleToggleCollapse}\n >\n <HamburgerIcon isActive={!isCollapsed} />\n </button>\n </header>\n\n {/* Main container with sidebar and content */}\n <div className=\"flex h-full overflow-x-clip overflow-y-hidden\">\n {/* Sidebar */}\n <aside\n className={twMerge(\n 'max-md:absolute max-md:top-64 max-md:h-[calc(100dvh-64px)] max-md:w-screen flex bg-ultramarine px-8 md:py-16 md:ps-28 md:pe-16 text-white flex-col gap-24 transition-all duration-300 ease-in-out relative h-full shrink-0',\n isCollapsed ? 'max-md:-translate-x-full' : 'md:pe-24',\n )}\n >\n {/* Indicator */}\n <button\n className=\"hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-8 focus-visible:ring-lavender/20 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]\"\n onClick={handleToggleCollapse}\n aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n style={\n {\n positionAnchor: `--sidebar-item-${activeIndex}`,\n } as CSSProperties\n }\n >\n <CollapseIndicatorSVG isCollapsed={isCollapsed} />\n </button>\n\n <nav\n className={twMerge(\n 'max-md:divide-y-1 p-8 max-md:h-full max-md:overflow-auto md:gap-y-20 grid overflow-hidden text-b3 font-semibold relative transition-grid-template-columns duration-300 ease-in-out',\n isCollapsed ? 'grid-cols-[48px_0fr]' : 'grid-cols-[48px_1fr]',\n )}\n >\n {items.map((item, index) => (\n <SidebarItem\n key={index}\n item={item}\n isActive={index === activeIndex}\n isCollapsed={isCollapsed}\n anchorName={`sidebar-item-${index}`}\n onItemClick={() => {\n if (item.items && item.items.length > 0) {\n setIsCollapsed((prev) => (prev ? false : prev));\n }\n }}\n />\n ))}\n </nav>\n </aside>\n\n <main className=\"min-w-full md:min-w-0 md:w-[calc(100%-108px)] bg-white p-24 overflow-auto md:rounded-ss-16 h-full shrink-0\">\n {children}\n </main>\n </div>\n </div>\n );\n};\n"],"mappings":"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"}