@alfadocs/ui-kit 0.25.1 → 0.30.0

package/dist/_chunks/{public-header.agent-BQ3r6Hgq.js → public-header.agent-5U3S9QiC.js}

@@ -1,10 +1,10 @@
-import { jsx as s, jsxs as t, Fragment as _ } from "react/jsx-runtime";
+import { jsx as s, jsxs as i, 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 { I as es } from "./icon-button-BRHSSFmZ.js";
+import { S as f } from "./sheet-D8M8hf8B.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";
@@ -28,18 +28,25 @@ const g = Z("desktop"), ns = C(
           "ds:bg-transparent ds:text-[var(--foreground)]",
           "ds:data-[stuck=true]:bg-[var(--card)]",
           "ds:data-[stuck=true]:shadow-[var(--shadow-md)]",
+          // Once stuck, pair the elevation shadow with a tokenized
+          // block-end border so the header has a clear edge against the
+          // page below it — shadow alone fades to a faint halo on dark
+          // surfaces, leaving the bar reading as unbounded.
+          "ds:data-[stuck=true]:border-block-end ds:data-[stuck=true]:border-[color:var(--border)]",
           "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
+        // links + buttons inside read off-white text on the dark
         // surface. Without the `theme-dark` scope the children inherit
-        // the light-theme `--foreground` (blue-500) and fail
-        // color-contrast at ~1.3:1.
+        // the light-theme `--foreground` and fail color-contrast at
+        // ~1.3:1. `--background` already resolves to a dark step under
+        // `theme-dark`, so we compose the surface from the standard
+        // theme token rather than locking to a raw ramp step.
         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)]"
+          "theme-dark ds:bg-[var(--background)] 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
@@ -89,7 +96,8 @@ const g = Z("desktop"), ns = 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.
+    // nav-link colour (the reference's slate-grey). `--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)]",
@@ -100,7 +108,7 @@ const g = Z("desktop"), ns = C(
     "ds:data-[active=true]:text-[var(--primary)]",
     "ds:data-[active=true]:[box-shadow:inset_0_-2px_0_var(--primary)]"
   ].join(" ")
