@clubmed/trident-ui 2.0.0-beta.17 → 2.0.0-beta.18

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 (4) hide show
  1. package/package.json +1 -1
  2. package/ui/SidebarLayout.d.ts +3 -1
  3. package/ui/SidebarLayout.js +31 -23
  4. package/ui/SidebarLayout.js.map +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clubmed/trident-ui",
3
- "version": "2.0.0-beta.17",
3
+ "version": "2.0.0-beta.18",
4
4
  "type": "module",
5
5
  "description": "Shared ClubMed React UI components",
6
6
  "keywords": [
package/ui/SidebarLayout.d.ts CHANGED
@@ -26,6 +26,8 @@ export interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {
26
26
  items: SidebarItem[];
27
27
  children: ReactNode;
28
28
  activeIndex?: number;
29
+ isCollapsed?: boolean;
30
+ onCollapsedChange?: (isCollapsed: boolean) => void;
29
31
  }
30
- export declare const SidebarLayout: ({ items, children: initialChildren, className, activeIndex, ...attrs }: SidebarLayoutProps) => import("react/jsx-runtime").JSX.Element;
32
+ export declare const SidebarLayout: ({ items, children: initialChildren, className, activeIndex, isCollapsed: initialCollapsedValue, onCollapsedChange, ...attrs }: SidebarLayoutProps) => import("react/jsx-runtime").JSX.Element;
31
33
  export {};
package/ui/SidebarLayout.js CHANGED
@@ -88,19 +88,27 @@ var d = ({ item: e, isActive: n = !1, isCollapsed: r = !1, anchorName: i, onItem
88
88
  })]
89
89
  })
90
90
  });
91
- function p() {
92
- let [e, t] = o(!0);
91
+ function p({ isCollapsed: e, onCollapsedChange: t }) {
92
+ let [n, r] = o(() => e ?? !0), s = a(null), c = i((e) => {
93
+ r((n) => {
94
+ let r = typeof e == "function" ? e(n) : e;
95
+ return r !== n && t?.(r), r;
96
+ });
97
+ }, [t]);
93
98
  return {
94
- isCollapsed: e,
95
- setIsCollapsed: t,
96
- overlayRef: a(null),
99
+ isCollapsed: n,
100
+ setIsCollapsed: c,
101
+ overlayRef: s,
97
102
  handleToggleCollapse: i(() => {
98
- t((e) => !e);
99
- }, [])
103
+ c((e) => !e);
104
+ }, [c])
100
105
  };
