@salesmind-ai/design-system 0.3.2 → 0.3.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 (215) hide show
  1. package/dist/{SectionShell-BfBw5q0Y.d.cts → SectionShell-GlglHCzz.d.cts} +1 -0
  2. package/dist/{SectionShell-BfBw5q0Y.d.ts → SectionShell-GlglHCzz.d.ts} +1 -0
  3. package/dist/StatsSection-B8iD9L-o.d.ts +68 -0
  4. package/dist/StatsSection-wgd8Vge1.d.cts +68 -0
  5. package/dist/admin/index.cjs +2928 -68
  6. package/dist/admin/index.cjs.map +1 -1
  7. package/dist/admin/index.js +2915 -5
  8. package/dist/admin/index.js.map +1 -1
  9. package/dist/blog/index.cjs +1064 -53
  10. package/dist/blog/index.cjs.map +1 -1
  11. package/dist/blog/index.d.cts +1 -1
  12. package/dist/blog/index.d.ts +1 -1
  13. package/dist/blog/index.js +1054 -8
  14. package/dist/blog/index.js.map +1 -1
  15. package/dist/charts/index.cjs +2694 -46
  16. package/dist/charts/index.cjs.map +1 -1
  17. package/dist/charts/index.js +2680 -3
  18. package/dist/charts/index.js.map +1 -1
  19. package/dist/core/index.cjs +4333 -807
  20. package/dist/core/index.cjs.map +1 -1
  21. package/dist/core/index.js +4130 -14
  22. package/dist/core/index.js.map +1 -1
  23. package/dist/i18n/index.cjs +558 -86
  24. package/dist/i18n/index.cjs.map +1 -1
  25. package/dist/i18n/index.js +544 -1
  26. package/dist/i18n/index.js.map +1 -1
  27. package/dist/index.cjs +17140 -1432
  28. package/dist/index.cjs.map +1 -1
  29. package/dist/index.css +24 -13
  30. package/dist/index.css.map +1 -1
  31. package/dist/index.d.cts +2 -2
  32. package/dist/index.d.ts +2 -2
  33. package/dist/index.js +16785 -31
  34. package/dist/index.js.map +1 -1
  35. package/dist/marketing/index.cjs +3072 -142
  36. package/dist/marketing/index.cjs.map +1 -1
  37. package/dist/marketing/index.d.cts +1 -1
  38. package/dist/marketing/index.d.ts +1 -1
  39. package/dist/marketing/index.js +3042 -11
  40. package/dist/marketing/index.js.map +1 -1
  41. package/dist/motion/index.cjs +1222 -26
  42. package/dist/motion/index.cjs.map +1 -1
  43. package/dist/motion/index.js +1215 -2
  44. package/dist/motion/index.js.map +1 -1
  45. package/dist/nav/index.cjs +1518 -101
  46. package/dist/nav/index.cjs.map +1 -1
  47. package/dist/nav/index.css +24 -13
  48. package/dist/nav/index.css.map +1 -1
  49. package/dist/nav/index.js +1498 -4
  50. package/dist/nav/index.js.map +1 -1
  51. package/dist/report/index.cjs +2403 -171
  52. package/dist/report/index.cjs.map +1 -1
  53. package/dist/report/index.js +2363 -3
  54. package/dist/report/index.js.map +1 -1
  55. package/dist/sections/index.cjs +382 -28
  56. package/dist/sections/index.cjs.map +1 -1
  57. package/dist/sections/index.d.cts +15 -69
  58. package/dist/sections/index.d.ts +15 -69
  59. package/dist/sections/index.js +376 -4
  60. package/dist/sections/index.js.map +1 -1
  61. package/dist/social-proof/index.cjs +1250 -53
  62. package/dist/social-proof/index.cjs.map +1 -1
  63. package/dist/social-proof/index.d.cts +1 -1
  64. package/dist/social-proof/index.d.ts +1 -1
  65. package/dist/social-proof/index.js +1235 -6
  66. package/dist/social-proof/index.js.map +1 -1
  67. package/dist/theme/index.cjs +565 -38
  68. package/dist/theme/index.cjs.map +1 -1
  69. package/dist/theme/index.js +555 -2
  70. package/dist/theme/index.js.map +1 -1
  71. package/dist/web/client/index.cjs +491 -38
  72. package/dist/web/client/index.cjs.map +1 -1
  73. package/dist/web/client/index.js +483 -4
  74. package/dist/web/client/index.js.map +1 -1
  75. package/dist/web/index.cjs +1346 -158
  76. package/dist/web/index.cjs.map +1 -1
  77. package/dist/web/index.js +1305 -9
  78. package/dist/web/index.js.map +1 -1
  79. package/dist/web/server/index.cjs +563 -26
  80. package/dist/web/server/index.cjs.map +1 -1
  81. package/dist/web/server/index.js +560 -1
  82. package/dist/web/server/index.js.map +1 -1
  83. package/package.json +11 -1
  84. package/dist/chunk-2GARWEJK.js +0 -17
  85. package/dist/chunk-2GARWEJK.js.map +0 -1
  86. package/dist/chunk-3NKRFUAR.js +0 -37
  87. package/dist/chunk-3NKRFUAR.js.map +0 -1
  88. package/dist/chunk-3TGSIILM.cjs +0 -201
  89. package/dist/chunk-3TGSIILM.cjs.map +0 -1
  90. package/dist/chunk-4GM5BGBN.cjs +0 -801
  91. package/dist/chunk-4GM5BGBN.cjs.map +0 -1
  92. package/dist/chunk-5LGDEZWY.cjs +0 -2434
  93. package/dist/chunk-5LGDEZWY.cjs.map +0 -1
  94. package/dist/chunk-6H4DSTXR.js +0 -786
  95. package/dist/chunk-6H4DSTXR.js.map +0 -1
  96. package/dist/chunk-6UNG76Y2.js +0 -153
  97. package/dist/chunk-6UNG76Y2.js.map +0 -1
  98. package/dist/chunk-7PX2AZ6Y.js +0 -39
  99. package/dist/chunk-7PX2AZ6Y.js.map +0 -1
  100. package/dist/chunk-B6AVAX4F.js +0 -1415
  101. package/dist/chunk-B6AVAX4F.js.map +0 -1
  102. package/dist/chunk-BILT5KD3.js +0 -264
  103. package/dist/chunk-BILT5KD3.js.map +0 -1
  104. package/dist/chunk-C2BCDNAV.js +0 -24
  105. package/dist/chunk-C2BCDNAV.js.map +0 -1
  106. package/dist/chunk-CH42VPWE.cjs +0 -421
  107. package/dist/chunk-CH42VPWE.cjs.map +0 -1
  108. package/dist/chunk-CJ2MKVAF.cjs +0 -46
  109. package/dist/chunk-CJ2MKVAF.cjs.map +0 -1
  110. package/dist/chunk-DP74LUXG.cjs +0 -98
  111. package/dist/chunk-DP74LUXG.cjs.map +0 -1
  112. package/dist/chunk-E7D6EKJ4.cjs +0 -44
  113. package/dist/chunk-E7D6EKJ4.cjs.map +0 -1
  114. package/dist/chunk-ECXBTUH6.cjs +0 -584
  115. package/dist/chunk-ECXBTUH6.cjs.map +0 -1
  116. package/dist/chunk-EFRAP5ES.js +0 -157
  117. package/dist/chunk-EFRAP5ES.js.map +0 -1
  118. package/dist/chunk-F6YYWMME.js +0 -485
  119. package/dist/chunk-F6YYWMME.js.map +0 -1
  120. package/dist/chunk-FAFAP4L5.js +0 -183
  121. package/dist/chunk-FAFAP4L5.js.map +0 -1
  122. package/dist/chunk-GUZIMHWS.js +0 -1608
  123. package/dist/chunk-GUZIMHWS.js.map +0 -1
  124. package/dist/chunk-H2Y6BSTL.cjs +0 -69
  125. package/dist/chunk-H2Y6BSTL.cjs.map +0 -1
  126. package/dist/chunk-HN4PHABT.js +0 -126
  127. package/dist/chunk-HN4PHABT.js.map +0 -1
  128. package/dist/chunk-HRENHNDJ.js +0 -211
  129. package/dist/chunk-HRENHNDJ.js.map +0 -1
  130. package/dist/chunk-I75BFEYT.cjs +0 -2561
  131. package/dist/chunk-I75BFEYT.cjs.map +0 -1
  132. package/dist/chunk-IFRATNLU.js +0 -562
  133. package/dist/chunk-IFRATNLU.js.map +0 -1
  134. package/dist/chunk-IYPXJ6YC.cjs +0 -69
  135. package/dist/chunk-IYPXJ6YC.cjs.map +0 -1
  136. package/dist/chunk-JPJN4YBC.js +0 -409
  137. package/dist/chunk-JPJN4YBC.js.map +0 -1
  138. package/dist/chunk-KBA2LFBG.js +0 -62
  139. package/dist/chunk-KBA2LFBG.js.map +0 -1
  140. package/dist/chunk-KCKUSU2M.cjs +0 -166
  141. package/dist/chunk-KCKUSU2M.cjs.map +0 -1
  142. package/dist/chunk-KJ2OXQF4.js +0 -287
  143. package/dist/chunk-KJ2OXQF4.js.map +0 -1
  144. package/dist/chunk-KNQEIU7O.cjs +0 -1202
  145. package/dist/chunk-KNQEIU7O.cjs.map +0 -1
  146. package/dist/chunk-KVGSVGRK.cjs +0 -569
  147. package/dist/chunk-KVGSVGRK.cjs.map +0 -1
  148. package/dist/chunk-L352JRV6.cjs +0 -105
  149. package/dist/chunk-L352JRV6.cjs.map +0 -1
  150. package/dist/chunk-LJADZITX.cjs +0 -298
  151. package/dist/chunk-LJADZITX.cjs.map +0 -1
  152. package/dist/chunk-LMJPWXTZ.cjs +0 -194
  153. package/dist/chunk-LMJPWXTZ.cjs.map +0 -1
  154. package/dist/chunk-LOWEAQST.js +0 -701
  155. package/dist/chunk-LOWEAQST.js.map +0 -1
  156. package/dist/chunk-MDB2WCRQ.cjs +0 -137
  157. package/dist/chunk-MDB2WCRQ.cjs.map +0 -1
  158. package/dist/chunk-MQDEE7HC.cjs +0 -283
  159. package/dist/chunk-MQDEE7HC.cjs.map +0 -1
  160. package/dist/chunk-MQRB634A.cjs +0 -34
  161. package/dist/chunk-MQRB634A.cjs.map +0 -1
  162. package/dist/chunk-MTI27RDV.js +0 -185
  163. package/dist/chunk-MTI27RDV.js.map +0 -1
  164. package/dist/chunk-MU6GW5ZV.js +0 -2317
  165. package/dist/chunk-MU6GW5ZV.js.map +0 -1
  166. package/dist/chunk-NN3TUHIH.js +0 -28
  167. package/dist/chunk-NN3TUHIH.js.map +0 -1
  168. package/dist/chunk-NT4LBP7D.cjs +0 -111
  169. package/dist/chunk-NT4LBP7D.cjs.map +0 -1
  170. package/dist/chunk-OLV7OD3X.cjs +0 -502
  171. package/dist/chunk-OLV7OD3X.cjs.map +0 -1
  172. package/dist/chunk-OXNXEQY7.js +0 -2538
  173. package/dist/chunk-OXNXEQY7.js.map +0 -1
  174. package/dist/chunk-P5BOFE5A.js +0 -546
  175. package/dist/chunk-P5BOFE5A.js.map +0 -1
  176. package/dist/chunk-Q2MFGYTE.cjs +0 -1449
  177. package/dist/chunk-Q2MFGYTE.cjs.map +0 -1
  178. package/dist/chunk-Q75DBVDY.cjs +0 -68
  179. package/dist/chunk-Q75DBVDY.cjs.map +0 -1
  180. package/dist/chunk-REQ5Q6ZI.js +0 -1022
  181. package/dist/chunk-REQ5Q6ZI.js.map +0 -1
  182. package/dist/chunk-SICKWUWB.js +0 -62
  183. package/dist/chunk-SICKWUWB.js.map +0 -1
  184. package/dist/chunk-T343CCH5.js +0 -1190
  185. package/dist/chunk-T343CCH5.js.map +0 -1
  186. package/dist/chunk-TEC62D4A.cjs +0 -1624
  187. package/dist/chunk-TEC62D4A.cjs.map +0 -1
  188. package/dist/chunk-TW5JB35D.js +0 -2122
  189. package/dist/chunk-TW5JB35D.js.map +0 -1
  190. package/dist/chunk-VC5LMUVQ.cjs +0 -20
  191. package/dist/chunk-VC5LMUVQ.cjs.map +0 -1
  192. package/dist/chunk-VM7WFMKI.cjs +0 -76
  193. package/dist/chunk-VM7WFMKI.cjs.map +0 -1
  194. package/dist/chunk-W2WTP6HS.cjs +0 -233
  195. package/dist/chunk-W2WTP6HS.cjs.map +0 -1
  196. package/dist/chunk-WH7PYHZY.cjs +0 -35
  197. package/dist/chunk-WH7PYHZY.cjs.map +0 -1
  198. package/dist/chunk-XQZVY7JJ.cjs +0 -717
  199. package/dist/chunk-XQZVY7JJ.cjs.map +0 -1
  200. package/dist/chunk-XU3OMQ7V.js +0 -98
  201. package/dist/chunk-XU3OMQ7V.js.map +0 -1
  202. package/dist/chunk-XWPDRMZG.js +0 -62
  203. package/dist/chunk-XWPDRMZG.js.map +0 -1
  204. package/dist/chunk-Y3CPKNB7.js +0 -67
  205. package/dist/chunk-Y3CPKNB7.js.map +0 -1
  206. package/dist/chunk-YNVRDD2P.js +0 -98
  207. package/dist/chunk-YNVRDD2P.js.map +0 -1
  208. package/dist/chunk-YSYR54XR.js +0 -92
  209. package/dist/chunk-YSYR54XR.js.map +0 -1
  210. package/dist/chunk-YTYDQBVY.cjs +0 -162
  211. package/dist/chunk-YTYDQBVY.cjs.map +0 -1
  212. package/dist/chunk-ZDLOA2UT.cjs +0 -1042
  213. package/dist/chunk-ZDLOA2UT.cjs.map +0 -1
  214. package/dist/chunk-ZWUKRCOJ.cjs +0 -2162
  215. package/dist/chunk-ZWUKRCOJ.cjs.map +0 -1
