@clubmed/trident-ui 2.0.0-beta.5 → 2.0.0-beta.7
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.
- package/package.json +1 -1
- package/ui/Loader.d.ts +5 -4
- package/ui/Loader.js +11 -10
- package/ui/Loader.js.map +1 -1
- package/ui/SidebarLayout.js +1 -1
- package/ui/SidebarLayout.js.map +1 -1
package/package.json
CHANGED
package/ui/Loader.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { FunctionComponent } from 'react';
|
|
2
|
-
|
|
1
|
+
import { ComponentProps, FunctionComponent } from 'react';
|
|
2
|
+
import { Backdrop } from './Backdrop';
|
|
3
|
+
export interface LoaderProps {
|
|
3
4
|
isVisible?: boolean;
|
|
4
5
|
label?: string;
|
|
6
|
+
portalId?: ComponentProps<typeof Backdrop>['target'];
|
|
5
7
|
}
|
|
6
|
-
export declare const Loader: FunctionComponent<
|
|
7
|
-
export {};
|
|
8
|
+
export declare const Loader: FunctionComponent<LoaderProps>;
|
package/ui/Loader.js
CHANGED
|
@@ -33,8 +33,8 @@ var o = /* @__PURE__ */ a("svg", {
|
|
|
33
33
|
})]
|
|
34
34
|
})]
|
|
35
35
|
})]
|
|
36
|
-
}), s = ({ isVisible: s, label: c }) => {
|
|
37
|
-
let [{ status:
|
|
36
|
+
}), s = ({ isVisible: s, label: c, portalId: l }) => {
|
|
37
|
+
let [{ status: u, isMounted: d }, f] = t({
|
|
38
38
|
timeout: {
|
|
39
39
|
enter: 250,
|
|
40
40
|
exit: 250
|
|
@@ -44,16 +44,17 @@ var o = /* @__PURE__ */ a("svg", {
|
|
|
44
44
|
preEnter: !0
|
|
45
45
|
});
|
|
46
46
|
r(() => {
|
|
47
|
-
|
|
48
|
-
}, [s,
|
|
49
|
-
let
|
|
47
|
+
f(s);
|
|
48
|
+
}, [s, f]);
|
|
49
|
+
let p = u === "preEnter" || u === "entering", m = u === "exiting";
|
|
50
50
|
return /* @__PURE__ */ i(n, {
|
|
51
51
|
isVisible: s,
|
|
52
|
+
target: l,
|
|
52
53
|
sweep: !0,
|
|
53
|
-
children:
|
|
54
|
+
children: d && /* @__PURE__ */ a("div", {
|
|
54
55
|
className: e("flex flex-col items-center transition-all duration-500", {
|
|
55
|
-
"-translate-x-full opacity-0":
|
|
56
|
-
"translate-x-full opacity-100":
|
|
56
|
+
"-translate-x-full opacity-0": p,
|
|
57
|
+
"translate-x-full opacity-100": m
|
|
57
58
|
}),
|
|
58
59
|
role: "alert",
|
|
59
60
|
children: [/* @__PURE__ */ i("div", {
|
|
@@ -65,8 +66,8 @@ var o = /* @__PURE__ */ a("svg", {
|
|
|
65
66
|
children: o
|
|
66
67
|
}), /* @__PURE__ */ i("div", {
|
|
67
68
|
className: e("mx-auto max-w-[320px] px-20 text-center text-b3 transition-all delay-100 duration-400", {
|
|
68
|
-
"-translate-x-full opacity-0":
|
|
69
|
-
"translate-x-full opacity-100":
|
|
69
|
+
"-translate-x-full opacity-0": p,
|
|
70
|
+
"translate-x-full opacity-100": m
|
|
70
71
|
}),
|
|
71
72
|
children: c
|
|
72
73
|
})]
|
package/ui/Loader.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Loader.js","names":[],"sources":["../../lib/ui/Loader.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type FunctionComponent } from 'react';\nimport { useTransitionState } from 'react-transition-state';\n\nimport { Backdrop } from './Backdrop';\n\
|
|
1
|
+
{"version":3,"file":"Loader.js","names":[],"sources":["../../lib/ui/Loader.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ComponentProps, type FunctionComponent } from 'react';\nimport { useTransitionState } from 'react-transition-state';\n\nimport { Backdrop } from './Backdrop';\n\nexport interface LoaderProps {\n isVisible?: boolean;\n label?: string;\n portalId?: ComponentProps<typeof Backdrop>['target'];\n}\n\nconst loaderSVG = (\n <svg viewBox=\"0 0 140 140\" width={140}>\n <defs>\n <path\n id=\"a\"\n d=\"m70 74.1-9.6 9.6 9.6 9.5 9.5-9.5L70 74Zm6.6-70.7c-.7-2.7-6.9 1.1-20.1 13 5.3 5.8 7.9 2.5 12.1 1 3.4 6.4 4.8 35.4-17.3 44 .6-29.1.9-60.4.9-60.4a1 1 0 0 0-1.3-1c-6.1.8-17 11.6-25.3 20.6 4.6 7.5 10.4.8 15-1.1 0 1.2-1 22.8-.6 44.7C17.3 66 21 19.5 22.2 13.6 22.8 8.9 7.6 19.3 0 26.4c2.4 4.3 5.7 3.4 10 1.8C8.3 49 23 67.9 40 67.5c.6 21.4 2.9 42.2 9 43.7 1 .2 1.6-21.8 2-46.1C92 52.4 76.5 3.4 76.5 3.4\"\n />\n </defs>\n <g fill=\"none\" fillRule=\"evenodd\" transform=\"translate(27 14)\">\n <mask id=\"b\" fill=\"#fff\">\n <use xlinkHref=\"#a\" />\n </mask>\n <g mask=\"url(#b)\">\n <path\n fill=\"#1E2643\"\n fillRule=\"nonzero\"\n d=\"M-83.1-23s6.7 3 11.2 3c4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3C.2-20 2.3-23 7-23c4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 6.7-3 11.3-3 4.5 0 6.7 3 11.2 3 4.6 0 11.3-3 11.3-3v138H-83V-23Z\"\n className=\"animate-wave\"\n />\n <path\n fill=\"#1E2643\"\n fillRule=\"nonzero\"\n d=\"m70 74.1.7-.7-.7-.7-.7.7.7.7Zm-9.6 9.6-.7-.7-.7.7.7.7.7-.7Zm9.6 9.5-.7.7.7.7.7-.7-.7-.7Zm9.5-9.5.7.7.7-.7-.7-.7-.7.7Zm-23-67.3-.7-.7-.7.6.7.8.7-.7Zm12.1 1 1-.5-.5-.8-.8.3.3 1Zm-17.3 44h-1V63l1.4-.6-.4-1ZM52.2 1h1-1Zm-1.3-1v1h.2L51 0ZM25.6 20.6l-.7-.7-.5.5.4.7.8-.5Zm15-1.1h1V18l-1.4.5.4 1ZM40 64.2l.1 1h1v-1h-1ZM22.2 13.6l1 .2-1-.2ZM0 26.4l-.7-.8-.6.6.4.7.9-.5Zm10 1.8h1v-1.5l-1.4.6.3.9Zm30 39.3h1v-1h-1v1Zm9 43.7.3-1-.2 1Zm2-46.1-.2-1-.7.2v.8h1Zm18.2 8.3L59.7 83l1.4 1.4 9.6-9.6-1.4-1.4Zm-9.6 11 9.6 9.5 1.4-1.4L61 83l-1.4 1.4Zm11 9.5 9.5-9.5-1.4-1.4-9.5 9.5 1.4 1.4Zm9.5-11-9.5-9.5-1.4 1.4 9.5 9.6 1.4-1.4ZM77.6 3.2a2 2 0 0 0-1-1.3c-.6-.3-1.2-.3-1.8-.2-1 .2-2.4 1-4.1 2-3.4 2.1-8.2 6.1-14.9 12l1.4 1.6c6.6-6 11.4-9.9 14.6-12a11 11 0 0 1 3.4-1.6h.4l2-.5Zm-21.8 14c1.3 1.5 2.6 2.5 3.8 3a6 6 0 0 0 3.5.5c1-.1 2-.6 3-1 1-.5 1.9-1 2.9-1.3l-.7-1.9c-1.1.4-2.2 1-3 1.4l-2.5.9a4 4 0 0 1-2.4-.4 12 12 0 0 1-3.2-2.6l-1.4 1.4Zm12 .7c.7 1.5 1.4 4.3 1.7 8 .2 3.7 0 8-1 12.6-2 8.9-7 18-17.6 22.2l.8 1.8a31.3 31.3 0 0 0 18.8-23.6 51 51 0 0 0 1-13.1c-.3-3.8-1-7-2-8.8l-1.7 1ZM52.3 61.5a5227.3 5227.3 0 0 0 .9-60.1V1h-2v1.3a4268.6 4268.6 0 0 1-1 59l2 .1ZM53.2 1c0-.3 0-.6-.2-.9l-1.8 1h2ZM53 .1a2 2 0 0 0-.6-.7L51.2 1 53 .1Zm-.6-.7a2 2 0 0 0-.9-.4l-.3 2 1.2-1.6Zm-.9-.4a2 2 0 0 0-1 0l.7 2 .3-2Zm-.8 0C49-.6 47 .3 45 1.6s-4.3 3-6.6 5c-4.5 4-9.3 8.9-13.5 13.4l1.5 1.4c4.1-4.5 8.9-9.4 13.3-13.3C42 6 44.1 4.4 46 3.2c2-1.3 3.7-2 5-2.2l-.3-2Zm-26 22c1.3 2.1 2.7 3.3 4.3 3.8a7 7 0 0 0 4.5-.3c1.4-.5 2.8-1.4 4-2.1 1.3-.8 2.4-1.6 3.5-2l-.8-1.9-3.7 2.2c-1.3.7-2.5 1.5-3.7 2-1.2.4-2.3.5-3.2.2-1-.3-2-1.1-3.1-2.8l-1.7 1Zm15-1.5c0 1.1-1.2 22.8-.7 44.7h2c-.5-22 .6-43.4.6-44.7h-2Zm.2 43.7c-5.2.4-9-2-11.6-6-2.7-4-4.3-9.6-5.2-15.6-1.8-12-.5-25 .1-27.8l-2-.4c-.6 3-1.9 16.3-.1 28.5.9 6.1 2.6 12.1 5.5 16.5a14 14 0 0 0 13.5 6.8l-.2-2ZM23.2 13.7l-.1-1.2a2 2 0 0 0-1-1c-.7-.2-1.6 0-2.3.1a28 28 0 0 0-6.2 3.1 106 106 0 0 0-14.3 11L.7 27c3.7-3.5 9.4-7.8 14-10.7a26.4 26.4 0 0 1 6.4-3h.3l-.2-.1v.2l2 .2ZM-.8 27c.6 1.1 1.3 2 2.2 2.6a5 5 0 0 0 2.8 1c2 .1 4-.6 6-1.4l-.6-1.8c-2.1.8-3.8 1.3-5.2 1.2-.7 0-1.3-.2-1.9-.6-.5-.4-1-1-1.6-2l-1.8 1Zm9.6 1a41.8 41.8 0 0 0 8.4 28.3c5.7 7.5 14 12.3 22.9 12v-2a26 26 0 0 1-21.3-11.2 40 40 0 0 1-8-27H9ZM39 67.4c.3 10.7 1 21.3 2.5 29.5.7 4 1.6 7.5 2.7 10.1 1.1 2.6 2.6 4.6 4.7 5l.4-2c-1-.2-2.2-1.3-3.2-3.8-1-2.3-2-5.7-2.7-9.7-1.4-8-2-18.5-2.4-29.1h-2Zm9.8 44.6c.7.2 1.1-.3 1.2-.4l.2-.4.2-.9.3-2.8.5-10.2.9-32.3h-2a1859.2 1859.2 0 0 1-1.4 42.3 38 38 0 0 1-.4 3.2c0-.1.4-.6 1-.4l-.5 2Zm2.6-46a39.2 39.2 0 0 0 21.8-15.4 46 46 0 0 0 7-21.1 73 73 0 0 0-2.6-25.9l-.1-.4v-.1l-1 .2-1 .3a14.2 14.2 0 0 1 .2.6 51 51 0 0 1 1.6 7.1 71 71 0 0 1 .9 18A37.2 37.2 0 0 1 50.8 64l.6 2Z\"\n mask=\"url(#a)\"\n />\n </g>\n </g>\n </svg>\n);\n\nexport const Loader: FunctionComponent<LoaderProps> = ({ isVisible, label, portalId }) => {\n const [{ status, isMounted }, toggle] = useTransitionState({\n timeout: { enter: 250, exit: 250 },\n mountOnEnter: true,\n unmountOnExit: true,\n preEnter: true,\n });\n\n useEffect(() => {\n toggle(isVisible);\n }, [isVisible, toggle]);\n\n const entering = status === 'preEnter' || status === 'entering';\n const exiting = status === 'exiting';\n\n return (\n <Backdrop isVisible={isVisible} target={portalId} sweep>\n {isMounted && (\n <div\n className={clsx('flex flex-col items-center transition-all duration-500', {\n '-translate-x-full opacity-0': entering,\n 'translate-x-full opacity-100': exiting,\n })}\n role=\"alert\"\n >\n <div\n className=\"relative isolate\"\n style={{\n maskImage: `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cellipse cx='1' cy='1' rx='1' ry='1'/%3E%3C/svg%3E\")`,\n WebkitMaskImage: `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cellipse cx='1' cy='1' rx='1' ry='1'/%3E%3C/svg%3E\")`,\n }}\n >\n {loaderSVG}\n </div>\n <div\n className={clsx(\n 'mx-auto max-w-[320px] px-20 text-center text-b3 transition-all delay-100 duration-400',\n {\n '-translate-x-full opacity-0': entering,\n 'translate-x-full opacity-100': exiting,\n },\n )}\n >\n {label}\n </div>\n </div>\n )}\n </Backdrop>\n );\n};\n"],"mappings":";;;;;;AAcA,IAAM,IACJ,kBAAC,OAAD;CAAK,SAAQ;CAAc,OAAO;WAAlC,CACE,kBAAC,QAAD,EAAA,UACE,kBAAC,QAAD;EACE,IAAG;EACH,GAAE;EACF,CAAA,EACG,CAAA,EACP,kBAAC,KAAD;EAAG,MAAK;EAAO,UAAS;EAAU,WAAU;YAA5C,CACE,kBAAC,QAAD;GAAM,IAAG;GAAI,MAAK;aAChB,kBAAC,OAAD,EAAK,WAAU,MAAO,CAAA;GACjB,CAAA,EACP,kBAAC,KAAD;GAAG,MAAK;aAAR,CACE,kBAAC,QAAD;IACE,MAAK;IACL,UAAS;IACT,GAAE;IACF,WAAU;IACV,CAAA,EACF,kBAAC,QAAD;IACE,MAAK;IACL,UAAS;IACT,GAAE;IACF,MAAK;IACL,CAAA,CAAA;;;IAMG,KAA0C,EAAE,cAAW,UAAO,kBAAe;CACxF,IAAM,CAAC,EAAE,WAAQ,gBAAa,KAAU,EAAmB;EACzD,SAAS;GAAE,OAAO;GAAK,MAAM;GAAK;EAClC,cAAc;EACd,eAAe;EACf,UAAU;EACX,CAAC;AAEF,SAAgB;AACd,IAAO,EAAU;IAChB,CAAC,GAAW,EAAO,CAAC;CAEvB,IAAM,IAAW,MAAW,cAAc,MAAW,YAC/C,IAAU,MAAW;AAE3B,QACE,kBAAC,GAAD;EAAqB;EAAW,QAAQ;EAAU,OAAA;YAC/C,KACC,kBAAC,OAAD;GACE,WAAW,EAAK,0DAA0D;IACxE,+BAA+B;IAC/B,gCAAgC;IACjC,CAAC;GACF,MAAK;aALP,CAOE,kBAAC,OAAD;IACE,WAAU;IACV,OAAO;KACL,WAAW;KACX,iBAAiB;KAClB;cAEA;IACG,CAAA,EACN,kBAAC,OAAD;IACE,WAAW,EACT,yFACA;KACE,+BAA+B;KAC/B,gCAAgC;KACjC,CACF;cAEA;IACG,CAAA,CAAA;;EAGD,CAAA"}
|
package/ui/SidebarLayout.js
CHANGED
|
@@ -145,7 +145,7 @@ var m = ({ items: i, children: a, className: o, activeIndex: s = 0, ...u }) => {
|
|
|
145
145
|
}, t))
|
|
146
146
|
})]
|
|
147
147
|
}), /* @__PURE__ */ c("main", {
|
|
148
|
-
className: "
|
|
148
|
+
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
149
|
children: b
|
|
150
150
|
})]
|
|
151
151
|
})]
|
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 '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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"}
|
|
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=\"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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"}
|