101
106
  }
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, [
107
+ var m = ({ items: i, children: a, className: o, activeIndex: s = 0, isCollapsed: u, onCollapsedChange: m, ...h }) => {
108
+ let { isCollapsed: g, setIsCollapsed: _, handleToggleCollapse: v } = p({
109
+ isCollapsed: u,
110
+ onCollapsedChange: m
111
+ }), { "header-logo": y, header: b, "header-actions": x, children: S } = n(a, [
104
112
  "header-logo",
105
113
  "header",
106
114
  "header-actions"
@@ -108,45 +116,45 @@ var m = ({ items: i, children: a, className: o, activeIndex: s = 0, ...u }) => {
108
116
  return /* @__PURE__ */ l("div", {
109
117
  "data-name": "SidebarLayout",
110
118
  className: e("h-screen overflow-clip flex flex-col bg-ultramarine", o),
111
- ...u,
119
+ ...h,
112
120
  children: [/* @__PURE__ */ l("header", {
113
121
  className: "bg-ultramarine h-64 flex items-center justify-between gap-8 p-8 ps-20 md:px-24 text-white shrink-0",
114
122
  children: [
115
- _,
116
- v,
117
123
  y,
124
+ b,
125
+ x,
118
126
  /* @__PURE__ */ c("button", {
119
127
  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",
120
- "aria-label": m ? "Open the navigation menu" : "Close the navigation menu",
121
- onClick: g,
122
- children: /* @__PURE__ */ c(r, { isActive: !m })
128
+ "aria-label": g ? "Open the navigation menu" : "Close the navigation menu",
129
+ onClick: v,
130
+ children: /* @__PURE__ */ c(r, { isActive: !g })
123
131
  })
124
132
  ]
125
133
  }), /* @__PURE__ */ l("div", {
126
134
  className: "flex h-full overflow-x-clip overflow-y-hidden",
127
135
  children: [/* @__PURE__ */ l("aside", {
128
- className: t("z-10 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", m ? "max-md:-translate-x-full" : "md:pe-24"),
136
+ className: t("z-10 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", g ? "max-md:-translate-x-full" : "md:pe-24"),
129
137
  children: [/* @__PURE__ */ c("button", {
130
138
  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)]",
131
- onClick: g,
132
- "aria-label": m ? "Expand sidebar" : "Collapse sidebar",
139
+ onClick: v,
140
+ "aria-label": g ? "Expand sidebar" : "Collapse sidebar",
133
141
  style: { positionAnchor: `--sidebar-item-${s}` },
134
- children: /* @__PURE__ */ c(f, { isCollapsed: m })
142
+ children: /* @__PURE__ */ c(f, { isCollapsed: g })
135
143
  }), /* @__PURE__ */ c("nav", {
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]"),
144
+ 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", g ? "grid-cols-[48px_0fr]" : "grid-cols-[48px_1fr]"),
137
145
  children: i.map((e, t) => /* @__PURE__ */ c(d, {
138
146
  item: e,
139
147
  isActive: t === s,
140
- isCollapsed: m,
148
+ isCollapsed: g,
141
149
  anchorName: `sidebar-item-${t}`,
142
150
  onItemClick: () => {
143
- e.items && e.items.length > 0 && h((e) => e && !1);
151
+ e.items && e.items.length > 0 && _((e) => e && !1);
144
152
  }
145
153
  }, t))
146
154
  })]
147
155
  }), /* @__PURE__ */ c("main", {
148
156
  className: "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",
149
- children: b
157
+ children: S
150
158
  })]
151
159
  })]
152
160
  });
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 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 'z-10 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=\"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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"}
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 Dispatch,\n type PropsWithChildren,\n type ReactNode,\n type SetStateAction,\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 isCollapsed?: boolean;\n onCollapsedChange?: (isCollapsed: boolean) => void;\n}\n\nfunction useSidebarLayout({\n isCollapsed: initialCollapsedValue,\n onCollapsedChange,\n}: {\n isCollapsed?: boolean;\n onCollapsedChange?: (isCollapsed: boolean) => void;\n}) {\n const [isCollapsed, setIsCollapsedState] = useState(() => initialCollapsedValue ?? true);\n const overlayRef = useRef<HTMLDivElement>(null);\n\n const setIsCollapsed = useCallback<Dispatch<SetStateAction<boolean>>>(\n (value) => {\n setIsCollapsedState((previousState) => {\n const nextState = typeof value === 'function' ? value(previousState) : value;\n if (nextState !== previousState) {\n onCollapsedChange?.(nextState);\n }\n return nextState;\n });\n },\n [onCollapsedChange],\n );\n\n const handleToggleCollapse = useCallback(() => {\n setIsCollapsed((prev) => !prev);\n }, [setIsCollapsed]);\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 isCollapsed: initialCollapsedValue,\n onCollapsedChange,\n ...attrs\n}: SidebarLayoutProps) => {\n const { isCollapsed, setIsCollapsed, handleToggleCollapse } = useSidebarLayout({\n isCollapsed: initialCollapsedValue,\n onCollapsedChange,\n });\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 'z-10 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=\"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":";;;;;;;;AAqCA,SAAS,EAAI,GAAsC;AACjD,KAAI,UAAU,GAAM;EAElB,IAAM,EAAE,aAAU,SAAM,UAAO,GAAG,MAAU;AAE5C,SACE,kBAAC,KAAD;GACE,GAAI;GACJ,WAAU;GAET;GACC,CAAA;;CAKR,IAAM,EAAE,aAAU,SAAM,UAAO,GAAG,MAAU;AAE5C,QACE,kBAAC,UAAD;EACE,GAAI;EACJ,WAAU;EAET;EACM,CAAA;;AAIb,IAAM,KAAe,EACnB,SACA,cAAW,IACX,iBAAc,IACd,eACA,qBACsB;CACtB,IAAM,IAAc,EAAK,SAAS,EAAK,MAAM,SAAS;AAEtD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GACE,GAAI;GACJ,UAAU,MAAyD;AACjE,IAAI,KAAe,MACjB,EAAE,gBAAgB,EAClB,GAAa;;GAGjB,OAAO,EAAE,YAAY,KAAK,KAAc;aAR1C,CAUE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KACE,WAAW,EAAQ,mEAAmE;eAEtF,kBAAC,GAAD;MAAM,MAAM,EAAK;MAAM,WAAU;MAAoB,CAAA;KACjD,CAAA,EACN,kBAAC,OAAD;KAAK,WAAU;KAAuC,eAAY;KAAO,OAAA;eACvE,kBAAC,OAAD;MACE,WAAW,EACT,0GACA,iMACA,IAAW,oCAAoC,iCAC/C,4HACA,CAAC,KACC,2FACH;gBAED,kBAAC,GAAD;OAAM,MAAM,EAAK;OAAM,WAAU;OAAS,CAAA;MACtC,CAAA;KACF,CAAA,CACF;OACN,kBAAC,QAAD;IACE,WAAW,EACT,8FACA,IAAc,cAAc,cAC7B;cAEA,EAAK;IACD,CAAA,CACH;MACL,KACC,kBAAC,OAAD;GACE,WAAW,EACT,mIACA,IAAc,8BAA8B,oCAC7C;GACD,OAAO;aAEP,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAK,MAAO,KAAK,GAAS,MACzB,kBAAC,KAAD;KAEE,MAAM,EAAQ;KACd,WAAU;eAET,EAAQ;KACP,EALG,EAKH,CACJ;IACE,CAAA;GACF,CAAA,CAEJ;;GAIG,KAAwB,EAAE,qBACrC,kBAAC,OAAD;CAAK,OAAM;CAA6B,OAAM;CAAK,QAAO;WACxD,kBAAC,KAAD;EAAG,MAAK;EAAO,UAAS;YAAxB,CACE,kBAAC,QAAD;GACE,MAAK;GACL,GAAE;GACF,CAAA,EACF,kBAAC,KAAD;GACE,WAAW,EACT,wFACA,IAAc,eAAe,WAC9B;aAED,kBAAC,QAAD;IACE,MAAK;IACL,GAAE;IACF,CAAA;GACA,CAAA,CACF;;CACA,CAAA;AAWR,SAAS,EAAiB,EACxB,aAAa,GACb,wBAIC;CACD,IAAM,CAAC,GAAa,KAAuB,QAAe,KAAyB,GAAK,EAClF,IAAa,EAAuB,KAAK,EAEzC,IAAiB,GACpB,MAAU;AACT,KAAqB,MAAkB;GACrC,IAAM,IAAY,OAAO,KAAU,aAAa,EAAM,EAAc,GAAG;AAIvE,UAHI,MAAc,KAChB,IAAoB,EAAU,EAEzB;IACP;IAEJ,CAAC,EAAkB,CACpB;AAMD,QAAO;EACL;EACA;EACA;EACA,sBAR2B,QAAkB;AAC7C,MAAgB,MAAS,CAAC,EAAK;KAC9B,CAAC,EAAe,CAAC;EAOnB;;AAGH,IAAa,KAAiB,EAC5B,UACA,UAAU,GACV,cACA,iBAAc,GACd,aAAa,GACb,sBACA,GAAG,QACqB;CACxB,IAAM,EAAE,gBAAa,mBAAgB,4BAAyB,EAAiB;EAC7E,aAAa;EACb;EACD,CAAC,EACI,EACJ,eAAe,GACf,WACC,kBAAmB,GACpB,gBACE,EAAS,GAAiB;EAAC;EAAe;EAAU;EAAiB,CAAC;AAE1E,QACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAK,uDAAuD,EAAU;EACjF,GAAI;YAHN,CAME,kBAAC,UAAD;GAAQ,WAAU;aAAlB;IACG;IACA;IACA;IACD,kBAAC,UAAD;KACE,WAAU;KACV,cAAY,IAAc,6BAA6B;KACvD,SAAS;eAET,kBAAC,GAAD,EAAe,UAAU,CAAC,GAAe,CAAA;KAClC,CAAA;IACF;MAGT,kBAAC,OAAD;GAAK,WAAU;aAAf,CAEE,kBAAC,SAAD;IACE,WAAW,EACT,mOACA,IAAc,6BAA6B,WAC5C;cAJH,CAOE,kBAAC,UAAD;KACE,WAAU;KACV,SAAS;KACT,cAAY,IAAc,mBAAmB;KAC7C,OACE,EACE,gBAAgB,kBAAkB,KACnC;eAGH,kBAAC,GAAD,EAAmC,gBAAe,CAAA;KAC3C,CAAA,EAET,kBAAC,OAAD;KACE,WAAW,EACT,sLACA,IAAc,yBAAyB,uBACxC;eAEA,EAAM,KAAK,GAAM,MAChB,kBAAC,GAAD;MAEQ;MACN,UAAU,MAAU;MACP;MACb,YAAY,gBAAgB;MAC5B,mBAAmB;AACjB,OAAI,EAAK,SAAS,EAAK,MAAM,SAAS,KACpC,GAAgB,MAAU,KAAO,GAAc;;MAGnD,EAVK,EAUL,CACF;KACE,CAAA,CACA;OAER,kBAAC,QAAD;IAAM,WAAU;IACb;IACI,CAAA,CACH;KACF"}