-), is = [
+), ts = [
   "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
@@ -114,7 +122,7 @@ const g = Z("desktop"), ns = C(
   "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 = [
+].join(" "), is = [
   "ds:size-3 ds:shrink-0",
   "ds:transition-transform ds:duration-[var(--animation-duration)]",
   "ds:group-data-[state=open]:rotate-180",
@@ -199,13 +207,13 @@ function ps() {
   }, []), e;
 }
 function vs(e, n, d) {
-  const [a, i] = y(!1), [r, o] = y(!1), c = D(0), p = D(!1);
+  const [a, t] = 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") {
+      if (t(v > d), n === "scroll-up") {
         const b = v - c.current;
         b > 4 && v > d ? o(!0) : (b < -4 || v <= d) && o(!1);
       }
@@ -223,14 +231,14 @@ function R({
   homeHref: n,
   resolvedHomeLabel: d,
   resolvedNavLabel: a,
-  resolvedMenuLabel: i,
+  resolvedMenuLabel: t,
   navSlot: r,
   actionsSlot: o,
   menuOpen: c,
   setMenuOpen: p,
   sheetId: l
 }) {
-  return /* @__PURE__ */ t(_, { children: [
+  return /* @__PURE__ */ i(_, { children: [
     /* @__PURE__ */ s(
       "a",
       {
@@ -240,7 +248,7 @@ function R({
         children: e
       }
     ),
-    r ? /* @__PURE__ */ s(g.Provider, { value: "desktop", children: /* @__PURE__ */ t(
+    r ? /* @__PURE__ */ s(g.Provider, { value: "desktop", children: /* @__PURE__ */ i(
       m.Root,
       {
         "aria-label": a,
@@ -253,7 +261,7 @@ function R({
       }
     ) }) : 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__ */ i(f, { open: c, onOpenChange: p, children: [
       /* @__PURE__ */ s(f.Trigger, { asChild: !0, children: /* @__PURE__ */ s(
         es,
         {
@@ -263,12 +271,12 @@ function R({
           icon: c ? /* @__PURE__ */ s(ds, { "aria-hidden": "true" }) : /* @__PURE__ */ s(as, { "aria-hidden": "true" }),
           "aria-controls": l,
           "aria-expanded": c,
-          "aria-label": i
+          "aria-label": t
         }
       ) }),
-      /* @__PURE__ */ t(f.Content, { side: "end", size: "md", id: l, children: [
+      /* @__PURE__ */ i(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: [
+        /* @__PURE__ */ s(f.Body, { children: /* @__PURE__ */ i("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
           r ? /* @__PURE__ */ s(g.Provider, { value: "mobile", children: /* @__PURE__ */ s(
             "nav",
             {
@@ -290,7 +298,7 @@ const E = h(
     homeHref: n = "/",
     homeLabel: d,
     navSlot: a,
-    actionsSlot: i,
+    actionsSlot: t,
     variant: r = "pill",
     sticky: o = "none",
     stickyOffset: c = 80,
@@ -321,7 +329,7 @@ const E = h(
       resolvedNavLabel: J,
       resolvedMenuLabel: K,
       navSlot: a,
-      actionsSlot: i,
+      actionsSlot: t,
       menuOpen: w,
       setMenuOpen: k,
       sheetId: q
@@ -350,10 +358,10 @@ const E = h(
   }
 );
 E.displayName = "PublicHeader";
-const T = h(({ active: e, className: n, children: d, ...a }, i) => N(g) === "mobile" ? /* @__PURE__ */ s(
+const T = h(({ active: e, className: n, children: d, ...a }, t) => N(g) === "mobile" ? /* @__PURE__ */ s(
   "a",
   {
-    ref: i,
+    ref: t,
     ...a,
     "data-active": e ? "true" : void 0,
     "aria-current": e ? "page" : void 0,
@@ -375,7 +383,7 @@ const T = h(({ active: e, className: n, children: d, ...a }, i) => N(g) === "mob
 ) : /* @__PURE__ */ s(m.Item, { children: /* @__PURE__ */ s(m.Link, { asChild: !0, active: e, children: /* @__PURE__ */ s(
   "a",
   {
-    ref: i,
+    ref: t,
     ...a,
     "data-active": e ? "true" : void 0,
     "aria-current": e ? "page" : void 0,
@@ -384,14 +392,14 @@ const T = h(({ active: e, className: n, children: d, ...a }, i) => N(g) === "mob
   }
 ) }) }));
 T.displayName = "PublicHeader.NavLink";
-const V = h(({ label: e, wide: n = !1, children: d, id: a }, i) => N(g) === "mobile" ? /* @__PURE__ */ t(
+const V = h(({ label: e, wide: n = !1, children: d, id: a }, t) => N(g) === "mobile" ? /* @__PURE__ */ i(
   "details",
   {
     id: a,
     "data-component": "public-header-nav-dropdown",
     className: "ds:group ds:border-b ds:border-[color:var(--border)]",
     children: [
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ i(
         "summary",
         {
           className: [
@@ -417,16 +425,16 @@ const V = h(({ label: e, wide: n = !1, children: d, id: a }, i) => N(g) === "mob
       /* @__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(
+) : /* @__PURE__ */ i(m.Item, { "data-component": "public-header-nav-dropdown", children: [
+  /* @__PURE__ */ i(
     m.Trigger,
     {
-      ref: i,
+      ref: t,
       id: a,
-      className: is,
+      className: ts,
       children: [
         e,
-        /* @__PURE__ */ s(I, { "aria-hidden": "true", className: ts })
+        /* @__PURE__ */ s(I, { "aria-hidden": "true", className: is })
       ]
     }
   ),
@@ -439,7 +447,7 @@ const V = h(({ label: e, wide: n = !1, children: d, id: a }, i) => N(g) === "mob
   )
 ] }));
 V.displayName = "PublicHeader.NavDropdown";
-const O = h(({ href: e, title: n, subtitle: d, children: a }, i) => {
+const O = h(({ href: e, title: n, subtitle: d, children: a }, t) => {
   const r = N(g), o = /* @__PURE__ */ s(
     "span",
     {
@@ -447,8 +455,8 @@ const O = h(({ href: e, title: n, subtitle: d, children: a }, i) => {
       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: [
+  ), l = /* @__PURE__ */ i(_, { children: [
+    /* @__PURE__ */ i("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
     ] }),
@@ -458,7 +466,7 @@ const O = h(({ href: e, title: n, subtitle: d, children: a }, i) => {
         "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(
+        children: /* @__PURE__ */ i(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -480,13 +488,13 @@ const O = h(({ href: e, title: n, subtitle: d, children: a }, i) => {
     )
   ] });
   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: [
+  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__ */ i("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(
+  ] }), /* @__PURE__ */ i(
     "div",
     {
-      ref: i,
+      ref: t,
       "data-component": "public-header-dropdown-card",
       className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
       children: [
@@ -497,11 +505,11 @@ const O = h(({ href: e, title: n, subtitle: d, children: a }, i) => {
   );
 });
 O.displayName = "PublicHeader.DropdownCard";
-const S = h(({ active: e, className: n, children: d, ...a }, i) => {
+const S = h(({ active: e, className: n, children: d, ...a }, t) => {
   const r = N(g), o = /* @__PURE__ */ s(
     "a",
     {
-      ref: i,
+      ref: t,
       ...a,
       "data-active": e ? "true" : void 0,
       "aria-current": e ? "page" : void 0,
@@ -556,4 +564,4 @@ export {
   Cs as P,
   js as p
 };
-//# sourceMappingURL=public-header.agent-BQ3r6Hgq.js.map
+//# sourceMappingURL=public-header.agent-5U3S9QiC.js.map