@salesmind-ai/design-system 1.7.0 → 1.8.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.
- package/dist/{chunk-3NS6X2R4.cjs → chunk-5EIBL6DQ.cjs} +133 -38
- package/dist/chunk-5EIBL6DQ.cjs.map +1 -0
- package/dist/{chunk-6BUS7RMS.js → chunk-Q3YVBUKQ.js} +133 -38
- package/dist/chunk-Q3YVBUKQ.js.map +1 -0
- package/dist/index.cjs +10 -10
- package/dist/index.css +54 -0
- package/dist/index.css.map +1 -1
- package/dist/index.js +1 -1
- package/dist/nav/index.cjs +10 -10
- package/dist/nav/index.css +54 -0
- package/dist/nav/index.css.map +1 -1
- package/dist/nav/index.d.cts +9 -0
- package/dist/nav/index.d.ts +9 -0
- package/dist/nav/index.js +1 -1
- package/dist/styles/styles.css +54 -0
- package/package.json +1 -1
- package/dist/chunk-3NS6X2R4.cjs.map +0 -1
- package/dist/chunk-6BUS7RMS.js.map +0 -1
|
@@ -642,6 +642,24 @@ var CheckIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
|
|
|
642
642
|
children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
|
|
643
643
|
}
|
|
644
644
|
);
|
|
645
|
+
var SearchIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
646
|
+
"svg",
|
|
647
|
+
{
|
|
648
|
+
width: "14",
|
|
649
|
+
height: "14",
|
|
650
|
+
viewBox: "0 0 24 24",
|
|
651
|
+
fill: "none",
|
|
652
|
+
stroke: "currentColor",
|
|
653
|
+
strokeWidth: "2",
|
|
654
|
+
strokeLinecap: "round",
|
|
655
|
+
strokeLinejoin: "round",
|
|
656
|
+
"aria-hidden": "true",
|
|
657
|
+
children: [
|
|
658
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
|
|
659
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21 21-4.3-4.3" })
|
|
660
|
+
]
|
|
661
|
+
}
|
|
662
|
+
);
|
|
645
663
|
var LocaleDropdown = react.forwardRef(
|
|
646
664
|
({
|
|
647
665
|
locales,
|
|
@@ -651,16 +669,29 @@ var LocaleDropdown = react.forwardRef(
|
|
|
651
669
|
getHref,
|
|
652
670
|
className,
|
|
653
671
|
direction = "down",
|
|
654
|
-
align = "right"
|
|
672
|
+
align = "right",
|
|
673
|
+
searchable = false,
|
|
674
|
+
searchPlaceholder = "Search languages",
|
|
675
|
+
searchEmptyLabel = "No languages found"
|
|
655
676
|
}, ref) => {
|
|
656
677
|
const [isOpen, setIsOpen] = react.useState(false);
|
|
657
678
|
const [focusIndex, setFocusIndex] = react.useState(-1);
|
|
679
|
+
const [query, setQuery] = react.useState("");
|
|
658
680
|
const containerRef = react.useRef(null);
|
|
659
681
|
const triggerRef = react.useRef(null);
|
|
660
682
|
const listRef = react.useRef(null);
|
|
683
|
+
const searchInputRef = react.useRef(null);
|
|
661
684
|
const instanceId = react.useId();
|
|
662
685
|
const listboxId = `locale-dropdown-${instanceId}`;
|
|
663
686
|
const currentLocale = locales.find((l) => l.code === activeLocale) ?? locales[0];
|
|
687
|
+
const filteredLocales = react.useMemo(() => {
|
|
688
|
+
if (!searchable) return locales;
|
|
689
|
+
const q = query.trim().toLowerCase();
|
|
690
|
+
if (!q) return locales;
|
|
691
|
+
return locales.filter(
|
|
692
|
+
(l) => l.label.toLowerCase().includes(q) || l.code.toLowerCase().includes(q)
|
|
693
|
+
);
|
|
694
|
+
}, [locales, query, searchable]);
|
|
664
695
|
const handleToggle = react.useCallback(() => {
|
|
665
696
|
setIsOpen((prev) => {
|
|
666
697
|
if (!prev) setFocusIndex(-1);
|
|
@@ -670,6 +701,7 @@ var LocaleDropdown = react.forwardRef(
|
|
|
670
701
|
const handleClose = react.useCallback(() => {
|
|
671
702
|
setIsOpen(false);
|
|
672
703
|
setFocusIndex(-1);
|
|
704
|
+
setQuery("");
|
|
673
705
|
triggerRef.current?.focus();
|
|
674
706
|
}, []);
|
|
675
707
|
const handleSelect = react.useCallback(
|
|
@@ -689,6 +721,14 @@ var LocaleDropdown = react.forwardRef(
|
|
|
689
721
|
document.addEventListener("mousedown", handleClickOutside);
|
|
690
722
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
691
723
|
}, [isOpen, handleClose]);
|
|
724
|
+
react.useEffect(() => {
|
|
725
|
+
if (!isOpen || !searchable) return;
|
|
726
|
+
const raf = requestAnimationFrame(() => searchInputRef.current?.focus());
|
|
727
|
+
return () => cancelAnimationFrame(raf);
|
|
728
|
+
}, [isOpen, searchable]);
|
|
729
|
+
react.useEffect(() => {
|
|
730
|
+
setFocusIndex(-1);
|
|
731
|
+
}, [query]);
|
|
692
732
|
const handleKeyDown = react.useCallback(
|
|
693
733
|
(e) => {
|
|
694
734
|
if (!isOpen) {
|
|
@@ -699,6 +739,7 @@ var LocaleDropdown = react.forwardRef(
|
|
|
699
739
|
}
|
|
700
740
|
return;
|
|
701
741
|
}
|
|
742
|
+
const count = filteredLocales.length;
|
|
702
743
|
switch (e.key) {
|
|
703
744
|
case "Escape":
|
|
704
745
|
e.preventDefault();
|
|
@@ -706,33 +747,44 @@ var LocaleDropdown = react.forwardRef(
|
|
|
706
747
|
break;
|
|
707
748
|
case "ArrowDown":
|
|
708
749
|
e.preventDefault();
|
|
709
|
-
setFocusIndex((prev) => (prev + 1) %
|
|
750
|
+
if (count > 0) setFocusIndex((prev) => (prev + 1) % count);
|
|
710
751
|
break;
|
|
711
752
|
case "ArrowUp":
|
|
712
753
|
e.preventDefault();
|
|
713
|
-
setFocusIndex((prev) => (prev - 1 +
|
|
754
|
+
if (count > 0) setFocusIndex((prev) => (prev - 1 + count) % count);
|
|
714
755
|
break;
|
|
715
756
|
case "Enter":
|
|
716
|
-
case " ":
|
|
717
757
|
e.preventDefault();
|
|
718
|
-
if (focusIndex >= 0 && focusIndex <
|
|
719
|
-
handleSelect(
|
|
758
|
+
if (focusIndex >= 0 && focusIndex < count) {
|
|
759
|
+
handleSelect(filteredLocales[focusIndex].code);
|
|
760
|
+
}
|
|
761
|
+
break;
|
|
762
|
+
case " ":
|
|
763
|
+
if (!searchable) {
|
|
764
|
+
e.preventDefault();
|
|
765
|
+
if (focusIndex >= 0 && focusIndex < count) {
|
|
766
|
+
handleSelect(filteredLocales[focusIndex].code);
|
|
767
|
+
}
|
|
720
768
|
}
|
|
721
769
|
break;
|
|
722
770
|
case "Home":
|
|
723
|
-
|
|
724
|
-
|
|
771
|
+
if (!searchable) {
|
|
772
|
+
e.preventDefault();
|
|
773
|
+
if (count > 0) setFocusIndex(0);
|
|
774
|
+
}
|
|
725
775
|
break;
|
|
726
776
|
case "End":
|
|
727
|
-
|
|
728
|
-
|
|
777
|
+
if (!searchable) {
|
|
778
|
+
e.preventDefault();
|
|
779
|
+
if (count > 0) setFocusIndex(count - 1);
|
|
780
|
+
}
|
|
729
781
|
break;
|
|
730
782
|
case "Tab":
|
|
731
783
|
handleClose();
|
|
732
784
|
break;
|
|
733
785
|
}
|
|
734
786
|
},
|
|
735
|
-
[isOpen, focusIndex,
|
|
787
|
+
[isOpen, focusIndex, filteredLocales, searchable, handleClose, handleSelect]
|
|
736
788
|
);
|
|
737
789
|
react.useEffect(() => {
|
|
738
790
|
if (!isOpen || focusIndex < 0 || !listRef.current) return;
|
|
@@ -740,6 +792,30 @@ var LocaleDropdown = react.forwardRef(
|
|
|
740
792
|
items[focusIndex]?.scrollIntoView({ block: "nearest" });
|
|
741
793
|
}, [isOpen, focusIndex]);
|
|
742
794
|
const activeDescendantId = isOpen && focusIndex >= 0 ? `${listboxId}-option-${focusIndex}` : void 0;
|
|
795
|
+
const renderOption = (locale, index) => {
|
|
796
|
+
const isActive = locale.code === activeLocale;
|
|
797
|
+
const isFocused = index === focusIndex;
|
|
798
|
+
const optionId = `${listboxId}-option-${index}`;
|
|
799
|
+
const optionProps = {
|
|
800
|
+
id: optionId,
|
|
801
|
+
role: "option",
|
|
802
|
+
"aria-selected": isActive,
|
|
803
|
+
className: clsx__default.default(
|
|
804
|
+
"ds-locale-dropdown__option",
|
|
805
|
+
isActive && "ds-locale-dropdown__option--active",
|
|
806
|
+
isFocused && "ds-locale-dropdown__option--focused"
|
|
807
|
+
),
|
|
808
|
+
onClick: () => handleSelect(locale.code),
|
|
809
|
+
...OptionComponent !== "button" && getHref ? { href: getHref(locale.code) } : { type: "button" }
|
|
810
|
+
};
|
|
811
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(OptionComponent, { ...optionProps, children: [
|
|
812
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ds-locale-dropdown__option-content", children: [
|
|
813
|
+
locale.flag && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-locale-dropdown__option-flag", "aria-hidden": "true", children: locale.flag }),
|
|
814
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-locale-dropdown__option-label", children: locale.label })
|
|
815
|
+
] }),
|
|
816
|
+
isActive && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-locale-dropdown__option-check", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) })
|
|
817
|
+
] }, locale.code);
|
|
818
|
+
};
|
|
743
819
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
744
820
|
"div",
|
|
745
821
|
{
|
|
@@ -763,7 +839,7 @@ var LocaleDropdown = react.forwardRef(
|
|
|
763
839
|
"aria-haspopup": "listbox",
|
|
764
840
|
"aria-expanded": isOpen,
|
|
765
841
|
"aria-controls": isOpen ? listboxId : void 0,
|
|
766
|
-
"aria-activedescendant": activeDescendantId,
|
|
842
|
+
"aria-activedescendant": searchable ? void 0 : activeDescendantId,
|
|
767
843
|
"aria-label": `Language: ${currentLocale.label}. Change language.`,
|
|
768
844
|
children: [
|
|
769
845
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-locale-dropdown__trigger-icon", children: /* @__PURE__ */ jsxRuntime.jsx(GlobeIcon, {}) }),
|
|
@@ -779,7 +855,49 @@ var LocaleDropdown = react.forwardRef(
|
|
|
779
855
|
]
|
|
780
856
|
}
|
|
781
857
|
),
|
|
782
|
-
/* @__PURE__ */ jsxRuntime.
|
|
858
|
+
searchable ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
859
|
+
"div",
|
|
860
|
+
{
|
|
861
|
+
className: "ds-locale-dropdown__panel ds-locale-dropdown__panel--searchable",
|
|
862
|
+
"data-state": isOpen ? "open" : "closed",
|
|
863
|
+
children: [
|
|
864
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-locale-dropdown__search", children: [
|
|
865
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-locale-dropdown__search-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, {}) }),
|
|
866
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
867
|
+
"input",
|
|
868
|
+
{
|
|
869
|
+
ref: searchInputRef,
|
|
870
|
+
type: "text",
|
|
871
|
+
className: "ds-locale-dropdown__search-input",
|
|
872
|
+
placeholder: searchPlaceholder,
|
|
873
|
+
value: query,
|
|
874
|
+
onChange: (e) => setQuery(e.target.value),
|
|
875
|
+
onKeyDown: handleKeyDown,
|
|
876
|
+
role: "combobox",
|
|
877
|
+
"aria-expanded": isOpen,
|
|
878
|
+
"aria-controls": listboxId,
|
|
879
|
+
"aria-activedescendant": activeDescendantId,
|
|
880
|
+
"aria-autocomplete": "list",
|
|
881
|
+
"aria-label": searchPlaceholder,
|
|
882
|
+
autoComplete: "off",
|
|
883
|
+
spellCheck: false
|
|
884
|
+
}
|
|
885
|
+
)
|
|
886
|
+
] }),
|
|
887
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
888
|
+
"div",
|
|
889
|
+
{
|
|
890
|
+
ref: listRef,
|
|
891
|
+
id: listboxId,
|
|
892
|
+
className: "ds-locale-dropdown__list",
|
|
893
|
+
role: "listbox",
|
|
894
|
+
"aria-label": "Select language",
|
|
895
|
+
children: filteredLocales.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-locale-dropdown__empty", role: "status", children: searchEmptyLabel }) : filteredLocales.map(renderOption)
|
|
896
|
+
}
|
|
897
|
+
)
|
|
898
|
+
]
|
|
899
|
+
}
|
|
900
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
783
901
|
"div",
|
|
784
902
|
{
|
|
785
903
|
ref: listRef,
|
|
@@ -789,30 +907,7 @@ var LocaleDropdown = react.forwardRef(
|
|
|
789
907
|
"aria-label": "Select language",
|
|
790
908
|
"data-state": isOpen ? "open" : "closed",
|
|
791
909
|
onKeyDown: handleKeyDown,
|
|
792
|
-
children:
|
|
793
|
-
const isActive = locale.code === activeLocale;
|
|
794
|
-
const isFocused = index === focusIndex;
|
|
795
|
-
const optionId = `${listboxId}-option-${index}`;
|
|
796
|
-
const optionProps = {
|
|
797
|
-
id: optionId,
|
|
798
|
-
role: "option",
|
|
799
|
-
"aria-selected": isActive,
|
|
800
|
-
className: clsx__default.default(
|
|
801
|
-
"ds-locale-dropdown__option",
|
|
802
|
-
isActive && "ds-locale-dropdown__option--active",
|
|
803
|
-
isFocused && "ds-locale-dropdown__option--focused"
|
|
804
|
-
),
|
|
805
|
-
onClick: () => handleSelect(locale.code),
|
|
806
|
-
...OptionComponent !== "button" && getHref ? { href: getHref(locale.code) } : { type: "button" }
|
|
807
|
-
};
|
|
808
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(OptionComponent, { ...optionProps, children: [
|
|
809
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ds-locale-dropdown__option-content", children: [
|
|
810
|
-
locale.flag && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-locale-dropdown__option-flag", "aria-hidden": "true", children: locale.flag }),
|
|
811
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-locale-dropdown__option-label", children: locale.label })
|
|
812
|
-
] }),
|
|
813
|
-
isActive && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-locale-dropdown__option-check", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) })
|
|
814
|
-
] }, locale.code);
|
|
815
|
-
})
|
|
910
|
+
children: filteredLocales.map(renderOption)
|
|
816
911
|
}
|
|
817
912
|
)
|
|
818
913
|
] })
|
|
@@ -852,4 +947,4 @@ exports.NavbarV2TabMenu = NavbarV2TabMenu;
|
|
|
852
947
|
exports.NavbarV2Tabs = NavbarV2Tabs;
|
|
853
948
|
exports.SiteFooter = SiteFooter;
|
|
854
949
|
//# sourceMappingURL=out.js.map
|
|
855
|
-
//# sourceMappingURL=chunk-
|
|
950
|
+
//# sourceMappingURL=chunk-5EIBL6DQ.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/NavbarV2/NavbarV2.tsx","../src/components/SiteFooter/SiteFooter.tsx","../src/components/LocaleDropdown/LocaleDropdown.tsx","../src/components/OutboundLink/MDXOutboundLink.tsx"],"names":["focusable","forwardRef","useState","clsx","jsx","jsxs","useRef","useEffect","useCallback","useMemo","useId"],"mappings":"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","sourcesContent":["import React, {\n forwardRef,\n useState,\n useRef,\n useEffect,\n useCallback,\n useContext,\n createContext,\n useMemo,\n useId,\n} from 'react';\nimport clsx from 'clsx';\nimport './NavbarV2.css';\n\n/* ============================================================================\n Icons\n ============================================================================ */\n\nconst ChevronDown = () => (\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\n/* ============================================================================\n Scroll State Context — lets children (e.g. NavbarV2Tabs) know when\n the outer container has activated its glass surface, so they can\n demote their own glass to avoid glass-on-glass visual noise.\n ============================================================================ */\n\ninterface ScrollContextValue {\n /** Whether the navbar container is in the scrolled (glass) state. */\n scrolled: boolean;\n}\n\nconst ScrollContext = createContext<ScrollContextValue>({ scrolled: false });\n\n/* ============================================================================\n Mutual Exclusion Context — only one mega menu open at a time\n ============================================================================ */\n\ninterface TabsContextValue {\n /** ID of the currently open menu (null = all closed). */\n activeMenuId: string | null;\n /** Request to open a menu. Closes any other open menu. */\n openMenu: (id: string) => void;\n /** Request to close a specific menu. */\n closeMenu: (id: string) => void;\n}\n\nconst TabsContext = createContext<TabsContextValue>({\n activeMenuId: null,\n openMenu: () => {},\n closeMenu: () => {},\n});\n\n/* ============================================================================\n Focus Trap Hook — traps Tab/Shift+Tab inside a container\n ============================================================================ */\n\nfunction useFocusTrap(containerRef: React.RefObject<HTMLElement | null>, active: boolean) {\n useEffect(() => {\n if (!active || !containerRef.current) return;\n\n const container = containerRef.current;\n const FOCUSABLE =\n 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key !== 'Tab') return;\n\n const focusable = Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE));\n if (focusable.length === 0) {\n e.preventDefault();\n return;\n }\n\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n\n if (e.shiftKey) {\n if (document.activeElement === first) {\n e.preventDefault();\n last.focus();\n }\n } else {\n if (document.activeElement === last) {\n e.preventDefault();\n first.focus();\n }\n }\n };\n\n // Focus first element on trap activation\n const focusable = container.querySelectorAll<HTMLElement>(FOCUSABLE);\n if (focusable.length > 0) {\n focusable[0].focus();\n }\n\n container.addEventListener('keydown', handleKeyDown);\n return () => container.removeEventListener('keydown', handleKeyDown);\n }, [active, containerRef]);\n}\n\n/* ============================================================================\n NavbarV2 — Floating Glass Pill Tab Navigation\n ============================================================================\n A centered floating glass pill with vertical icon+label tabs,\n flanked by brand (left) and actions (right).\n\n On scroll, an outer container activates a subtle glass surface with\n border, wrapping all content (brand + tabs + actions). The inner\n tabs pill demotes its own glass to avoid double-glass visual noise.\n\n Composition:\n <NavbarV2>\n <NavbarV2Brand />\n <NavbarV2Tabs>\n <NavbarV2Tab /> // simple link/button\n <NavbarV2TabMenu /> // tab with mega menu dropdown\n </NavbarV2Tabs>\n <NavbarV2Actions />\n </NavbarV2>\n ============================================================================ */\n\nexport interface NavbarV2Props extends React.HTMLAttributes<HTMLElement> {\n /** Content rendered inside the mobile menu overlay when open. */\n mobileContent?: React.ReactNode;\n /** Accessible labels for mobile toggle. Override for i18n. */\n mobileToggleLabels?: { open: string; close: string };\n /** Controlled mobile menu open state. */\n isMenuOpen?: boolean;\n /** Callback when mobile menu open state changes. */\n onMenuOpenChange?: (isOpen: boolean) => void;\n /** Enable scroll-aware glass container with border. @default true */\n scrollBorder?: boolean;\n /** Scroll distance (px) before glass activates. @default 32 */\n scrollThreshold?: number;\n}\n\n/** Hysteresis lower-bound ratio — glass disappears when scroll drops below threshold × this */\nconst HYSTERESIS_RATIO = 0.25;\n\nexport const NavbarV2 = forwardRef<HTMLElement, NavbarV2Props>(\n (\n {\n className,\n mobileContent,\n mobileToggleLabels,\n isMenuOpen,\n onMenuOpenChange,\n scrollBorder = true,\n scrollThreshold = 32,\n children,\n ...props\n },\n ref,\n ) => {\n const [internalMenuOpen, setInternalMenuOpen] = useState(false);\n const isMobileMenuOpen = isMenuOpen !== undefined ? isMenuOpen : internalMenuOpen;\n\n const navRef = useRef<HTMLElement>(null);\n const overlayRef = useRef<HTMLDivElement>(null);\n const [navHeight, setNavHeight] = useState(64);\n\n const openLabel = mobileToggleLabels?.open ?? 'Open menu';\n const closeLabel = mobileToggleLabels?.close ?? 'Close menu';\n\n /* ── Scroll detection with hysteresis ──────────────────────────────\n Glass appears at scrollThreshold (32px default).\n Glass disappears only when scrolling back above threshold × 0.25 (8px).\n This prevents flicker when hovering near the threshold.\n Initial state is always false to match SSR — the useEffect below\n corrects it on mount before the browser paints. */\n\n const [scrolled, setScrolled] = useState(false);\n\n useEffect(() => {\n if (!scrollBorder) return;\n\n const lowerBound = scrollThreshold * HYSTERESIS_RATIO;\n\n const handleScroll = () => {\n const y = window.scrollY;\n setScrolled((prev) => {\n if (!prev && y > scrollThreshold) return true;\n if (prev && y < lowerBound) return false;\n return prev;\n });\n };\n\n // SSR flash guard — set correct state on mount\n handleScroll();\n\n window.addEventListener('scroll', handleScroll, { passive: true });\n return () => window.removeEventListener('scroll', handleScroll);\n }, [scrollBorder, scrollThreshold]);\n\n const isScrolled = scrollBorder && scrolled;\n\n const scrollCtx = useMemo<ScrollContextValue>(\n () => ({ scrolled: isScrolled }),\n [isScrolled],\n );\n\n const handleToggle = () => {\n const newState = !isMobileMenuOpen;\n setInternalMenuOpen(newState);\n onMenuOpenChange?.(newState);\n };\n\n /* Measure navbar height for mobile overlay positioning + CSS overlap var */\n useEffect(() => {\n const el = navRef.current;\n if (!el) return;\n const observer = new ResizeObserver((entries) => {\n for (const entry of entries) {\n const h = entry.contentRect.height;\n setNavHeight(h);\n /* Expose height as CSS custom property for layout overlap tricks */\n el.style.setProperty('--navbar-overlap', `${h}px`);\n }\n });\n observer.observe(el);\n return () => observer.disconnect();\n }, []);\n\n /* Lock body scroll when mobile menu is open */\n useEffect(() => {\n if (isMobileMenuOpen) {\n document.body.style.overflow = 'hidden';\n return () => {\n document.body.style.overflow = '';\n };\n }\n }, [isMobileMenuOpen]);\n\n /* Close on Escape */\n useEffect(() => {\n if (!isMobileMenuOpen) return;\n const handleEscape = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n setInternalMenuOpen(false);\n onMenuOpenChange?.(false);\n }\n };\n document.addEventListener('keydown', handleEscape);\n return () => document.removeEventListener('keydown', handleEscape);\n }, [isMobileMenuOpen, onMenuOpenChange]);\n\n /* Focus trap for mobile overlay */\n useFocusTrap(overlayRef, isMobileMenuOpen);\n\n /* Merge refs: forwardRef + internal navRef */\n const mergedRef = useMergedRef(ref, navRef);\n\n return (\n <ScrollContext.Provider value={scrollCtx}>\n <nav\n ref={mergedRef}\n className={clsx(\n 'ds-navbar-v2',\n isScrolled && 'ds-navbar-v2--scrolled',\n className,\n )}\n {...props}\n >\n {/* Inner container — receives glass treatment on scroll */}\n <div className=\"ds-navbar-v2__container\">\n {children}\n\n {/* Mobile Toggle */}\n <button\n className=\"ds-navbar-v2__toggle\"\n onClick={handleToggle}\n aria-label={isMobileMenuOpen ? closeLabel : openLabel}\n aria-expanded={isMobileMenuOpen}\n >\n {isMobileMenuOpen ? (\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n ) : (\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\" />\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" />\n <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\" />\n </svg>\n )}\n </button>\n </div>\n\n {/* Mobile Menu Overlay — always mounted, CSS transitions handle show/hide */}\n <div\n ref={overlayRef}\n className=\"ds-navbar-v2__mobile-overlay\"\n style={{ top: navHeight }}\n data-state={isMobileMenuOpen ? 'open' : 'closed'}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={closeLabel}\n >\n <div className=\"ds-navbar-v2__mobile-content\">\n {mobileContent}\n </div>\n </div>\n </nav>\n </ScrollContext.Provider>\n );\n },\n);\n\nNavbarV2.displayName = 'NavbarV2';\n\n/* ============================================================================\n NavbarV2Brand — Logo area (left of pill)\n ============================================================================ */\n\nexport interface NavbarV2BrandProps extends React.HTMLAttributes<HTMLElement> {\n /** Render as custom element (e.g. Next.js Link). @default 'a' */\n as?: React.ElementType;\n href?: string;\n}\n\nexport const NavbarV2Brand = forwardRef<HTMLElement, NavbarV2BrandProps>(\n ({ as: Component = 'a', className, children, ...props }, ref) => (\n <Component ref={ref} className={clsx('ds-navbar-v2__brand', className)} {...props}>\n {children}\n </Component>\n ),\n);\n\nNavbarV2Brand.displayName = 'NavbarV2Brand';\n\n/* ============================================================================\n NavbarV2Tabs — The floating glass pill containing tab items\n Provides mutual-exclusion context so only one mega menu is open at a time.\n Reads ScrollContext to demote glass when outer container is active.\n ============================================================================ */\n\nexport const NavbarV2Tabs = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, children, ...props }, ref) => {\n const [activeMenuId, setActiveMenuId] = useState<string | null>(null);\n const { scrolled } = useContext(ScrollContext);\n\n const ctxValue = useMemo<TabsContextValue>(\n () => ({\n activeMenuId,\n openMenu: (id: string) => setActiveMenuId(id),\n closeMenu: (id: string) =>\n setActiveMenuId((prev) => (prev === id ? null : prev)),\n }),\n [activeMenuId],\n );\n\n return (\n <TabsContext.Provider value={ctxValue}>\n {/* No role — parent <nav> already declares navigation landmark */}\n <div\n ref={ref}\n className={clsx(\n 'ds-navbar-v2__tabs',\n scrolled && 'ds-navbar-v2__tabs--demoted',\n className,\n )}\n {...props}\n >\n {children}\n </div>\n </TabsContext.Provider>\n );\n },\n);\n\nNavbarV2Tabs.displayName = 'NavbarV2Tabs';\n\n/* ============================================================================\n NavbarV2Tab — Vertical icon + label tab (simple link or button)\n ============================================================================ */\n\nexport interface NavbarV2TabProps extends React.HTMLAttributes<HTMLElement> {\n /** Render as custom element (e.g. Next.js Link). @default 'button' */\n as?: React.ElementType;\n /** Whether this tab is the current page. */\n active?: boolean;\n /** Icon element (rendered above label). */\n icon?: React.ReactNode;\n /** Tab label text (rendered below icon). */\n label?: string;\n href?: string;\n}\n\nexport const NavbarV2Tab = forwardRef<HTMLElement, NavbarV2TabProps>(\n ({ as: Component = 'button', active, icon, label, className, children, ...props }, ref) => (\n <Component\n ref={ref}\n className={clsx('ds-navbar-v2__tab', active && 'ds-navbar-v2__tab--active', className)}\n aria-current={active ? 'page' : undefined}\n {...(Component === 'button' ? { type: 'button' } : {})}\n {...props}\n >\n {icon && <span className=\"ds-navbar-v2__tab-icon\">{icon}</span>}\n {label && <span className=\"ds-navbar-v2__tab-label\">{label}</span>}\n {children}\n </Component>\n ),\n);\n\nNavbarV2Tab.displayName = 'NavbarV2Tab';\n\n/* ============================================================================\n NavbarV2TabMenu — Vertical tab that triggers a mega menu dropdown\n ============================================================================ */\n\nexport interface NavbarV2TabMenuProps {\n /** Icon for the tab trigger (rendered above label). */\n icon?: React.ReactNode;\n /** Label for the tab trigger (rendered below icon). */\n label: string;\n /** Whether this tab represents the current section. */\n active?: boolean;\n /** Mega menu panel content. */\n children: React.ReactNode;\n /** Optional class name. */\n className?: string;\n /** Controlled open state. */\n isOpen?: boolean;\n /** Controlled open change handler. */\n onOpenChange?: (isOpen: boolean) => void;\n}\n\nexport const NavbarV2TabMenu = forwardRef<HTMLDivElement, NavbarV2TabMenuProps>(\n (\n {\n icon,\n label,\n active,\n children,\n className,\n isOpen: controlledOpen,\n onOpenChange,\n },\n ref,\n ) => {\n /* Stable ID for mutual exclusion + aria-controls */\n const instanceId = useId();\n const panelId = `navbar-v2-panel-${instanceId}`;\n\n /* Mutual exclusion via context */\n const { activeMenuId, openMenu, closeMenu } = useContext(TabsContext);\n\n /* Support both controlled (isOpen prop) and context-driven state */\n const isControlled = controlledOpen !== undefined;\n const isOpen = isControlled ? controlledOpen : activeMenuId === instanceId;\n\n const containerRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const panelRef = useRef<HTMLDivElement>(null);\n const timeoutRef = useRef<number | null>(null);\n\n const handleOpen = useCallback(() => {\n if (!isOpen) {\n if (!isControlled) openMenu(instanceId);\n onOpenChange?.(true);\n }\n }, [isOpen, isControlled, openMenu, instanceId, onOpenChange]);\n\n const handleClose = useCallback(() => {\n if (isOpen) {\n if (!isControlled) closeMenu(instanceId);\n onOpenChange?.(false);\n }\n }, [isOpen, isControlled, closeMenu, instanceId, onOpenChange]);\n\n const handleToggle = useCallback(() => {\n if (isOpen) handleClose();\n else handleOpen();\n }, [isOpen, handleClose, handleOpen]);\n\n const handleMouseEnter = useCallback(() => {\n if (timeoutRef.current) {\n window.clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n handleOpen();\n }, [handleOpen]);\n\n const handleMouseLeave = useCallback(() => {\n if (timeoutRef.current) window.clearTimeout(timeoutRef.current);\n timeoutRef.current = window.setTimeout(handleClose, 150);\n }, [handleClose]);\n\n /* Cleanup timeout on unmount */\n useEffect(() => {\n return () => {\n if (timeoutRef.current) window.clearTimeout(timeoutRef.current);\n };\n }, []);\n\n /* Click outside → close */\n useEffect(() => {\n if (!isOpen) return;\n const handleClickOutside = (event: MouseEvent) => {\n if (\n containerRef.current &&\n !containerRef.current.contains(event.target as Node) &&\n triggerRef.current &&\n !triggerRef.current.contains(event.target as Node)\n ) {\n handleClose();\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [isOpen, handleClose]);\n\n /* Escape → close */\n useEffect(() => {\n if (!isOpen) return;\n const handleEscape = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n handleClose();\n triggerRef.current?.focus();\n }\n };\n document.addEventListener('keydown', handleEscape);\n return () => document.removeEventListener('keydown', handleEscape);\n }, [isOpen, handleClose]);\n\n /* Viewport edge clamping — nudge panel so it doesn't overflow */\n useEffect(() => {\n if (!isOpen || !panelRef.current) return;\n\n const clampToViewport = () => {\n const panel = panelRef.current;\n if (!panel) return;\n\n // Reset any previous nudge\n panel.style.setProperty('--panel-nudge', '0px');\n\n const rect = panel.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const EDGE_PADDING = 16;\n\n if (rect.right > viewportWidth - EDGE_PADDING) {\n const overflow = rect.right - (viewportWidth - EDGE_PADDING);\n panel.style.setProperty('--panel-nudge', `${-overflow}px`);\n } else if (rect.left < EDGE_PADDING) {\n const overflow = EDGE_PADDING - rect.left;\n panel.style.setProperty('--panel-nudge', `${overflow}px`);\n }\n };\n\n // Clamp after render + animation start\n requestAnimationFrame(clampToViewport);\n window.addEventListener('resize', clampToViewport);\n return () => window.removeEventListener('resize', clampToViewport);\n }, [isOpen]);\n\n /* Merge refs for panel: containerRef (click-outside) + panelRef (clamping) */\n const panelRefCallback = useCallback((node: HTMLDivElement | null) => {\n (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n (panelRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n }, []);\n\n return (\n <div\n ref={ref}\n className={clsx('ds-navbar-v2__tab-menu', className)}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <button\n ref={triggerRef}\n className={clsx(\n 'ds-navbar-v2__tab',\n (active || isOpen) && 'ds-navbar-v2__tab--active',\n )}\n onClick={handleToggle}\n aria-expanded={isOpen}\n aria-haspopup=\"true\"\n aria-controls={isOpen ? panelId : undefined}\n type=\"button\"\n >\n {icon && <span className=\"ds-navbar-v2__tab-icon\">{icon}</span>}\n <span className=\"ds-navbar-v2__tab-label-row\">\n <span className=\"ds-navbar-v2__tab-label\">{label}</span>\n <span\n className=\"ds-navbar-v2__tab-chevron\"\n data-state={isOpen ? 'open' : 'closed'}\n >\n <ChevronDown />\n </span>\n </span>\n </button>\n\n {/* Mega panel — mount only when open to keep the global DOM budget low. */}\n {isOpen ? (\n <div\n ref={panelRefCallback}\n id={panelId}\n className=\"ds-navbar-v2__mega-panel\"\n data-state=\"open\"\n role=\"region\"\n aria-label={`${label} menu`}\n >\n {children}\n </div>\n ) : null}\n </div>\n );\n },\n);\n\nNavbarV2TabMenu.displayName = 'NavbarV2TabMenu';\n\n/* ============================================================================\n NavbarV2Actions — Right-side actions (right of pill)\n ============================================================================ */\n\nexport const NavbarV2Actions = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, children, ...props }, ref) => (\n <div ref={ref} className={clsx('ds-navbar-v2__actions', className)} {...props}>\n {children}\n </div>\n ),\n);\n\nNavbarV2Actions.displayName = 'NavbarV2Actions';\n\n/* ============================================================================\n Utility — merge multiple refs (forwardRef + internal ref)\n ============================================================================ */\n\nfunction useMergedRef<T>(\n ...refs: (React.Ref<T> | React.MutableRefObject<T | null> | null | undefined)[]\n): React.RefCallback<T> {\n return useCallback(\n (value: T | null) => {\n for (const ref of refs) {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref && typeof ref === 'object') {\n (ref as React.MutableRefObject<T | null>).current = value;\n }\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n refs,\n );\n}\n","import React, { forwardRef, HTMLAttributes, useState } from 'react';\nimport clsx from 'clsx';\nimport './SiteFooter.css';\nimport './SiteFooter.css';\n\n/* ============================================================================\n Types\n ============================================================================ */\n\nexport interface FooterLink {\n label: string;\n href: string;\n /** Visual \"NEW\" indicator badge. */\n isNew?: boolean;\n}\n\nexport interface FooterSection {\n title: string;\n links: FooterLink[];\n}\n\nexport interface FooterCTA {\n /** Primary headline (e.g., \"Install Your Sales Operating System.\") */\n headline: string;\n /** Supporting subtext below the headline. */\n subtext?: string;\n /** Primary CTA slot (e.g., a <Button> component). */\n primaryCta?: React.ReactNode;\n /** Secondary CTA slot (e.g., a ghost <Button>). */\n secondaryCta?: React.ReactNode;\n /** Micro trust line below the CTA actions. */\n trustLine?: string;\n}\n\nexport interface FooterTrustBadge {\n /** Badge label (e.g., \"GDPR-ready\"). */\n label: string;\n}\n\nexport interface SiteFooterProps extends HTMLAttributes<HTMLElement> {\n /* ── Zone 1: Strategic CTA ─────────────────────────────────────────── */\n\n /** Strategic CTA rendered at the top of the footer. */\n cta?: FooterCTA;\n\n /* ── Zone 2: Structured Navigation Grid ────────────────────────────── */\n\n /** Navigation sections rendered as a 5-column grid on desktop. */\n sections?: FooterSection[];\n /** Quick orientation line above the navigation grid. */\n orientationLine?: React.ReactNode;\n /**\n * Custom element to render for each link (e.g., Next.js locale-aware Link).\n * Must accept `href`, `className`, and `children` props.\n * @default 'a'\n */\n linkAs?: React.ElementType;\n\n /* ── Zone 3: Authority Layer ───────────────────────────────────────── */\n\n /** Brand logo or name slot. */\n brand?: React.ReactNode;\n /** Tagline below the brand. */\n tagline?: React.ReactNode;\n /** Social icons slot. */\n socials?: React.ReactNode;\n /** Trust amplifier badges (e.g., \"Built for B2B Teams\", \"GDPR-ready\"). */\n trustBadges?: FooterTrustBadge[];\n\n /* ── Zone 4: System Controls ───────────────────────────────────────── */\n\n /** System controls slot (language switcher, theme toggle, etc.). */\n controls?: React.ReactNode;\n\n /* ── Zone 5: Legal + Ownership ─────────────────────────────────────── */\n\n /** Legal links rendered in the bottom bar. */\n legalLinks?: FooterLink[];\n /** Copyright text. Falls back to a default with the current year. */\n copyright?: React.ReactNode;\n /** Company registration or legal entity info line. */\n companyInfo?: string;\n /** Extra content rendered below the legal bar (e.g., AI summary links). */\n bottomExtra?: React.ReactNode;\n\n /* ── Deprecated ────────────────────────────────────────────────────── */\n\n /** @deprecated Use `controls` instead. Slot rendered in the bottom bar. */\n bottomActions?: React.ReactNode;\n}\n\n/* ============================================================================\n Internal: Mobile Accordion Item\n ============================================================================ */\n\ninterface FooterAccordionItemProps {\n section: FooterSection;\n LinkComponent: React.ElementType;\n}\n\nfunction FooterAccordionItem({ section, LinkComponent }: FooterAccordionItemProps) {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n <div\n className={clsx(\n 'ds-footer__accordion-item',\n isOpen && 'ds-footer__accordion-item--open',\n )}\n >\n <button\n type=\"button\"\n className=\"ds-footer__accordion-trigger\"\n aria-expanded={isOpen}\n onClick={() => setIsOpen((prev) => !prev)}\n >\n <span>{section.title}</span>\n <svg\n className=\"ds-footer__accordion-chevron\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </button>\n <div className=\"ds-footer__accordion-panel\" hidden={!isOpen}>\n <ul className=\"ds-footer__links\">\n {section.links.map((link, idx) => (\n <li key={idx}>\n <LinkComponent href={link.href} className=\"ds-footer__link\">\n {link.label}\n {link.isNew && <span className=\"ds-footer__badge\">NEW</span>}\n </LinkComponent>\n </li>\n ))}\n </ul>\n </div>\n </div>\n );\n}\n\n/* ============================================================================\n Component\n ============================================================================ */\n\nexport const SiteFooter = forwardRef<HTMLElement, SiteFooterProps>(\n (\n {\n cta,\n sections = [],\n orientationLine,\n linkAs,\n brand,\n tagline,\n socials,\n trustBadges,\n controls,\n legalLinks = [],\n copyright,\n companyInfo,\n bottomExtra,\n bottomActions,\n className,\n ...props\n },\n ref,\n ) => {\n const currentYear = new Date().getFullYear();\n const defaultCopyright = copyright || `© ${currentYear}. All rights reserved.`;\n const resolvedControls = controls || bottomActions;\n const LinkComponent = linkAs || 'a';\n\n return (\n <footer ref={ref} className={clsx('ds-footer', className)} {...props}>\n {/* ── Zone 1: Strategic CTA ──────────────────────────────────── */}\n {cta && (\n <div className=\"ds-footer__cta\" data-footer-zone=\"cta\">\n <div style={{maxWidth: \"var(--container-max-width, 1200px)\", marginInline: \"auto\", paddingInline: \"var(--space-4)\", width: \"100%\"}}>\n <div className=\"ds-footer__cta-content\">\n <h2 className=\"ds-footer__cta-headline\">{cta.headline}</h2>\n {cta.subtext && (\n <p className=\"ds-footer__cta-subtext\">{cta.subtext}</p>\n )}\n {(cta.primaryCta || cta.secondaryCta) && (\n <div className=\"ds-footer__cta-actions\">\n {cta.primaryCta}\n {cta.secondaryCta}\n </div>\n )}\n {cta.trustLine && (\n <p className=\"ds-footer__cta-trust\">{cta.trustLine}</p>\n )}\n </div>\n </div>\n </div>\n )}\n\n {/* ── Zone 2: Navigation Grid ────────────────────────────────── */}\n {sections.length > 0 && (\n <div className=\"ds-footer__nav\" data-footer-zone=\"navigation\">\n <div style={{maxWidth: \"var(--container-max-width, 1200px)\", marginInline: \"auto\", paddingInline: \"var(--space-4)\", width: \"100%\"}}>\n {orientationLine && (\n <div className=\"ds-footer__orientation\">\n {orientationLine}\n </div>\n )}\n\n {/* Desktop: Grid layout */}\n <nav\n className=\"ds-footer__grid\"\n aria-label=\"Footer navigation\"\n >\n {sections.map((section, idx) => (\n <div\n key={idx}\n className=\"ds-footer__column\"\n data-footer-section={section.title\n .toLowerCase()\n .replace(/\\s+/g, '-')}\n >\n <p className=\"ds-footer__heading\">{section.title}</p>\n <ul className=\"ds-footer__links\">\n {section.links.map((link, linkIdx) => (\n <li key={linkIdx}>\n <LinkComponent\n href={link.href}\n className=\"ds-footer__link\"\n >\n {link.label}\n {link.isNew && (\n <span className=\"ds-footer__badge\">NEW</span>\n )}\n </LinkComponent>\n </li>\n ))}\n </ul>\n </div>\n ))}\n </nav>\n\n {/* Mobile: Accordion layout */}\n <nav\n className=\"ds-footer__mobile-nav\"\n aria-label=\"Footer navigation (mobile)\"\n >\n {sections.map((section, idx) => (\n <FooterAccordionItem\n key={idx}\n section={section}\n LinkComponent={LinkComponent}\n />\n ))}\n </nav>\n </div>\n </div>\n )}\n\n {/* ── Zone 3: Authority Layer ────────────────────────────────── */}\n {(brand || socials || trustBadges) && (\n <div className=\"ds-footer__authority\" data-footer-zone=\"authority\">\n <div style={{maxWidth: \"var(--container-max-width, 1200px)\", marginInline: \"auto\", paddingInline: \"var(--space-4)\", width: \"100%\"}}>\n <div className=\"ds-footer__authority-content\">\n <div className=\"ds-footer__brand\">\n {brand && <div className=\"ds-footer__logo\">{brand}</div>}\n {tagline && (\n <p className=\"ds-footer__tagline\">{tagline}</p>\n )}\n {socials && (\n <div className=\"ds-footer__socials\">{socials}</div>\n )}\n </div>\n {trustBadges && trustBadges.length > 0 && (\n <div className=\"ds-footer__trust-badges\">\n {trustBadges.map((badge, idx) => (\n <span key={idx} className=\"ds-footer__trust-badge\">\n {badge.label}\n </span>\n ))}\n </div>\n )}\n </div>\n </div>\n </div>\n )}\n\n {/* ── Zone 4 + 5: Controls + Legal ───────────────────────────── */}\n <div className=\"ds-footer__bottom\" data-footer-zone=\"legal\">\n <div style={{maxWidth: \"var(--container-max-width, 1200px)\", marginInline: \"auto\", paddingInline: \"var(--space-4)\", width: \"100%\"}}>\n <div className=\"ds-footer__bottom-content\">\n <div className=\"ds-footer__copyright\">\n {copyright || defaultCopyright}\n </div>\n {resolvedControls && (\n <div className=\"ds-footer__controls\">\n {resolvedControls}\n </div>\n )}\n {legalLinks.length > 0 && (\n <div className=\"ds-footer__legal\">\n {legalLinks.map((link, idx) => (\n <LinkComponent\n key={idx}\n href={link.href}\n className=\"ds-footer__legal-link\"\n >\n {link.label}\n </LinkComponent>\n ))}\n </div>\n )}\n </div>\n {bottomExtra && (\n <div className=\"ds-footer__bottom-extra\">{bottomExtra}</div>\n )}\n {companyInfo && (\n <p className=\"ds-footer__company-info\">{companyInfo}</p>\n )}\n </div>\n </div>\n </footer>\n );\n },\n);\nSiteFooter.displayName = 'SiteFooter';\n","import React, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, useId } from 'react';\nimport clsx from 'clsx';\nimport './LocaleDropdown.css';\n\n/* ============================================================================\n Icons\n ============================================================================ */\n\nconst GlobeIcon = () => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M2 12h20\" />\n <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\" />\n </svg>\n);\n\nconst ChevronDownIcon = () => (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M4 6L8 10L12 6\" />\n </svg>\n);\n\nconst CheckIcon = () => (\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"20 6 9 17 4 12\" />\n </svg>\n);\n\nconst SearchIcon = () => (\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <circle cx=\"11\" cy=\"11\" r=\"8\" />\n <path d=\"m21 21-4.3-4.3\" />\n </svg>\n);\n\n/* ============================================================================\n Types\n ============================================================================ */\n\nexport interface LocaleOption {\n /** ISO code, e.g. 'en', 'fr', 'es'. */\n code: string;\n /** Full display name, e.g. 'English', 'Français'. */\n label: string;\n /** Emoji flag or SVG component. Optional. */\n flag?: React.ReactNode;\n /** Short display code, e.g. 'EN', 'FR'. Used in the trigger. */\n shortLabel?: string;\n}\n\nexport interface LocaleDropdownProps {\n /** Available locales. */\n locales: LocaleOption[];\n /** Currently active locale code. */\n activeLocale: string;\n /** Called when user selects a locale. */\n onLocaleChange?: (code: string) => void;\n /**\n * Custom element for dropdown options (e.g. Next.js Link).\n * Receives `href` from `getHref`. @default 'button'\n */\n optionAs?: React.ElementType;\n /** Generate href for each locale option. Used with `optionAs`. */\n getHref?: (code: string) => string;\n /** Additional class name. */\n className?: string;\n /** Direction the dropdown should open. Defaults to 'down'. */\n direction?: 'up' | 'down';\n /** Alignment of the dropdown panel relative to the trigger. Defaults to 'right'. */\n align?: 'left' | 'right' | 'center';\n /**\n * Show a search field to filter the list — useful for long locale lists.\n * @default false\n */\n searchable?: boolean;\n /** Placeholder for the search field. @default 'Search languages' */\n searchPlaceholder?: string;\n /** Message shown when no locale matches the query. @default 'No languages found' */\n searchEmptyLabel?: string;\n}\n\n/* ============================================================================\n LocaleDropdown — Globe + flag trigger with dropdown panel\n ============================================================================\n A compact locale selector showing the current locale with a globe icon\n and flag. Clicking opens a dropdown with all available locales, optionally\n filtered by a search field.\n\n Features:\n - Click outside / Escape to close\n - Keyboard navigation (ArrowUp/Down, Enter, Escape)\n - Optional search field (searchable) with combobox semantics\n - Active locale highlighted with checkmark\n - Animated chevron rotation via CSS\n - Supports polymorphic option elements (buttons or links)\n - Full ARIA: aria-haspopup, aria-expanded, aria-activedescendant\n - prefers-reduced-motion respected via CSS\n - Uses DS tokens only (no hardcoded colors)\n ============================================================================ */\n\nexport const LocaleDropdown = forwardRef<HTMLDivElement, LocaleDropdownProps>(\n (\n {\n locales,\n activeLocale,\n onLocaleChange,\n optionAs: OptionComponent = 'button',\n getHref,\n className,\n direction = 'down',\n align = 'right',\n searchable = false,\n searchPlaceholder = 'Search languages',\n searchEmptyLabel = 'No languages found',\n },\n ref,\n ) => {\n const [isOpen, setIsOpen] = useState(false);\n const [focusIndex, setFocusIndex] = useState(-1);\n const [query, setQuery] = useState('');\n const containerRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n const searchInputRef = useRef<HTMLInputElement>(null);\n const instanceId = useId();\n const listboxId = `locale-dropdown-${instanceId}`;\n\n const currentLocale = locales.find((l) => l.code === activeLocale) ?? locales[0];\n\n /* Filtered list — identical to `locales` unless searching. */\n const filteredLocales = useMemo(() => {\n if (!searchable) return locales;\n const q = query.trim().toLowerCase();\n if (!q) return locales;\n return locales.filter(\n (l) => l.label.toLowerCase().includes(q) || l.code.toLowerCase().includes(q),\n );\n }, [locales, query, searchable]);\n\n const handleToggle = useCallback(() => {\n setIsOpen((prev) => {\n if (!prev) setFocusIndex(-1);\n return !prev;\n });\n }, []);\n\n const handleClose = useCallback(() => {\n setIsOpen(false);\n setFocusIndex(-1);\n setQuery('');\n triggerRef.current?.focus();\n }, []);\n\n const handleSelect = useCallback(\n (code: string) => {\n onLocaleChange?.(code);\n handleClose();\n },\n [onLocaleChange, handleClose],\n );\n\n /* Click outside → close */\n useEffect(() => {\n if (!isOpen) return;\n const handleClickOutside = (e: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n handleClose();\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [isOpen, handleClose]);\n\n /* Focus the search field when opening a searchable dropdown */\n useEffect(() => {\n if (!isOpen || !searchable) return;\n const raf = requestAnimationFrame(() => searchInputRef.current?.focus());\n return () => cancelAnimationFrame(raf);\n }, [isOpen, searchable]);\n\n /* Reset the highlighted option whenever the query changes */\n useEffect(() => {\n setFocusIndex(-1);\n }, [query]);\n\n /* Keyboard navigation */\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (!isOpen) {\n if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n setIsOpen(true);\n setFocusIndex(0);\n }\n return;\n }\n\n const count = filteredLocales.length;\n\n switch (e.key) {\n case 'Escape':\n e.preventDefault();\n handleClose();\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (count > 0) setFocusIndex((prev) => (prev + 1) % count);\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (count > 0) setFocusIndex((prev) => (prev - 1 + count) % count);\n break;\n case 'Enter':\n e.preventDefault();\n if (focusIndex >= 0 && focusIndex < count) {\n handleSelect(filteredLocales[focusIndex].code);\n }\n break;\n case ' ':\n /* Space selects only when not typing in the search field. */\n if (!searchable) {\n e.preventDefault();\n if (focusIndex >= 0 && focusIndex < count) {\n handleSelect(filteredLocales[focusIndex].code);\n }\n }\n break;\n case 'Home':\n /* Leave Home/End to the caret when the search field is present. */\n if (!searchable) {\n e.preventDefault();\n if (count > 0) setFocusIndex(0);\n }\n break;\n case 'End':\n if (!searchable) {\n e.preventDefault();\n if (count > 0) setFocusIndex(count - 1);\n }\n break;\n case 'Tab':\n handleClose();\n break;\n }\n },\n [isOpen, focusIndex, filteredLocales, searchable, handleClose, handleSelect],\n );\n\n /* Scroll focused item into view */\n useEffect(() => {\n if (!isOpen || focusIndex < 0 || !listRef.current) return;\n const items = listRef.current.querySelectorAll('[role=\"option\"]');\n items[focusIndex]?.scrollIntoView({ block: 'nearest' });\n }, [isOpen, focusIndex]);\n\n const activeDescendantId =\n isOpen && focusIndex >= 0 ? `${listboxId}-option-${focusIndex}` : undefined;\n\n const renderOption = (locale: LocaleOption, index: number) => {\n const isActive = locale.code === activeLocale;\n const isFocused = index === focusIndex;\n const optionId = `${listboxId}-option-${index}`;\n\n const optionProps = {\n id: optionId,\n role: 'option' as const,\n 'aria-selected': isActive,\n className: clsx(\n 'ds-locale-dropdown__option',\n isActive && 'ds-locale-dropdown__option--active',\n isFocused && 'ds-locale-dropdown__option--focused',\n ),\n onClick: () => handleSelect(locale.code),\n ...(OptionComponent !== 'button' && getHref\n ? { href: getHref(locale.code) }\n : { type: 'button' as const }),\n };\n\n return (\n <OptionComponent key={locale.code} {...optionProps}>\n <span className=\"ds-locale-dropdown__option-content\">\n {locale.flag && (\n <span className=\"ds-locale-dropdown__option-flag\" aria-hidden=\"true\">\n {locale.flag}\n </span>\n )}\n <span className=\"ds-locale-dropdown__option-label\">{locale.label}</span>\n </span>\n {isActive && (\n <span className=\"ds-locale-dropdown__option-check\">\n <CheckIcon />\n </span>\n )}\n </OptionComponent>\n );\n };\n\n return (\n <div\n ref={ref}\n className={clsx(\n 'ds-locale-dropdown',\n direction === 'up' && 'ds-locale-dropdown--up',\n align === 'left' && 'ds-locale-dropdown--align-left',\n align === 'center' && 'ds-locale-dropdown--align-center',\n className,\n )}\n >\n <div ref={containerRef} className=\"ds-locale-dropdown__wrapper\">\n {/* Trigger */}\n <button\n ref={triggerRef}\n type=\"button\"\n className=\"ds-locale-dropdown__trigger\"\n onClick={handleToggle}\n onKeyDown={handleKeyDown}\n aria-haspopup=\"listbox\"\n aria-expanded={isOpen}\n aria-controls={isOpen ? listboxId : undefined}\n aria-activedescendant={searchable ? undefined : activeDescendantId}\n aria-label={`Language: ${currentLocale.label}. Change language.`}\n >\n <span className=\"ds-locale-dropdown__trigger-icon\">\n <GlobeIcon />\n </span>\n {currentLocale.flag && (\n <span className=\"ds-locale-dropdown__trigger-flag\" aria-hidden=\"true\">\n {currentLocale.flag}\n </span>\n )}\n <span\n className=\"ds-locale-dropdown__trigger-chevron\"\n data-state={isOpen ? 'open' : 'closed'}\n >\n <ChevronDownIcon />\n </span>\n </button>\n\n {/* Dropdown Panel — always mounted, CSS transitions handle show/hide */}\n {searchable ? (\n <div\n className=\"ds-locale-dropdown__panel ds-locale-dropdown__panel--searchable\"\n data-state={isOpen ? 'open' : 'closed'}\n >\n <div className=\"ds-locale-dropdown__search\">\n <span className=\"ds-locale-dropdown__search-icon\" aria-hidden=\"true\">\n <SearchIcon />\n </span>\n <input\n ref={searchInputRef}\n type=\"text\"\n className=\"ds-locale-dropdown__search-input\"\n placeholder={searchPlaceholder}\n value={query}\n onChange={(e) => setQuery(e.target.value)}\n onKeyDown={handleKeyDown}\n role=\"combobox\"\n aria-expanded={isOpen}\n aria-controls={listboxId}\n aria-activedescendant={activeDescendantId}\n aria-autocomplete=\"list\"\n aria-label={searchPlaceholder}\n autoComplete=\"off\"\n spellCheck={false}\n />\n </div>\n <div\n ref={listRef}\n id={listboxId}\n className=\"ds-locale-dropdown__list\"\n role=\"listbox\"\n aria-label=\"Select language\"\n >\n {filteredLocales.length === 0 ? (\n <div className=\"ds-locale-dropdown__empty\" role=\"status\">\n {searchEmptyLabel}\n </div>\n ) : (\n filteredLocales.map(renderOption)\n )}\n </div>\n </div>\n ) : (\n <div\n ref={listRef}\n id={listboxId}\n className=\"ds-locale-dropdown__panel\"\n role=\"listbox\"\n aria-label=\"Select language\"\n data-state={isOpen ? 'open' : 'closed'}\n onKeyDown={handleKeyDown}\n >\n {filteredLocales.map(renderOption)}\n </div>\n )}\n </div>\n </div>\n );\n },\n);\n\nLocaleDropdown.displayName = 'LocaleDropdown';\n","import React from 'react';\nimport { OutboundLink } from './OutboundLink';\n\n/**\n * A wrapper specifically designed to be passed into MDX component mappings.\n * It provides defaults suitable for markdown content.\n * \n * Usage:\n * <MDXRemote components={{ a: MDXOutboundLink }} />\n */\nexport const MDXOutboundLink = ({ \n href, \n children, \n ...props \n}: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href?: string }) => {\n if (!href) {\n // eslint-disable-next-line no-restricted-syntax\n return <a {...props}>{children}</a>;\n }\n\n return (\n <OutboundLink \n href={href} \n context=\"cms_markdown\" \n preserveExistingUTM={true}\n openInNewTab={true}\n {...props}\n >\n {children}\n </OutboundLink>\n );\n};\n\nexport default MDXOutboundLink;"]}
|