@enadhq/enad-react-sdk 1.0.2 → 1.1.0

package/dist/client/storefront/components/section-nav.mjs

@@ -1,175 +1,128 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui-resolver/popover.mjs";
+import { useSectionObserver } from "../hooks/use-section-observer.mjs";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useIcon } from "../../icons/icon-context";
-import { Popover, PopoverContent, PopoverTrigger } from "../../ui-resolver/popover";
-import { cn } from "../../ui/utils";
-import { useSectionObserver } from "../hooks/use-section-observer";
-function SectionNav({
-  links,
-  visibleCount = 4,
-  stickyOffset = 0,
-  moreLabel = "More",
-  className
-}) {
-  const ChevronDownIcon = useIcon("chevronDown");
-  const [isSticky, setIsSticky] = useState(false);
-  const [popoverOpen, setPopoverOpen] = useState(false);
-  const navRef = useRef(null);
-  const pillsRef = useRef(null);
-  const sentinelRef = useRef(null);
-  const anchors = useMemo(() => links.map((l) => l.href), [links]);
-  const activeHref = useSectionObserver(anchors, stickyOffset + 56);
-  const visibleLinks = links.slice(0, visibleCount);
-  const overflowLinks = links.slice(visibleCount);
-  const hasOverflow = overflowLinks.length > 0;
-  const groupedOverflow = useMemo(() => {
-    const groups = /* @__PURE__ */ new Map();
-    const ungrouped = [];
-    for (const link of overflowLinks) {
-      if (link.group) {
-        const existing = groups.get(link.group);
-        if (existing) {
-          existing.push(link);
-        } else {
-          groups.set(link.group, [link]);
-        }
-      } else {
-        ungrouped.push(link);
-      }
-    }
-    return { groups, ungrouped };
-  }, [overflowLinks]);
-  useEffect(() => {
-    const sentinel = sentinelRef.current;
-    if (!sentinel) return;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry) {
-          setIsSticky(!entry.isIntersecting);
-        }
-      },
-      { threshold: 0 }
-    );
-    observer.observe(sentinel);
-    return () => observer.disconnect();
-  }, []);
-  useEffect(() => {
-    if (!activeHref || !pillsRef.current) return;
-    const activePill = pillsRef.current.querySelector(`[data-href="${activeHref}"]`);
-    if (activePill) {
-      activePill.scrollIntoView({
-        inline: "nearest",
-        block: "nearest",
-        behavior: "smooth"
-      });
-    }
-  }, [activeHref]);
-  const handleClick = useCallback((e, href) => {
-    e.preventDefault();
-    setPopoverOpen(false);
-    const id = href.slice(1);
-    const target = document.getElementById(id);
-    if (!target) return;
-    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    target.scrollIntoView({
-      behavior: prefersReducedMotion ? "instant" : "smooth",
-      block: "start"
-    });
-    history.pushState(null, "", href);
-  }, []);
-  const pillClassName = (href) => cn(
-    "inline-flex whitespace-nowrap rounded-[var(--enad-button-radius)] border px-4 py-2 text-sm transition-colors",
-    activeHref === href ? "border-primary bg-primary text-primary-foreground" : "border-border hover:bg-primary hover:text-primary-foreground"
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { ref: sentinelRef, "aria-hidden": "true", className: "h-0 w-full" }),
-    /* @__PURE__ */ jsx(
-      "nav",
-      {
-        ref: navRef,
-        "aria-label": "Section navigation",
-        style: { top: stickyOffset },
-        className: cn(
-          "sticky z-30 overflow-x-auto bg-background/95 backdrop-blur-sm transition-shadow duration-200",
-          isSticky && "shadow-[var(--enad-shadow-sm)]",
-          className
-        ),
-        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-3", children: [
-          /* @__PURE__ */ jsx("ul", { ref: pillsRef, className: "flex gap-2 overflow-x-auto scrollbar-none", children: visibleLinks.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-            "a",
-            {
-              href: link.href,
-              "data-href": link.href,
-              onClick: (e) => handleClick(e, link.href),
-              className: pillClassName(link.href),
-              children: link.label
-            }
-          ) }, link.href)) }),
-          hasOverflow && /* @__PURE__ */ jsxs(Popover, { open: popoverOpen, onOpenChange: setPopoverOpen, children: [
-            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                className: cn(
-                  "inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-[var(--enad-button-radius)] border px-4 py-2 text-sm transition-colors",
-                  overflowLinks.some((l) => l.href === activeHref) ? "border-primary bg-primary text-primary-foreground" : "border-border hover:bg-primary hover:text-primary-foreground"
-                ),
-                children: [
-                  moreLabel,
-                  /* @__PURE__ */ jsx(
-                    ChevronDownIcon,
-                    {
-                      className: cn(
-                        "size-3.5 transition-transform duration-200",
-                        popoverOpen && "rotate-180"
-                      )
-                    }
-                  )
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsx(PopoverContent, { align: "end", className: "w-52 p-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-              groupedOverflow.ungrouped.map((link) => /* @__PURE__ */ jsx(
-                "a",
-                {
-                  href: link.href,
-                  onClick: (e) => handleClick(e, link.href),
-                  className: cn(
-                    "rounded-md px-3 py-2 text-sm transition-colors",
-                    activeHref === link.href ? "bg-accent font-medium text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
-                  ),
-                  children: link.label
-                },
-                link.href
-              )),
-              Array.from(groupedOverflow.groups.entries()).map(
-                ([groupName, groupLinks], i) => /* @__PURE__ */ jsxs("div", { children: [
-                  (i > 0 || groupedOverflow.ungrouped.length > 0) && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border" }),
-                  /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 text-xs font-medium text-muted-foreground", children: groupName }),
-                  groupLinks.map((link) => /* @__PURE__ */ jsx(
-                    "a",
-                    {
-                      href: link.href,
-                      onClick: (e) => handleClick(e, link.href),
-                      className: cn(
-                        "rounded-md px-3 py-2 text-sm transition-colors",
-                        activeHref === link.href ? "bg-accent font-medium text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
-                      ),
-                      children: link.label
-                    },
-                    link.href
-                  ))
-                ] }, groupName)
-              )
-            ] }) })
-          ] })
-        ] })
-      }
-    )
-  ] });
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/components/section-nav.tsx
+function SectionNav({ links, visibleCount = 4, stickyOffset = 0, moreLabel = "More", className }) {
+	const ChevronDownIcon = useIcon("chevronDown");
+	const [isSticky, setIsSticky] = useState(false);
+	const [popoverOpen, setPopoverOpen] = useState(false);
+	const navRef = useRef(null);
+	const pillsRef = useRef(null);
+	const sentinelRef = useRef(null);
+	const activeHref = useSectionObserver(useMemo(() => links.map((l) => l.href), [links]), stickyOffset + 56);
+	const visibleLinks = links.slice(0, visibleCount);
+	const overflowLinks = links.slice(visibleCount);
+	const hasOverflow = overflowLinks.length > 0;
+	const groupedOverflow = useMemo(() => {
+		const groups = /* @__PURE__ */ new Map();
+		const ungrouped = [];
+		for (const link of overflowLinks) if (link.group) {
+			const existing = groups.get(link.group);
+			if (existing) existing.push(link);
+			else groups.set(link.group, [link]);
+		} else ungrouped.push(link);
+		return {
+			groups,
+			ungrouped
+		};
+	}, [overflowLinks]);
+	useEffect(() => {
+		const sentinel = sentinelRef.current;
+		if (!sentinel) return;
+		const observer = new IntersectionObserver(([entry]) => {
+			if (entry) setIsSticky(!entry.isIntersecting);
+		}, { threshold: 0 });
+		observer.observe(sentinel);
+		return () => observer.disconnect();
+	}, []);
+	useEffect(() => {
+		if (!activeHref || !pillsRef.current) return;
+		const activePill = pillsRef.current.querySelector(`[data-href="${activeHref}"]`);
+		if (activePill) activePill.scrollIntoView({
+			inline: "nearest",
+			block: "nearest",
+			behavior: "smooth"
+		});
+	}, [activeHref]);
+	const handleClick = useCallback((e, href) => {
+		e.preventDefault();
+		setPopoverOpen(false);
+		const id = href.slice(1);
+		const target = document.getElementById(id);
+		if (!target) return;
+		const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		target.scrollIntoView({
+			behavior: prefersReducedMotion ? "instant" : "smooth",
+			block: "start"
+		});
+		history.pushState(null, "", href);
+	}, []);
+	const pillClassName = (href) => cn("inline-flex whitespace-nowrap rounded-[var(--enad-button-radius)] border px-4 py-2 text-sm transition-colors", activeHref === href ? "border-primary bg-primary text-primary-foreground" : "border-border hover:bg-primary hover:text-primary-foreground");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		ref: sentinelRef,
+		"aria-hidden": "true",
+		className: "h-0 w-full"
+	}), /* @__PURE__ */ jsx("nav", {
+		ref: navRef,
+		"aria-label": "Section navigation",
+		style: { top: stickyOffset },
+		className: cn("sticky z-30 overflow-x-auto bg-background/95 backdrop-blur-sm transition-shadow duration-200", isSticky && "shadow-[var(--enad-shadow-sm)]", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 py-3",
+			children: [/* @__PURE__ */ jsx("ul", {
+				ref: pillsRef,
+				className: "flex gap-2 overflow-x-auto scrollbar-none",
+				children: visibleLinks.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+					href: link.href,
+					"data-href": link.href,
+					onClick: (e) => handleClick(e, link.href),
+					className: pillClassName(link.href),
+					children: link.label
+				}) }, link.href))
+			}), hasOverflow && /* @__PURE__ */ jsxs(Popover, {
+				open: popoverOpen,
+				onOpenChange: setPopoverOpen,
+				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: cn("inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-[var(--enad-button-radius)] border px-4 py-2 text-sm transition-colors", overflowLinks.some((l) => l.href === activeHref) ? "border-primary bg-primary text-primary-foreground" : "border-border hover:bg-primary hover:text-primary-foreground"),
+						children: [moreLabel, /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("size-3.5 transition-transform duration-200", popoverOpen && "rotate-180") })]
+					})
+				}), /* @__PURE__ */ jsx(PopoverContent, {
+					align: "end",
+					className: "w-52 p-2",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-1",
+						children: [groupedOverflow.ungrouped.map((link) => /* @__PURE__ */ jsx("a", {
+							href: link.href,
+							onClick: (e) => handleClick(e, link.href),
+							className: cn("rounded-md px-3 py-2 text-sm transition-colors", activeHref === link.href ? "bg-accent font-medium text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"),
+							children: link.label
+						}, link.href)), Array.from(groupedOverflow.groups.entries()).map(([groupName, groupLinks], i) => /* @__PURE__ */ jsxs("div", { children: [
+							(i > 0 || groupedOverflow.ungrouped.length > 0) && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border" }),
+							/* @__PURE__ */ jsx("div", {
+								className: "px-3 py-1.5 text-xs font-medium text-muted-foreground",
+								children: groupName
+							}),
+							groupLinks.map((link) => /* @__PURE__ */ jsx("a", {
+								href: link.href,
+								onClick: (e) => handleClick(e, link.href),
+								className: cn("rounded-md px-3 py-2 text-sm transition-colors", activeHref === link.href ? "bg-accent font-medium text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"),
+								children: link.label
+							}, link.href))
+						] }, groupName))]
+					})
+				})]
+			})]
+		})
+	})] });
 }