@@ -1,1022 +0,0 @@
1
- import { OutboundLink } from './chunk-KJ2OXQF4.js';
2
- import { Container } from './chunk-HN4PHABT.js';
3
- import { forwardRef, useState, useRef, useCallback, useEffect, createContext, useMemo, useContext, useId } from 'react';
4
- import clsx3 from 'clsx';
5
- import { jsx, jsxs } from 'react/jsx-runtime';
6
-
7
- var NavbarMobileNavItem = forwardRef(
8
- ({ as: Component = "a", className, active, children, ...props }, ref) => /* @__PURE__ */ jsx(
9
- Component,
10
- {
11
- ref,
12
- className: clsx3(
13
- "ds-navbar__mobile-nav-item",
14
- active && "ds-navbar__mobile-nav-item--active",
15
- className
16
- ),
17
- "aria-current": active ? "page" : void 0,
18
- ...props,
19
- children
20
- }
21
- )
22
- );
23
- NavbarMobileNavItem.displayName = "NavbarMobileNavItem";
24
- function NavbarMobileSeparator({ className }) {
25
- return /* @__PURE__ */ jsx("div", { className: clsx3("ds-navbar__mobile-separator", className), role: "separator" });
26
- }
27
- NavbarMobileSeparator.displayName = "NavbarMobileSeparator";
28
- var NavbarMobileActions = forwardRef(
29
- ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx3("ds-navbar__mobile-actions", className), ...props, children })
30
- );
31
- NavbarMobileActions.displayName = "NavbarMobileActions";
32
- var ChevronDown = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
33
- "path",
34
- {
35
- d: "M4 6L8 10L12 6",
36
- stroke: "currentColor",
37
- strokeWidth: "1.5",
38
- strokeLinecap: "round",
39
- strokeLinejoin: "round"
40
- }
41
- ) });
42
- var NavbarMegaMenu = forwardRef(
43
- ({ trigger, children, className, isOpen: controlledOpen, onOpenChange, variant = "fullWidth" }, ref) => {
44
- const [internalOpen, setInternalOpen] = useState(false);
45
- const isControlled = controlledOpen !== void 0;
46
- const isOpen = isControlled ? controlledOpen : internalOpen;
47
- const containerRef = useRef(null);
48
- const triggerRef = useRef(null);
49
- const timeoutRef = useRef(null);
50
- const handleOpen = useCallback(() => {
51
- const newState = true;
52
- if (isOpen !== newState) {
53
- if (!isControlled) setInternalOpen(newState);
54
- onOpenChange?.(newState);
55
- }
56
- }, [isOpen, isControlled, onOpenChange]);
57
- const handleClose = useCallback(() => {
58
- const newState = false;
59
- if (isOpen !== newState) {
60
- if (!isControlled) setInternalOpen(newState);
61
- onOpenChange?.(newState);
62
- }
63
- }, [isOpen, isControlled, onOpenChange]);
64
- const handleToggle = useCallback(() => {
65
- if (isOpen) {
66
- handleClose();
67
- } else {
68
- handleOpen();
69
- }
70
- }, [isOpen, handleClose, handleOpen]);
71
- const handleMouseEnter = useCallback(() => {
72
- if (timeoutRef.current) {
73
- window.clearTimeout(timeoutRef.current);
74
- timeoutRef.current = null;
75
- }
76
- handleOpen();
77
- }, [handleOpen]);
78
- const handleMouseLeave = useCallback(() => {
79
- if (timeoutRef.current) {
80
- window.clearTimeout(timeoutRef.current);
81
- }
82
- timeoutRef.current = window.setTimeout(() => {
83
- handleClose();
84
- }, 150);
85
- }, [handleClose]);
86
- useEffect(() => {
87
- return () => {
88
- if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
89
- };
90
- }, []);
91
- useEffect(() => {
92
- if (!isOpen) return;
93
- const handleClickOutside = (event) => {
94
- if (containerRef.current && !containerRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
95
- handleClose();
96
- }
97
- };
98
- document.addEventListener("mousedown", handleClickOutside);
99
- return () => document.removeEventListener("mousedown", handleClickOutside);
100
- }, [isOpen, handleClose]);
101
- useEffect(() => {
102
- if (!isOpen) return;
103
- const handleEscape = (e) => {
104
- if (e.key === "Escape") handleClose();
105
- };
106
- document.addEventListener("keydown", handleEscape);
107
- return () => document.removeEventListener("keydown", handleEscape);
108
- }, [isOpen, handleClose]);
109
- return /* @__PURE__ */ jsxs(
110
- "div",
111
- {
112
- className: clsx3("ds-navbar-mega-menu", `ds-navbar-mega-menu--${variant}`, className),
113
- ref,
114
- onMouseEnter: handleMouseEnter,
115
- onMouseLeave: handleMouseLeave,
116
- children: [
117
- /* @__PURE__ */ jsxs(
118
- "button",
119
- {
120
- ref: triggerRef,
121
- className: "ds-navbar-mega-menu__trigger",
122
- onClick: handleToggle,
123
- "aria-expanded": isOpen,
124
- "aria-haspopup": "true",
125
- children: [
126
- trigger,
127
- /* @__PURE__ */ jsx(
128
- "span",
129
- {
130
- className: "ds-navbar-mega-menu__chevron",
131
- "data-state": isOpen ? "open" : "closed",
132
- children: /* @__PURE__ */ jsx(ChevronDown, {})
133
- }
134
- )
135
- ]
136
- }
137
- ),
138
- /* @__PURE__ */ jsx("div", { ref: containerRef, children: /* @__PURE__ */ jsx(
139
- "div",
140
- {
141
- className: clsx3(
142
- "ds-navbar-mega-menu__content",
143
- `ds-navbar-mega-menu__content--${variant}`
144
- ),
145
- "data-state": isOpen ? "open" : "closed",
146
- children: variant === "fullWidth" ? /* @__PURE__ */ jsx(Container, { children }) : children
147
- }
148
- ) })
149
- ]
150
- }
151
- );
152
- }
153
- );
154
- NavbarMegaMenu.displayName = "NavbarMegaMenu";
155
- function NavbarMegaMenuSection({ heading, children, className }) {
156
- return /* @__PURE__ */ jsxs("div", { className: clsx3("ds-navbar-mega-menu__section", className), children: [
157
- heading && /* @__PURE__ */ jsx("p", { className: "ds-navbar-mega-menu__section-heading", children: heading }),
158
- /* @__PURE__ */ jsx("div", { className: "ds-navbar-mega-menu__section-items", children })
159
- ] });
160
- }
161
- NavbarMegaMenuSection.displayName = "NavbarMegaMenuSection";
162
- var NavbarMegaMenuItem = forwardRef(
163
- ({ icon, label, description, className, as: Comp = "a", ...rest }, ref) => {
164
- return /* @__PURE__ */ jsx("div", { className: "ds-navbar-mega-menu__item-wrapper", children: /* @__PURE__ */ jsxs(
165
- Comp,
166
- {
167
- ref,
168
- className: clsx3("ds-navbar-mega-menu__item", className),
169
- ...rest,
170
- children: [
171
- icon && /* @__PURE__ */ jsx("span", { className: "ds-navbar-mega-menu__item-icon", children: icon }),
172
- /* @__PURE__ */ jsxs("span", { className: "ds-navbar-mega-menu__item-text", children: [
173
- /* @__PURE__ */ jsx("span", { className: "ds-navbar-mega-menu__item-label", children: label }),
174
- description && /* @__PURE__ */ jsx("span", { className: "ds-navbar-mega-menu__item-description", children: description })
175
- ] })
176
- ]
177
- }
178
- ) });
179
- }
180
- );
181
- NavbarMegaMenuItem.displayName = "NavbarMegaMenuItem";
182
- var ChevronDown2 = () => /* @__PURE__ */ jsx("svg", { width: "8", height: "8", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
183
- "path",
184
- {
185
- d: "M4 6L8 10L12 6",
186
- stroke: "currentColor",
187
- strokeWidth: "1.5",
188
- strokeLinecap: "round",
189
- strokeLinejoin: "round"
190
- }
191
- ) });
192
- var ScrollContext = createContext({ scrolled: false });
193
- var TabsContext = createContext({
194
- activeMenuId: null,
195
- openMenu: () => {
196
- },
197
- closeMenu: () => {
198
- }
199
- });
200
- function useFocusTrap(containerRef, active) {
201
- useEffect(() => {
202
- if (!active || !containerRef.current) return;
203
- const container = containerRef.current;
204
- const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
205
- const handleKeyDown = (e) => {
206
- if (e.key !== "Tab") return;
207
- const focusable2 = Array.from(container.querySelectorAll(FOCUSABLE));
208
- if (focusable2.length === 0) {
209
- e.preventDefault();
210
- return;
211
- }
212
- const first = focusable2[0];
213
- const last = focusable2[focusable2.length - 1];
214
- if (e.shiftKey) {
215
- if (document.activeElement === first) {
216
- e.preventDefault();
217
- last.focus();
218
- }
219
- } else {
220
- if (document.activeElement === last) {
221
- e.preventDefault();
222
- first.focus();
223
- }
224
- }
225
- };
226
- const focusable = container.querySelectorAll(FOCUSABLE);
227
- if (focusable.length > 0) {
228
- focusable[0].focus();
229
- }
230
- container.addEventListener("keydown", handleKeyDown);
231
- return () => container.removeEventListener("keydown", handleKeyDown);
232
- }, [active, containerRef]);
233
- }
234
- var HYSTERESIS_RATIO = 0.25;
235
- var NavbarV2 = forwardRef(
236
- ({
237
- className,
238
- mobileContent,
239
- mobileToggleLabels,
240
- isMenuOpen,
241
- onMenuOpenChange,
242
- scrollBorder = true,
243
- scrollThreshold = 32,
244
- children,
245
- ...props
246
- }, ref) => {
247
- const [internalMenuOpen, setInternalMenuOpen] = useState(false);
248
- const isMobileMenuOpen = isMenuOpen !== void 0 ? isMenuOpen : internalMenuOpen;
249
- const navRef = useRef(null);
250
- const overlayRef = useRef(null);
251
- const [navHeight, setNavHeight] = useState(64);
252
- const openLabel = mobileToggleLabels?.open ?? "Open menu";
253
- const closeLabel = mobileToggleLabels?.close ?? "Close menu";
254
- const [scrolled, setScrolled] = useState(() => {
255
- if (typeof window !== "undefined") {
256
- return window.scrollY > scrollThreshold;
257
- }
258
- return false;
259
- });
260
- useEffect(() => {
261
- if (!scrollBorder) return;
262
- const lowerBound = scrollThreshold * HYSTERESIS_RATIO;
263
- const handleScroll = () => {
264
- const y = window.scrollY;
265
- setScrolled((prev) => {
266
- if (!prev && y > scrollThreshold) return true;
267
- if (prev && y < lowerBound) return false;
268
- return prev;
269
- });
270
- };
271
- handleScroll();
272
- window.addEventListener("scroll", handleScroll, { passive: true });
273
- return () => window.removeEventListener("scroll", handleScroll);
274
- }, [scrollBorder, scrollThreshold]);
275
- const isScrolled = scrollBorder && scrolled;
276
- const scrollCtx = useMemo(
277
- () => ({ scrolled: isScrolled }),
278
- [isScrolled]
279
- );
280
- const handleToggle = () => {
281
- const newState = !isMobileMenuOpen;
282
- setInternalMenuOpen(newState);
283
- onMenuOpenChange?.(newState);
284
- };
285
- useEffect(() => {
286
- const el = navRef.current;
287
- if (!el) return;
288
- const observer = new ResizeObserver((entries) => {
289
- for (const entry of entries) {
290
- const h = entry.contentRect.height;
291
- setNavHeight(h);
292
- el.style.setProperty("--navbar-overlap", `${h}px`);
293
- }
294
- });
295
- observer.observe(el);
296
- return () => observer.disconnect();
297
- }, []);
298
- useEffect(() => {
299
- if (isMobileMenuOpen) {
300
- document.body.style.overflow = "hidden";
301
- return () => {
302
- document.body.style.overflow = "";
303
- };
304
- }
305
- }, [isMobileMenuOpen]);
306
- useEffect(() => {
307
- if (!isMobileMenuOpen) return;
308
- const handleEscape = (e) => {
309
- if (e.key === "Escape") {
310
- setInternalMenuOpen(false);
311
- onMenuOpenChange?.(false);
312
- }
313
- };
314
- document.addEventListener("keydown", handleEscape);
315
- return () => document.removeEventListener("keydown", handleEscape);
316
- }, [isMobileMenuOpen, onMenuOpenChange]);
317
- useFocusTrap(overlayRef, isMobileMenuOpen);
318
- const mergedRef = useMergedRef(ref, navRef);
319
- return /* @__PURE__ */ jsx(ScrollContext.Provider, { value: scrollCtx, children: /* @__PURE__ */ jsxs(
320
- "nav",
321
- {
322
- ref: mergedRef,
323
- className: clsx3(
324
- "ds-navbar-v2",
325
- isScrolled && "ds-navbar-v2--scrolled",
326
- className
327
- ),
328
- ...props,
329
- children: [
330
- /* @__PURE__ */ jsxs("div", { className: "ds-navbar-v2__container", children: [
331
- children,
332
- /* @__PURE__ */ jsx(
333
- "button",
334
- {
335
- className: "ds-navbar-v2__toggle",
336
- onClick: handleToggle,
337
- "aria-label": isMobileMenuOpen ? closeLabel : openLabel,
338
- "aria-expanded": isMobileMenuOpen,
339
- children: isMobileMenuOpen ? /* @__PURE__ */ jsxs(
340
- "svg",
341
- {
342
- width: "24",
343
- height: "24",
344
- viewBox: "0 0 24 24",
345
- fill: "none",
346
- stroke: "currentColor",
347
- strokeWidth: "2",
348
- strokeLinecap: "round",
349
- strokeLinejoin: "round",
350
- children: [
351
- /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
352
- /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
353
- ]
354
- }
355
- ) : /* @__PURE__ */ jsxs(
356
- "svg",
357
- {
358
- width: "24",
359
- height: "24",
360
- viewBox: "0 0 24 24",
361
- fill: "none",
362
- stroke: "currentColor",
363
- strokeWidth: "2",
364
- strokeLinecap: "round",
365
- strokeLinejoin: "round",
366
- children: [
367
- /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
368
- /* @__PURE__ */ jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
369
- /* @__PURE__ */ jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
370
- ]
371
- }
372
- )
373
- }
374
- )
375
- ] }),
376
- /* @__PURE__ */ jsx(
377
- "div",
378
- {
379
- ref: overlayRef,
380
- className: "ds-navbar-v2__mobile-overlay",
381
- style: { top: navHeight },
382
- "data-state": isMobileMenuOpen ? "open" : "closed",
383
- role: "dialog",
384
- "aria-modal": "true",
385
- "aria-label": closeLabel,
386
- children: /* @__PURE__ */ jsx("div", { className: "ds-navbar-v2__mobile-content", children: mobileContent })
387
- }
388
- )
389
- ]
390
- }
391
- ) });
392
- }
393
- );
394
- NavbarV2.displayName = "NavbarV2";
395
- var NavbarV2Brand = forwardRef(
396
- ({ as: Component = "a", className, children, ...props }, ref) => /* @__PURE__ */ jsx(Component, { ref, className: clsx3("ds-navbar-v2__brand", className), ...props, children })
397
- );
398
- NavbarV2Brand.displayName = "NavbarV2Brand";
399
- var NavbarV2Tabs = forwardRef(
400
- ({ className, children, ...props }, ref) => {
401
- const [activeMenuId, setActiveMenuId] = useState(null);
402
- const { scrolled } = useContext(ScrollContext);
403
- const ctxValue = useMemo(
404
- () => ({
405
- activeMenuId,
406
- openMenu: (id) => setActiveMenuId(id),
407
- closeMenu: (id) => setActiveMenuId((prev) => prev === id ? null : prev)
408
- }),
409
- [activeMenuId]
410
- );
411
- return /* @__PURE__ */ jsx(TabsContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(
412
- "div",
413
- {
414
- ref,
415
- className: clsx3(
416
- "ds-navbar-v2__tabs",
417
- scrolled && "ds-navbar-v2__tabs--demoted",
418
- className
419
- ),
420
- ...props,
421
- children
422
- }
423
- ) });
424
- }
425
- );
426
- NavbarV2Tabs.displayName = "NavbarV2Tabs";
427
- var NavbarV2Tab = forwardRef(
428
- ({ as: Component = "button", active, icon, label, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
429
- Component,
430
- {
431
- ref,
432
- className: clsx3("ds-navbar-v2__tab", active && "ds-navbar-v2__tab--active", className),
433
- "aria-current": active ? "page" : void 0,
434
- ...Component === "button" ? { type: "button" } : {},
435
- ...props,
436
- children: [
437
- icon && /* @__PURE__ */ jsx("span", { className: "ds-navbar-v2__tab-icon", children: icon }),
438
- label && /* @__PURE__ */ jsx("span", { className: "ds-navbar-v2__tab-label", children: label }),
439
- children
440
- ]
441
- }
442
- )
443
- );
444
- NavbarV2Tab.displayName = "NavbarV2Tab";
445
- var NavbarV2TabMenu = forwardRef(
446
- ({
447
- icon,
448
- label,
449
- active,
450
- children,
451
- className,
452
- isOpen: controlledOpen,
453
- onOpenChange
454
- }, ref) => {
455
- const instanceId = useId();
456
- const panelId = `navbar-v2-panel-${instanceId}`;
457
- const { activeMenuId, openMenu, closeMenu } = useContext(TabsContext);
458
- const isControlled = controlledOpen !== void 0;
459
- const isOpen = isControlled ? controlledOpen : activeMenuId === instanceId;
460
- const containerRef = useRef(null);
461
- const triggerRef = useRef(null);
462
- const panelRef = useRef(null);
463
- const timeoutRef = useRef(null);
464
- const handleOpen = useCallback(() => {
465
- if (!isOpen) {
466
- if (!isControlled) openMenu(instanceId);
467
- onOpenChange?.(true);
468
- }
469
- }, [isOpen, isControlled, openMenu, instanceId, onOpenChange]);
470
- const handleClose = useCallback(() => {
471
- if (isOpen) {
472
- if (!isControlled) closeMenu(instanceId);
473
- onOpenChange?.(false);
474
- }
475
- }, [isOpen, isControlled, closeMenu, instanceId, onOpenChange]);
476
- const handleToggle = useCallback(() => {
477
- if (isOpen) handleClose();
478
- else handleOpen();
479
- }, [isOpen, handleClose, handleOpen]);
480
- const handleMouseEnter = useCallback(() => {
481
- if (timeoutRef.current) {
482
- window.clearTimeout(timeoutRef.current);
483
- timeoutRef.current = null;
484
- }
485
- handleOpen();
486
- }, [handleOpen]);
487
- const handleMouseLeave = useCallback(() => {
488
- if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
489
- timeoutRef.current = window.setTimeout(handleClose, 150);
490
- }, [handleClose]);
491
- useEffect(() => {
492
- return () => {
493
- if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
494
- };
495
- }, []);
496
- useEffect(() => {
497
- if (!isOpen) return;
498
- const handleClickOutside = (event) => {
499
- if (containerRef.current && !containerRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
500
- handleClose();
501
- }
502
- };
503
- document.addEventListener("mousedown", handleClickOutside);
504
- return () => document.removeEventListener("mousedown", handleClickOutside);
505
- }, [isOpen, handleClose]);
506
- useEffect(() => {
507
- if (!isOpen) return;
508
- const handleEscape = (e) => {
509
- if (e.key === "Escape") {
510
- handleClose();
511
- triggerRef.current?.focus();
512
- }
513
- };
514
- document.addEventListener("keydown", handleEscape);
515
- return () => document.removeEventListener("keydown", handleEscape);
516
- }, [isOpen, handleClose]);
517
- useEffect(() => {
518
- if (!isOpen || !panelRef.current) return;
519
- const clampToViewport = () => {
520
- const panel = panelRef.current;
521
- if (!panel) return;
522
- panel.style.setProperty("--panel-nudge", "0px");
523
- const rect = panel.getBoundingClientRect();
524
- const viewportWidth = window.innerWidth;
525
- const EDGE_PADDING = 16;
526
- if (rect.right > viewportWidth - EDGE_PADDING) {
527
- const overflow = rect.right - (viewportWidth - EDGE_PADDING);
528
- panel.style.setProperty("--panel-nudge", `${-overflow}px`);
529
- } else if (rect.left < EDGE_PADDING) {
530
- const overflow = EDGE_PADDING - rect.left;
531
- panel.style.setProperty("--panel-nudge", `${overflow}px`);
532
- }
533
- };
534
- requestAnimationFrame(clampToViewport);
535
- window.addEventListener("resize", clampToViewport);
536
- return () => window.removeEventListener("resize", clampToViewport);
537
- }, [isOpen]);
538
- const panelRefCallback = useCallback((node) => {
539
- containerRef.current = node;
540
- panelRef.current = node;
541
- }, []);
542
- return /* @__PURE__ */ jsxs(
543
- "div",
544
- {
545
- ref,
546
- className: clsx3("ds-navbar-v2__tab-menu", className),
547
- onMouseEnter: handleMouseEnter,
548
- onMouseLeave: handleMouseLeave,
549
- children: [
550
- /* @__PURE__ */ jsxs(
551
- "button",
552
- {
553
- ref: triggerRef,
554
- className: clsx3(
555
- "ds-navbar-v2__tab",
556
- (active || isOpen) && "ds-navbar-v2__tab--active"
557
- ),
558
- onClick: handleToggle,
559
- "aria-expanded": isOpen,
560
- "aria-haspopup": "true",
561
- "aria-controls": isOpen ? panelId : void 0,
562
- type: "button",
563
- children: [
564
- icon && /* @__PURE__ */ jsx("span", { className: "ds-navbar-v2__tab-icon", children: icon }),
565
- /* @__PURE__ */ jsxs("span", { className: "ds-navbar-v2__tab-label-row", children: [
566
- /* @__PURE__ */ jsx("span", { className: "ds-navbar-v2__tab-label", children: label }),
567
- /* @__PURE__ */ jsx(
568
- "span",
569
- {
570
- className: "ds-navbar-v2__tab-chevron",
571
- "data-state": isOpen ? "open" : "closed",
572
- children: /* @__PURE__ */ jsx(ChevronDown2, {})
573
- }
574
- )
575
- ] })
576
- ]
577
- }
578
- ),
579
- /* @__PURE__ */ jsx(
580
- "div",
581
- {
582
- ref: panelRefCallback,
583
- id: panelId,
584
- className: "ds-navbar-v2__mega-panel",
585
- "data-state": isOpen ? "open" : "closed",
586
- role: "region",
587
- "aria-label": `${label} menu`,
588
- children
589
- }
590
- )
591
- ]
592
- }
593
- );
594
- }
595
- );
596
- NavbarV2TabMenu.displayName = "NavbarV2TabMenu";
597
- var NavbarV2Actions = forwardRef(
598
- ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx3("ds-navbar-v2__actions", className), ...props, children })
599
- );
600
- NavbarV2Actions.displayName = "NavbarV2Actions";
601
- function useMergedRef(...refs) {
602
- return useCallback(
603
- (value) => {
604
- for (const ref of refs) {
605
- if (typeof ref === "function") {
606
- ref(value);
607
- } else if (ref && typeof ref === "object") {
608
- ref.current = value;
609
- }
610
- }
611
- },
612
- // eslint-disable-next-line react-hooks/exhaustive-deps
613
- refs
614
- );
615
- }
616
- function FooterAccordionItem({ section, LinkComponent }) {
617
- const [isOpen, setIsOpen] = useState(false);
618
- return /* @__PURE__ */ jsxs(
619
- "div",
620
- {
621
- className: clsx3(
622
- "ds-footer__accordion-item",
623
- isOpen && "ds-footer__accordion-item--open"
624
- ),
625
- children: [
626
- /* @__PURE__ */ jsxs(
627
- "button",
628
- {
629
- type: "button",
630
- className: "ds-footer__accordion-trigger",
631
- "aria-expanded": isOpen,
632
- onClick: () => setIsOpen((prev) => !prev),
633
- children: [
634
- /* @__PURE__ */ jsx("span", { children: section.title }),
635
- /* @__PURE__ */ jsx(
636
- "svg",
637
- {
638
- className: "ds-footer__accordion-chevron",
639
- width: "16",
640
- height: "16",
641
- viewBox: "0 0 24 24",
642
- fill: "none",
643
- stroke: "currentColor",
644
- strokeWidth: "2",
645
- strokeLinecap: "round",
646
- strokeLinejoin: "round",
647
- "aria-hidden": "true",
648
- children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
649
- }
650
- )
651
- ]
652
- }
653
- ),
654
- /* @__PURE__ */ jsx("div", { className: "ds-footer__accordion-panel", hidden: !isOpen, children: /* @__PURE__ */ jsx("ul", { className: "ds-footer__links", children: section.links.map((link, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(LinkComponent, { href: link.href, className: "ds-footer__link", children: [
655
- link.label,
656
- link.isNew && /* @__PURE__ */ jsx("span", { className: "ds-footer__badge", children: "NEW" })
657
- ] }) }, idx)) }) })
658
- ]
659
- }
660
- );
661
- }
662
- var SiteFooter = forwardRef(
663
- ({
664
- cta,
665
- sections = [],
666
- orientationLine,
667
- linkAs,
668
- brand,
669
- tagline,
670
- socials,
671
- trustBadges,
672
- controls,
673
- legalLinks = [],
674
- copyright,
675
- companyInfo,
676
- bottomExtra,
677
- bottomActions,
678
- className,
679
- ...props
680
- }, ref) => {
681
- const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
682
- const defaultCopyright = copyright || `\xA9 ${currentYear}. All rights reserved.`;
683
- const resolvedControls = controls || bottomActions;
684
- const LinkComponent = linkAs || "a";
685
- return /* @__PURE__ */ jsxs("footer", { ref, className: clsx3("ds-footer", className), ...props, children: [
686
- cta && /* @__PURE__ */ jsx("div", { className: "ds-footer__cta", "data-footer-zone": "cta", children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs("div", { className: "ds-footer__cta-content", children: [
687
- /* @__PURE__ */ jsx("h2", { className: "ds-footer__cta-headline", children: cta.headline }),
688
- cta.subtext && /* @__PURE__ */ jsx("p", { className: "ds-footer__cta-subtext", children: cta.subtext }),
689
- (cta.primaryCta || cta.secondaryCta) && /* @__PURE__ */ jsxs("div", { className: "ds-footer__cta-actions", children: [
690
- cta.primaryCta,
691
- cta.secondaryCta
692
- ] }),
693
- cta.trustLine && /* @__PURE__ */ jsx("p", { className: "ds-footer__cta-trust", children: cta.trustLine })
694
- ] }) }) }),
695
- sections.length > 0 && /* @__PURE__ */ jsx("div", { className: "ds-footer__nav", "data-footer-zone": "navigation", children: /* @__PURE__ */ jsxs(Container, { children: [
696
- orientationLine && /* @__PURE__ */ jsx("div", { className: "ds-footer__orientation", children: orientationLine }),
697
- /* @__PURE__ */ jsx(
698
- "nav",
699
- {
700
- className: "ds-footer__grid",
701
- "aria-label": "Footer navigation",
702
- children: sections.map((section, idx) => /* @__PURE__ */ jsxs(
703
- "div",
704
- {
705
- className: "ds-footer__column",
706
- "data-footer-section": section.title.toLowerCase().replace(/\s+/g, "-"),
707
- children: [
708
- /* @__PURE__ */ jsx("p", { className: "ds-footer__heading", children: section.title }),
709
- /* @__PURE__ */ jsx("ul", { className: "ds-footer__links", children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
710
- LinkComponent,
711
- {
712
- href: link.href,
713
- className: "ds-footer__link",
714
- children: [
715
- link.label,
716
- link.isNew && /* @__PURE__ */ jsx("span", { className: "ds-footer__badge", children: "NEW" })
717
- ]
718
- }
719
- ) }, linkIdx)) })
720
- ]
721
- },
722
- idx
723
- ))
724
- }
725
- ),
726
- /* @__PURE__ */ jsx(
727
- "nav",
728
- {
729
- className: "ds-footer__mobile-nav",
730
- "aria-label": "Footer navigation",
731
- children: sections.map((section, idx) => /* @__PURE__ */ jsx(
732
- FooterAccordionItem,
733
- {
734
- section,
735
- LinkComponent
736
- },
737
- idx
738
- ))
739
- }
740
- )
741
- ] }) }),
742
- (brand || socials || trustBadges) && /* @__PURE__ */ jsx("div", { className: "ds-footer__authority", "data-footer-zone": "authority", children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs("div", { className: "ds-footer__authority-content", children: [
743
- /* @__PURE__ */ jsxs("div", { className: "ds-footer__brand", children: [
744
- brand && /* @__PURE__ */ jsx("div", { className: "ds-footer__logo", children: brand }),
745
- tagline && /* @__PURE__ */ jsx("p", { className: "ds-footer__tagline", children: tagline }),
746
- socials && /* @__PURE__ */ jsx("div", { className: "ds-footer__socials", children: socials })
747
- ] }),
748
- trustBadges && trustBadges.length > 0 && /* @__PURE__ */ jsx("div", { className: "ds-footer__trust-badges", children: trustBadges.map((badge, idx) => /* @__PURE__ */ jsx("span", { className: "ds-footer__trust-badge", children: badge.label }, idx)) })
749
- ] }) }) }),
750
- /* @__PURE__ */ jsx("div", { className: "ds-footer__bottom", "data-footer-zone": "legal", children: /* @__PURE__ */ jsxs(Container, { children: [
751
- /* @__PURE__ */ jsxs("div", { className: "ds-footer__bottom-content", children: [
752
- /* @__PURE__ */ jsx("div", { className: "ds-footer__copyright", children: copyright || defaultCopyright }),
753
- resolvedControls && /* @__PURE__ */ jsx("div", { className: "ds-footer__controls", children: resolvedControls }),
754
- legalLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: "ds-footer__legal", children: legalLinks.map((link, idx) => /* @__PURE__ */ jsx(
755
- LinkComponent,
756
- {
757
- href: link.href,
758
- className: "ds-footer__legal-link",
759
- children: link.label
760
- },
761
- idx
762
- )) })
763
- ] }),
764
- bottomExtra && /* @__PURE__ */ jsx("div", { className: "ds-footer__bottom-extra", children: bottomExtra }),
765
- companyInfo && /* @__PURE__ */ jsx("p", { className: "ds-footer__company-info", children: companyInfo })
766
- ] }) })
767
- ] });
768
- }
769
- );
770
- SiteFooter.displayName = "SiteFooter";
771
- var GlobeIcon = () => /* @__PURE__ */ jsxs(
772
- "svg",
773
- {
774
- width: "16",
775
- height: "16",
776
- viewBox: "0 0 24 24",
777
- fill: "none",
778
- stroke: "currentColor",
779
- strokeWidth: "2",
780
- strokeLinecap: "round",
781
- strokeLinejoin: "round",
782
- "aria-hidden": "true",
783
- children: [
784
- /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
785
- /* @__PURE__ */ jsx("path", { d: "M2 12h20" }),
786
- /* @__PURE__ */ jsx("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
787
- ]
788
- }
789
- );
790
- var ChevronDownIcon = () => /* @__PURE__ */ jsx(
791
- "svg",
792
- {
793
- width: "12",
794
- height: "12",
795
- viewBox: "0 0 16 16",
796
- fill: "none",
797
- stroke: "currentColor",
798
- strokeWidth: "1.5",
799
- strokeLinecap: "round",
800
- strokeLinejoin: "round",
801
- "aria-hidden": "true",
802
- children: /* @__PURE__ */ jsx("path", { d: "M4 6L8 10L12 6" })
803
- }
804
- );
805
- var CheckIcon = () => /* @__PURE__ */ jsx(
806
- "svg",
807
- {
808
- width: "14",
809
- height: "14",
810
- viewBox: "0 0 24 24",
811
- fill: "none",
812
- stroke: "currentColor",
813
- strokeWidth: "2.5",
814
- strokeLinecap: "round",
815
- strokeLinejoin: "round",
816
- "aria-hidden": "true",
817
- children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
818
- }
819
- );
820
- var LocaleDropdown = forwardRef(
821
- ({
822
- locales,
823
- activeLocale,
824
- onLocaleChange,
825
- optionAs: OptionComponent = "button",
826
- getHref,
827
- className,
828
- direction = "down",
829
- align = "right"
830
- }, ref) => {
831
- const [isOpen, setIsOpen] = useState(false);
832
- const [focusIndex, setFocusIndex] = useState(-1);
833
- const containerRef = useRef(null);
834
- const triggerRef = useRef(null);
835
- const listRef = useRef(null);
836
- const instanceId = useId();
837
- const listboxId = `locale-dropdown-${instanceId}`;
838
- const currentLocale = locales.find((l) => l.code === activeLocale) ?? locales[0];
839
- const handleToggle = useCallback(() => {
840
- setIsOpen((prev) => {
841
- if (!prev) setFocusIndex(-1);
842
- return !prev;
843
- });
844
- }, []);
845
- const handleClose = useCallback(() => {
846
- setIsOpen(false);
847
- setFocusIndex(-1);
848
- triggerRef.current?.focus();
849
- }, []);
850
- const handleSelect = useCallback(
851
- (code) => {
852
- onLocaleChange?.(code);
853
- handleClose();
854
- },
855
- [onLocaleChange, handleClose]
856
- );
857
- useEffect(() => {
858
- if (!isOpen) return;
859
- const handleClickOutside = (e) => {
860
- if (containerRef.current && !containerRef.current.contains(e.target)) {
861
- handleClose();
862
- }
863
- };
864
- document.addEventListener("mousedown", handleClickOutside);
865
- return () => document.removeEventListener("mousedown", handleClickOutside);
866
- }, [isOpen, handleClose]);
867
- const handleKeyDown = useCallback(
868
- (e) => {
869
- if (!isOpen) {
870
- if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
871
- e.preventDefault();
872
- setIsOpen(true);
873
- setFocusIndex(0);
874
- }
875
- return;
876
- }
877
- switch (e.key) {
878
- case "Escape":
879
- e.preventDefault();
880
- handleClose();
881
- break;
882
- case "ArrowDown":
883
- e.preventDefault();
884
- setFocusIndex((prev) => (prev + 1) % locales.length);
885
- break;
886
- case "ArrowUp":
887
- e.preventDefault();
888
- setFocusIndex((prev) => (prev - 1 + locales.length) % locales.length);
889
- break;
890
- case "Enter":
891
- case " ":
892
- e.preventDefault();
893
- if (focusIndex >= 0 && focusIndex < locales.length) {
894
- handleSelect(locales[focusIndex].code);
895
- }
896
- break;
897
- case "Home":
898
- e.preventDefault();
899
- setFocusIndex(0);
900
- break;
901
- case "End":
902
- e.preventDefault();
903
- setFocusIndex(locales.length - 1);
904
- break;
905
- case "Tab":
906
- handleClose();
907
- break;
908
- }
909
- },
910
- [isOpen, focusIndex, locales, handleClose, handleSelect]
911
- );
912
- useEffect(() => {
913
- if (!isOpen || focusIndex < 0 || !listRef.current) return;
914
- const items = listRef.current.querySelectorAll('[role="option"]');
915
- items[focusIndex]?.scrollIntoView({ block: "nearest" });
916
- }, [isOpen, focusIndex]);
917
- const activeDescendantId = isOpen && focusIndex >= 0 ? `${listboxId}-option-${focusIndex}` : void 0;
918
- return /* @__PURE__ */ jsx(
919
- "div",
920
- {
921
- ref,
922
- className: clsx3(
923
- "ds-locale-dropdown",
924
- direction === "up" && "ds-locale-dropdown--up",
925
- align === "left" && "ds-locale-dropdown--align-left",
926
- align === "center" && "ds-locale-dropdown--align-center",
927
- className
928
- ),
929
- children: /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "ds-locale-dropdown__wrapper", children: [
930
- /* @__PURE__ */ jsxs(
931
- "button",
932
- {
933
- ref: triggerRef,
934
- type: "button",
935
- className: "ds-locale-dropdown__trigger",
936
- onClick: handleToggle,
937
- onKeyDown: handleKeyDown,
938
- "aria-haspopup": "listbox",
939
- "aria-expanded": isOpen,
940
- "aria-controls": isOpen ? listboxId : void 0,
941
- "aria-activedescendant": activeDescendantId,
942
- "aria-label": `Language: ${currentLocale.label}. Change language.`,
943
- children: [
944
- /* @__PURE__ */ jsx("span", { className: "ds-locale-dropdown__trigger-icon", children: /* @__PURE__ */ jsx(GlobeIcon, {}) }),
945
- currentLocale.flag && /* @__PURE__ */ jsx("span", { className: "ds-locale-dropdown__trigger-flag", "aria-hidden": "true", children: currentLocale.flag }),
946
- /* @__PURE__ */ jsx(
947
- "span",
948
- {
949
- className: "ds-locale-dropdown__trigger-chevron",
950
- "data-state": isOpen ? "open" : "closed",
951
- children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
952
- }
953
- )
954
- ]
955
- }
956
- ),
957
- /* @__PURE__ */ jsx(
958
- "div",
959
- {
960
- ref: listRef,
961
- id: listboxId,
962
- className: "ds-locale-dropdown__panel",
963
- role: "listbox",
964
- "aria-label": "Select language",
965
- "data-state": isOpen ? "open" : "closed",
966
- onKeyDown: handleKeyDown,
967
- children: locales.map((locale, index) => {
968
- const isActive = locale.code === activeLocale;
969
- const isFocused = index === focusIndex;
970
- const optionId = `${listboxId}-option-${index}`;
971
- const optionProps = {
972
- id: optionId,
973
- role: "option",
974
- "aria-selected": isActive,
975
- className: clsx3(
976
- "ds-locale-dropdown__option",
977
- isActive && "ds-locale-dropdown__option--active",
978
- isFocused && "ds-locale-dropdown__option--focused"
979
- ),
980
- onClick: () => handleSelect(locale.code),
981
- ...OptionComponent !== "button" && getHref ? { href: getHref(locale.code) } : { type: "button" }
982
- };
983
- return /* @__PURE__ */ jsxs(OptionComponent, { ...optionProps, children: [
984
- /* @__PURE__ */ jsxs("span", { className: "ds-locale-dropdown__option-content", children: [
985
- locale.flag && /* @__PURE__ */ jsx("span", { className: "ds-locale-dropdown__option-flag", "aria-hidden": "true", children: locale.flag }),
986
- /* @__PURE__ */ jsx("span", { className: "ds-locale-dropdown__option-label", children: locale.label })
987
- ] }),
988
- isActive && /* @__PURE__ */ jsx("span", { className: "ds-locale-dropdown__option-check", children: /* @__PURE__ */ jsx(CheckIcon, {}) })
989
- ] }, locale.code);
990
- })
991
- }
992
- )
993
- ] })
994
- }
995
- );
996
- }
997
- );
998
- LocaleDropdown.displayName = "LocaleDropdown";
999
- var MDXOutboundLink = ({
1000
- href,
1001
- children,
1002
- ...props
1003
- }) => {
1004
- if (!href) {
1005
- return /* @__PURE__ */ jsx("a", { ...props, children });
1006
- }
1007
- return /* @__PURE__ */ jsx(
1008
- OutboundLink,
1009
- {
1010
- href,
1011
- context: "cms_markdown",
1012
- preserveExistingUTM: true,
1013
- openInNewTab: true,
1014
- ...props,
1015
- children
1016
- }
1017
- );
1018
- };
1019
-
1020
- export { LocaleDropdown, MDXOutboundLink, NavbarMegaMenu, NavbarMegaMenuItem, NavbarMegaMenuSection, NavbarMobileActions, NavbarMobileNavItem, NavbarMobileSeparator, NavbarV2, NavbarV2Actions, NavbarV2Brand, NavbarV2Tab, NavbarV2TabMenu, NavbarV2Tabs, SiteFooter };
1021
- //# sourceMappingURL=out.js.map
1022
- //# sourceMappingURL=chunk-REQ5Q6ZI.js.map