@alfadocs/ui-kit 0.16.0 → 0.17.1

package/dist/_chunks/public-header.agent-BIBQzkeV.js

@@ -0,0 +1,557 @@
+import { jsx as s, jsxs as t, Fragment as _ } from "react/jsx-runtime";
+import { forwardRef as h, useId as Q, useState as y, useCallback as M, useImperativeHandle as U, useContext as N, useEffect as B, useRef as D, createContext as Z } from "react";
+import { c as C } from "./index-D2ZczOXr.js";
+import { useTranslation as ss } from "react-i18next";
+import * as m from "@radix-ui/react-navigation-menu";
+import { I as es } from "./icon-button-C4CGcYuz.js";
+import { S as f } from "./sheet-BT0izeoI.js";
+import { C as I } from "./chevron-down-BX_NP2Yh.js";
+import { X as ds } from "./x-CCcI3eJp.js";
+import { M as as } from "./menu-XRhW3_99.js";
+const g = Z("desktop"), ns = C(
+  [
+    "ds:w-full ds:z-[var(--z-sticky)]",
+    "ds:transition-[background-color,box-shadow,transform] ds:duration-[var(--animation-duration)]",
+    "ds:motion-reduce:transition-none"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        // Transparent fades to a solid pill chrome once data-stuck="true"
+        // (set by the rAF scroll listener). The fade is handled via the
+        // same background utility so `data-stuck` swaps cleanly between
+        // states.
+        transparent: [
+          "ds:flex ds:items-center ds:gap-[var(--spacing-md)]",
+          "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:sm:ps-[var(--spacing-lg)] ds:sm:pe-[var(--spacing-lg)]",
+          "ds:h-14 ds:md:h-16",
+          "ds:bg-transparent ds:text-[var(--foreground)]",
+          "ds:data-[stuck=true]:bg-[var(--card)]",
+          "ds:data-[stuck=true]:shadow-[var(--shadow-md)]",
+          "ds:forced-colors:border-b ds:forced-colors:border-[CanvasText]"
+        ].join(" "),
+        // `dark` flips its own scope into the dark token set so nav
+        // links + buttons inside read off-white text on the blue-800
+        // surface. Without the `theme-dark` scope the children inherit
+        // the light-theme `--foreground` (blue-500) and fail
+        // color-contrast at ~1.3:1.
+        dark: [
+          "ds:flex ds:items-center ds:gap-[var(--spacing-md)]",
+          "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:sm:ps-[var(--spacing-lg)] ds:sm:pe-[var(--spacing-lg)]",
+          "ds:h-14 ds:md:h-16",
+          "theme-dark ds:bg-[var(--color-blue-800)] ds:text-[var(--foreground)]"
+        ].join(" "),
+        // `pill` matches alfadocs.com's floating rounded-pill header.
+        // The outer header is fully transparent (no border, no bg) and
+        // simply provides a top-side gutter so the inner container reads
+        // as floating. The inner `data-component="public-header-container"`
+        // div is the visible chrome — border, rounded, card background.
+        pill: [
+          "ds:bg-transparent",
+          "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:pt-[var(--spacing-md)]",
+          "ds:sm:ps-[var(--spacing-lg)] ds:sm:pe-[var(--spacing-lg)] ds:sm:pt-[var(--spacing-md)]"
+        ].join(" ")
+      },
+      sticky: {
+        none: "",
+        top: "ds:sticky ds:top-0",
+        // `scroll-up` is sticky but translates off-screen when scrolling
+        // down past `stickyOffset` (handled by data-hidden="true") and
+        // slides back in when scrolling up.
+        "scroll-up": [
+          "ds:sticky ds:top-0",
+          "ds:data-[hidden=true]:-translate-y-full"
+        ].join(" ")
+      }
+    },
+    defaultVariants: { variant: "pill", sticky: "none" }
+  }
+), rs = [
+  "ds:flex ds:items-center ds:gap-[var(--spacing-md)]",
+  "ds:w-full ds:max-w-[1400px] ds:mx-auto",
+  "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:sm:ps-[var(--spacing-lg)] ds:sm:pe-[var(--spacing-lg)]",
+  // 76px isn't a kit token; the closest is h-16 (64px) which reads tight
+  // against alfadocs.com's chrome — keep an explicit min-block-size so
+  // the pill reads as substantial without bloating beyond live reference.
+  "ds:min-h-16 ds:md:min-h-[76px]",
+  "ds:bg-[var(--card)] ds:text-[var(--foreground)]",
+  "ds:rounded-[var(--radius-lg)]",
+  // `--card-border` is the kit's subtle surface-border token (Card uses
+  // the same). Mirrors alfadocs.com's slate-200 pill border far closer
+  // than `--border` (the heavier component-input outline).
+  "ds:border ds:border-[color:var(--card-border)]",
+  "ds:transition-colors ds:duration-[var(--animation-duration)]",
+  "ds:motion-reduce:transition-none"
+].join(" "), os = C(
+  [
+    "ds:inline-flex ds:items-center",
+    "type-body-sm ds:font-medium",
+    // Muted-foreground reads as secondary text and matches alfadocs.com's
+    // nav-link colour (`#545875`). `--foreground` was too dark vs the ref.
+    "ds:text-[var(--muted-foreground)]",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:py-[var(--spacing-xs)]",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:hover:text-[var(--primary)]",
+    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:data-[active=true]:text-[var(--primary)]",
+    "ds:data-[active=true]:[box-shadow:inset_0_-2px_0_var(--primary)]"
+  ].join(" ")
+), is = [
+  "ds:group ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]",
+  "type-body-sm ds:font-medium",
+  // Mirror the navLinkVariants colour + inline padding so triggers and
+  // plain links share weight, colour and target size.
+  "ds:text-[var(--muted-foreground)]",
+  "ds:rounded-[var(--radius-sm)]",
+  "ds:bg-transparent ds:border-0 ds:cursor-pointer",
+  "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:py-[var(--spacing-xs)]",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:hover:text-[var(--primary)]",
+  "ds:data-[state=open]:text-[var(--primary)]",
+  "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
+].join(" "), ts = [
+  "ds:size-3 ds:shrink-0",
+  "ds:transition-transform ds:duration-[var(--animation-duration)]",
+  "ds:group-data-[state=open]:rotate-180",
+  "ds:motion-reduce:transition-none"
+].join(" "), cs = C(
+  [
+    // Radix portals Content into the Viewport; sizing + position is
+    // governed by the Viewport — keep Content's own paint to padding
+    // + inner layout so motion / position stay consistent across
+    // trigger placements.
+    "ds:data-[motion=from-start]:animate-in ds:data-[motion=from-start]:fade-in-0",
+    "ds:data-[motion=from-end]:animate-in ds:data-[motion=from-end]:fade-in-0",
+    "ds:data-[motion=to-start]:animate-out ds:data-[motion=to-start]:fade-out-0",
+    "ds:data-[motion=to-end]:animate-out ds:data-[motion=to-end]:fade-out-0",
+    "ds:motion-reduce:animate-none"
+  ].join(" "),
+  {
+    variants: {
+      wide: {
+        true: [
+          "ds:grid ds:grid-cols-2 ds:lg:grid-cols-4",
+          "ds:gap-[var(--spacing-lg)]",
+          "ds:p-[var(--spacing-lg)]",
+          "ds:w-screen ds:max-w-[1400px]"
+        ].join(" "),
+        false: ["ds:p-[var(--spacing-md)]", "ds:min-w-[280px]"].join(" ")
+      }
+    },
+    defaultVariants: { wide: !1 }
+  }
+), ls = [
+  // Position the Viewport flush below the pill / nav row. Radix sets
+  // `--radix-navigation-menu-viewport-width` and `…-height` so the
+  // panel sizes itself to whichever Content is currently active.
+  "ds:absolute ds:top-full ds:start-1/2 ds:-translate-x-1/2",
+  "ds:mt-[var(--spacing-sm)]",
+  "ds:w-[var(--radix-navigation-menu-viewport-width)]",
+  "ds:h-[var(--radix-navigation-menu-viewport-height)]",
+  "ds:overflow-hidden",
+  "ds:bg-[var(--card)] ds:text-[var(--foreground)]",
+  "ds:rounded-[var(--radius-lg)] ds:border ds:border-[color:var(--border)]",
+  "ds:shadow-[var(--shadow-lg)]",
+  "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
+  "ds:data-[state=open]:fade-in-0 ds:data-[state=closed]:fade-out-0",
+  "ds:data-[state=open]:zoom-in-95 ds:data-[state=closed]:zoom-out-95",
+  "ds:origin-top ds:transition-[width,height] ds:duration-[var(--animation-duration)]",
+  "ds:motion-reduce:animate-none ds:motion-reduce:transition-none"
+].join(" "), z = [
+  "ds:flex ds:items-start ds:justify-between ds:gap-[var(--spacing-sm)]",
+  "ds:no-underline ds:text-[var(--foreground)]",
+  "ds:pb-[var(--spacing-sm)]",
+  // alfadocs.com renders the card header flush against the sub-list with
+  // no separator rule — match that by dropping the border-b that earlier
+  // versions of this component carried.
+  "ds:rounded-[var(--radius-sm)]",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:hover:[&_[data-card-title]]:text-[var(--primary)]",
+  "ds:hover:[&_[data-card-arrow]]:text-[var(--primary)]",
+  "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+  "ds:group/cardlink"
+].join(" "), us = [
+  "ds:pb-[var(--spacing-sm)]"
+  // Match the linked-card variant: no separator rule under the title.
+].join(" "), ms = [
+  "ds:block ds:no-underline",
+  "type-body-sm ds:font-medium ds:text-[var(--muted-foreground)]",
+  "ds:rounded-[var(--radius-sm)]",
+  "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)]",
+  "ds:hover:bg-[var(--muted)]/30 ds:hover:text-[var(--primary)]",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:data-[active=true]:text-[var(--primary)]",
+  "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
+].join(" ");
+function ps() {
+  const [e, n] = y(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+  return B(() => {
+    if (typeof window > "u" || !window.matchMedia) return;
+    const d = window.matchMedia("(prefers-reduced-motion: reduce)"), a = () => n(d.matches);
+    return d.addEventListener("change", a), () => d.removeEventListener("change", a);
+  }, []), e;
+}
+function vs(e, n, d) {
+  const [a, i] = y(!1), [r, o] = y(!1), c = D(0), p = D(!1);
+  return B(() => {
+    if (!e || typeof window > "u") return;
+    c.current = window.scrollY;
+    const l = () => {
+      const v = window.scrollY;
+      if (i(v > d), n === "scroll-up") {
+        const b = v - c.current;
+        b > 4 && v > d ? o(!0) : (b < -4 || v <= d) && o(!1);
+      }
+      c.current = v, p.current = !1;
+    }, u = () => {
+      p.current || (p.current = !0, window.requestAnimationFrame(l));
+    };
+    return window.addEventListener("scroll", u, { passive: !0 }), l(), () => {
+      window.removeEventListener("scroll", u);
+    };
+  }, [e, n, d]), { stuck: a, hidden: r };
+}
+function R({
+  logo: e,
+  homeHref: n,
+  resolvedHomeLabel: d,
+  resolvedNavLabel: a,
+  resolvedMenuLabel: i,
+  navSlot: r,
+  actionsSlot: o,
+  menuOpen: c,
+  setMenuOpen: p,
+  sheetId: l
+}) {
+  return /* @__PURE__ */ t(_, { children: [
+    /* @__PURE__ */ s(
+      "a",
+      {
+        href: n,
+        "aria-label": d,
+        className: "ds:inline-flex ds:items-center ds:rounded-[var(--radius-sm)] ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+        children: e
+      }
+    ),
+    r ? /* @__PURE__ */ s(g.Provider, { value: "desktop", children: /* @__PURE__ */ t(
+      m.Root,
+      {
+        "aria-label": a,
+        className: "ds:hidden ds:md:flex ds:relative ds:items-center ds:ms-[var(--spacing-lg)] ds:flex-1 ds:[&>div:first-of-type]:flex ds:[&>div:first-of-type]:flex-1",
+        delayDuration: 150,
+        children: [
+          /* @__PURE__ */ s(m.List, { className: "ds:flex ds:flex-1 ds:items-center ds:justify-center ds:gap-[var(--spacing-md)] ds:list-none ds:m-0 ds:ps-0", children: r }),
+          /* @__PURE__ */ s("div", { className: "ds:absolute ds:top-full ds:start-0 ds:end-0 ds:flex ds:justify-center ds:pointer-events-none", children: /* @__PURE__ */ s("div", { className: "ds:pointer-events-auto", children: /* @__PURE__ */ s(m.Viewport, { className: ls }) }) })
+        ]
+      }
+    ) }) : null,
+    o ? /* @__PURE__ */ s("div", { className: "ds:hidden ds:md:flex ds:items-center ds:gap-[var(--spacing-sm)] ds:ms-auto", children: o }) : null,
+    /* @__PURE__ */ t(f, { open: c, onOpenChange: p, children: [
+      /* @__PURE__ */ s(f.Trigger, { asChild: !0, children: /* @__PURE__ */ s(
+        es,
+        {
+          size: "md",
+          intent: "ghost",
+          className: "ds:ms-auto ds:md:hidden",
+          icon: c ? /* @__PURE__ */ s(ds, { "aria-hidden": "true" }) : /* @__PURE__ */ s(as, { "aria-hidden": "true" }),
+          "aria-controls": l,
+          "aria-expanded": c,
+          "aria-label": i
+        }
+      ) }),
+      /* @__PURE__ */ t(f.Content, { side: "end", size: "md", id: l, children: [
+        /* @__PURE__ */ s(f.Header, { children: /* @__PURE__ */ s(f.Title, { children: a }) }),
+        /* @__PURE__ */ s(f.Body, { children: /* @__PURE__ */ t("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
+          r ? /* @__PURE__ */ s(g.Provider, { value: "mobile", children: /* @__PURE__ */ s(
+            "nav",
+            {
+              "aria-label": a,
+              className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]",
+              "data-mobile-nav": "true",
+              children: r
+            }
+          ) }) : null,
+          o ? /* @__PURE__ */ s("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:mt-[var(--spacing-md)]", children: o }) : null
+        ] }) })
+      ] })
+    ] })
+  ] });
+}
+const E = h(
+  ({
+    logo: e,
+    homeHref: n = "/",
+    homeLabel: d,
+    navSlot: a,
+    actionsSlot: i,
+    variant: r = "pill",
+    sticky: o = "none",
+    stickyOffset: c = 80,
+    menuLabel: p,
+    navLabel: l,
+    id: u,
+    className: v,
+    ...b
+  }, A) => {
+    const { t: x } = ss(), j = ps(), Y = Q(), q = `${u ?? Y}-sheet`, [w, k] = y(!1), F = r === "transparent" || o === "scroll-up", { stuck: W, hidden: X } = vs(
+      F,
+      o,
+      c
+    ), $ = j ? !1 : X, H = M(() => k(!0), []), L = M(() => k(!1), []);
+    U(
+      A,
+      () => ({
+        openMenu: H,
+        closeMenu: L,
+        getMenuOpen: () => w
+      }),
+      [H, L, w]
+    );
+    const G = d ?? x("publicHeader.homeLabel", "AlfaDocs — home"), J = l ?? x("publicHeader.primaryNavLabel", "Primary"), K = p ?? (w ? x("publicHeader.closeMenu", "Close menu") : x("publicHeader.openMenu", "Open menu")), P = {
+      logo: e,
+      homeHref: n,
+      resolvedHomeLabel: G,
+      resolvedNavLabel: J,
+      resolvedMenuLabel: K,
+      navSlot: a,
+      actionsSlot: i,
+      menuOpen: w,
+      setMenuOpen: k,
+      sheetId: q
+    };
+    return /* @__PURE__ */ s(
+      "header",
+      {
+        ...b,
+        "data-component": "public-header",
+        "data-component-id": u,
+        "data-variant": r,
+        "data-stuck": W ? "true" : void 0,
+        "data-hidden": $ ? "true" : void 0,
+        "data-state": j ? "reduced-motion" : void 0,
+        className: ns({ variant: r, sticky: o, className: v }),
+        children: r === "pill" ? /* @__PURE__ */ s(
+          "div",
+          {
+            "data-component": "public-header-container",
+            className: rs,
+            children: /* @__PURE__ */ s(R, { ...P })
+          }
+        ) : /* @__PURE__ */ s(R, { ...P })
+      }
+    );
+  }
+);
+E.displayName = "PublicHeader";
+const T = h(({ active: e, className: n, children: d, ...a }, i) => N(g) === "mobile" ? /* @__PURE__ */ s(
+  "a",
+  {
+    ref: i,
+    ...a,
+    "data-active": e ? "true" : void 0,
+    "aria-current": e ? "page" : void 0,
+    className: [
+      "ds:block ds:no-underline",
+      "type-body-sm ds:font-medium",
+      "ds:text-[var(--foreground)]",
+      "ds:rounded-[var(--radius-sm)]",
+      "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-sm)]",
+      "ds:hover:bg-[var(--muted)]/30 ds:hover:text-[var(--primary)]",
+      "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+      "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+      "ds:data-[active=true]:text-[var(--primary)]",
+      "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+      n
+    ].filter(Boolean).join(" "),
+    children: d
+  }
+) : /* @__PURE__ */ s(m.Item, { children: /* @__PURE__ */ s(m.Link, { asChild: !0, active: e, children: /* @__PURE__ */ s(
+  "a",
+  {
+    ref: i,
+    ...a,
+    "data-active": e ? "true" : void 0,
+    "aria-current": e ? "page" : void 0,
+    className: [os(), n].filter(Boolean).join(" "),
+    children: d
+  }
+) }) }));
+T.displayName = "PublicHeader.NavLink";
+const V = h(({ label: e, wide: n = !1, children: d, id: a }, i) => N(g) === "mobile" ? /* @__PURE__ */ t(
+  "details",
+  {
+    id: a,
+    "data-component": "public-header-nav-dropdown",
+    className: "ds:group ds:border-b ds:border-[color:var(--border)]",
+    children: [
+      /* @__PURE__ */ t(
+        "summary",
+        {
+          className: [
+            "ds:flex ds:items-center ds:justify-between ds:cursor-pointer",
+            "type-body-sm ds:font-medium ds:text-[var(--foreground)]",
+            "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-sm)]",
+            "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+            "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+            "ds:list-none ds:[&::-webkit-details-marker]:hidden"
+          ].join(" "),
+          children: [
+            /* @__PURE__ */ s("span", { children: e }),
+            /* @__PURE__ */ s(
+              I,
+              {
+                "aria-hidden": "true",
+                className: "ds:size-3 ds:shrink-0 ds:transition-transform ds:duration-[var(--animation-duration)] ds:group-[[open]]:rotate-180 ds:motion-reduce:transition-none"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ s("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)] ds:py-[var(--spacing-sm)]", children: d })
+    ]
+  }
+) : /* @__PURE__ */ t(m.Item, { "data-component": "public-header-nav-dropdown", children: [
+  /* @__PURE__ */ t(
+    m.Trigger,
+    {
+      ref: i,
+      id: a,
+      className: is,
+      children: [
+        e,
+        /* @__PURE__ */ s(I, { "aria-hidden": "true", className: ts })
+      ]
+    }
+  ),
+  /* @__PURE__ */ s(
+    m.Content,
+    {
+      className: cs({ wide: n }),
+      children: d
+    }
+  )
+] }));
+V.displayName = "PublicHeader.NavDropdown";
+const O = h(({ href: e, title: n, subtitle: d, children: a }, i) => {
+  const r = N(g), o = /* @__PURE__ */ s(
+    "span",
+    {
+      "data-card-title": !0,
+      className: "type-title-card ds:text-[var(--foreground)] ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+      children: n
+    }
+  ), l = /* @__PURE__ */ t(_, { children: [
+    /* @__PURE__ */ t("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+      o,
+      d ? /* @__PURE__ */ s("span", { className: "type-body-sm ds:text-[var(--muted-foreground)]", children: d }) : null
+    ] }),
+    /* @__PURE__ */ s(
+      "span",
+      {
+        "data-card-arrow": !0,
+        "aria-hidden": "true",
+        className: "ds:flex-none ds:text-[var(--muted-foreground)] ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none ds:rtl:-scale-x-100",
+        children: /* @__PURE__ */ t(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "20",
+            height: "20",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ s("path", { d: "M5 12h14" }),
+              /* @__PURE__ */ s("path", { d: "m12 5 7 7-7 7" })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+  let u;
+  return e ? r === "mobile" ? u = /* @__PURE__ */ s("a", { href: e, className: z, children: l }) : u = /* @__PURE__ */ s(m.Link, { asChild: !0, children: /* @__PURE__ */ s("a", { href: e, className: z, children: l }) }) : u = /* @__PURE__ */ t("div", { className: us, children: [
+    o,
+    d ? /* @__PURE__ */ s("span", { className: "ds:block type-body-sm ds:text-[var(--muted-foreground)] ds:mt-[var(--spacing-xs)]", children: d }) : null
+  ] }), /* @__PURE__ */ t(
+    "div",
+    {
+      ref: i,
+      "data-component": "public-header-dropdown-card",
+      className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+      children: [
+        u,
+        a ? /* @__PURE__ */ s("ul", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:list-none ds:m-0 ds:ps-0", children: a }) : null
+      ]
+    }
+  );
+});
+O.displayName = "PublicHeader.DropdownCard";
+const S = h(({ active: e, className: n, children: d, ...a }, i) => {
+  const r = N(g), o = /* @__PURE__ */ s(
+    "a",
+    {
+      ref: i,
+      ...a,
+      "data-active": e ? "true" : void 0,
+      "aria-current": e ? "page" : void 0,
+      className: [ms, n].filter(Boolean).join(" "),
+      children: d
+    }
+  );
+  return /* @__PURE__ */ s("li", { "data-component": "public-header-dropdown-link", children: r === "mobile" ? o : /* @__PURE__ */ s(m.Link, { asChild: !0, active: e, children: o }) });
+});
+S.displayName = "PublicHeader.DropdownLink";
+const Cs = Object.assign(E, {
+  NavLink: T,
+  NavDropdown: V,
+  DropdownCard: O,
+  DropdownLink: S
+}), js = {
+  id: "public-header",
+  capabilities: ["open", "close"],
+  state: {
+    menuOpen: {
+      type: "boolean",
+      description: "Whether the mobile drawer is currently open.",
+      read: (e) => e.getMenuOpen()
+    }
+  },
+  actions: {
+    open_menu: {
+      safety: "read",
+      description: "Open the mobile drawer.",
+      invoke: (e) => {
+        e.openMenu();
+      }
+    },
+    close_menu: {
+      safety: "read",
+      description: "Close the mobile drawer.",
+      invoke: (e) => {
+        e.closeMenu();
+      }
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "public-header" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop on PublicHeader."
+    }
+  }
+};
+export {
+  Cs as P,
+  js as p
+};
+//# sourceMappingURL=public-header.agent-BIBQzkeV.js.map

package/dist/agent-catalog.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "packageVersion": "0.16.0",
+  "packageVersion": "0.17.1",
   "components": [
     {
       "kind": "component",
@@ -1038,6 +1038,42 @@
         }
       }
     },
+    {
+      "kind": "component",
+      "id": "copy-field",
+      "capabilities": [],
+      "state": [
+        {
+          "name": "value",
+          "type": "string",
+          "description": "The value displayed in the read-only field."
+        },
+        {
+          "name": "copied",
+          "type": "boolean",
+          "description": "True for the brief window after a successful copy."
+        }
+      ],
+      "actions": [
+        {
+          "name": "copy",
+          "safety": "write",
+          "description": "Programmatically trigger the clipboard write."
+        }
+      ],
+      "domHooks": {
+        "root": {
+          "attr": "data-component",
+          "value": "copy-field",
+          "description": "Marks the CopyField root. The trailing button uses `aria-label` keyed off the copy / copied state."
+        },
+        "instanceId": {
+          "attr": "data-component-id",
+          "sourceProp": "id",
+          "description": "Sourced from the id prop, when provided."
+        }
+      }
+    },
     {
       "kind": "component",
       "id": "data-table",

package/dist/components/benefit-card/index.js

@@ -1,4 +1,4 @@
-import { B as a } from "../../_chunks/benefit-card-Czs0oXdi.js";
+import { B as a } from "../../_chunks/benefit-card-DXmrAyfn.js";
 export {
   a as BenefitCard
 };

package/dist/components/carousel/index.js

@@ -1,4 +1,4 @@
-import { C as o, c as r } from "../../_chunks/carousel.agent-OTn-kMQg.js";
+import { C as o, c as r } from "../../_chunks/carousel.agent-Xuw9LPZN.js";
 export {
   o as Carousel,
   r as carouselAgent

package/dist/components/copy-field/copy-field.agent.d.ts

@@ -0,0 +1,16 @@
+import type { AgentAdapter } from '../../agent/types';
+/**
+ * Imperative handle for CopyField — agents can read the value and trigger a
+ * programmatic copy. State stays scoped to identifiers + transient UI state;
+ * never PHI (per PRS §Security).
+ */
+export interface CopyFieldHandle {
+    /** Returns the read-only value currently displayed. */
+    getValue: () => string;
+    /** Triggers the clipboard write side-effect. */
+    copy: () => Promise<boolean>;
+    /** Returns true for the brief window after a successful copy. */
+    isCopied: () => boolean;
+}
+export declare const copyFieldAgent: AgentAdapter<CopyFieldHandle>;
+//# sourceMappingURL=copy-field.agent.d.ts.map