-export {
-  SectionNav
-};
+//#endregion
+export { SectionNav };
+
 //# sourceMappingURL=section-nav.mjs.map

package/dist/client/storefront/components/section-nav.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/client/storefront/components/section-nav.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../ui-resolver/popover\";\nimport { cn } from \"../../ui/utils\";\nimport { useSectionObserver } from \"../hooks/use-section-observer\";\n\ninterface SectionLink {\n  label: string;\n  /** Anchor href, e.g. \"#specs\" */\n  href: string;\n  /** Optional group name for the overflow popover */\n  group?: string;\n}\n\ninterface SectionNavProps {\n  links: SectionLink[];\n  /** How many pills to show inline before overflow (default: 4) */\n  visibleCount?: number;\n  /** Top offset in px for sticky positioning, e.g. header height (default: 0) */\n  stickyOffset?: number;\n  /** Label for the overflow trigger (default: \"More\") */\n  moreLabel?: string;\n  className?: string;\n}\n\nfunction SectionNav({\n  links,\n  visibleCount = 4,\n  stickyOffset = 0,\n  moreLabel = \"More\",\n  className,\n}: SectionNavProps) {\n  const ChevronDownIcon = useIcon(\"chevronDown\");\n  const [isSticky, setIsSticky] = useState(false);\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const navRef = useRef<HTMLElement>(null);\n  const pillsRef = useRef<HTMLUListElement>(null);\n  const sentinelRef = useRef<HTMLDivElement>(null);\n\n  const anchors = useMemo(() => links.map((l) => l.href), [links]);\n  const activeHref = useSectionObserver(anchors, stickyOffset + 56);\n\n  const visibleLinks = links.slice(0, visibleCount);\n  const overflowLinks = links.slice(visibleCount);\n  const hasOverflow = overflowLinks.length > 0;\n\n  // Group overflow links by their group field\n  const groupedOverflow = useMemo(() => {\n    const groups = new Map<string, SectionLink[]>();\n    const ungrouped: SectionLink[] = [];\n\n    for (const link of overflowLinks) {\n      if (link.group) {\n        const existing = groups.get(link.group);\n        if (existing) {\n          existing.push(link);\n        } else {\n          groups.set(link.group, [link]);\n        }\n      } else {\n        ungrouped.push(link);\n      }\n    }\n\n    return { groups, ungrouped };\n  }, [overflowLinks]);\n\n  // Detect sticky state via a sentinel element\n  useEffect(() => {\n    const sentinel = sentinelRef.current;\n    if (!sentinel) return;\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry) {\n          setIsSticky(!entry.isIntersecting);\n        }\n      },\n      { threshold: 0 },\n    );\n\n    observer.observe(sentinel);\n    return () => observer.disconnect();\n  }, []);\n\n  // Auto-scroll the active pill into view\n  useEffect(() => {\n    if (!activeHref || !pillsRef.current) return;\n\n    const activePill = pillsRef.current.querySelector(`[data-href=\"${activeHref}\"]`);\n    if (activePill) {\n      activePill.scrollIntoView({\n        inline: \"nearest\",\n        block: \"nearest\",\n        behavior: \"smooth\",\n      });\n    }\n  }, [activeHref]);\n\n  const handleClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>, href: string) => {\n    e.preventDefault();\n    setPopoverOpen(false);\n\n    const id = href.slice(1);\n    const target = document.getElementById(id);\n    if (!target) return;\n\n    const prefersReducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n    target.scrollIntoView({\n      behavior: prefersReducedMotion ? \"instant\" : \"smooth\",\n      block: \"start\",\n    });\n\n    // Update URL hash without jumping\n    history.pushState(null, \"\", href);\n  }, []);\n\n  const pillClassName = (href: string) =>\n    cn(\n      \"inline-flex whitespace-nowrap rounded-[var(--enad-button-radius)] border px-4 py-2 text-sm transition-colors\",\n      activeHref === href\n        ? \"border-primary bg-primary text-primary-foreground\"\n        : \"border-border hover:bg-primary hover:text-primary-foreground\",\n    );\n\n  return (\n    <>\n      {/* Sentinel: sits at the nav's natural position to detect when we scroll past */}\n      <div ref={sentinelRef} aria-hidden=\"true\" className=\"h-0 w-full\" />\n\n      <nav\n        ref={navRef}\n        aria-label=\"Section navigation\"\n        style={{ top: stickyOffset }}\n        className={cn(\n          \"sticky z-30 overflow-x-auto bg-background/95 backdrop-blur-sm transition-shadow duration-200\",\n          isSticky && \"shadow-[var(--enad-shadow-sm)]\",\n          className,\n        )}\n      >\n        <div className=\"flex items-center gap-2 py-3\">\n          <ul ref={pillsRef} className=\"flex gap-2 overflow-x-auto scrollbar-none\">\n            {visibleLinks.map((link) => (\n              <li key={link.href}>\n                <a\n                  href={link.href}\n                  data-href={link.href}\n                  onClick={(e) => handleClick(e, link.href)}\n                  className={pillClassName(link.href)}\n                >\n                  {link.label}\n                </a>\n              </li>\n            ))}\n          </ul>\n\n          {hasOverflow && (\n            <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>\n              <PopoverTrigger asChild>\n                <button\n                  type=\"button\"\n                  className={cn(\n                    \"inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-[var(--enad-button-radius)] border px-4 py-2 text-sm transition-colors\",\n                    overflowLinks.some((l) => l.href === activeHref)\n                      ? \"border-primary bg-primary text-primary-foreground\"\n                      : \"border-border hover:bg-primary hover:text-primary-foreground\",\n                  )}\n                >\n                  {moreLabel}\n                  <ChevronDownIcon\n                    className={cn(\n                      \"size-3.5 transition-transform duration-200\",\n                      popoverOpen && \"rotate-180\",\n                    )}\n                  />\n                </button>\n              </PopoverTrigger>\n\n              <PopoverContent align=\"end\" className=\"w-52 p-2\">\n                <div className=\"flex flex-col gap-1\">\n                  {/* Ungrouped links first */}\n                  {groupedOverflow.ungrouped.map((link) => (\n                    <a\n                      key={link.href}\n                      href={link.href}\n                      onClick={(e) => handleClick(e, link.href)}\n                      className={cn(\n                        \"rounded-md px-3 py-2 text-sm transition-colors\",\n                        activeHref === link.href\n                          ? \"bg-accent font-medium text-accent-foreground\"\n                          : \"hover:bg-accent hover:text-accent-foreground\",\n                      )}\n                    >\n                      {link.label}\n                    </a>\n                  ))}\n\n                  {/* Grouped links with headings */}\n                  {Array.from(groupedOverflow.groups.entries()).map(\n                    ([groupName, groupLinks], i) => (\n                      <div key={groupName}>\n                        {(i > 0 || groupedOverflow.ungrouped.length > 0) && (\n                          <div className=\"my-1 border-t border-border\" />\n                        )}\n                        <div className=\"px-3 py-1.5 text-xs font-medium text-muted-foreground\">\n                          {groupName}\n                        </div>\n                        {groupLinks.map((link) => (\n                          <a\n                            key={link.href}\n                            href={link.href}\n                            onClick={(e) => handleClick(e, link.href)}\n                            className={cn(\n                              \"rounded-md px-3 py-2 text-sm transition-colors\",\n                              activeHref === link.href\n                                ? \"bg-accent font-medium text-accent-foreground\"\n                                : \"hover:bg-accent hover:text-accent-foreground\",\n                            )}\n                          >\n                            {link.label}\n                          </a>\n                        ))}\n                      </div>\n                    ),\n                  )}\n                </div>\n              </PopoverContent>\n            </Popover>\n          )}\n        </div>\n      </nav>\n    </>\n  );\n}\n\nexport { SectionNav, type SectionLink, type SectionNavProps };\n"],"mappings":"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","names":[]}
+{"version":3,"file":"section-nav.mjs","names":[],"sources":["../../../../src/client/storefront/components/section-nav.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../ui-resolver/popover\";\nimport { cn } from \"../../ui/utils\";\nimport { useSectionObserver } from \"../hooks/use-section-observer\";\n\ninterface SectionLink {\n  label: string;\n  /** Anchor href, e.g. \"#specs\" */\n  href: string;\n  /** Optional group name for the overflow popover */\n  group?: string;\n}\n\ninterface SectionNavProps {\n  links: SectionLink[];\n  /** How many pills to show inline before overflow (default: 4) */\n  visibleCount?: number;\n  /** Top offset in px for sticky positioning, e.g. header height (default: 0) */\n  stickyOffset?: number;\n  /** Label for the overflow trigger (default: \"More\") */\n  moreLabel?: string;\n  className?: string;\n}\n\nfunction SectionNav({\n  links,\n  visibleCount = 4,\n  stickyOffset = 0,\n  moreLabel = \"More\",\n  className,\n}: SectionNavProps) {\n  const ChevronDownIcon = useIcon(\"chevronDown\");\n  const [isSticky, setIsSticky] = useState(false);\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const navRef = useRef<HTMLElement>(null);\n  const pillsRef = useRef<HTMLUListElement>(null);\n  const sentinelRef = useRef<HTMLDivElement>(null);\n\n  const anchors = useMemo(() => links.map((l) => l.href), [links]);\n  const activeHref = useSectionObserver(anchors, stickyOffset + 56);\n\n  const visibleLinks = links.slice(0, visibleCount);\n  const overflowLinks = links.slice(visibleCount);\n  const hasOverflow = overflowLinks.length > 0;\n\n  // Group overflow links by their group field\n  const groupedOverflow = useMemo(() => {\n    const groups = new Map<string, SectionLink[]>();\n    const ungrouped: SectionLink[] = [];\n\n    for (const link of overflowLinks) {\n      if (link.group) {\n        const existing = groups.get(link.group);\n        if (existing) {\n          existing.push(link);\n        } else {\n          groups.set(link.group, [link]);\n        }\n      } else {\n        ungrouped.push(link);\n      }\n    }\n\n    return { groups, ungrouped };\n  }, [overflowLinks]);\n\n  // Detect sticky state via a sentinel element\n  useEffect(() => {\n    const sentinel = sentinelRef.current;\n    if (!sentinel) return;\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry) {\n          setIsSticky(!entry.isIntersecting);\n        }\n      },\n      { threshold: 0 },\n    );\n\n    observer.observe(sentinel);\n    return () => observer.disconnect();\n  }, []);\n\n  // Auto-scroll the active pill into view\n  useEffect(() => {\n    if (!activeHref || !pillsRef.current) return;\n\n    const activePill = pillsRef.current.querySelector(`[data-href=\"${activeHref}\"]`);\n    if (activePill) {\n      activePill.scrollIntoView({\n        inline: \"nearest\",\n        block: \"nearest\",\n        behavior: \"smooth\",\n      });\n    }\n  }, [activeHref]);\n\n  const handleClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>, href: string) => {\n    e.preventDefault();\n    setPopoverOpen(false);\n\n    const id = href.slice(1);\n    const target = document.getElementById(id);\n    if (!target) return;\n\n    const prefersReducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n    target.scrollIntoView({\n      behavior: prefersReducedMotion ? \"instant\" : \"smooth\",\n      block: \"start\",\n    });\n\n    // Update URL hash without jumping\n    history.pushState(null, \"\", href);\n  }, []);\n\n  const pillClassName = (href: string) =>\n    cn(\n      \"inline-flex whitespace-nowrap rounded-[var(--enad-button-radius)] border px-4 py-2 text-sm transition-colors\",\n      activeHref === href\n        ? \"border-primary bg-primary text-primary-foreground\"\n        : \"border-border hover:bg-primary hover:text-primary-foreground\",\n    );\n\n  return (\n    <>\n      {/* Sentinel: sits at the nav's natural position to detect when we scroll past */}\n      <div ref={sentinelRef} aria-hidden=\"true\" className=\"h-0 w-full\" />\n\n      <nav\n        ref={navRef}\n        aria-label=\"Section navigation\"\n        style={{ top: stickyOffset }}\n        className={cn(\n          \"sticky z-30 overflow-x-auto bg-background/95 backdrop-blur-sm transition-shadow duration-200\",\n          isSticky && \"shadow-[var(--enad-shadow-sm)]\",\n          className,\n        )}\n      >\n        <div className=\"flex items-center gap-2 py-3\">\n          <ul ref={pillsRef} className=\"flex gap-2 overflow-x-auto scrollbar-none\">\n            {visibleLinks.map((link) => (\n              <li key={link.href}>\n                <a\n                  href={link.href}\n                  data-href={link.href}\n                  onClick={(e) => handleClick(e, link.href)}\n                  className={pillClassName(link.href)}\n                >\n                  {link.label}\n                </a>\n              </li>\n            ))}\n          </ul>\n\n          {hasOverflow && (\n            <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>\n              <PopoverTrigger asChild>\n                <button\n                  type=\"button\"\n                  className={cn(\n                    \"inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-[var(--enad-button-radius)] border px-4 py-2 text-sm transition-colors\",\n                    overflowLinks.some((l) => l.href === activeHref)\n                      ? \"border-primary bg-primary text-primary-foreground\"\n                      : \"border-border hover:bg-primary hover:text-primary-foreground\",\n                  )}\n                >\n                  {moreLabel}\n                  <ChevronDownIcon\n                    className={cn(\n                      \"size-3.5 transition-transform duration-200\",\n                      popoverOpen && \"rotate-180\",\n                    )}\n                  />\n                </button>\n              </PopoverTrigger>\n\n              <PopoverContent align=\"end\" className=\"w-52 p-2\">\n                <div className=\"flex flex-col gap-1\">\n                  {/* Ungrouped links first */}\n                  {groupedOverflow.ungrouped.map((link) => (\n                    <a\n                      key={link.href}\n                      href={link.href}\n                      onClick={(e) => handleClick(e, link.href)}\n                      className={cn(\n                        \"rounded-md px-3 py-2 text-sm transition-colors\",\n                        activeHref === link.href\n                          ? \"bg-accent font-medium text-accent-foreground\"\n                          : \"hover:bg-accent hover:text-accent-foreground\",\n                      )}\n                    >\n                      {link.label}\n                    </a>\n                  ))}\n\n                  {/* Grouped links with headings */}\n                  {Array.from(groupedOverflow.groups.entries()).map(\n                    ([groupName, groupLinks], i) => (\n                      <div key={groupName}>\n                        {(i > 0 || groupedOverflow.ungrouped.length > 0) && (\n                          <div className=\"my-1 border-t border-border\" />\n                        )}\n                        <div className=\"px-3 py-1.5 text-xs font-medium text-muted-foreground\">\n                          {groupName}\n                        </div>\n                        {groupLinks.map((link) => (\n                          <a\n                            key={link.href}\n                            href={link.href}\n                            onClick={(e) => handleClick(e, link.href)}\n                            className={cn(\n                              \"rounded-md px-3 py-2 text-sm transition-colors\",\n                              activeHref === link.href\n                                ? \"bg-accent font-medium text-accent-foreground\"\n                                : \"hover:bg-accent hover:text-accent-foreground\",\n                            )}\n                          >\n                            {link.label}\n                          </a>\n                        ))}\n                      </div>\n                    ),\n                  )}\n                </div>\n              </PopoverContent>\n            </Popover>\n          )}\n        </div>\n      </nav>\n    </>\n  );\n}\n\nexport { SectionNav, type SectionLink, type SectionNavProps };\n"],"mappings":"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"}

