@npm_leadtech/legal-contracts-ui 0.188.23 → 0.189.0

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 (6) hide show
  1. package/dist/components/Header.d.ts +5 -0
  2. package/dist/components/NavMenu.d.ts +5 -0
  3. package/dist/components/NavMenuItem.d.ts +5 -0
  4. package/dist/components/NavMenuItem.js +66 -54
  5. package/dist/components/index.d.ts +5 -0
  6. package/package.json +1 -1
package/dist/components/Header.d.ts CHANGED
@@ -70,6 +70,8 @@ export type NavMenuItemProps = {
70
70
  dropdownItems: (NavMenuItemProps | NavMenuLink)[];
71
71
  hasDropdown: true;
72
72
  isNested?: boolean;
73
+ tag?: string;
74
+ tagVariant?: NavMenuTagVariant;
73
75
  onItemClick?: () => void;
74
76
  isOpen?: boolean;
75
77
  onToggle?: (open: boolean) => void;
@@ -79,6 +81,7 @@ export type NavMenuLink = {
79
81
  id: string;
80
82
  link: ReactNode;
81
83
  tag?: string;
84
+ tagVariant?: NavMenuTagVariant;
82
85
  hasDropdown: false;
83
86
  isNested?: boolean;
84
87
  bold?: boolean;
@@ -93,6 +96,8 @@ export interface NavMenuProps {
93
96
  className?: string;
94
97
  }
95
98
 
99
+ export type NavMenuTagVariant = 'standard' | 'emphasized';
100
+
96
101
  export interface SearchBarProps {
97
102
  items: SearchItem[];
98
103
  placeholder?: string;
package/dist/components/NavMenu.d.ts CHANGED
@@ -10,6 +10,8 @@ export type NavMenuItemProps = {
10
10
  dropdownItems: (NavMenuItemProps | NavMenuLink)[];
11
11
  hasDropdown: true;
12
12
  isNested?: boolean;
13
+ tag?: string;
14
+ tagVariant?: NavMenuTagVariant;
13
15
  onItemClick?: () => void;
14
16
  isOpen?: boolean;
15
17
  onToggle?: (open: boolean) => void;
@@ -19,6 +21,7 @@ export type NavMenuLink = {
19
21
  id: string;
20
22
  link: ReactNode;
21
23
  tag?: string;
24
+ tagVariant?: NavMenuTagVariant;
22
25
  hasDropdown: false;
23
26
  isNested?: boolean;
24
27
  bold?: boolean;
@@ -32,4 +35,6 @@ export declare interface NavMenuProps {
32
35
  navItems: (NavMenuItemProps | NavMenuLink)[];
33
36
  className?: string;
34
37
  }
38
+
39
+ export type NavMenuTagVariant = 'standard' | 'emphasized';
35
40
 
package/dist/components/NavMenuItem.d.ts CHANGED
@@ -10,6 +10,8 @@ export declare type NavMenuItemProps = {
10
10
  dropdownItems: (NavMenuItemProps | NavMenuLink)[];
11
11
  hasDropdown: true;
12
12
  isNested?: boolean;
13
+ tag?: string;
14
+ tagVariant?: NavMenuTagVariant;
13
15
  onItemClick?: () => void;
14
16
  isOpen?: boolean;
15
17
  onToggle?: (open: boolean) => void;
@@ -19,6 +21,7 @@ export declare type NavMenuLink = {
19
21
  id: string;
20
22
  link: ReactNode;
21
23
  tag?: string;
24
+ tagVariant?: NavMenuTagVariant;
22
25
  hasDropdown: false;
23
26
  isNested?: boolean;
24
27
  bold?: boolean;
@@ -27,4 +30,6 @@ export declare type NavMenuLink = {
27
30
  onToggle?: (open: boolean) => void;
28
31
  dataQa?: string;
29
32
  };
33
+
34
+ export declare type NavMenuTagVariant = 'standard' | 'emphasized';
30
35
 
package/dist/components/NavMenuItem.js CHANGED
@@ -5,20 +5,26 @@ import { ChevronRightIcon as t } from "./ChevronRightIcon.js";
5
5
  import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
6
6
  import { jsx as o, jsxs as s } from "react/jsx-runtime";
7
7
  //#region lib/components/atoms/NavMenuItem.tsx
8
- var c = (l) => {
9
- let { hasDropdown: u, isNested: d, isOpen: f, onToggle: p, dataQa: m, onItemClick: h } = l, [g, _] = a(!1), [v, y] = a(null), b = f ?? g, x = n((e) => {
10
- e || y(null), p ? p(e) : _(e);
11
- }, [p]), S = i(null);
8
+ var c = {
9
+ standard: "bg-secondary-200 h-4.5 min-w-5.25 px-1",
10
+ emphasized: "bg-[var(--tag-emphasized-bg,var(--primary-300))] h-4.5 min-w-5.25 px-1"
11
+ }, l = ({ tag: e, variant: t }) => /* @__PURE__ */ o("span", {
12
+ className: `text-extra-small flex h-4.5 items-center justify-center rounded align-middle font-bold ${c[t]}`,
13
+ children: e
14
+ }), u = (c) => {
15
+ let { hasDropdown: d, isNested: f, isOpen: p, onToggle: m, dataQa: h, onItemClick: g } = c, [_, v] = a(!1), [y, b] = a(null), x = p ?? _, S = n((e) => {
16
+ e || b(null), m ? m(e) : v(e);
17
+ }, [m]), C = i(null);
12
18
  r(() => {
13
- if (!b) return;
19
+ if (!x) return;
14
20
  let e = (e) => {
15
- S.current && !S.current.contains(e.target) && x(!1);
21
+ C.current && !C.current.contains(e.target) && S(!1);
16
22
  };
17
23
  return document.addEventListener("mousedown", e), () => {
18
24
  document.removeEventListener("mousedown", e);
19
25
  };
20
- }, [b, x]);
21
- let C = {
26
+ }, [x, S]);
27
+ let w = {
22
28
  topLevel: {
23
29
  liClass: "relative py-2",
24
30
  triggerClass: "hover:text-neutral-600",
@@ -27,60 +33,66 @@ var c = (l) => {
27
33
  },
28
34
  nested: {
29
35
  liClass: "relative",
30
- triggerClass: "p-1 hover:bg-primary-100 w-full rounded min-w-48.5",
36
+ triggerClass: "p-1 hover:bg-primary-100 w-full rounded",
31
37
  dropdownPosition: "top-0 left-full -mt-4 pl-6",
32
38
  Icon: t
33
39
  }
34
- }, w = d ? C.nested : C.topLevel, T = w.Icon, E = n(() => {
35
- x(!1), h && h();
36
- }, [h, x]), D = i(null);
40
+ }, T = f ? w.nested : w.topLevel, E = T.Icon, D = n(() => {
41
+ S(!1), g && g();
42
+ }, [g, S]), O = i(null);
37
43
  r(() => {
38
- let e = D.current;
39
- if (e) return e.addEventListener("click", E), () => {
40
- e.removeEventListener("click", E);
44
+ let e = O.current;
45
+ if (e) return e.addEventListener("click", D), () => {
46
+ e.removeEventListener("click", D);
41
47
  };
42
- }, [E]);
43
- let O = (e) => {
44
- e.stopPropagation(), x(!b);
45
- }, k = () => {
46
- globalThis.window.matchMedia("(hover: hover)").matches && x(!0);
48
+ }, [D]);
49
+ let k = (e) => {
50
+ e.stopPropagation(), S(!x);
47
51
  }, A = () => {
48
- globalThis.window.matchMedia("(hover: hover)").matches && x(!1);
52
+ globalThis.window.matchMedia("(hover: hover)").matches && S(!0);
53
+ }, j = () => {
54
+ globalThis.window.matchMedia("(hover: hover)").matches && S(!1);
49
55
  };
50
- if (u) {
51
- let { dropdownItems: e, label: t } = l;
56
+ if (d) {
57
+ let { dropdownItems: e, label: t, tag: n, tagVariant: r = "standard" } = c;
52
58
  return /* @__PURE__ */ s("li", {
53
- ref: S,
54
- className: w.liClass,
55
- onMouseEnter: k,
56
- onMouseLeave: A,
57
- children: [/* @__PURE__ */ s("button", {
58
- "data-qa": m,
59
- className: `text-small flex w-full cursor-pointer items-center justify-between gap-1 text-nowrap text-neutral-800 transition-colors ${w.triggerClass}`,
60
- "aria-haspopup": "menu",
61
- "aria-expanded": b,
62
- onClick: O,
63
- children: [/* @__PURE__ */ o("span", {
64
- className: "text-medium",
65
- children: t
66
- }), /* @__PURE__ */ o(T, {
67
- fill: "#000",
68
- width: 20,
69
- height: 20
59
+ ref: C,
60
+ className: T.liClass,
61
+ onMouseEnter: A,
62
+ onMouseLeave: j,
63
+ children: [/* @__PURE__ */ s("div", {
64
+ className: "inline-flex w-full items-center gap-1",
65
+ children: [/* @__PURE__ */ s("button", {
66
+ "data-qa": h,
67
+ className: `text-small flex flex-1 cursor-pointer items-center justify-between gap-1 text-nowrap text-neutral-800 transition-colors ${T.triggerClass}`,
68
+ "aria-haspopup": "menu",
69
+ "aria-expanded": x,
70
+ onClick: k,
71
+ children: [/* @__PURE__ */ o("span", {
72
+ className: "text-medium",
73
+ children: t
74
+ }), /* @__PURE__ */ o(E, {
75
+ fill: "#000",
76
+ width: 20,
77
+ height: 20
78
+ })]
79
+ }), n && /* @__PURE__ */ o(l, {
80
+ tag: n,
81
+ variant: r
70
82
  })]
71
83
  }), /* @__PURE__ */ o("div", {
72
- className: `absolute z-50 min-w-48 transition-all duration-200 ${w.dropdownPosition} ${b ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
84
+ className: `absolute z-50 w-max min-w-40 transition-all duration-200 ${T.dropdownPosition} ${x ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
73
85
  children: /* @__PURE__ */ o("div", {
74
86
  className: "rounded-md border border-neutral-200 bg-white p-4 shadow-lg",
75
87
  children: /* @__PURE__ */ o("ul", {
76
88
  className: "flex flex-col gap-2",
77
- children: e.map((e) => /* @__PURE__ */ o(c, {
89
+ children: e.map((e) => /* @__PURE__ */ o(u, {
78
90
  ...e,
79
91
  isNested: !0,
80
- onItemClick: E,
81
- isOpen: v === e.id,
92
+ onItemClick: D,
93
+ isOpen: y === e.id,
82
94
  onToggle: (t) => {
83
- y(t ? e.id : null);
95
+ b(t ? e.id : null);
84
96
  }
85
97
  }, e.id))
86
98
  })
@@ -88,21 +100,21 @@ var c = (l) => {
88
100
  })]
89
101
  });
90
102
  }
91
- let { link: j, tag: M, bold: N } = l;
103
+ let { link: M, tag: N, tagVariant: P = "standard", bold: F } = c;
92
104
  return /* @__PURE__ */ o("li", {
93
- ref: D,
94
- className: w.liClass,
105
+ ref: O,
106
+ className: T.liClass,
95
107
  children: /* @__PURE__ */ s("span", {
96
- className: `text-small relative flex w-full items-center gap-1 text-nowrap text-neutral-800 transition-colors ${w.triggerClass} `,
108
+ className: `text-small relative flex w-full items-center gap-1 text-nowrap text-neutral-800 transition-colors ${T.triggerClass} `,
97
109
  children: [/* @__PURE__ */ o("span", {
98
- className: `text-medium flex-1 ${N ? "font-bold" : ""} [&_a]:after:absolute [&_a]:after:inset-0`,
99
- children: j
100
- }), M && /* @__PURE__ */ o("span", {
101
- className: "bg-secondary-200 text-extra-small flex h-4.5 w-5.25 items-center justify-center rounded align-middle font-bold",
110
+ className: `text-medium flex-1 ${F ? "font-bold" : ""} [&_a]:after:absolute [&_a]:after:inset-0`,
102
111
  children: M
112
+ }), N && /* @__PURE__ */ o(l, {
113
+ tag: N,
114
+ variant: P
103
115
  })]
104
116
  })
105
117
  });
106
118
  };
107
119
  //#endregion
108
- export { c as NavMenuItem };
120
+ export { u as NavMenuItem };
package/dist/components/index.d.ts CHANGED
@@ -1000,6 +1000,8 @@ export declare type NavMenuItemProps = {
1000
1000
  dropdownItems: (NavMenuItemProps | NavMenuLink)[];
1001
1001
  hasDropdown: true;
1002
1002
  isNested?: boolean;
1003
+ tag?: string;
1004
+ tagVariant?: NavMenuTagVariant;
1003
1005
  onItemClick?: () => void;
1004
1006
  isOpen?: boolean;
1005
1007
  onToggle?: (open: boolean) => void;
@@ -1009,6 +1011,7 @@ export declare type NavMenuLink = {
1009
1011
  id: string;
1010
1012
  link: ReactNode;
1011
1013
  tag?: string;
1014
+ tagVariant?: NavMenuTagVariant;
1012
1015
  hasDropdown: false;
1013
1016
  isNested?: boolean;
1014
1017
  bold?: boolean;
@@ -1023,6 +1026,8 @@ export declare interface NavMenuProps {
1023
1026
  className?: string;
1024
1027
  }
1025
1028
 
1029
+ export declare type NavMenuTagVariant = 'standard' | 'emphasized';
1030
+
1026
1031
  export declare const PartnersSection: FC<PartnersSectionProps>;
1027
1032
 
1028
1033
  export declare interface PartnersSectionProps {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@npm_leadtech/legal-contracts-ui",
3
- "version": "0.188.23",
3
+ "version": "0.189.0",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",