@alfadocs/ui-kit 0.0.19 → 0.1.0

package/dist/_chunks/{header-BpKaSL_v.js → header-CW2oRd5H.js}

@@ -1,8 +1,8 @@
-import { jsxs as m, Fragment as _, jsx as o } from "react/jsx-runtime";
-import { forwardRef as i, useRef as k, useState as N, useEffect as j } from "react";
-import { c as t } from "./index-D2ZczOXr.js";
+import { jsxs as m, Fragment as _, jsx as s } from "react/jsx-runtime";
+import { forwardRef as t, useRef as k, useState as N, useEffect as j } from "react";
+import { c as o } from "./index-D2ZczOXr.js";
 import { useTranslation as l } from "react-i18next";
-import { I as H } from "./icon-button-C1vpylg3.js";
+import { I as H } from "./icon-button-C482ii4y.js";
 import { c as w } from "./createLucideIcon-CrFbzy84.js";
 /**
  * @license lucide-react v1.8.0 - ISC
@@ -14,39 +14,39 @@ const B = [
   ["path", { d: "M4 5h16", key: "1tepv9" }],
   ["path", { d: "M4 12h16", key: "1lakjw" }],
   ["path", { d: "M4 19h16", key: "1djgab" }]
-], C = w("menu", B), V = t(
+], C = w("menu", B), V = o(
   [
-    "w-full",
+    "ds:w-full",
     // Fixed height — a Header is always the `lg` token (64px). Using `h-*`
     // (not `min-h-*`) pins the row regardless of how Storybook's Canvas /
     // docs wrapper stretches the story's layout.
-    "h-[var(--header-height-lg)]",
+    "ds:h-[var(--header-height-lg)]",
     // `flex items-stretch` lets the inner div fill the full cross-axis so
     // the flex-centered content sits on the true vertical midline.
-    "flex items-stretch",
+    "ds:flex ds:items-stretch",
     // Pin to the top of the page — `sticky` keeps the Header in normal
     // document flow (so content below isn't occluded and the docs Canvas
     // doesn't leak the Header over adjacent preview blocks) but stays
     // anchored to the viewport while the nearest scroll ancestor scrolls.
-    "sticky inset-block-start-0 z-[var(--z-sticky)]",
-    "bg-[var(--background)]",
-    "text-[color:var(--foreground)]",
+    "ds:sticky ds:inset-block-start-0 ds:z-[var(--z-sticky)]",
+    "ds:bg-[var(--background)]",
+    "ds:text-[color:var(--foreground)]",
     // Shadow recipe follows `Brand/Shadows` — one tier between states, never
     // two. Resting: flat, no shadow. Scrolled: --shadow-md (tooltip/menu tier)
     // paired with a 1-px --border so elevation still reads without the shadow
     // in forced-colors / print, where UAs strip box-shadow. Transition is
     // gated on `motion-reduce` so users opting out of motion still get the
     // static elevation without animated lift.
-    "transition-[border-color,box-shadow] motion-reduce:transition-none",
-    "border-block-end border-transparent",
-    "data-[scrolled=true]:border-[color:var(--border)]",
-    "data-[scrolled=true]:shadow-[var(--shadow-md)]",
+    "ds:transition-[border-color,box-shadow] ds:motion-reduce:transition-none",
+    "ds:border-block-end ds:border-transparent",
+    "ds:data-[scrolled=true]:border-[color:var(--border)]",
+    "ds:data-[scrolled=true]:shadow-[var(--shadow-md)]",
     // Windows HCM: always show the border — forced-colors strips box-shadow
     // entirely, so the border is the only separation cue the user gets.
-    "forced-colors:border-[color:CanvasText]",
+    "ds:forced-colors:border-[color:CanvasText]",
     // Print: strip shadow, keep border so the header still reads as a
     // bounded surface on paper.
-    "print:shadow-none print:border-[color:var(--border)]"
+    "ds:print:shadow-none ds:print:border-[color:var(--border)]"
   ].join(" "),
   {
     variants: {
@@ -73,18 +73,18 @@ const B = [
         // the existing scroll-shadow + border. White --primary-foreground ink
         // on blue-500 clears AAA (~12.8:1).
         brand: [
-          "bg-[var(--primary)] text-[color:var(--primary-foreground)]",
-          "[.theme-dark_&]:bg-[var(--background)]",
-          "[&_[data-header-slot=start]]:[--foreground:var(--primary-foreground)]",
-          "[&_[data-header-slot=start]]:[--muted-foreground:var(--primary-foreground)]",
-          "[&_[data-header-slot=start]]:[--border:color-mix(in_srgb,var(--primary-foreground)_40%,transparent)]",
-          "[&_[data-header-slot=start]]:[--muted:color-mix(in_srgb,var(--primary-foreground)_16%,transparent)]",
-          "[&_[data-header-slot=start]]:[--ring:var(--primary-foreground)]",
-          "[&_[data-header-slot=end]]:[--foreground:var(--primary-foreground)]",
-          "[&_[data-header-slot=end]]:[--muted-foreground:var(--primary-foreground)]",
-          "[&_[data-header-slot=end]]:[--border:color-mix(in_srgb,var(--primary-foreground)_40%,transparent)]",
-          "[&_[data-header-slot=end]]:[--muted:color-mix(in_srgb,var(--primary-foreground)_16%,transparent)]",
-          "[&_[data-header-slot=end]]:[--ring:var(--primary-foreground)]"
+          "ds:bg-[var(--primary)] ds:text-[color:var(--primary-foreground)]",
+          "ds:[.theme-dark_&]:bg-[var(--background)]",
+          "ds:[&_[data-header-slot=start]]:[--foreground:var(--primary-foreground)]",
+          "ds:[&_[data-header-slot=start]]:[--muted-foreground:var(--primary-foreground)]",
+          "ds:[&_[data-header-slot=start]]:[--border:color-mix(in_srgb,var(--primary-foreground)_40%,transparent)]",
+          "ds:[&_[data-header-slot=start]]:[--muted:color-mix(in_srgb,var(--primary-foreground)_16%,transparent)]",
+          "ds:[&_[data-header-slot=start]]:[--ring:var(--primary-foreground)]",
+          "ds:[&_[data-header-slot=end]]:[--foreground:var(--primary-foreground)]",
+          "ds:[&_[data-header-slot=end]]:[--muted-foreground:var(--primary-foreground)]",
+          "ds:[&_[data-header-slot=end]]:[--border:color-mix(in_srgb,var(--primary-foreground)_40%,transparent)]",
+          "ds:[&_[data-header-slot=end]]:[--muted:color-mix(in_srgb,var(--primary-foreground)_16%,transparent)]",
+          "ds:[&_[data-header-slot=end]]:[--ring:var(--primary-foreground)]"
         ].join(" "),
         // Light surface — plain page background with primary-coloured chrome.
         // Start + end slots rescope --foreground, --border, --ring to --primary
@@ -92,13 +92,13 @@ const B = [
         // HeaderBrand wordmark keeps its bicolor artwork and the SearchBar
         // (center slot) is untouched.
         light: [
-          "bg-[var(--background)] text-[color:var(--foreground)]",
-          "[&_[data-header-slot=start]]:[--foreground:var(--primary)]",
-          "[&_[data-header-slot=start]]:[--border:var(--primary)]",
-          "[&_[data-header-slot=start]]:[--ring:var(--primary)]",
-          "[&_[data-header-slot=end]]:[--foreground:var(--primary)]",
-          "[&_[data-header-slot=end]]:[--border:var(--primary)]",
-          "[&_[data-header-slot=end]]:[--ring:var(--primary)]"
+          "ds:bg-[var(--background)] ds:text-[color:var(--foreground)]",
+          "ds:[&_[data-header-slot=start]]:[--foreground:var(--primary)]",
+          "ds:[&_[data-header-slot=start]]:[--border:var(--primary)]",
+          "ds:[&_[data-header-slot=start]]:[--ring:var(--primary)]",
+          "ds:[&_[data-header-slot=end]]:[--foreground:var(--primary)]",
+          "ds:[&_[data-header-slot=end]]:[--border:var(--primary)]",
+          "ds:[&_[data-header-slot=end]]:[--ring:var(--primary)]"
         ].join(" ")
       }
     },
@@ -106,64 +106,64 @@ const B = [
       variant: "brand"
     }
   }
-), S = t(
+), S = o(
   [
-    "flex items-center gap-[var(--spacing-sm)]",
-    "w-full h-full",
-    "ps-[var(--spacing-md)] pe-[var(--spacing-md)]"
+    "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]",
+    "ds:w-full ds:h-full",
+    "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]"
   ].join(" ")
-), z = t("inline-flex items-center gap-[var(--spacing-sm)]"), I = t(
-  "hidden md:flex flex-1 min-w-0 items-center justify-center gap-[var(--spacing-sm)]"
-), M = t("ms-auto inline-flex items-center gap-[var(--spacing-sm)]"), T = t(
+), z = o("ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]"), I = o(
+  "ds:hidden ds:md:flex ds:flex-1 ds:min-w-0 ds:items-center ds:justify-center ds:gap-[var(--spacing-sm)]"
+), M = o("ds:ms-auto ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]"), T = o(
   [
-    "inline-flex items-center gap-[var(--spacing-sm)]",
-    "text-[length:var(--font-size-base)] font-[var(--font-weight-semibold)]",
+    "ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]",
+    "ds:text-[length:var(--font-size-base)] ds:font-[var(--font-weight-semibold)]",
     // `leading-none` zeros the anchor's line-height so the Logo SVG sits at
     // the geometric centre of the flex cross-axis — otherwise the residual
     // line-box above ascenders / below descenders nudges the SVG upward.
-    "leading-none",
+    "ds:leading-none",
     // Inherit foreground from the Header root so the `brand` variant's
     // --primary-foreground ink cascades here without an override prop.
-    "text-[color:currentColor]",
-    "no-underline",
-    "rounded-[var(--radius-sm)]",
-    "focus-visible:outline-[length:var(--focus-ring-width)]",
-    "focus-visible:outline-solid",
-    "focus-visible:outline-[color:var(--ring)]",
-    "focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
-    "forced-colors:focus-visible:outline-[CanvasText]",
-    "min-h-[var(--min-target-size)]"
+    "ds:text-[color:currentColor]",
+    "ds:no-underline",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)]",
+    "ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-[color:var(--ring)]",
+    "ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-visible:outline-[CanvasText]",
+    "ds:min-h-[var(--min-target-size)]"
   ].join(" ")
-), O = t(
+), O = o(
   [
-    "hidden md:inline-block",
-    "border-inline-start border-[color:var(--border)]",
-    "self-stretch my-[var(--spacing-xs)]"
+    "ds:hidden ds:md:inline-block",
+    "ds:border-inline-start ds:border-[color:var(--border)]",
+    "ds:self-stretch ds:my-[var(--spacing-xs)]"
   ].join(" ")
-), R = t(
+), R = o(
   [
-    "sr-only focus:not-sr-only",
-    "focus:absolute focus:inset-inline-start-[var(--spacing-sm)] focus:inset-block-start-[var(--spacing-sm)]",
-    "focus:z-[calc(var(--z-sticky)+1)]",
-    "focus:ps-[var(--spacing-sm)] focus:pe-[var(--spacing-sm)] focus:pbs-[var(--spacing-xs)] focus:pbe-[var(--spacing-xs)]",
-    "focus:bg-[var(--background)] focus:text-[color:var(--foreground)]",
-    "focus:border focus:border-[color:var(--border)]",
-    "focus:rounded-[var(--radius-sm)]",
-    "focus:outline-[length:var(--focus-ring-width)] focus:outline-solid focus:outline-[color:var(--ring)]",
-    "forced-colors:focus:outline-[CanvasText]"
+    "ds:sr-only ds:focus:not-sr-only",
+    "ds:focus:absolute ds:focus:inset-inline-start-[var(--spacing-sm)] ds:focus:inset-block-start-[var(--spacing-sm)]",
+    "ds:focus:z-[calc(var(--z-sticky)+1)]",
+    "ds:focus:ps-[var(--spacing-sm)] ds:focus:pe-[var(--spacing-sm)] ds:focus:pbs-[var(--spacing-xs)] ds:focus:pbe-[var(--spacing-xs)]",
+    "ds:focus:bg-[var(--background)] ds:focus:text-[color:var(--foreground)]",
+    "ds:focus:border ds:focus:border-[color:var(--border)]",
+    "ds:focus:rounded-[var(--radius-sm)]",
+    "ds:focus:outline-[length:var(--focus-ring-width)] ds:focus:outline-solid ds:focus:outline-[color:var(--ring)]",
+    "ds:forced-colors:focus:outline-[CanvasText]"
   ].join(" ")
-), D = i(
+), D = t(
   ({
     variant: e = "brand",
     className: r,
     children: a,
-    scrollLinkedElevation: n = !0,
-    "aria-label": s,
-    ...d
+    scrollLinkedElevation: d = !0,
+    "aria-label": n,
+    ...i
   }, v) => {
-    const { t: p } = l(), g = s ?? p("navigation.header.label", "Page header"), c = k(null), [b, h] = N(!1);
+    const { t: p } = l(), g = n ?? p("navigation.header.label", "Page header"), c = k(null), [b, h] = N(!1);
     return j(() => {
-      if (!n) return;
+      if (!d) return;
       const u = c.current;
       if (!u || typeof IntersectionObserver > "u") return;
       const f = new IntersectionObserver(
@@ -174,16 +174,16 @@ const B = [
         { threshold: 0 }
       );
       return f.observe(u), () => f.disconnect();
-    }, [n]), /* @__PURE__ */ m(_, { children: [
-      n ? /* @__PURE__ */ o(
+    }, [d]), /* @__PURE__ */ m(_, { children: [
+      d ? /* @__PURE__ */ s(
         "div",
         {
           ref: c,
           "aria-hidden": "true",
-          className: "block h-px w-full"
+          className: "ds:block ds:h-px ds:w-full"
         }
       ) : null,
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ s(
         "header",
         {
           ref: v,
@@ -191,16 +191,16 @@ const B = [
           "aria-label": g,
           "data-scrolled": b ? "true" : void 0,
           className: V({ variant: e, className: r }),
-          ...d,
-          children: /* @__PURE__ */ o("div", { className: S(), children: a })
+          ...i,
+          children: /* @__PURE__ */ s("div", { className: S(), children: a })
         }
       )
     ] });
   }
 );
 D.displayName = "Header";
-const E = i(
-  ({ className: e, ...r }, a) => /* @__PURE__ */ o(
+const E = t(
+  ({ className: e, ...r }, a) => /* @__PURE__ */ s(
     "div",
     {
       ref: a,
@@ -211,8 +211,8 @@ const E = i(
   )
 );
 E.displayName = "HeaderStart";
-const L = i(
-  ({ className: e, ...r }, a) => /* @__PURE__ */ o(
+const L = t(
+  ({ className: e, ...r }, a) => /* @__PURE__ */ s(
     "div",
     {
       ref: a,
@@ -223,8 +223,8 @@ const L = i(
   )
 );
 L.displayName = "HeaderCenter";
-const F = i(
-  ({ className: e, ...r }, a) => /* @__PURE__ */ o(
+const F = t(
+  ({ className: e, ...r }, a) => /* @__PURE__ */ s(
     "div",
     {
       ref: a,
@@ -235,17 +235,17 @@ const F = i(
   )
 );
 F.displayName = "HeaderEnd";
-const P = i(
-  ({ logo: e, children: r, href: a = "/", className: n, ...s }, d) => /* @__PURE__ */ m(
+const P = t(
+  ({ logo: e, children: r, href: a = "/", className: d, ...n }, i) => /* @__PURE__ */ m(
     "a",
     {
-      ref: d,
+      ref: i,
       href: a,
-      className: [T(), n].filter(Boolean).join(" "),
-      ...s,
+      className: [T(), d].filter(Boolean).join(" "),
+      ...n,
       children: [
-        e ? /* @__PURE__ */ o("span", { "aria-hidden": r ? "true" : void 0, className: "inline-flex items-center", children: e }) : null,
-        r ? /* @__PURE__ */ o("span", { className: "truncate", children: r }) : null
+        e ? /* @__PURE__ */ s("span", { "aria-hidden": r ? "true" : void 0, className: "ds:inline-flex ds:items-center", children: e }) : null,
+        r ? /* @__PURE__ */ s("span", { className: "ds:truncate", children: r }) : null
       ]
     }
   )
@@ -255,7 +255,7 @@ function X({
   className: e,
   ...r
 }) {
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ s(
     "span",
     {
       role: "presentation",
@@ -265,33 +265,33 @@ function X({
     }
   );
 }
-const q = i(
-  ({ onMenuOpen: e, "aria-label": r, className: a }, n) => {
-    const { t: s } = l();
-    return /* @__PURE__ */ o(
+const q = t(
+  ({ onMenuOpen: e, "aria-label": r, className: a }, d) => {
+    const { t: n } = l();
+    return /* @__PURE__ */ s(
       H,
       {
-        ref: n,
-        className: ["md:hidden", a].filter(Boolean).join(" "),
-        icon: /* @__PURE__ */ o(C, { "aria-hidden": !0 }),
-        "aria-label": r ?? s("navigation.sidebar.open", "Open menu"),
+        ref: d,
+        className: ["ds:md:hidden", a].filter(Boolean).join(" "),
+        icon: /* @__PURE__ */ s(C, { "aria-hidden": !0 }),
+        "aria-label": r ?? n("navigation.sidebar.open", "Open menu"),
         onClick: e
       }
     );
   }
 );
 q.displayName = "HeaderMenuButton";
-const A = i(
-  ({ href: e, children: r, className: a, ...n }, s) => {
-    const { t: d } = l();
-    return /* @__PURE__ */ o(
+const A = t(
+  ({ href: e, children: r, className: a, ...d }, n) => {
+    const { t: i } = l();
+    return /* @__PURE__ */ s(
       "a",
       {
-        ref: s,
+        ref: n,
         href: e,
         className: [R(), a].filter(Boolean).join(" "),
-        ...n,
-        children: r ?? d("navigation.nav.skipToContent", "Skip to content")
+        ...d,
+        children: r ?? i("navigation.nav.skipToContent", "Skip to content")
       }
     );
   }
@@ -307,4 +307,4 @@ export {
   A as f,
   E as g
 };
-//# sourceMappingURL=header-BpKaSL_v.js.map
+//# sourceMappingURL=header-CW2oRd5H.js.map

package/dist/_chunks/header-CW2oRd5H.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-CW2oRd5H.js","sources":["../../node_modules/lucide-react/dist/esm/icons/menu.js","../../src/components/header/header.tsx"],"sourcesContent":["/**\n * @license lucide-react v1.8.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\"path\", { d: \"M4 5h16\", key: \"1tepv9\" }],\n  [\"path\", { d: \"M4 12h16\", key: \"1lakjw\" }],\n  [\"path\", { d: \"M4 19h16\", key: \"1djgab\" }]\n];\nconst Menu = createLucideIcon(\"menu\", __iconNode);\n\nexport { __iconNode, Menu as default };\n//# sourceMappingURL=menu.js.map\n","import {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  type AnchorHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { Menu } from 'lucide-react';\nimport { IconButton } from '../button/icon-button';\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                 */\n/* ------------------------------------------------------------------ */\n\nconst rootVariants = cva(\n  [\n    'ds:w-full',\n    // Fixed height — a Header is always the `lg` token (64px). Using `h-*`\n    // (not `min-h-*`) pins the row regardless of how Storybook's Canvas /\n    // docs wrapper stretches the story's layout.\n    'ds:h-[var(--header-height-lg)]',\n    // `flex items-stretch` lets the inner div fill the full cross-axis so\n    // the flex-centered content sits on the true vertical midline.\n    'ds:flex ds:items-stretch',\n    // Pin to the top of the page — `sticky` keeps the Header in normal\n    // document flow (so content below isn't occluded and the docs Canvas\n    // doesn't leak the Header over adjacent preview blocks) but stays\n    // anchored to the viewport while the nearest scroll ancestor scrolls.\n    'ds:sticky ds:inset-block-start-0 ds:z-[var(--z-sticky)]',\n    'ds:bg-[var(--background)]',\n    'ds:text-[color:var(--foreground)]',\n    // Shadow recipe follows `Brand/Shadows` — one tier between states, never\n    // two. Resting: flat, no shadow. Scrolled: --shadow-md (tooltip/menu tier)\n    // paired with a 1-px --border so elevation still reads without the shadow\n    // in forced-colors / print, where UAs strip box-shadow. Transition is\n    // gated on `motion-reduce` so users opting out of motion still get the\n    // static elevation without animated lift.\n    'ds:transition-[border-color,box-shadow] ds:motion-reduce:transition-none',\n    'ds:border-block-end ds:border-transparent',\n    'ds:data-[scrolled=true]:border-[color:var(--border)]',\n    'ds:data-[scrolled=true]:shadow-[var(--shadow-md)]',\n    // Windows HCM: always show the border — forced-colors strips box-shadow\n    // entirely, so the border is the only separation cue the user gets.\n    'ds:forced-colors:border-[color:CanvasText]',\n    // Print: strip shadow, keep border so the header still reads as a\n    // bounded surface on paper.\n    'ds:print:shadow-none ds:print:border-[color:var(--border)]',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        // Brand surface — primary-tinted background with primary-foreground\n        // ink. Token rescopes are narrowed to `start` + `end` slots so chrome\n        // (IconButton outline border, Logo monochrome, focus rings) re-tints\n        // automatically. The `center` slot is excluded because SearchBar paints\n        // its own `var(--background)` surface and must keep the document's\n        // --foreground / --muted-foreground for its icon, placeholder, border,\n        // kbd chip, and hover state.\n        //\n        // Contrast: --primary-foreground (#fff) over --primary (violet-500) is\n        // 4.6:1 — passes WCAG AA for normal text. Muted-foreground is also set\n        // to pure primary-foreground so any muted text in the header clears AA.\n        //\n        // Dark-mode override: in dark mode --primary is magenta-500 — using it\n        // as the full-width header surface puts a hot-pink bar at the top of\n        // every page, which the Apr 2026 brand guide's own dark mockups never\n        // do (fuchsia is reserved for CTAs). We shift the header bg to\n        // --background (blue-500) in dark so the header blends with the Dark\n        // Blue brand surface at the same level as the Sidebar; separation\n        // from the main canvas (which we offset to blue-700) is carried by\n        // the existing scroll-shadow + border. White --primary-foreground ink\n        // on blue-500 clears AAA (~12.8:1).\n        brand: [\n          'ds:bg-[var(--primary)] ds:text-[color:var(--primary-foreground)]',\n          'ds:[.theme-dark_&]:bg-[var(--background)]',\n          'ds:[&_[data-header-slot=start]]:[--foreground:var(--primary-foreground)]',\n          'ds:[&_[data-header-slot=start]]:[--muted-foreground:var(--primary-foreground)]',\n          'ds:[&_[data-header-slot=start]]:[--border:color-mix(in_srgb,var(--primary-foreground)_40%,transparent)]',\n          'ds:[&_[data-header-slot=start]]:[--muted:color-mix(in_srgb,var(--primary-foreground)_16%,transparent)]',\n          'ds:[&_[data-header-slot=start]]:[--ring:var(--primary-foreground)]',\n          'ds:[&_[data-header-slot=end]]:[--foreground:var(--primary-foreground)]',\n          'ds:[&_[data-header-slot=end]]:[--muted-foreground:var(--primary-foreground)]',\n          'ds:[&_[data-header-slot=end]]:[--border:color-mix(in_srgb,var(--primary-foreground)_40%,transparent)]',\n          'ds:[&_[data-header-slot=end]]:[--muted:color-mix(in_srgb,var(--primary-foreground)_16%,transparent)]',\n          'ds:[&_[data-header-slot=end]]:[--ring:var(--primary-foreground)]',\n        ].join(' '),\n        // Light surface — plain page background with primary-coloured chrome.\n        // Start + end slots rescope --foreground, --border, --ring to --primary\n        // so IconButton borders/icons render in the brand hue while the\n        // HeaderBrand wordmark keeps its bicolor artwork and the SearchBar\n        // (center slot) is untouched.\n        light: [\n          'ds:bg-[var(--background)] ds:text-[color:var(--foreground)]',\n          'ds:[&_[data-header-slot=start]]:[--foreground:var(--primary)]',\n          'ds:[&_[data-header-slot=start]]:[--border:var(--primary)]',\n          'ds:[&_[data-header-slot=start]]:[--ring:var(--primary)]',\n          'ds:[&_[data-header-slot=end]]:[--foreground:var(--primary)]',\n          'ds:[&_[data-header-slot=end]]:[--border:var(--primary)]',\n          'ds:[&_[data-header-slot=end]]:[--ring:var(--primary)]',\n        ].join(' '),\n      },\n    },\n    defaultVariants: {\n      variant: 'brand',\n    },\n  },\n);\n\nconst innerVariants = cva(\n  [\n    'ds:flex ds:items-center ds:gap-[var(--spacing-sm)]',\n    'ds:w-full ds:h-full',\n    'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n  ].join(' '),\n);\n\nconst slotStartVariants = cva('ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]');\nconst slotCenterVariants = cva(\n  'ds:hidden ds:md:flex ds:flex-1 ds:min-w-0 ds:items-center ds:justify-center ds:gap-[var(--spacing-sm)]',\n);\nconst slotEndVariants = cva('ds:ms-auto ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]');\n\nconst brandVariants = cva(\n  [\n    'ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]',\n    'ds:text-[length:var(--font-size-base)] ds:font-[var(--font-weight-semibold)]',\n    // `leading-none` zeros the anchor's line-height so the Logo SVG sits at\n    // the geometric centre of the flex cross-axis — otherwise the residual\n    // line-box above ascenders / below descenders nudges the SVG upward.\n    'ds:leading-none',\n    // Inherit foreground from the Header root so the `brand` variant's\n    // --primary-foreground ink cascades here without an override prop.\n    'ds:text-[color:currentColor]',\n    'ds:no-underline',\n    'ds:rounded-[var(--radius-sm)]',\n    'ds:focus-visible:outline-[length:var(--focus-ring-width)]',\n    'ds:focus-visible:outline-solid',\n    'ds:focus-visible:outline-[color:var(--ring)]',\n    'ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n    'ds:forced-colors:focus-visible:outline-[CanvasText]',\n    'ds:min-h-[var(--min-target-size)]',\n  ].join(' '),\n);\n\nconst brandDividerVariants = cva(\n  [\n    'ds:hidden ds:md:inline-block',\n    'ds:border-inline-start ds:border-[color:var(--border)]',\n    'ds:self-stretch ds:my-[var(--spacing-xs)]',\n  ].join(' '),\n);\n\nconst skipLinkVariants = cva(\n  [\n    'ds:sr-only ds:focus:not-sr-only',\n    'ds:focus:absolute ds:focus:inset-inline-start-[var(--spacing-sm)] ds:focus:inset-block-start-[var(--spacing-sm)]',\n    'ds:focus:z-[calc(var(--z-sticky)+1)]',\n    'ds:focus:ps-[var(--spacing-sm)] ds:focus:pe-[var(--spacing-sm)] ds:focus:pbs-[var(--spacing-xs)] ds:focus:pbe-[var(--spacing-xs)]',\n    'ds:focus:bg-[var(--background)] ds:focus:text-[color:var(--foreground)]',\n    'ds:focus:border ds:focus:border-[color:var(--border)]',\n    'ds:focus:rounded-[var(--radius-sm)]',\n    'ds:focus:outline-[length:var(--focus-ring-width)] ds:focus:outline-solid ds:focus:outline-[color:var(--ring)]',\n    'ds:forced-colors:focus:outline-[CanvasText]',\n  ].join(' '),\n);\n\n/* ------------------------------------------------------------------ */\n/* Root                                                                 */\n/* ------------------------------------------------------------------ */\n\nexport interface HeaderProps\n  extends Omit<HTMLAttributes<HTMLElement>, 'role' | 'children'>,\n    VariantProps<typeof rootVariants> {\n  children: ReactNode;\n  /** Override the default landmark name. */\n  'aria-label'?: string;\n  /** Enable the scroll-linked border + shadow (default `true`). */\n  scrollLinkedElevation?: boolean;\n}\n\nexport const Header = forwardRef<HTMLElement, HeaderProps>(\n  (\n    {\n      variant = 'brand',\n      className,\n      children,\n      scrollLinkedElevation = true,\n      'aria-label': ariaLabel,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n    const label = ariaLabel ?? t('navigation.header.label', 'Page header');\n\n    /* ---- Scroll-linked border / shadow ---------------------------- */\n    const sentinelRef = useRef<HTMLDivElement | null>(null);\n    const [scrolled, setScrolled] = useState(false);\n    useEffect(() => {\n      if (!scrollLinkedElevation) return undefined;\n      const sentinel = sentinelRef.current;\n      if (!sentinel) return undefined;\n      if (typeof IntersectionObserver === 'undefined') return undefined;\n      const io = new IntersectionObserver(\n        (entries) => {\n          const entry = entries[0];\n          // When the sentinel scrolls out of view (isIntersecting=false),\n          // the user has scrolled past the top — flip the elevation on.\n          setScrolled(!entry.isIntersecting);\n        },\n        { threshold: 0 },\n      );\n      io.observe(sentinel);\n      return () => io.disconnect();\n    }, [scrollLinkedElevation]);\n\n    return (\n      <>\n        {/* 1px sentinel above the sticky header so the IntersectionObserver\n            fires when the user scrolls past the top. Kept outside the\n            <header> so it doesn't affect landmark semantics. */}\n        {scrollLinkedElevation ? (\n          <div\n            ref={sentinelRef}\n            aria-hidden=\"true\"\n            className=\"ds:block ds:h-px ds:w-full\"\n          />\n        ) : null}\n        <header\n          ref={ref}\n          role=\"banner\"\n          aria-label={label}\n          data-scrolled={scrolled ? 'true' : undefined}\n          className={rootVariants({ variant, className })}\n          {...rest}\n        >\n          <div className={innerVariants()}>{children}</div>\n        </header>\n      </>\n    );\n  },\n);\nHeader.displayName = 'Header';\n\n/* ------------------------------------------------------------------ */\n/* Slot wrappers                                                        */\n/* ------------------------------------------------------------------ */\n\nexport const HeaderStart = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-header-slot=\"start\"\n      className={[slotStartVariants(), className].filter(Boolean).join(' ')}\n      {...props}\n    />\n  ),\n);\nHeaderStart.displayName = 'HeaderStart';\n\nexport const HeaderCenter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-header-slot=\"center\"\n      className={[slotCenterVariants(), className].filter(Boolean).join(' ')}\n      {...props}\n    />\n  ),\n);\nHeaderCenter.displayName = 'HeaderCenter';\n\nexport const HeaderEnd = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-header-slot=\"end\"\n      className={[slotEndVariants(), className].filter(Boolean).join(' ')}\n      {...props}\n    />\n  ),\n);\nHeaderEnd.displayName = 'HeaderEnd';\n\n/* ------------------------------------------------------------------ */\n/* Brand                                                                */\n/* ------------------------------------------------------------------ */\n\nexport interface HeaderBrandProps\n  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {\n  /** Logo slot — an <svg> / <img>. Must carry its own accessible name via aria-label on the wrapping component OR a visible wordmark child. */\n  logo?: ReactNode;\n  /** Visible wordmark / product name. Sits after the logo. */\n  children?: ReactNode;\n  /** Destination href. Defaults to \"/\". */\n  href?: string;\n}\n\nexport const HeaderBrand = forwardRef<HTMLAnchorElement, HeaderBrandProps>(\n  ({ logo, children, href = '/', className, ...props }, ref) => {\n    if (import.meta.env.DEV && !props['aria-label'] && !children) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'HeaderBrand: pass `aria-label` or visible children — a logo-only brand link without a name has no accessible name.',\n      );\n    }\n    return (\n      <a\n        ref={ref}\n        href={href}\n        className={[brandVariants(), className].filter(Boolean).join(' ')}\n        {...props}\n      >\n        {logo ? (\n          <span aria-hidden={children ? 'true' : undefined} className=\"ds:inline-flex ds:items-center\">\n            {logo}\n          </span>\n        ) : null}\n        {children ? <span className=\"ds:truncate\">{children}</span> : null}\n      </a>\n    );\n  },\n);\nHeaderBrand.displayName = 'HeaderBrand';\n\n/* ------------------------------------------------------------------ */\n/* Brand divider                                                        */\n/* ------------------------------------------------------------------ */\n\nexport function HeaderBrandDivider({\n  className,\n  ...props\n}: HTMLAttributes<HTMLSpanElement>): ReactNode {\n  return (\n    <span\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={[brandDividerVariants(), className].filter(Boolean).join(' ')}\n      {...props}\n    />\n  );\n}\n\n/* ------------------------------------------------------------------ */\n/* Menu button (mobile drawer trigger)                                  */\n/* ------------------------------------------------------------------ */\n\nexport interface HeaderMenuButtonProps {\n  onMenuOpen: () => void;\n  'aria-label'?: string;\n  className?: string;\n}\n\nexport const HeaderMenuButton = forwardRef<HTMLButtonElement, HeaderMenuButtonProps>(\n  ({ onMenuOpen, 'aria-label': ariaLabel, className }, ref) => {\n    const { t } = useTranslation();\n    return (\n      <IconButton\n        ref={ref}\n        // Show on mobile; hide above md breakpoint.\n        className={['ds:md:hidden', className].filter(Boolean).join(' ')}\n        icon={<Menu aria-hidden />}\n        aria-label={ariaLabel ?? t('navigation.sidebar.open', 'Open menu')}\n        onClick={onMenuOpen}\n      />\n    );\n  },\n);\nHeaderMenuButton.displayName = 'HeaderMenuButton';\n\n/* ------------------------------------------------------------------ */\n/* SkipLink                                                             */\n/* ------------------------------------------------------------------ */\n\nexport interface HeaderSkipLinkProps\n  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {\n  href: string;\n  children?: ReactNode;\n}\n\nexport const HeaderSkipLink = forwardRef<HTMLAnchorElement, HeaderSkipLinkProps>(\n  ({ href, children, className, ...props }, ref) => {\n    const { t } = useTranslation();\n    return (\n      <a\n        ref={ref}\n        href={href}\n        className={[skipLinkVariants(), className].filter(Boolean).join(' ')}\n        {...props}\n      >\n        {children ?? t('navigation.nav.skipToContent', 'Skip to content')}\n      </a>\n    );\n  },\n);\nHeaderSkipLink.displayName = 'HeaderSkipLink';\n"],"names":["__iconNode","Menu","createLucideIcon","rootVariants","cva","innerVariants","slotStartVariants","slotCenterVariants","slotEndVariants","brandVariants","brandDividerVariants","skipLinkVariants","Header","forwardRef","variant","className","children","scrollLinkedElevation","ariaLabel","rest","ref","t","useTranslation","label","sentinelRef","useRef","scrolled","setScrolled","useState","useEffect","sentinel","io","entries","entry","jsxs","Fragment","jsx","HeaderStart","props","HeaderCenter","HeaderEnd","HeaderBrand","logo","href","HeaderBrandDivider","HeaderMenuButton","onMenuOpen","IconButton","HeaderSkipLink"],"mappings":";;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA,MAAMA,IAAa;AAAA,EACjB,CAAC,QAAQ,EAAE,GAAG,WAAW,KAAK,SAAQ,CAAE;AAAA,EACxC,CAAC,QAAQ,EAAE,GAAG,YAAY,KAAK,SAAQ,CAAE;AAAA,EACzC,CAAC,QAAQ,EAAE,GAAG,YAAY,KAAK,SAAQ,CAAE;AAC3C,GACMC,IAAOC,EAAiB,QAAQF,CAAU,GCI1CG,IAAeC;AAAA,EACnB;AAAA,IACE;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA;AAAA,IAGA;AAAA,EAAA,EACA,KAAK,GAAG;AAAA,EACV;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAsBP,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA,EACA,KAAK,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMV,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA,EACA,KAAK,GAAG;AAAA,MAAA;AAAA,IACZ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAEMC,IAAgBD;AAAA,EACpB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EACA,KAAK,GAAG;AACZ,GAEME,IAAoBF,EAAI,2DAA2D,GACnFG,IAAqBH;AAAA,EACzB;AACF,GACMI,IAAkBJ,EAAI,sEAAsE,GAE5FK,IAAgBL;AAAA,EACpB;AAAA,IACE;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EACA,KAAK,GAAG;AACZ,GAEMM,IAAuBN;AAAA,EAC3B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EACA,KAAK,GAAG;AACZ,GAEMO,IAAmBP;AAAA,EACvB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EACA,KAAK,GAAG;AACZ,GAgBaQ,IAASC;AAAA,EACpB,CACE;AAAA,IACE,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,uBAAAC,IAAwB;AAAA,IACxB,cAAcC;AAAA,IACd,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IAAQL,KAAaG,EAAE,2BAA2B,aAAa,GAG/DG,IAAcC,EAA8B,IAAI,GAChD,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK;AAC9C,WAAAC,EAAU,MAAM;AACd,UAAI,CAACZ,EAAuB;AAC5B,YAAMa,IAAWN,EAAY;AAE7B,UADI,CAACM,KACD,OAAO,uBAAyB,IAAa;AACjD,YAAMC,IAAK,IAAI;AAAA,QACb,CAACC,MAAY;AACX,gBAAMC,IAAQD,EAAQ,CAAC;AAGvB,UAAAL,EAAY,CAACM,EAAM,cAAc;AAAA,QACnC;AAAA,QACA,EAAE,WAAW,EAAA;AAAA,MAAE;AAEjB,aAAAF,EAAG,QAAQD,CAAQ,GACZ,MAAMC,EAAG,WAAA;AAAA,IAClB,GAAG,CAACd,CAAqB,CAAC,GAGxB,gBAAAiB,EAAAC,GAAA,EAIG,UAAA;AAAA,MAAAlB,IACC,gBAAAmB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKZ;AAAA,UACL,eAAY;AAAA,UACZ,WAAU;AAAA,QAAA;AAAA,MAAA,IAEV;AAAA,MACJ,gBAAAY;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAAhB;AAAA,UACA,MAAK;AAAA,UACL,cAAYG;AAAA,UACZ,iBAAeG,IAAW,SAAS;AAAA,UACnC,WAAWvB,EAAa,EAAE,SAAAW,GAAS,WAAAC,GAAW;AAAA,UAC7C,GAAGI;AAAA,UAEJ,4BAAC,OAAA,EAAI,WAAWd,EAAA,GAAkB,UAAAW,GAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAC7C,GACF;AAAA,EAEJ;AACF;AACAJ,EAAO,cAAc;AAMd,MAAMyB,IAAcxB;AAAA,EACzB,CAAC,EAAE,WAAAE,GAAW,GAAGuB,EAAA,GAASlB,MACxB,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAhB;AAAA,MACA,oBAAiB;AAAA,MACjB,WAAW,CAACd,EAAA,GAAqBS,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACnE,GAAGuB;AAAA,IAAA;AAAA,EAAA;AAGV;AACAD,EAAY,cAAc;AAEnB,MAAME,IAAe1B;AAAA,EAC1B,CAAC,EAAE,WAAAE,GAAW,GAAGuB,EAAA,GAASlB,MACxB,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAhB;AAAA,MACA,oBAAiB;AAAA,MACjB,WAAW,CAACb,EAAA,GAAsBQ,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACpE,GAAGuB;AAAA,IAAA;AAAA,EAAA;AAGV;AACAC,EAAa,cAAc;AAEpB,MAAMC,IAAY3B;AAAA,EACvB,CAAC,EAAE,WAAAE,GAAW,GAAGuB,EAAA,GAASlB,MACxB,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAhB;AAAA,MACA,oBAAiB;AAAA,MACjB,WAAW,CAACZ,EAAA,GAAmBO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACjE,GAAGuB;AAAA,IAAA;AAAA,EAAA;AAGV;AACAE,EAAU,cAAc;AAgBjB,MAAMC,IAAc5B;AAAA,EACzB,CAAC,EAAE,MAAA6B,GAAM,UAAA1B,GAAU,MAAA2B,IAAO,KAAK,WAAA5B,GAAW,GAAGuB,EAAA,GAASlB,MAQlD,gBAAAc;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAd;AAAA,MACA,MAAAuB;AAAA,MACA,WAAW,CAAClC,EAAA,GAAiBM,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC/D,GAAGuB;AAAA,MAEH,UAAA;AAAA,QAAAI,IACC,gBAAAN,EAAC,UAAK,eAAapB,IAAW,SAAS,QAAW,WAAU,kCACzD,UAAA0B,EAAA,CACH,IACE;AAAA,QACH1B,sBAAY,QAAA,EAAK,WAAU,eAAe,UAAAA,EAAA,CAAS,IAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAItE;AACAyB,EAAY,cAAc;AAMnB,SAASG,EAAmB;AAAA,EACjC,WAAA7B;AAAA,EACA,GAAGuB;AACL,GAA+C;AAC7C,SACE,gBAAAF;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,CAAC1B,EAAA,GAAwBK,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACtE,GAAGuB;AAAA,IAAA;AAAA,EAAA;AAGV;AAYO,MAAMO,IAAmBhC;AAAA,EAC9B,CAAC,EAAE,YAAAiC,GAAY,cAAc5B,GAAW,WAAAH,EAAA,GAAaK,MAAQ;AAC3D,UAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA;AACd,WACE,gBAAAc;AAAA,MAACW;AAAA,MAAA;AAAA,QACC,KAAA3B;AAAA,QAEA,WAAW,CAAC,gBAAgBL,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QAC/D,MAAM,gBAAAqB,EAACnC,GAAA,EAAK,eAAW,IAAC;AAAA,QACxB,cAAYiB,KAAaG,EAAE,2BAA2B,WAAW;AAAA,QACjE,SAASyB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGf;AACF;AACAD,EAAiB,cAAc;AAYxB,MAAMG,IAAiBnC;AAAA,EAC5B,CAAC,EAAE,MAAA8B,GAAM,UAAA3B,GAAU,WAAAD,GAAW,GAAGuB,EAAA,GAASlB,MAAQ;AAChD,UAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA;AACd,WACE,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAhB;AAAA,QACA,MAAAuB;AAAA,QACA,WAAW,CAAChC,EAAA,GAAoBI,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QAClE,GAAGuB;AAAA,QAEH,UAAAtB,KAAYK,EAAE,gCAAgC,iBAAiB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGtE;AACF;AACA2B,EAAe,cAAc;","x_google_ignoreList":[0]}

package/dist/_chunks/icon-button-C482ii4y.js

@@ -0,0 +1,45 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { B as p } from "./button-DmiGFnNA.js";
+import { c as h } from "./index-D2ZczOXr.js";
+import { T as b } from "./tooltip-Dp3u8jGz.js";
+const B = h("ds:p-0", {
+  variants: {
+    size: {
+      sm: "ds:w-8 ds:h-8",
+      md: "ds:w-10 ds:h-10",
+      lg: "ds:w-12 ds:h-12"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), w = u(
+  ({ icon: e, size: s, intent: i = "outline", className: o, tooltip: a, flipIconInRtl: l = !1, ...r }, c) => {
+    const d = r["aria-label"] || a, m = s === "sm" ? "size-4" : s === "lg" ? "size-5" : "size-[18px]", f = l ? "rtl:rotate-180" : "", n = /* @__PURE__ */ t(
+      p,
+      {
+        ref: c,
+        size: s,
+        intent: i,
+        className: B({ size: s, className: o }),
+        "aria-label": d,
+        ...r,
+        children: /* @__PURE__ */ t(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: `ds:inline-flex ds:items-center ds:justify-center ${m} ${f}`.trim(),
+            children: e
+          }
+        )
+      }
+    );
+    return a ? /* @__PURE__ */ t(b, { label: a, children: n }) : n;
+  }
+);
+w.displayName = "IconButton";
+export {
+  w as I
+};
+//# sourceMappingURL=icon-button-C482ii4y.js.map

package/dist/_chunks/icon-button-C482ii4y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button-C482ii4y.js","sources":["../../src/components/button/icon-button.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { Button, type ButtonProps } from './button';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Tooltip } from '../tooltip';\n\nconst iconButtonVariants = cva('ds:p-0', {\n  variants: {\n    size: {\n      sm: 'ds:w-8 ds:h-8',\n      md: 'ds:w-10 ds:h-10',\n      lg: 'ds:w-12 ds:h-12',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nexport type IconButtonProps = Omit<\n  ButtonProps,\n  'startIcon' | 'endIcon' | 'children' | 'size' | 'flipIconInRtl'\n> &\n  VariantProps<typeof iconButtonVariants> & {\n    icon: React.ReactNode;\n    tooltip?: string;\n    'aria-label'?: string;\n    /**\n     * Mirror the icon horizontally in RTL. Default `false` — only enable\n     * for directional glyphs (arrows, chevrons). See Button.flipIconInRtl.\n     */\n    flipIconInRtl?: boolean;\n  };\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    { icon, size, intent = 'outline', className, tooltip, flipIconInRtl = false, ...props },\n    ref,\n  ) => {\n    const ariaLabel = props['aria-label'] || tooltip;\n\n    if (import.meta.env.DEV && !ariaLabel) {\n      console.warn('IconButton: aria-label or tooltip prop is required for accessibility.');\n    }\n\n    const iconSizeClass =\n      size === 'sm' ? 'size-4' : size === 'lg' ? 'size-5' : 'size-[18px]';\n    const iconFlipClass = flipIconInRtl ? 'rtl:rotate-180' : '';\n\n    const button = (\n      <Button\n        ref={ref}\n        size={size}\n        intent={intent}\n        className={iconButtonVariants({ size, className })}\n        aria-label={ariaLabel}\n        {...props}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={`ds:inline-flex ds:items-center ds:justify-center ${iconSizeClass} ${iconFlipClass}`.trim()}\n        >\n          {icon}\n        </span>\n      </Button>\n    );\n\n    if (tooltip) {\n      return <Tooltip label={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n  },\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["iconButtonVariants","cva","IconButton","forwardRef","icon","size","intent","className","tooltip","flipIconInRtl","props","ref","ariaLabel","iconSizeClass","iconFlipClass","button","jsx","Button","Tooltip"],"mappings":";;;;;AAKA,MAAMA,IAAqBC,EAAI,UAAU;AAAA,EACvC,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC,GAiBYC,IAAaC;AAAA,EACxB,CACE,EAAE,MAAAC,GAAM,MAAAC,GAAM,QAAAC,IAAS,WAAW,WAAAC,GAAW,SAAAC,GAAS,eAAAC,IAAgB,IAAO,GAAGC,EAAA,GAChFC,MACG;AACH,UAAMC,IAAYF,EAAM,YAAY,KAAKF,GAMnCK,IACJR,MAAS,OAAO,WAAWA,MAAS,OAAO,WAAW,eAClDS,IAAgBL,IAAgB,mBAAmB,IAEnDM,IACJ,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAN;AAAA,QACA,MAAAN;AAAA,QACA,QAAAC;AAAA,QACA,WAAWN,EAAmB,EAAE,MAAAK,GAAM,WAAAE,GAAW;AAAA,QACjD,cAAYK;AAAA,QACX,GAAGF;AAAA,QAEJ,UAAA,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAW,oDAAoDH,CAAa,IAAIC,CAAa,GAAG,KAAA;AAAA,YAE/F,UAAAV;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAIJ,WAAII,sBACMU,GAAA,EAAQ,OAAOV,GAAU,UAAAO,GAAO,IAGnCA;AAAA,EACT;AACF;AAEAb,EAAW,cAAc;"}