package/dist/client/storefront/components/share-button.d.ts

@@ -1,19 +1,34 @@
-import * as React from "react";
-export interface ShareButtonProps {
-    url: string;
-    title?: string;
-    text?: string;
-    /** Label shown on the button */
-    label?: string;
-    /** Message shown after copying the link */
-    copiedLabel?: string;
-    /** Duration (ms) to show the copied confirmation */
-    copiedDuration?: number;
-    /** Custom share icon — defaults to a built-in share icon */
-    icon?: React.ReactNode;
-    /** Optional social platform slots rendered alongside the share button */
-    children?: React.ReactNode;
-    className?: string;
+import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/components/share-button.d.ts
+interface ShareButtonProps {
+  url: string;
+  title?: string;
+  text?: string;
+  /** Label shown on the button */
+  label?: string;
+  /** Message shown after copying the link */
+  copiedLabel?: string;
+  /** Duration (ms) to show the copied confirmation */
+  copiedDuration?: number;
+  /** Custom share icon — defaults to a built-in share icon */
+  icon?: React$1.ReactNode;
+  /** Optional social platform slots rendered alongside the share button */
+  children?: React$1.ReactNode;
+  className?: string;
 }
-export declare function ShareButton({ url, title, text, label, copiedLabel, copiedDuration, icon, children, className, }: ShareButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function ShareButton({
+  url,
+  title,
+  text,
+  label,
+  copiedLabel,
+  copiedDuration,
+  icon,
+  children,
+  className
+}: ShareButtonProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ShareButton, ShareButtonProps };
 //# sourceMappingURL=share-button.d.ts.map

package/dist/client/storefront/components/share-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"share-button.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/components/share-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oDAAoD;IACpD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,KAAK,EACL,IAAI,EACJ,KAAe,EACf,WAA4B,EAC5B,cAAqB,EACrB,IAAI,EACJ,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,2CAwElB"}
+{"version":3,"file":"share-button.d.ts","names":[],"sources":["../../../../src/client/storefront/components/share-button.tsx"],"mappings":";;;;UAQiB,gBAAA;EACf,GAAA;EACA,KAAA;EACA,IAAA;EAH+B;EAK/B,KAAA;EAQ0B;EAN1B,WAAA;EALA;EAOA,cAAA;EAJA;EAMA,IAAA,GAAO,OAAA,CAAM,SAAA;EAFb;EAIA,QAAA,GAAW,OAAA,CAAM,SAAA;EACjB,SAAA;AAAA;AAAA,iBAqBc,WAAA,CAAA;EACd,GAAA;EACA,KAAA;EACA,IAAA;EACA,KAAA;EACA,WAAA;EACA,cAAA;EACA,IAAA;EACA,QAAA;EACA;AAAA,GACC,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/components/share-button.mjs

@@ -1,95 +1,77 @@
 "use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import * as React$1 from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { cn } from "../../ui/utils";
-import { useIcon } from "../../icons/icon-context";
-const DefaultShareIcon = ({ className }) => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    className,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    children: [
-      /* @__PURE__ */ jsx("path", { d: "M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" }),
-      /* @__PURE__ */ jsx("polyline", { points: "16 6 12 2 8 6" }),
-      /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "12", y2: "15" })
-    ]
-  }
-);
-function ShareButton({
-  url,
-  title,
-  text,
-  label = "Share",
-  copiedLabel = "Link copied!",
-  copiedDuration = 2e3,
-  icon,
-  children,
-  className
-}) {
-  const CheckIcon = useIcon("check");
-  const [copied, setCopied] = React.useState(false);
-  const timerRef = React.useRef(void 0);
-  React.useEffect(() => {
-    return () => clearTimeout(timerRef.current);
-  }, []);
-  const showCopied = () => {
-    setCopied(true);
-    clearTimeout(timerRef.current);
-    timerRef.current = setTimeout(() => setCopied(false), copiedDuration);
-  };
-  const handleShare = async () => {
-    if (typeof navigator !== "undefined" && navigator.share) {
-      try {
-        await navigator.share({ url, title, text });
-        return;
-      } catch {
-      }
-    }
-    try {
-      await navigator.clipboard.writeText(url);
-      showCopied();
-    } catch {
-      if (typeof document === "undefined") return;
-      const textarea = document.createElement("textarea");
-      textarea.value = url;
-      textarea.style.position = "fixed";
-      textarea.style.opacity = "0";
-      document.body.appendChild(textarea);
-      textarea.select();
-      document.execCommand("copy");
-      document.body.removeChild(textarea);
-      showCopied();
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cn("inline-flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: handleShare,
-        className: cn(
-          "inline-flex items-center gap-2 rounded-(--enad-border-radius) border border-border px-3 py-2 text-sm font-medium transition-colors",
-          copied ? "border-green-600/30 text-green-600 dark:text-green-400" : "hover:bg-muted"
-        ),
-        "aria-label": copied ? copiedLabel : label,
-        children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }),
-          /* @__PURE__ */ jsx("span", { children: copiedLabel })
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          icon ?? /* @__PURE__ */ jsx(DefaultShareIcon, { className: "size-4" }),
-          /* @__PURE__ */ jsx("span", { children: label })
-        ] })
-      }
-    ),
-    children
-  ] });
+//#region src/client/storefront/components/share-button.tsx
+const DefaultShareIcon = ({ className }) => /* @__PURE__ */ jsxs("svg", {
+	className,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: [
+		/* @__PURE__ */ jsx("path", { d: "M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" }),
+		/* @__PURE__ */ jsx("polyline", { points: "16 6 12 2 8 6" }),
+		/* @__PURE__ */ jsx("line", {
+			x1: "12",
+			y1: "2",
+			x2: "12",
+			y2: "15"
+		})
+	]
+});
+function ShareButton({ url, title, text, label = "Share", copiedLabel = "Link copied!", copiedDuration = 2e3, icon, children, className }) {
+	const CheckIcon = useIcon("check");
+	const [copied, setCopied] = React$1.useState(false);
+	const timerRef = React$1.useRef(void 0);
+	React$1.useEffect(() => {
+		return () => clearTimeout(timerRef.current);
+	}, []);
+	const showCopied = () => {
+		setCopied(true);
+		clearTimeout(timerRef.current);
+		timerRef.current = setTimeout(() => setCopied(false), copiedDuration);
+	};
+	const handleShare = async () => {
+		if (typeof navigator !== "undefined" && navigator.share) try {
+			await navigator.share({
+				url,
+				title,
+				text
+			});
+			return;
+		} catch {}
+		try {
+			await navigator.clipboard.writeText(url);
+			showCopied();
+		} catch {
+			if (typeof document === "undefined") return;
+			const textarea = document.createElement("textarea");
+			textarea.value = url;
+			textarea.style.position = "fixed";
+			textarea.style.opacity = "0";
+			document.body.appendChild(textarea);
+			textarea.select();
+			document.execCommand("copy");
+			document.body.removeChild(textarea);
+			showCopied();
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("inline-flex items-center gap-2", className),
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: handleShare,
+			className: cn("inline-flex items-center gap-2 rounded-(--enad-border-radius) border border-border px-3 py-2 text-sm font-medium transition-colors", copied ? "border-(--enad-success-color)/30 text-(--enad-success-color)" : "hover:bg-muted"),
+			"aria-label": copied ? copiedLabel : label,
+			children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", { children: copiedLabel })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [icon ?? /* @__PURE__ */ jsx(DefaultShareIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", { children: label })] })
+		}), children]
+	});
 }
-export {
-  ShareButton
-};
+//#endregion
+export { ShareButton };
+
 //# sourceMappingURL=share-button.mjs.map