@npm_leadtech/legal-contracts-ui 0.52.9 → 0.52.11
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/dist/components/FaqSection.js +5 -5
- package/dist/components/Header.d.ts +36 -20
- package/dist/components/Header.js +26 -97
- package/dist/components/MobileMenu.d.ts +52 -0
- package/dist/components/MobileMenu.js +76 -0
- package/dist/components/NavMenu.d.ts +15 -7
- package/dist/components/NavMenu.js +2 -2
- package/dist/components/NavMenuItem.d.ts +14 -7
- package/dist/components/NavMenuItem.js +47 -46
- package/dist/components/SearchBar.js +1 -1
- package/dist/components/index.d.ts +852 -0
- package/dist/globals.css +1 -1
- package/dist/node_modules/.pnpm/hast-util-raw@9.1.0/node_modules/hast-util-raw/lib/index.js +1 -1
- package/dist/node_modules/.pnpm/parse5@7.3.0/node_modules/parse5/dist/parser/index.js +1 -1
- package/package.json +5 -1
- /package/dist/node_modules/.pnpm/{unist-util-visit@5.0.0 → unist-util-visit@5.1.0}/node_modules/unist-util-visit/lib/index.js +0 -0
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { jsxs as a, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import { Markdown as
|
|
4
|
-
import { FaqItem as
|
|
3
|
+
import { Markdown as n } from "./Markdown.js";
|
|
4
|
+
import { FaqItem as m } from "./FaqItem.js";
|
|
5
5
|
const p = ({ title: l, description: o, faqItems: r, className: s = "" }) => {
|
|
6
6
|
if (r.length === 0) return null;
|
|
7
7
|
const c = l.toLowerCase().replace(/\s+/g, "-");
|
|
8
|
-
return /* @__PURE__ */ a("div", { id: c, className: `flex flex-col gap-2 text-neutral-800 ${s}
|
|
8
|
+
return /* @__PURE__ */ a("div", { id: c, className: `flex flex-col gap-2 text-neutral-800 ${s} p-0.5`, children: [
|
|
9
9
|
/* @__PURE__ */ a("div", { className: "mb-4 flex flex-col", children: [
|
|
10
10
|
/* @__PURE__ */ e("h3", { className: "text-super-large font-bold", children: l }),
|
|
11
|
-
o !== "" && /* @__PURE__ */ e(
|
|
11
|
+
o !== "" && /* @__PURE__ */ e(n, { content: o, className: "text-medium mt-6" })
|
|
12
12
|
] }),
|
|
13
|
-
/* @__PURE__ */ e("div", { className: "flex flex-col gap-4", children: r.map((t) => /* @__PURE__ */ e(
|
|
13
|
+
/* @__PURE__ */ e("div", { className: "flex flex-col gap-4", children: r.map((t) => /* @__PURE__ */ e(m, { ...t }, t.question)) })
|
|
14
14
|
] });
|
|
15
15
|
};
|
|
16
16
|
export {
|
|
@@ -14,15 +14,10 @@ export declare const Header: FC<HeaderProps>;
|
|
|
14
14
|
export declare interface HeaderProps {
|
|
15
15
|
logo: ReactNode;
|
|
16
16
|
navMenu: NavMenuProps;
|
|
17
|
-
seeAll: ReactNode;
|
|
18
17
|
searchBarProps: SearchBarProps;
|
|
19
18
|
languageSelectorProps?: LanguageSelectorProps;
|
|
20
19
|
userActions: ReactNode;
|
|
21
|
-
|
|
22
|
-
onOpenMobileMenu?: () => void;
|
|
23
|
-
onCloseMobileMenu?: () => void;
|
|
24
|
-
mobileMenuSections?: MobileMenuSection[];
|
|
25
|
-
mobileContactInfo?: MobileContactInfo;
|
|
20
|
+
mobileMenu: Omit<MobileMenuProps, 'logo' | 'userActions' | 'searchBarProps'>;
|
|
26
21
|
}
|
|
27
22
|
|
|
28
23
|
export interface LanguageSelectorProps {
|
|
@@ -35,34 +30,55 @@ export interface LanguageSelectorProps {
|
|
|
35
30
|
|
|
36
31
|
export type LanguageSelectorVariant = 'default' | 'compact';
|
|
37
32
|
|
|
38
|
-
export
|
|
33
|
+
export interface MobileContactInfo {
|
|
39
34
|
phoneNumber: string;
|
|
40
35
|
contactHoursLabel?: string;
|
|
41
36
|
contactHours?: string;
|
|
42
37
|
}
|
|
43
38
|
|
|
44
|
-
export
|
|
39
|
+
export interface MobileMenuProps {
|
|
40
|
+
isOpen: boolean;
|
|
41
|
+
onOpen: () => void;
|
|
42
|
+
onClose: () => void;
|
|
43
|
+
logo: ReactNode;
|
|
44
|
+
userActions: ReactNode;
|
|
45
|
+
searchBarProps: SearchBarProps;
|
|
46
|
+
sections?: MobileMenuSection[];
|
|
47
|
+
contactInfo?: MobileContactInfo;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export interface MobileMenuSection {
|
|
51
|
+
id?: string;
|
|
45
52
|
title?: string;
|
|
46
|
-
icon
|
|
47
|
-
items
|
|
48
|
-
|
|
49
|
-
|
|
53
|
+
icon: ReactNode | null;
|
|
54
|
+
items?: {
|
|
55
|
+
id: string;
|
|
56
|
+
link: ReactNode;
|
|
50
57
|
}[];
|
|
51
|
-
seeAll?: ReactNode;
|
|
58
|
+
seeAll?: ReactNode | null;
|
|
59
|
+
content?: ReactNode | null;
|
|
52
60
|
}
|
|
53
61
|
|
|
54
|
-
export
|
|
62
|
+
export type NavMenuItemProps = {
|
|
63
|
+
id: string;
|
|
55
64
|
label: string;
|
|
56
|
-
|
|
57
|
-
hasDropdown
|
|
58
|
-
|
|
59
|
-
|
|
65
|
+
dropdownItems: (NavMenuItemProps | NavMenuLink)[];
|
|
66
|
+
hasDropdown: true;
|
|
67
|
+
isNested?: boolean;
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
export type NavMenuLink = {
|
|
71
|
+
id: string;
|
|
72
|
+
link: ReactNode;
|
|
60
73
|
tag?: string;
|
|
74
|
+
hasDropdown: false;
|
|
61
75
|
isNested?: boolean;
|
|
62
|
-
|
|
76
|
+
bold?: boolean;
|
|
77
|
+
};
|
|
63
78
|
|
|
64
79
|
export interface NavMenuProps {
|
|
65
|
-
navItems: NavMenuItemProps[];
|
|
80
|
+
navItems: (NavMenuItemProps | NavMenuLink)[];
|
|
81
|
+
className?: string;
|
|
66
82
|
}
|
|
67
83
|
|
|
68
84
|
export interface SearchBarProps {
|
|
@@ -1,112 +1,41 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as r, Fragment as d, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import {
|
|
3
|
+
import { MobileMenu as c } from "./MobileMenu.js";
|
|
4
|
+
import { NavMenu as s } from "./NavMenu.js";
|
|
5
|
+
import { LanguageSelector as p } from "./LanguageSelector.js";
|
|
6
|
+
import { HamburgerIcon as o } from "./HamburgerIcon.js";
|
|
4
7
|
import { SearchBar as x } from "./SearchBar.js";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
onOpenMobileMenu: h,
|
|
18
|
-
onCloseMobileMenu: m,
|
|
19
|
-
mobileMenuSections: o = [],
|
|
20
|
-
mobileContactInfo: a
|
|
21
|
-
}) => /* @__PURE__ */ l(N, { children: [
|
|
22
|
-
/* @__PURE__ */ e("header", { className: "bg-primary-50", children: /* @__PURE__ */ l("div", { className: "flex w-full items-center justify-between px-4 py-4 text-neutral-800 md:px-8", children: [
|
|
23
|
-
/* @__PURE__ */ l("div", { className: "flex flex-1 items-center gap-8", children: [
|
|
24
|
-
i,
|
|
25
|
-
/* @__PURE__ */ e("div", { className: "hidden lg:block", children: /* @__PURE__ */ e(b, { ...p }) })
|
|
8
|
+
const j = ({
|
|
9
|
+
logo: a,
|
|
10
|
+
navMenu: m,
|
|
11
|
+
searchBarProps: l,
|
|
12
|
+
languageSelectorProps: n,
|
|
13
|
+
userActions: t,
|
|
14
|
+
mobileMenu: i
|
|
15
|
+
}) => /* @__PURE__ */ r(d, { children: [
|
|
16
|
+
/* @__PURE__ */ e("header", { className: "bg-primary-50", children: /* @__PURE__ */ r("div", { className: "flex w-full items-center justify-between px-4 py-4 text-neutral-800 md:px-8", children: [
|
|
17
|
+
/* @__PURE__ */ r("div", { className: "flex flex-1 items-center gap-8", children: [
|
|
18
|
+
a,
|
|
19
|
+
/* @__PURE__ */ e(s, { className: "hidden lg:block", ...m })
|
|
26
20
|
] }),
|
|
27
|
-
/* @__PURE__ */
|
|
28
|
-
/* @__PURE__ */ e(x, { ...
|
|
29
|
-
|
|
30
|
-
|
|
21
|
+
/* @__PURE__ */ r("div", { className: "text-medium hidden flex-wrap items-center gap-4 lg:flex xl:gap-6", children: [
|
|
22
|
+
/* @__PURE__ */ e(x, { ...l }),
|
|
23
|
+
n && /* @__PURE__ */ e("div", { className: "hidden xl:block", children: /* @__PURE__ */ e(p, { ...n }) }),
|
|
24
|
+
t
|
|
31
25
|
] }),
|
|
32
26
|
/* @__PURE__ */ e(
|
|
33
27
|
"button",
|
|
34
28
|
{
|
|
35
29
|
className: "flex cursor-pointer items-center justify-center p-2 lg:hidden",
|
|
36
|
-
onClick:
|
|
30
|
+
onClick: i.onOpen,
|
|
37
31
|
"aria-label": "Open menu",
|
|
38
|
-
"aria-expanded":
|
|
39
|
-
children: /* @__PURE__ */ e(
|
|
32
|
+
"aria-expanded": i.isOpen,
|
|
33
|
+
children: /* @__PURE__ */ e(o, {})
|
|
40
34
|
}
|
|
41
35
|
)
|
|
42
36
|
] }) }),
|
|
43
|
-
|
|
44
|
-
/* @__PURE__ */ l("div", { className: "flex items-center justify-between px-6 py-4", children: [
|
|
45
|
-
i,
|
|
46
|
-
/* @__PURE__ */ e(
|
|
47
|
-
"button",
|
|
48
|
-
{
|
|
49
|
-
className: "flex cursor-pointer items-center justify-center p-2",
|
|
50
|
-
onClick: m,
|
|
51
|
-
"aria-label": "Close menu",
|
|
52
|
-
children: /* @__PURE__ */ e(j, {})
|
|
53
|
-
}
|
|
54
|
-
)
|
|
55
|
-
] }),
|
|
56
|
-
/* @__PURE__ */ l("div", { className: "flex flex-1 flex-col pb-6", children: [
|
|
57
|
-
/* @__PURE__ */ l("div", { className: "flex flex-col gap-6 px-6", children: [
|
|
58
|
-
/* @__PURE__ */ e("div", { className: "flex items-center gap-4", children: n }),
|
|
59
|
-
/* @__PURE__ */ e(x, { ...c })
|
|
60
|
-
] }),
|
|
61
|
-
/* @__PURE__ */ e("nav", { className: "flex-1", children: o.map((r, u) => /* @__PURE__ */ l(
|
|
62
|
-
"div",
|
|
63
|
-
{
|
|
64
|
-
className: `py-4 ${r.icon == null && r.title ? "border-t border-b border-neutral-200" : ""}`,
|
|
65
|
-
children: [
|
|
66
|
-
r.title && /* @__PURE__ */ l("div", { className: `flex items-start px-6 ${r.icon == null ? "py-2" : "bg-neutral-50 py-4"}`, children: [
|
|
67
|
-
r.icon !== null && /* @__PURE__ */ e("span", { className: "text-primary-700 mr-4", children: r.icon }),
|
|
68
|
-
/* @__PURE__ */ e("h4", { className: "text-base font-semibold text-neutral-800", children: r.title })
|
|
69
|
-
] }),
|
|
70
|
-
/* @__PURE__ */ l("div", { className: "", children: [
|
|
71
|
-
/* @__PURE__ */ e("ul", { className: "mt-3 flex flex-col", children: r.items.map((t) => /* @__PURE__ */ e("li", { className: "hover:bg-primary-100 py-3 pl-6", children: /* @__PURE__ */ e(
|
|
72
|
-
"a",
|
|
73
|
-
{
|
|
74
|
-
href: t.href ?? "#",
|
|
75
|
-
className: "hover:text-primary-700 text-base transition-colors",
|
|
76
|
-
onClick: m,
|
|
77
|
-
children: t.label
|
|
78
|
-
}
|
|
79
|
-
) }, t.label)) }),
|
|
80
|
-
r.seeAll
|
|
81
|
-
] })
|
|
82
|
-
]
|
|
83
|
-
},
|
|
84
|
-
r.title ?? u
|
|
85
|
-
)) }),
|
|
86
|
-
/* @__PURE__ */ e("div", { className: "my-4 flex items-center justify-center", children: f }),
|
|
87
|
-
a && /* @__PURE__ */ l("div", { className: "mt-auto flex flex-col items-center justify-center border-t border-neutral-100 p-6", children: [
|
|
88
|
-
/* @__PURE__ */ l(
|
|
89
|
-
"a",
|
|
90
|
-
{
|
|
91
|
-
href: `tel:${a.phoneNumber.replaceAll(" ", "")}`,
|
|
92
|
-
className: "bg-primary-700 flex w-full items-center justify-center gap-2 rounded-md p-3 text-base font-semibold text-white",
|
|
93
|
-
children: [
|
|
94
|
-
/* @__PURE__ */ e(g, { fill: "#ffff" }),
|
|
95
|
-
a.phoneNumber
|
|
96
|
-
]
|
|
97
|
-
}
|
|
98
|
-
),
|
|
99
|
-
a.contactHours && /* @__PURE__ */ l("p", { className: "text-small mt-4 text-base text-neutral-500", children: [
|
|
100
|
-
a.contactHoursLabel != null && /* @__PURE__ */ l("span", { children: [
|
|
101
|
-
a.contactHoursLabel,
|
|
102
|
-
" "
|
|
103
|
-
] }),
|
|
104
|
-
a.contactHours
|
|
105
|
-
] })
|
|
106
|
-
] })
|
|
107
|
-
] })
|
|
108
|
-
] })
|
|
37
|
+
/* @__PURE__ */ e(c, { ...i, logo: a, userActions: t, searchBarProps: l })
|
|
109
38
|
] });
|
|
110
39
|
export {
|
|
111
|
-
|
|
40
|
+
j as Header
|
|
112
41
|
};
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import * as React_2 from 'react';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
|
|
5
|
+
export declare interface MobileContactInfo {
|
|
6
|
+
phoneNumber: string;
|
|
7
|
+
contactHoursLabel?: string;
|
|
8
|
+
contactHours?: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export declare const MobileMenu: FC<MobileMenuProps>;
|
|
12
|
+
|
|
13
|
+
export declare interface MobileMenuProps {
|
|
14
|
+
isOpen: boolean;
|
|
15
|
+
onOpen: () => void;
|
|
16
|
+
onClose: () => void;
|
|
17
|
+
logo: ReactNode;
|
|
18
|
+
userActions: ReactNode;
|
|
19
|
+
searchBarProps: SearchBarProps;
|
|
20
|
+
sections?: MobileMenuSection[];
|
|
21
|
+
contactInfo?: MobileContactInfo;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export declare interface MobileMenuSection {
|
|
25
|
+
id?: string;
|
|
26
|
+
title?: string;
|
|
27
|
+
icon: ReactNode | null;
|
|
28
|
+
items?: {
|
|
29
|
+
id: string;
|
|
30
|
+
link: ReactNode;
|
|
31
|
+
}[];
|
|
32
|
+
seeAll?: ReactNode | null;
|
|
33
|
+
content?: ReactNode | null;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export interface SearchBarProps {
|
|
37
|
+
items: SearchItem[];
|
|
38
|
+
placeholder?: string;
|
|
39
|
+
isOpen?: boolean;
|
|
40
|
+
onToggle?: () => void;
|
|
41
|
+
searchValue?: string;
|
|
42
|
+
onInputChange?: (e: React_2.ChangeEvent<HTMLInputElement>) => void;
|
|
43
|
+
onClear?: () => void;
|
|
44
|
+
noResultsText?: string;
|
|
45
|
+
allDocumentsItem?: SearchItem;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export interface SearchItem {
|
|
49
|
+
label: string;
|
|
50
|
+
href: string;
|
|
51
|
+
}
|
|
52
|
+
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { jsxs as l, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
import { SearchBar as u } from "./SearchBar.js";
|
|
4
|
+
import { PhoneTalkIcon as x } from "./PhoneTalkIcon.js";
|
|
5
|
+
import { CloseIcon as f } from "./CloseIcon.js";
|
|
6
|
+
const y = ({
|
|
7
|
+
isOpen: n,
|
|
8
|
+
onClose: m,
|
|
9
|
+
logo: c,
|
|
10
|
+
userActions: d,
|
|
11
|
+
searchBarProps: o,
|
|
12
|
+
sections: p = [],
|
|
13
|
+
contactInfo: t
|
|
14
|
+
}) => n ? /* @__PURE__ */ l("div", { className: "fixed inset-0 z-50 flex flex-col overflow-y-auto bg-white text-neutral-800 lg:hidden", children: [
|
|
15
|
+
/* @__PURE__ */ l("div", { className: "flex items-center justify-between px-6 py-4", children: [
|
|
16
|
+
c,
|
|
17
|
+
/* @__PURE__ */ r(
|
|
18
|
+
"button",
|
|
19
|
+
{
|
|
20
|
+
className: "flex cursor-pointer items-center justify-center p-2",
|
|
21
|
+
onClick: m,
|
|
22
|
+
"aria-label": "Close menu",
|
|
23
|
+
children: /* @__PURE__ */ r(f, {})
|
|
24
|
+
}
|
|
25
|
+
)
|
|
26
|
+
] }),
|
|
27
|
+
/* @__PURE__ */ l("div", { className: "flex flex-1 flex-col pb-6", children: [
|
|
28
|
+
/* @__PURE__ */ l("div", { className: "flex flex-col gap-6 px-6", children: [
|
|
29
|
+
/* @__PURE__ */ r("div", { className: "flex items-center gap-4", children: d }),
|
|
30
|
+
/* @__PURE__ */ r(u, { ...o })
|
|
31
|
+
] }),
|
|
32
|
+
/* @__PURE__ */ r("nav", { className: "flex flex-col gap-0", children: p.map((e, i) => {
|
|
33
|
+
const a = e.icon != null;
|
|
34
|
+
return e.content != null ? /* @__PURE__ */ r("div", { className: "flex items-center px-6 pb-8", children: e.content }, e.id ?? `custom-${i.toString()}`) : /* @__PURE__ */ l(
|
|
35
|
+
"div",
|
|
36
|
+
{
|
|
37
|
+
className: e.title !== "" && !a ? "border-t border-b border-neutral-200 pt-4" : "",
|
|
38
|
+
children: [
|
|
39
|
+
e.title && /* @__PURE__ */ l("div", { className: `flex items-center gap-2 px-6 ${a ? "bg-neutral-50 py-4" : ""}`, children: [
|
|
40
|
+
e.icon != null && /* @__PURE__ */ r("span", { className: "text-primary-700", children: e.icon }),
|
|
41
|
+
/* @__PURE__ */ r("h4", { className: "text-medium font-semibold", children: e.title })
|
|
42
|
+
] }),
|
|
43
|
+
e.items != null && /* @__PURE__ */ l("ul", { className: `flex flex-col gap-4 ${a ? "p-6" : "px-6 py-4"}`, children: [
|
|
44
|
+
e.items.map((s) => /* @__PURE__ */ r("li", { className: "text-medium", children: s.link }, s.id)),
|
|
45
|
+
e.seeAll != null && /* @__PURE__ */ r("li", { className: "font-semibold", children: e.seeAll })
|
|
46
|
+
] })
|
|
47
|
+
]
|
|
48
|
+
},
|
|
49
|
+
e.id ?? e.title ?? i.toString()
|
|
50
|
+
);
|
|
51
|
+
}) }),
|
|
52
|
+
t && /* @__PURE__ */ l("div", { className: "mt-auto flex flex-col items-center justify-center border-t border-neutral-100 p-6", children: [
|
|
53
|
+
/* @__PURE__ */ l(
|
|
54
|
+
"a",
|
|
55
|
+
{
|
|
56
|
+
href: `tel:${t.phoneNumber.replaceAll(" ", "")}`,
|
|
57
|
+
className: "bg-primary-700 flex w-full items-center justify-center gap-2 rounded-md p-3 text-base font-semibold text-white",
|
|
58
|
+
children: [
|
|
59
|
+
/* @__PURE__ */ r(x, { fill: "#ffff" }),
|
|
60
|
+
t.phoneNumber
|
|
61
|
+
]
|
|
62
|
+
}
|
|
63
|
+
),
|
|
64
|
+
t.contactHours && /* @__PURE__ */ l("p", { className: "text-small mt-4 text-base text-neutral-500", children: [
|
|
65
|
+
t.contactHoursLabel != null && /* @__PURE__ */ l("span", { children: [
|
|
66
|
+
t.contactHoursLabel,
|
|
67
|
+
" "
|
|
68
|
+
] }),
|
|
69
|
+
t.contactHours
|
|
70
|
+
] })
|
|
71
|
+
] })
|
|
72
|
+
] })
|
|
73
|
+
] }) : null;
|
|
74
|
+
export {
|
|
75
|
+
y as MobileMenu
|
|
76
|
+
};
|
|
@@ -3,17 +3,25 @@ import { ReactNode } from 'react';
|
|
|
3
3
|
|
|
4
4
|
export declare const NavMenu: FC<NavMenuProps>;
|
|
5
5
|
|
|
6
|
-
export
|
|
6
|
+
export type NavMenuItemProps = {
|
|
7
|
+
id: string;
|
|
7
8
|
label: string;
|
|
8
|
-
|
|
9
|
-
hasDropdown
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
dropdownItems: (NavMenuItemProps | NavMenuLink)[];
|
|
10
|
+
hasDropdown: true;
|
|
11
|
+
isNested?: boolean;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export type NavMenuLink = {
|
|
15
|
+
id: string;
|
|
16
|
+
link: ReactNode;
|
|
12
17
|
tag?: string;
|
|
18
|
+
hasDropdown: false;
|
|
13
19
|
isNested?: boolean;
|
|
14
|
-
|
|
20
|
+
bold?: boolean;
|
|
21
|
+
};
|
|
15
22
|
|
|
16
23
|
export declare interface NavMenuProps {
|
|
17
|
-
navItems: NavMenuItemProps[];
|
|
24
|
+
navItems: (NavMenuItemProps | NavMenuLink)[];
|
|
25
|
+
className?: string;
|
|
18
26
|
}
|
|
19
27
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import { NavMenuItem as
|
|
4
|
-
const o = ({ navItems: m }) => /* @__PURE__ */ e("nav", { children: /* @__PURE__ */ e("ul", { className: "text-medium flex flex-wrap items-center xl:gap-
|
|
3
|
+
import { NavMenuItem as a } from "./NavMenuItem.js";
|
|
4
|
+
const o = ({ navItems: m, className: t = "" }) => /* @__PURE__ */ e("nav", { className: t, children: /* @__PURE__ */ e("ul", { className: "text-medium flex flex-wrap items-center gap-4 xl:gap-8", children: m.map((r) => /* @__PURE__ */ e(a, { ...r }, r.id)) }) });
|
|
5
5
|
export {
|
|
6
6
|
o as NavMenu
|
|
7
7
|
};
|
|
@@ -1,15 +1,22 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
|
|
4
|
-
export declare const NavMenuItem: FC<NavMenuItemProps>;
|
|
4
|
+
export declare const NavMenuItem: FC<NavMenuItemProps | NavMenuLink>;
|
|
5
5
|
|
|
6
|
-
export declare
|
|
6
|
+
export declare type NavMenuItemProps = {
|
|
7
|
+
id: string;
|
|
7
8
|
label: string;
|
|
8
|
-
|
|
9
|
-
hasDropdown
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
dropdownItems: (NavMenuItemProps | NavMenuLink)[];
|
|
10
|
+
hasDropdown: true;
|
|
11
|
+
isNested?: boolean;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export declare type NavMenuLink = {
|
|
15
|
+
id: string;
|
|
16
|
+
link: ReactNode;
|
|
12
17
|
tag?: string;
|
|
18
|
+
hasDropdown: false;
|
|
13
19
|
isNested?: boolean;
|
|
14
|
-
|
|
20
|
+
bold?: boolean;
|
|
21
|
+
};
|
|
15
22
|
|
|
@@ -1,60 +1,61 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as r, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import { ChevronDownIcon as
|
|
3
|
+
import { ChevronDownIcon as g } from "./ChevronDownIcon.js";
|
|
4
4
|
import { ChevronRightIcon as f } from "./ChevronRightIcon.js";
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
href: c,
|
|
8
|
-
hasDropdown: e = !1,
|
|
9
|
-
dropdownItems: r,
|
|
10
|
-
tag: l,
|
|
11
|
-
isNested: p = !1
|
|
12
|
-
}) => {
|
|
13
|
-
const d = e && r != null && r.length > 0, u = e ? "span" : "a", s = {
|
|
5
|
+
const h = (o) => {
|
|
6
|
+
const { hasDropdown: a, isNested: i } = o, n = {
|
|
14
7
|
topLevel: {
|
|
15
|
-
liClass: "group relative
|
|
16
|
-
triggerClass: "
|
|
17
|
-
dropdownPosition: "top-full left-0
|
|
8
|
+
liClass: "group relative py-2",
|
|
9
|
+
triggerClass: "hover:text-neutral-600",
|
|
10
|
+
dropdownPosition: "top-full left-0",
|
|
18
11
|
dropdownTrigger: "group-hover:pointer-events-auto group-hover:opacity-100",
|
|
19
|
-
Icon:
|
|
12
|
+
Icon: g,
|
|
20
13
|
iconClass: "transition-transform duration-200 group-hover:rotate-180"
|
|
21
14
|
},
|
|
22
15
|
nested: {
|
|
23
|
-
liClass: "group/nested relative
|
|
24
|
-
triggerClass: "
|
|
25
|
-
dropdownPosition: "top-0 left-full pl-
|
|
16
|
+
liClass: "group/nested relative",
|
|
17
|
+
triggerClass: "p-1 hover:bg-primary-100 w-full rounded min-w-48.5",
|
|
18
|
+
dropdownPosition: "top-0 left-full -mt-4 pl-6",
|
|
26
19
|
dropdownTrigger: "group-hover/nested:pointer-events-auto group-hover/nested:opacity-100",
|
|
27
20
|
Icon: f,
|
|
28
21
|
iconClass: ""
|
|
29
22
|
}
|
|
30
|
-
},
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
23
|
+
}, t = i ? n.nested : n.topLevel, d = t.Icon;
|
|
24
|
+
if (a) {
|
|
25
|
+
const { dropdownItems: u, label: m } = o;
|
|
26
|
+
return /* @__PURE__ */ r("li", { className: t.liClass, children: [
|
|
27
|
+
/* @__PURE__ */ r(
|
|
28
|
+
"button",
|
|
29
|
+
{
|
|
30
|
+
className: `text-small flex w-full cursor-pointer items-center justify-between gap-1 font-medium text-nowrap text-neutral-800 transition-colors ${t.triggerClass} `,
|
|
31
|
+
"aria-haspopup": "menu",
|
|
32
|
+
children: [
|
|
33
|
+
/* @__PURE__ */ e("span", { className: "text-medium", children: m }),
|
|
34
|
+
/* @__PURE__ */ e(d, { className: t.iconClass, fill: "#000", width: 20, height: 20 })
|
|
35
|
+
]
|
|
36
|
+
}
|
|
37
|
+
),
|
|
38
|
+
/* @__PURE__ */ e(
|
|
39
|
+
"div",
|
|
40
|
+
{
|
|
41
|
+
className: `pointer-events-none absolute z-50 min-w-48 opacity-0 transition-opacity duration-200 ${t.dropdownPosition} ${t.dropdownTrigger} `,
|
|
42
|
+
children: /* @__PURE__ */ e("div", { className: "rounded-md border border-neutral-200 bg-white p-4 shadow-lg", children: /* @__PURE__ */ e("ul", { className: "flex flex-col gap-2", children: u.map((l) => /* @__PURE__ */ e(h, { ...l, isNested: !0 }, l.id)) }) })
|
|
43
|
+
}
|
|
44
|
+
)
|
|
45
|
+
] });
|
|
46
|
+
}
|
|
47
|
+
const { link: c, tag: s, bold: p } = o;
|
|
48
|
+
return /* @__PURE__ */ e("li", { className: t.liClass, children: /* @__PURE__ */ r(
|
|
49
|
+
"span",
|
|
50
|
+
{
|
|
51
|
+
className: `text-small relative flex w-full items-center justify-between gap-1 font-medium text-nowrap text-neutral-800 transition-colors ${t.triggerClass} `,
|
|
52
|
+
children: [
|
|
53
|
+
/* @__PURE__ */ e("span", { className: `text-medium flex-1 ${p ? "font-bold" : ""} [&_a]:after:absolute [&_a]:after:inset-0`, children: c }),
|
|
54
|
+
s && /* @__PURE__ */ e("span", { className: "bg-secondary-200 text-extra-small rounded px-1 font-bold", children: s })
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
) });
|
|
57
58
|
};
|
|
58
59
|
export {
|
|
59
|
-
|
|
60
|
+
h as NavMenuItem
|
|
60
61
|
};
|
|
@@ -74,7 +74,7 @@ const w = ({
|
|
|
74
74
|
] })
|
|
75
75
|
] }),
|
|
76
76
|
/* @__PURE__ */ r("div", { className: "block lg:hidden", children: [
|
|
77
|
-
/* @__PURE__ */ r("div", { className: "flex items-center gap-3 border-b border-neutral-200 bg-white
|
|
77
|
+
/* @__PURE__ */ r("div", { className: "flex items-center gap-3 border-b border-neutral-200 bg-white py-1", children: [
|
|
78
78
|
/* @__PURE__ */ e(
|
|
79
79
|
"input",
|
|
80
80
|
{
|