@alfadocs/ui-kit-debug 0.1.8

package/dist/_chunks/header-BGn1mRp8.js

@@ -0,0 +1,311 @@
+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-Wnnde5lc.js";
+import { c as w } from "./createLucideIcon-CrFbzy84.js";
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+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 = o(
+  [
+    "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.
+    "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.
+    "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.
+    "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.
+    "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.
+    "ds:forced-colors:border-[color:CanvasText]",
+    // Print: strip shadow, keep border so the header still reads as a
+    // bounded surface on paper.
+    "ds:print:shadow-none ds:print:border-[color:var(--border)]"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        // Brand surface — primary-tinted background with primary-foreground
+        // ink. Token rescopes are narrowed to `start` + `end` slots so chrome
+        // (IconButton outline border, Logo monochrome, focus rings) re-tints
+        // automatically. The `center` slot is excluded because SearchBar paints
+        // its own `var(--background)` surface and must keep the document's
+        // --foreground / --muted-foreground for its icon, placeholder, border,
+        // kbd chip, and hover state.
+        //
+        // Contrast: --primary-foreground (#fff) over --primary (violet-500) is
+        // 4.6:1 — passes WCAG AA for normal text. Muted-foreground is also set
+        // to pure primary-foreground so any muted text in the header clears AA.
+        //
+        // Dark-mode override: in dark mode --primary is magenta-500 — using it
+        // as the full-width header surface puts a hot-pink bar at the top of
+        // every page, which the Apr 2026 brand guide's own dark mockups never
+        // do (fuchsia is reserved for CTAs). We shift the header bg to
+        // --background (blue-500) in dark so the header blends with the Dark
+        // Blue brand surface at the same level as the Sidebar; separation
+        // from the main canvas (which we offset to blue-700) is carried by
+        // the existing scroll-shadow + border. White --primary-foreground ink
+        // on blue-500 clears AAA (~12.8:1).
+        brand: [
+          "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
+        // so IconButton borders/icons render in the brand hue while the
+        // HeaderBrand wordmark keeps its bicolor artwork and the SearchBar
+        // (center slot) is untouched.
+        light: [
+          "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(" ")
+      }
+    },
+    defaultVariants: {
+      variant: "brand"
+    }
+  }
+), S = o(
+  [
+    "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 = 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(
+  [
+    "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.
+    "ds:leading-none",
+    // Inherit foreground from the Header root so the `brand` variant's
+    // --primary-foreground ink cascades here without an override prop.
+    "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 = o(
+  [
+    "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 = o(
+  [
+    "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 = t(
+  ({
+    variant: e = "brand",
+    className: r,
+    children: a,
+    scrollLinkedElevation: d = !0,
+    "aria-label": n,
+    ...i
+  }, v) => {
+    const { t: p } = l(), g = n ?? p("navigation.header.label", "Page header"), c = k(null), [b, h] = N(!1);
+    return j(() => {
+      if (!d) return;
+      const u = c.current;
+      if (!u || typeof IntersectionObserver > "u") return;
+      const f = new IntersectionObserver(
+        (y) => {
+          const x = y[0];
+          h(!x.isIntersecting);
+        },
+        { threshold: 0 }
+      );
+      return f.observe(u), () => f.disconnect();
+    }, [d]), /* @__PURE__ */ m(_, { children: [
+      d ? /* @__PURE__ */ s(
+        "div",
+        {
+          ref: c,
+          "aria-hidden": "true",
+          className: "ds:block ds:h-px ds:w-full"
+        }
+      ) : null,
+      /* @__PURE__ */ s(
+        "header",
+        {
+          ref: v,
+          role: "banner",
+          "aria-label": g,
+          "data-component": "header",
+          "data-scrolled": b ? "true" : void 0,
+          className: V({ variant: e, className: r }),
+          ...i,
+          children: /* @__PURE__ */ s("div", { className: S(), children: a })
+        }
+      )
+    ] });
+  }
+);
+D.displayName = "Header";
+const E = t(
+  ({ className: e, ...r }, a) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: a,
+      "data-header-slot": "start",
+      className: [z(), e].filter(Boolean).join(" "),
+      ...r
+    }
+  )
+);
+E.displayName = "HeaderStart";
+const L = t(
+  ({ className: e, ...r }, a) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: a,
+      "data-header-slot": "center",
+      className: [I(), e].filter(Boolean).join(" "),
+      ...r
+    }
+  )
+);
+L.displayName = "HeaderCenter";
+const F = t(
+  ({ className: e, ...r }, a) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: a,
+      "data-header-slot": "end",
+      className: [M(), e].filter(Boolean).join(" "),
+      ...r
+    }
+  )
+);
+F.displayName = "HeaderEnd";
+const P = t(
+  ({ logo: e, children: r, href: a = "/", className: d, ...n }, i) => /* @__PURE__ */ m(
+    "a",
+    {
+      ref: i,
+      href: a,
+      className: [T(), d].filter(Boolean).join(" "),
+      ...n,
+      children: [
+        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
+      ]
+    }
+  )
+);
+P.displayName = "HeaderBrand";
+function X({
+  className: e,
+  ...r
+}) {
+  return /* @__PURE__ */ s(
+    "span",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      className: [O(), e].filter(Boolean).join(" "),
+      ...r
+    }
+  );
+}
+const q = t(
+  ({ onMenuOpen: e, "aria-label": r, className: a }, d) => {
+    const { t: n } = l();
+    return /* @__PURE__ */ s(
+      H,
+      {
+        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 = t(
+  ({ href: e, children: r, className: a, ...d }, n) => {
+    const { t: i } = l();
+    return /* @__PURE__ */ s(
+      "a",
+      {
+        ref: n,
+        href: e,
+        className: [R(), a].filter(Boolean).join(" "),
+        ...d,
+        children: r ?? i("navigation.nav.skipToContent", "Skip to content")
+      }
+    );
+  }
+);
+A.displayName = "HeaderSkipLink";
+export {
+  D as H,
+  P as a,
+  X as b,
+  L as c,
+  F as d,
+  q as e,
+  A as f,
+  E as g
+};
+//# sourceMappingURL=header-BGn1mRp8.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-BGn1mRp8.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-component=\"header\"\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":"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","x_google_ignoreList":[0]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button-Wnnde5lc.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' ? 'ds:size-4' : size === 'lg' ? 'ds:size-5' : 'ds:size-[18px]';\n    const iconFlipClass = flipIconInRtl ? 'ds: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        data-component=\"icon-button\"\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,cAAcA,MAAS,OAAO,cAAc,kBACxDS,IAAgBL,IAAgB,sBAAsB,IAEtDM,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,QACZ,kBAAe;AAAA,QACd,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;"}

package/dist/_chunks/icon-button-group-DeV3FpNY.js

@@ -0,0 +1,205 @@
+import { jsx as Z } from "react/jsx-runtime";
+import { forwardRef as _, useState as x, useCallback as D, useRef as j, useLayoutEffect as $, Children as ee, isValidElement as te, cloneElement as oe } from "react";
+import { c as re } from "./index-D2ZczOXr.js";
+const ne = re(
+  [
+    "ds:inline-flex ds:isolate",
+    // Hairline border around the group unifies the children into one
+    // visual unit. Internal child dividers are drawn via the per-child
+    // class list below.
+    "ds:border ds:border-border",
+    "ds:rounded-[var(--radius-md)]",
+    // Ensure the focus ring of a pressed child sits above its siblings.
+    "ds:[&>*]:relative ds:[&>*:focus-visible]:z-10"
+  ].join(" "),
+  {
+    variants: {
+      orientation: {
+        horizontal: [
+          "ds:flex-row",
+          // Flatten internal corners on children so the outer radius owns
+          // the rounded edges.
+          "ds:[&>*:not(:first-child)]:rounded-s-none",
+          "ds:[&>*:not(:last-child)]:rounded-e-none",
+          // Internal divider — logical so it flips in RTL.
+          "ds:[&>*:not(:first-child)]:border-s",
+          "ds:[&>*:not(:first-child)]:border-border",
+          // The children already own an outer border (from IconButton's
+          // own border in secondary/outline variants). Collapse the doubled
+          // border so we don't get a 2px seam.
+          "ds:[&>*]:border-0"
+        ].join(" "),
+        vertical: [
+          "ds:flex-col",
+          // Vertical groups flow block-wise. Reading direction doesn't
+          // invert vertical stacks in any locale this DS targets, so the
+          // physical `rounded-t/b` is intentional.
+          "ds:[&>*:not(:first-child)]:rounded-t-none",
+          "ds:[&>*:not(:last-child)]:rounded-b-none",
+          "ds:[&>*:not(:first-child)]:border-t",
+          "ds:[&>*:not(:first-child)]:border-border",
+          "ds:[&>*]:border-0"
+        ].join(" ")
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+), ie = _(
+  (s, g) => {
+    const {
+      size: b,
+      orientation: u = "horizontal",
+      role: l = "group",
+      mode: n = "momentary",
+      disabled: T = !1,
+      intent: F = "outline",
+      className: G,
+      children: N,
+      "aria-label": S,
+      "aria-labelledby": H,
+      ...M
+    } = s, [z, L] = x(
+      () => n === "toggle-single" ? s.defaultValue ?? "" : n === "toggle-multi" ? s.defaultValue ?? [] : ""
+    ), A = (() => {
+      if (n === "toggle-single") {
+        const e = s;
+        return e.value !== void 0 ? e.value : z;
+      }
+      if (n === "toggle-multi") {
+        const e = s;
+        return e.value !== void 0 ? e.value : z;
+      }
+      return "";
+    })(), y = D(
+      (e) => {
+        var t, r;
+        if (n === "toggle-single") {
+          const o = s;
+          o.value === void 0 && L(e), (t = o.onValueChange) == null || t.call(o, e);
+        } else if (n === "toggle-multi") {
+          const o = s;
+          o.value === void 0 && L(e), (r = o.onValueChange) == null || r.call(o, e);
+        }
+      },
+      [n, s]
+    ), h = l === "toolbar" || l === "radiogroup", v = j([]), [w, E] = x(0), O = D(
+      (e, t) => {
+        v.current[e] = t;
+      },
+      []
+    ), B = j(null), [C, U] = x(!1);
+    $(() => {
+      if (typeof window > "u") return;
+      const e = B.current;
+      if (!e) return;
+      const t = window.getComputedStyle(e).direction;
+      U(t === "rtl");
+    }, []);
+    const W = D(
+      (e) => {
+        var k;
+        if (!h) return;
+        const t = v.current.filter(Boolean).length;
+        if (t === 0) return;
+        const r = u === "vertical" ? "ArrowDown" : C ? "ArrowLeft" : "ArrowRight", o = u === "vertical" ? "ArrowUp" : C ? "ArrowRight" : "ArrowLeft";
+        let f = null;
+        if (e.key === r ? f = (w + 1) % t : e.key === o ? f = (w - 1 + t) % t : e.key === "Home" ? f = 0 : e.key === "End" && (f = t - 1), f === null) return;
+        const V = t;
+        let p = 0, a = f;
+        for (; p < V; ) {
+          const d = v.current[a];
+          if (d && d.getAttribute("aria-disabled") !== "true" && !d.disabled)
+            break;
+          a = e.key === o || e.key === "End" ? (a - 1 + t) % t : (a + 1) % t, p += 1;
+        }
+        if (e.preventDefault(), E(a), (k = v.current[a]) == null || k.focus(), l === "radiogroup" && n === "toggle-single") {
+          const d = P.current[a];
+          if (d && typeof d == "object" && "props" in d) {
+            const R = d.props.value;
+            R && y(R);
+          }
+        }
+      },
+      [h, u, C, w, l, n, y]
+    ), K = ee.toArray(N), P = j([]);
+    P.current = K;
+    const q = K.map((e, t) => {
+      if (!te(e))
+        return e;
+      const r = e, o = r.props.value, { ariaPressed: f, ariaChecked: V } = se(
+        n,
+        l,
+        o,
+        A
+      ), p = T === !0, a = r.props.disabled === !0, k = (c) => {
+        var i, m;
+        if (p) {
+          c.preventDefault(), c.stopPropagation();
+          return;
+        }
+        if ((m = (i = r.props).onClick) == null || m.call(i, c), !c.defaultPrevented && o) {
+          if (n === "toggle-single") {
+            if (A === o) return;
+            y(o);
+          } else if (n === "toggle-multi") {
+            const I = A, X = I.includes(o) ? I.filter((Y) => Y !== o) : [...I, o];
+            y(X);
+          }
+        }
+      }, d = (c) => {
+        O(t, c);
+        const i = r.ref;
+        typeof i == "function" ? i(c) : i != null && typeof i == "object" && (i.current = c);
+      }, R = p && !a ? !0 : void 0, J = n !== "momentary" || p, Q = {
+        intent: r.props.intent ?? F,
+        size: r.props.size ?? b,
+        disabled: a,
+        "aria-disabled": R,
+        onClick: J ? k : r.props.onClick,
+        "aria-pressed": f,
+        "aria-checked": V,
+        // When the group is a radiogroup, children must be `role="radio"`
+        // so screen readers announce them as radio buttons and so
+        // `getByRole('radio')` works in tests. The button element is
+        // re-purposed as a radio; `aria-checked` above carries the state.
+        role: l === "radiogroup" ? "radio" : void 0,
+        tabIndex: h ? t === w ? 0 : -1 : void 0,
+        onFocus: (c) => {
+          var i, m;
+          h && E(t), (m = (i = r.props).onFocus) == null || m.call(i, c);
+        },
+        ref: d
+      };
+      return oe(r, Q);
+    });
+    return /* @__PURE__ */ Z(
+      "div",
+      {
+        ref: (e) => {
+          B.current = e, typeof g == "function" ? g(e) : g && typeof g == "object" && (g.current = e);
+        },
+        role: l,
+        "aria-label": S,
+        "aria-labelledby": H,
+        "aria-orientation": l === "toolbar" ? u : void 0,
+        onKeyDown: W,
+        className: ne({ orientation: u, className: G }),
+        "data-component": "icon-button-group",
+        ...M,
+        children: q
+      }
+    );
+  }
+);
+ie.displayName = "IconButtonGroup";
+function se(s, g, b, u) {
+  if (s === "momentary" || !b) return {};
+  const l = s === "toggle-multi" ? u.includes(b) : u === b;
+  return g === "radiogroup" ? { ariaChecked: l } : { ariaPressed: l };
+}
+export {
+  ie as I
+};
+//# sourceMappingURL=icon-button-group-DeV3FpNY.js.map