@alfadocs/ui-kit-debug 0.71.0 → 0.72.0

package/dist/_chunks/nav-grid-gRudLsPX.js

@@ -0,0 +1,169 @@
+import { jsx as s, jsxs as x, Fragment as w } from "react/jsx-runtime";
+import { forwardRef as N, useMemo as l } from "react";
+import { c as p } from "./index-D2ZczOXr.js";
+import { L as C } from "./link-CPb_pZPr.js";
+import { u as G } from "./registry-DvAUVLHh.js";
+const I = {
+  id: "nav-grid",
+  capabilities: ["navigate"],
+  state: {
+    itemCount: {
+      type: "number",
+      descriptionKey: "ui.agent.navGrid.state.itemCount",
+      description: "Number of navigable tiles currently rendered in the grid.",
+      read: (d) => d.getItemCount()
+    }
+  },
+  actions: {
+    open_item: {
+      safety: "write",
+      openWorld: !1,
+      argsType: "{ id: string }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          id: {
+            type: "string",
+            description: "Stable opaque tile id (emitted as data-nav-item-id on each tile)."
+          }
+        },
+        required: ["id"]
+      },
+      descriptionKey: "ui.agent.navGrid.actions.openItem",
+      description: "Activate the tile with the given id (navigates or fires its select handler).",
+      examples: [
+        {
+          args: { id: "billing" },
+          note: 'Open the "billing" settings section.'
+        }
+      ],
+      invoke: (d, n) => {
+        d.openItem(n.id);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "nav-grid",
+      description: "Marks the NavGrid nav landmark."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop. Required to address a specific grid from the agent."
+    },
+    item: {
+      attr: "data-nav-item-id",
+      sourceProp: "item id",
+      description: "Stable opaque id of a tile, sourced from each item.id. open_item targets this attribute."
+    }
+  }
+}, S = p(
+  "ds:grid ds:list-none ds:m-0 ds:p-0 ds:gap-[var(--spacing-md)]",
+  {
+    variants: {
+      columns: {
+        // Responsive default: one column on mobile, two from sm, three from lg.
+        responsive: "ds:grid-cols-1 ds:sm:grid-cols-2 ds:lg:grid-cols-3",
+        1: "ds:grid-cols-1",
+        2: "ds:grid-cols-1 ds:sm:grid-cols-2",
+        3: "ds:grid-cols-1 ds:sm:grid-cols-2 ds:lg:grid-cols-3",
+        4: "ds:grid-cols-1 ds:sm:grid-cols-2 ds:lg:grid-cols-4"
+      }
+    },
+    defaultVariants: { columns: "responsive" }
+  }
+), c = p(
+  [
+    "ds:flex ds:flex-col ds:items-start ds:gap-[var(--spacing-xs)] ds:text-start",
+    "ds:h-full ds:w-full ds:min-h-[var(--min-target-size)] ds:p-[var(--spacing-md)]",
+    "ds:rounded-[var(--radius-lg)] ds:border ds:border-[color:var(--card-border)]",
+    "ds:[.theme-accessible_&]:border-2",
+    "ds:bg-[var(--card)] ds:text-[var(--card-foreground)] ds:no-underline",
+    "ds:transition-shadow ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:outline-none",
+    "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]"
+  ].join(" "),
+  {
+    variants: {
+      disabled: {
+        true: "ds:opacity-50 ds:cursor-not-allowed ds:pointer-events-none",
+        false: "ds:cursor-pointer ds:hover:shadow-[var(--shadow-hover)]"
+      }
+    },
+    defaultVariants: { disabled: !1 }
+  }
+);
+function u({ item: d }) {
+  return /* @__PURE__ */ x(w, { children: [
+    d.icon ? /* @__PURE__ */ s(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "ds:inline-flex ds:items-center ds:text-[var(--muted-foreground)] ds:[&_svg]:size-6",
+        children: d.icon
+      }
+    ) : null,
+    /* @__PURE__ */ s("span", { className: "type-body ds:font-medium ds:text-[var(--card-foreground)] ds:no-underline", children: d.label }),
+    d.description ? /* @__PURE__ */ s("span", { className: "type-body-sm ds:text-[var(--muted-foreground)] ds:no-underline", children: d.description }) : null
+  ] });
+}
+const k = N(function({ items: n, ariaLabel: g, columns: o, sort: a = "none", id: r, className: v }, f) {
+  const m = l(
+    () => a === "label" ? [...n].sort((e, i) => e.label.localeCompare(i.label)) : n,
+    [n, a]
+  ), b = l(
+    () => ({
+      getItemCount: () => n.length,
+      openItem: (e) => {
+        var t;
+        const i = n.find((y) => y.id === e);
+        !i || i.disabled || (i.href ? typeof window < "u" && (window.location.href = i.href) : (t = i.onSelect) == null || t.call(i));
+      }
+    }),
+    [n]
+  );
+  G(I, b, r);
+  const h = o === void 0 ? "responsive" : String(o);
+  return /* @__PURE__ */ s(
+    "nav",
+    {
+      ref: f,
+      id: r,
+      "aria-label": g,
+      "data-component": "nav-grid",
+      "data-component-id": r,
+      className: v,
+      children: /* @__PURE__ */ s("ul", { className: S({ columns: h }), children: m.map((e) => /* @__PURE__ */ s("li", { "data-nav-item-id": e.id, children: e.href !== void 0 ? /* @__PURE__ */ s(
+        C,
+        {
+          href: e.href,
+          intent: "subtle",
+          disabled: e.disabled,
+          className: c({ disabled: !!e.disabled }),
+          children: /* @__PURE__ */ s(u, { item: e })
+        }
+      ) : /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          onClick: e.disabled ? void 0 : e.onSelect,
+          disabled: e.disabled,
+          "aria-disabled": e.disabled || void 0,
+          className: c({ disabled: !!e.disabled }),
+          children: /* @__PURE__ */ s(u, { item: e })
+        }
+      ) }, e.id)) })
+    }
+  );
+});
+k.displayName = "NavGrid";
+export {
+  k as N,
+  I as n,
+  c as t
+};
+//# sourceMappingURL=nav-grid-gRudLsPX.js.map

package/dist/_chunks/nav-grid-gRudLsPX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-grid-gRudLsPX.js","sources":["../../src/components/nav-grid/nav-grid.agent.ts","../../src/components/nav-grid/nav-grid.tsx"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* Agent adapter — NavGrid.                                               */\n/*                                                                        */\n/* A responsive grid of navigable tiles (the composition primitive behind */\n/* a settings hub). It exposes the live tile count and lets an agent      */\n/* activate a tile by id — which either follows the tile's href or fires  */\n/* its select handler.                                                    */\n/*                                                                        */\n/* See `src/docs/26-agent-readiness.mdx` for the full contract.          */\n/* -------------------------------------------------------------------- */\n\nimport type { AgentAdapter } from '../../agent/types';\nimport type { NavGridHandle } from './nav-grid';\n\nexport const navGridAgent: AgentAdapter<NavGridHandle> = {\n  id: 'nav-grid',\n  capabilities: ['navigate'],\n  state: {\n    itemCount: {\n      type: 'number',\n      descriptionKey: 'ui.agent.navGrid.state.itemCount',\n      description: 'Number of navigable tiles currently rendered in the grid.',\n      read: (handle) => handle.getItemCount(),\n    },\n  },\n  actions: {\n    open_item: {\n      safety: 'write',\n      openWorld: false,\n      argsType: '{ id: string }',\n      argsSchema: {\n        type: 'object',\n        properties: {\n          id: {\n            type: 'string',\n            description:\n              'Stable opaque tile id (emitted as data-nav-item-id on each tile).',\n          },\n        },\n        required: ['id'],\n      },\n      descriptionKey: 'ui.agent.navGrid.actions.openItem',\n      description:\n        'Activate the tile with the given id (navigates or fires its select handler).',\n      examples: [\n        {\n          args: { id: 'billing' },\n          note: 'Open the \"billing\" settings section.',\n        },\n      ],\n      invoke: (handle, args: { id: string }) => {\n        handle.openItem(args.id);\n      },\n    },\n  },\n  domHooks: {\n    root: {\n      attr: 'data-component',\n      value: 'nav-grid',\n      description: 'Marks the NavGrid nav landmark.',\n    },\n    instanceId: {\n      attr: 'data-component-id',\n      sourceProp: 'id',\n      description:\n        'Sourced from the id prop. Required to address a specific grid from the agent.',\n    },\n    item: {\n      attr: 'data-nav-item-id',\n      sourceProp: 'item id',\n      description:\n        'Stable opaque id of a tile, sourced from each item.id. open_item targets this attribute.',\n    },\n  },\n};\n","import { forwardRef, useMemo, type ReactNode } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { Link } from '../link/link';\nimport { useAgentRegistration } from '../../agent';\nimport { navGridAgent } from './nav-grid.agent';\n\n/* ------------------------------------------------------------------ */\n/* Public types                                                        */\n/* ------------------------------------------------------------------ */\n\nexport interface NavGridItem {\n  /** Stable, opaque id. Emitted as `data-nav-item-id`; agents target it. */\n  id: string;\n  /** Localised tile label — supplied by the consumer (never bundled here). */\n  label: string;\n  /** Optional localised supporting text shown under the label. */\n  description?: string;\n  /** Decorative leading glyph. Rendered `aria-hidden`. */\n  icon?: ReactNode;\n  /** When set, the tile is a navigating anchor (kit Link). */\n  href?: string;\n  /** When `href` is absent, the tile is a button firing this handler. */\n  onSelect?: () => void;\n  /** Render the tile non-interactive and visually muted. */\n  disabled?: boolean;\n}\n\n/** Agent-readiness curated handle for NavGrid. */\nexport interface NavGridHandle {\n  getItemCount: () => number;\n  /** Activate the tile with the given id (navigate, or fire its onSelect). */\n  openItem: (id: string) => void;\n}\n\nexport interface NavGridProps {\n  /** Tiles to render. label / description / icon are consumer-supplied props. */\n  items: NavGridItem[];\n  /** REQUIRED — the nav landmark's accessible name (e.g. \"Settings sections\"). */\n  ariaLabel: string;\n  /** Column count. Omit for the responsive default (1 → 2 → 3 at sm / lg). */\n  columns?: 1 | 2 | 3 | 4;\n  /** `label` sorts tiles by `label.localeCompare`; `none` (default) preserves order. */\n  sort?: 'label' | 'none';\n  id?: string;\n  className?: string;\n}\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                 */\n/* ------------------------------------------------------------------ */\n\nconst gridVariants = cva(\n  'ds:grid ds:list-none ds:m-0 ds:p-0 ds:gap-[var(--spacing-md)]',\n  {\n    variants: {\n      columns: {\n        // Responsive default: one column on mobile, two from sm, three from lg.\n        responsive: 'ds:grid-cols-1 ds:sm:grid-cols-2 ds:lg:grid-cols-3',\n        '1': 'ds:grid-cols-1',\n        '2': 'ds:grid-cols-1 ds:sm:grid-cols-2',\n        '3': 'ds:grid-cols-1 ds:sm:grid-cols-2 ds:lg:grid-cols-3',\n        '4': 'ds:grid-cols-1 ds:sm:grid-cols-2 ds:lg:grid-cols-4',\n      },\n    },\n    defaultVariants: { columns: 'responsive' },\n  },\n);\n\n// Shared tile look applied to BOTH the Link (href) and the button (onSelect)\n// so the two render identically. Focus ring is included here so the native\n// button gets a visible ring too (Link also carries its own — same tokens).\nconst tileVariants = cva(\n  [\n    'ds:flex ds:flex-col ds:items-start ds:gap-[var(--spacing-xs)] ds:text-start',\n    'ds:h-full ds:w-full ds:min-h-[var(--min-target-size)] ds:p-[var(--spacing-md)]',\n    'ds:rounded-[var(--radius-lg)] ds:border ds:border-[color:var(--card-border)]',\n    'ds:[.theme-accessible_&]:border-2',\n    'ds:bg-[var(--card)] ds:text-[var(--card-foreground)] ds:no-underline',\n    'ds:transition-shadow ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none',\n    'ds:outline-none',\n    'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n    'ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n    'ds:forced-colors:focus-visible:outline-[CanvasText]',\n  ].join(' '),\n  {\n    variants: {\n      disabled: {\n        true: 'ds:opacity-50 ds:cursor-not-allowed ds:pointer-events-none',\n        false: 'ds:cursor-pointer ds:hover:shadow-[var(--shadow-hover)]',\n      },\n    },\n    defaultVariants: { disabled: false },\n  },\n);\n\n/* ------------------------------------------------------------------ */\n/* Tile content                                                        */\n/* ------------------------------------------------------------------ */\n\nfunction TileContent({ item }: { item: NavGridItem }) {\n  return (\n    <>\n      {item.icon ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"ds:inline-flex ds:items-center ds:text-[var(--muted-foreground)] ds:[&_svg]:size-6\"\n        >\n          {item.icon}\n        </span>\n      ) : null}\n      {/* `no-underline` on the span reliably suppresses the Link's underline\n          across this text regardless of stylesheet order (own decoration box). */}\n      <span className=\"type-body ds:font-medium ds:text-[var(--card-foreground)] ds:no-underline\">\n        {item.label}\n      </span>\n      {item.description ? (\n        <span className=\"type-body-sm ds:text-[var(--muted-foreground)] ds:no-underline\">\n          {item.description}\n        </span>\n      ) : null}\n    </>\n  );\n}\n\n/* ------------------------------------------------------------------ */\n/* Component                                                           */\n/* ------------------------------------------------------------------ */\n\nexport const NavGrid = forwardRef<HTMLElement, NavGridProps>(function NavGrid(\n  { items, ariaLabel, columns, sort = 'none', id, className },\n  ref,\n) {\n  // Locale-aware sort is the consumer's opt-in; otherwise render as given.\n  const resolvedItems = useMemo(\n    () =>\n      sort === 'label'\n        ? [...items].sort((a, b) => a.label.localeCompare(b.label))\n        : items,\n    [items, sort],\n  );\n\n  const handle = useMemo<NavGridHandle>(\n    () => ({\n      getItemCount: () => items.length,\n      openItem: (itemId) => {\n        const target = items.find((it) => it.id === itemId);\n        if (!target || target.disabled) return;\n        if (target.href) {\n          if (typeof window !== 'undefined') window.location.href = target.href;\n        } else {\n          target.onSelect?.();\n        }\n      },\n    }),\n    [items],\n  );\n  useAgentRegistration(navGridAgent, handle, id);\n\n  const columnKey =\n    columns === undefined\n      ? ('responsive' as const)\n      : (String(columns) as '1' | '2' | '3' | '4');\n\n  return (\n    <nav\n      ref={ref}\n      id={id}\n      aria-label={ariaLabel}\n      data-component=\"nav-grid\"\n      data-component-id={id}\n      className={className}\n    >\n      <ul className={gridVariants({ columns: columnKey })}>\n        {resolvedItems.map((item) => (\n          <li key={item.id} data-nav-item-id={item.id}>\n            {item.href !== undefined ? (\n              <Link\n                href={item.href}\n                intent=\"subtle\"\n                disabled={item.disabled}\n                className={tileVariants({ disabled: Boolean(item.disabled) })}\n              >\n                <TileContent item={item} />\n              </Link>\n            ) : (\n              <button\n                type=\"button\"\n                onClick={item.disabled ? undefined : item.onSelect}\n                disabled={item.disabled}\n                aria-disabled={item.disabled || undefined}\n                className={tileVariants({ disabled: Boolean(item.disabled) })}\n              >\n                <TileContent item={item} />\n              </button>\n            )}\n          </li>\n        ))}\n      </ul>\n    </nav>\n  );\n});\n\nNavGrid.displayName = 'NavGrid';\n\nexport { tileVariants as navGridTileVariants };\n"],"names":["navGridAgent","handle","args","gridVariants","cva","tileVariants","TileContent","item","jsxs","Fragment","jsx","NavGrid","forwardRef","items","ariaLabel","columns","sort","id","className","ref","resolvedItems","useMemo","a","b","itemId","target","it","_a","useAgentRegistration","columnKey","Link"],"mappings":"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"}

package/dist/_chunks/navigation-menu-D3VndouD.js

@@ -0,0 +1,310 @@
+import { jsxs as p, jsx as s } from "react/jsx-runtime";
+import { forwardRef as n, useRef as M, useMemo as j, useImperativeHandle as I } from "react";
+import * as o from "@radix-ui/react-navigation-menu";
+import { Slot as C } from "@radix-ui/react-slot";
+import { c as k } from "./index-D2ZczOXr.js";
+import { useTranslation as z } from "react-i18next";
+import { u as V } from "./use-controllable-state-BiY4xTzM.js";
+import { u as B } from "./registry-DvAUVLHh.js";
+import { u as S } from "./use-direction-Dp8h70PP.js";
+import { C as R } from "./chevron-down-DWE7GSq9.js";
+const q = {
+  id: "navigation-menu",
+  // `navigate` is host-delegated: route changes happen through the rendered
+  // NavigationMenuLink anchors / the consumer's router, not the handle. The
+  // handle only opens panels + sets the active top-level item (`select_item`).
+  // The capability is kept so a bridge can discover the menu drives navigation.
+  capabilities: ["select_single", "navigate", "open", "close"],
+  state: {
+    activeItem: {
+      type: "string | null",
+      descriptionKey: "ui.agent.navigationMenu.state.activeItem",
+      description: "Id of the currently-active top-level navigation item, or null when none is active.",
+      read: (e) => e.getActiveItem() ?? null
+    },
+    isOpen: {
+      type: "boolean",
+      descriptionKey: "ui.agent.navigationMenu.state.isOpen",
+      description: "Whether a dropdown / mega-menu panel is currently open.",
+      read: (e) => e.getIsOpen()
+    }
+  },
+  actions: {
+    select_item: {
+      // Sets the active top-level item (opens its panel) — ephemeral view, read.
+      safety: "read",
+      argsType: "{ id: string }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          id: {
+            type: "string",
+            description: "Stable opaque top-level item id (emitted as data-nav-id)."
+          }
+        },
+        required: ["id"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.navigationMenu.actions.selectItem",
+      description: "Activate (open) the top-level item with the given id.",
+      examples: [
+        { args: { id: "products" }, note: 'Open the "products" menu.' }
+      ],
+      invoke: (e, t) => {
+        e.selectItem(t.id);
+      }
+    },
+    open: {
+      // Opens one item's panel — ephemeral view, read.
+      safety: "read",
+      argsType: "{ id: string }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          id: {
+            type: "string",
+            description: "Stable opaque top-level item id whose panel to open (data-nav-id)."
+          }
+        },
+        required: ["id"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.navigationMenu.actions.open",
+      description: "Open the dropdown / mega-menu panel for the given top-level item id.",
+      invoke: (e, t) => {
+        e.open(t.id);
+      }
+    },
+    close: {
+      // Closes any open panel — ephemeral view, read.
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.navigationMenu.actions.close",
+      description: "Close any open dropdown / mega-menu panel.",
+      invoke: (e) => {
+        e.close();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "navigation-menu",
+      description: "Marks the NavigationMenu root."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop. Required to address a specific menu from the agent."
+    },
+    item: {
+      attr: "data-nav-id",
+      description: "Stable opaque id of a top-level navigation item. Selection / open targets this attribute."
+    }
+  }
+}, L = [
+  "ds:relative ds:z-[var(--z-dropdown)]",
+  "ds:flex ds:max-w-max ds:items-center ds:justify-center"
+].join(" "), O = n(
+  ({
+    "aria-label": e,
+    className: t,
+    children: a,
+    id: i,
+    value: l,
+    defaultValue: g,
+    onValueChange: f,
+    ...h
+  }, b) => {
+    const { t: N } = z(), m = M(null), y = S(m), [w, d] = V({
+      value: l,
+      defaultValue: g ?? "",
+      onChange: f
+    }), r = w ?? "", x = j(
+      () => ({
+        getActiveItem: () => r || null,
+        getIsOpen: () => !!r,
+        selectItem: (u) => d(u),
+        open: (u) => d(u),
+        close: () => d("")
+      }),
+      [r, d]
+    );
+    return I(
+      b,
+      () => m.current,
+      []
+    ), B(q, x, i), /* @__PURE__ */ p(
+      o.Root,
+      {
+        ref: m,
+        dir: y,
+        "aria-label": e ?? N("navigation.nav.label"),
+        className: [L, t].filter(Boolean).join(" "),
+        id: i,
+        "data-component": "navigation-menu",
+        "data-component-id": i,
+        value: r,
+        onValueChange: d,
+        ...h,
+        children: [
+          a,
+          /* @__PURE__ */ s(v, {})
+        ]
+      }
+    );
+  }
+);
+O.displayName = "NavigationMenu";
+const T = [
+  "ds:group ds:flex ds:flex-1",
+  "ds:list-none ds:items-center ds:justify-center",
+  "ds:gap-[var(--spacing-xs)]",
+  "ds:m-0 ds:ps-0"
+].join(" "), A = n(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+  o.List,
+  {
+    ref: a,
+    className: [T, e].filter(Boolean).join(" "),
+    ...t
+  }
+));
+A.displayName = "NavigationMenuList";
+const K = n(({ navId: e, ...t }, a) => /* @__PURE__ */ s(o.Item, { ref: a, "data-nav-id": e, ...t }));
+K.displayName = "NavigationMenuItem";
+const D = [
+  "ds:group ds:inline-flex ds:items-center ds:justify-center",
+  "ds:min-h-[var(--min-target-size)]",
+  "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-sm)]",
+  "ds:rounded-[var(--radius-sm)]",
+  "ds:text-[var(--font-size-sm)] ds:font-[var(--font-weight-medium)]",
+  "ds:text-[var(--foreground)]",
+  "ds:hover:bg-[var(--muted)]/20",
+  "ds:data-[state=open]:bg-[var(--muted)]/20",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+  "ds:disabled:cursor-not-allowed ds:disabled:opacity-50",
+  "ds:gap-[var(--spacing-xs)]"
+].join(" "), H = [
+  "ds:size-3 ds:transition-transform ds:duration-[var(--animation-duration)]",
+  "ds:group-data-[state=open]:rotate-180",
+  "ds:rtl:-scale-x-100 ds:motion-reduce:transition-none"
+].join(" "), P = n(({ className: e, children: t, ...a }, i) => /* @__PURE__ */ p(
+  o.Trigger,
+  {
+    ref: i,
+    className: [D, e].filter(Boolean).join(" "),
+    ...a,
+    children: [
+      t,
+      /* @__PURE__ */ s(R, { "aria-hidden": "true", className: H })
+    ]
+  }
+));
+P.displayName = "NavigationMenuTrigger";
+const _ = [
+  "ds:absolute ds:start-0 ds:top-0 ds:w-full",
+  "ds:md:w-auto",
+  "ds:bg-[var(--background)] ds:text-[var(--foreground)]",
+  "ds:rounded-[var(--radius-md)] ds:border ds:border-[var(--border)]",
+  "ds:shadow-[var(--shadow-lg)]",
+  "ds:p-[var(--spacing-md)]",
+  "ds:data-[motion^=from-]:animate-in ds:data-[motion^=to-]:animate-out",
+  // Logical start/end motion mapped onto physical Tailwind animation utilities.
+  // The `rtl:` variants mirror the slide direction so `from-start` enters from
+  // the inline-start edge in both LTR and RTL.
+  "ds:data-[motion=from-start]:slide-in-from-left-52 ds:rtl:data-[motion=from-start]:slide-in-from-right-52",
+  "ds:data-[motion=from-end]:slide-in-from-right-52 ds:rtl:data-[motion=from-end]:slide-in-from-left-52",
+  "ds:data-[motion=to-start]:slide-out-to-left-52 ds:rtl:data-[motion=to-start]:slide-out-to-right-52",
+  "ds:data-[motion=to-end]:slide-out-to-right-52 ds:rtl:data-[motion=to-end]:slide-out-to-left-52",
+  "ds:motion-reduce:animate-none"
+].join(" "), W = k(_, {
+  variants: {
+    layout: {
+      simple: "ds:min-w-[16rem]",
+      mega: "ds:grid ds:grid-cols-[repeat(auto-fit,minmax(12rem,1fr))] ds:gap-[var(--spacing-md)] ds:min-w-[32rem]"
+    }
+  },
+  defaultVariants: { layout: "simple" }
+}), E = n(({ layout: e, className: t, ...a }, i) => /* @__PURE__ */ s(
+  o.Content,
+  {
+    ref: i,
+    className: W({ layout: e, className: t }),
+    ...a
+  }
+));
+E.displayName = "NavigationMenuContent";
+const c = [
+  "ds:block ds:rounded-[var(--radius-sm)]",
+  "ds:min-h-[var(--min-target-size)]",
+  "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+  "ds:py-[var(--spacing-xs)]",
+  "ds:text-[var(--font-size-sm)] ds:font-[var(--font-weight-medium)]",
+  "ds:text-[var(--foreground)]",
+  "ds:no-underline",
+  "ds:hover:bg-[var(--muted)]/20",
+  "ds:data-[active]:underline ds:data-[active]:underline-offset-[var(--spacing-xs)]",
+  "ds:aria-[current=page]:underline ds:aria-[current=page]:underline-offset-[var(--spacing-xs)]",
+  "ds:aria-[current=page]:font-[var(--font-weight-semibold)]",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
+].join(" "), F = n(({ asChild: e = !1, className: t, children: a, ...i }, l) => /* @__PURE__ */ s(
+  o.Link,
+  {
+    ref: l,
+    asChild: e,
+    className: e ? void 0 : [c, t].filter(Boolean).join(" "),
+    ...i,
+    children: e ? /* @__PURE__ */ s(C, { className: [c, t].filter(Boolean).join(" "), children: a }) : a
+  }
+));
+F.displayName = "NavigationMenuLink";
+const G = [
+  "ds:top-full ds:z-[1] ds:flex ds:h-2 ds:items-end ds:justify-center ds:overflow-hidden",
+  "ds:data-[state=visible]:animate-in ds:data-[state=hidden]:animate-out",
+  "ds:data-[state=visible]:fade-in ds:data-[state=hidden]:fade-out",
+  "ds:motion-reduce:animate-none"
+].join(" "), J = n(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+  o.Indicator,
+  {
+    ref: a,
+    className: [G, e].filter(Boolean).join(" "),
+    ...t,
+    children: /* @__PURE__ */ s("span", { className: "ds:relative ds:top-[60%] ds:h-2 ds:w-2 ds:rotate-45 ds:rounded-tl-sm ds:bg-[var(--border)]" })
+  }
+));
+J.displayName = "NavigationMenuIndicator";
+const Q = [
+  "ds:origin-top-center ds:relative ds:mt-[var(--spacing-xs)]",
+  "ds:h-[var(--radix-navigation-menu-viewport-height)]",
+  "ds:w-full ds:overflow-hidden",
+  "ds:rounded-[var(--radius-md)] ds:border ds:border-[var(--border)]",
+  "ds:bg-[var(--background)] ds:text-[var(--foreground)]",
+  "ds:shadow-[var(--shadow-lg)]",
+  "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
+  "ds:data-[state=open]:zoom-in-90 ds:data-[state=closed]:zoom-out-95",
+  "ds:motion-reduce:animate-none"
+].join(" "), v = n(({ className: e, ...t }, a) => /* @__PURE__ */ s("div", { className: "ds:absolute ds:start-0 ds:top-full ds:flex ds:justify-center", children: /* @__PURE__ */ s(
+  o.Viewport,
+  {
+    ref: a,
+    className: [Q, e].filter(Boolean).join(" "),
+    ...t
+  }
+) }));
+v.displayName = "NavigationMenuViewport";
+export {
+  O as N,
+  E as a,
+  J as b,
+  K as c,
+  F as d,
+  A as e,
+  P as f,
+  v as g,
+  q as n
+};
+//# sourceMappingURL=navigation-menu-D3VndouD.js.map

package/dist/_chunks/navigation-menu-D3VndouD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu-D3VndouD.js","sources":["../../src/components/navigation-menu/navigation-menu.agent.ts","../../src/components/navigation-menu/navigation-menu.tsx"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* Agent adapter — NavigationMenu.                                        */\n/*                                                                        */\n/* NavigationMenu is the primary top-bar navigation. It exposes the      */\n/* currently-active item id (when the consumer routes through the kit),  */\n/* the open/closed state of its dropdown, and lets an agent open, close, */\n/* or select a top-level item by id.                                     */\n/*                                                                        */\n/* See `src/docs/26-agent-readiness.mdx` for the full contract.          */\n/* -------------------------------------------------------------------- */\n\nimport type { AgentAdapter } from '../../agent/types';\nimport type { NavigationMenuHandle } from './navigation-menu';\n\nexport const navigationMenuAgent: AgentAdapter<NavigationMenuHandle> = {\n  id: 'navigation-menu',\n  // `navigate` is host-delegated: route changes happen through the rendered\n  // NavigationMenuLink anchors / the consumer's router, not the handle. The\n  // handle only opens panels + sets the active top-level item (`select_item`).\n  // The capability is kept so a bridge can discover the menu drives navigation.\n  capabilities: ['select_single', 'navigate', 'open', 'close'],\n  state: {\n    activeItem: {\n      type: 'string | null',\n      descriptionKey: 'ui.agent.navigationMenu.state.activeItem',\n      description:\n        'Id of the currently-active top-level navigation item, or null when none is active.',\n      read: (handle) => handle.getActiveItem() ?? null,\n    },\n    isOpen: {\n      type: 'boolean',\n      descriptionKey: 'ui.agent.navigationMenu.state.isOpen',\n      description: 'Whether a dropdown / mega-menu panel is currently open.',\n      read: (handle) => handle.getIsOpen(),\n    },\n  },\n  actions: {\n    select_item: {\n      // Sets the active top-level item (opens its panel) — ephemeral view, read.\n      safety: 'read',\n      argsType: '{ id: string }',\n      argsSchema: {\n        type: 'object',\n        properties: {\n          id: {\n            type: 'string',\n            description:\n              'Stable opaque top-level item id (emitted as data-nav-id).',\n          },\n        },\n        required: ['id'],\n      },\n      idempotent: true,\n      descriptionKey: 'ui.agent.navigationMenu.actions.selectItem',\n      description: 'Activate (open) the top-level item with the given id.',\n      examples: [\n        { args: { id: 'products' }, note: 'Open the \"products\" menu.' },\n      ],\n      invoke: (handle, args: { id: string }) => {\n        handle.selectItem(args.id);\n      },\n    },\n    open: {\n      // Opens one item's panel — ephemeral view, read.\n      safety: 'read',\n      argsType: '{ id: string }',\n      argsSchema: {\n        type: 'object',\n        properties: {\n          id: {\n            type: 'string',\n            description:\n              'Stable opaque top-level item id whose panel to open (data-nav-id).',\n          },\n        },\n        required: ['id'],\n      },\n      idempotent: true,\n      descriptionKey: 'ui.agent.navigationMenu.actions.open',\n      description:\n        'Open the dropdown / mega-menu panel for the given top-level item id.',\n      invoke: (handle, args: { id: string }) => {\n        handle.open(args.id);\n      },\n    },\n    close: {\n      // Closes any open panel — ephemeral view, read.\n      safety: 'read',\n      idempotent: true,\n      descriptionKey: 'ui.agent.navigationMenu.actions.close',\n      description: 'Close any open dropdown / mega-menu panel.',\n      invoke: (handle) => {\n        handle.close();\n      },\n    },\n  },\n  domHooks: {\n    root: {\n      attr: 'data-component',\n      value: 'navigation-menu',\n      description: 'Marks the NavigationMenu root.',\n    },\n    instanceId: {\n      attr: 'data-component-id',\n      sourceProp: 'id',\n      description:\n        'Sourced from the id prop. Required to address a specific menu from the agent.',\n    },\n    item: {\n      attr: 'data-nav-id',\n      description:\n        'Stable opaque id of a top-level navigation item. Selection / open targets this attribute.',\n    },\n  },\n};\n","import {\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n} from 'react';\nimport * as RadixNavigationMenu from '@radix-ui/react-navigation-menu';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { ChevronDown } from 'lucide-react';\nimport { useDirection } from '../_shared/use-direction';\nimport { useControllableState } from '../../hooks/use-controllable-state';\n// SkipLink moved to its own module — re-imported for the navigation-menu\n// barrel's backwards-compat re-export. New consumers should import it\n// directly from `@alfadocs/ui-kit`.\nimport { SkipLink } from '../skip-link';\nimport { useAgentRegistration } from '../../agent/registry';\nimport { navigationMenuAgent } from './navigation-menu.agent';\n\n/* -------------------------------------------------------------------- */\n/* Root                                                                  */\n/* -------------------------------------------------------------------- */\n\nconst rootClasses = [\n  'ds:relative ds:z-[var(--z-dropdown)]',\n  'ds:flex ds:max-w-max ds:items-center ds:justify-center',\n].join(' ');\n\nexport interface NavigationMenuProps extends ComponentPropsWithoutRef<\n  typeof RadixNavigationMenu.Root\n> {\n  'aria-label'?: string;\n  /**\n   * Consumer-supplied instance id, surfaced as `data-component-id` so an\n   * agent / UI bridge can address this instance.\n   */\n  id?: string;\n}\n\n/**\n * Imperative handle for agent-readiness. Exposes the active top-level\n * item id + open/closed state, and lets external drivers select / open /\n * close panels by item id.\n */\nexport interface NavigationMenuHandle {\n  getActiveItem: () => string | null;\n  getIsOpen: () => boolean;\n  selectItem: (id: string) => void;\n  open: (id: string) => void;\n  close: () => void;\n}\n\ntype NavigationMenuRootElement = ElementRef<typeof RadixNavigationMenu.Root>;\n\nconst NavigationMenu = forwardRef<\n  NavigationMenuRootElement,\n  NavigationMenuProps\n>(\n  (\n    {\n      'aria-label': ariaLabel,\n      className,\n      children,\n      id,\n      value,\n      defaultValue,\n      onValueChange,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n    const rootRef = useRef<ElementRef<typeof RadixNavigationMenu.Root>>(null);\n    const dir = useDirection(rootRef);\n\n    const [activeValueRaw, handleValueChange] = useControllableState<string>({\n      value,\n      defaultValue: defaultValue ?? '',\n      onChange: onValueChange,\n    });\n    const activeValue = activeValueRaw ?? '';\n\n    const handle = useMemo<NavigationMenuHandle>(\n      () => ({\n        getActiveItem: () => (activeValue ? activeValue : null),\n        getIsOpen: () => Boolean(activeValue),\n        selectItem: (nextId: string) => handleValueChange(nextId),\n        open: (nextId: string) => handleValueChange(nextId),\n        close: () => handleValueChange(''),\n      }),\n      [activeValue, handleValueChange],\n    );\n    useImperativeHandle(\n      ref,\n      () => rootRef.current as NavigationMenuRootElement,\n      [],\n    );\n    useAgentRegistration(navigationMenuAgent, handle, id);\n\n    return (\n      <RadixNavigationMenu.Root\n        ref={rootRef}\n        dir={dir}\n        aria-label={ariaLabel ?? t('navigation.nav.label')}\n        className={[rootClasses, className].filter(Boolean).join(' ')}\n        id={id}\n        data-component=\"navigation-menu\"\n        data-component-id={id}\n        value={activeValue}\n        onValueChange={handleValueChange}\n        {...rest}\n      >\n        {children}\n        <NavigationMenuViewport />\n      </RadixNavigationMenu.Root>\n    );\n  },\n);\nNavigationMenu.displayName = 'NavigationMenu';\n\n/* -------------------------------------------------------------------- */\n/* List + Item                                                           */\n/* -------------------------------------------------------------------- */\n\nconst listClasses = [\n  'ds:group ds:flex ds:flex-1',\n  'ds:list-none ds:items-center ds:justify-center',\n  'ds:gap-[var(--spacing-xs)]',\n  'ds:m-0 ds:ps-0',\n].join(' ');\n\nconst NavigationMenuList = forwardRef<\n  ElementRef<typeof RadixNavigationMenu.List>,\n  ComponentPropsWithoutRef<typeof RadixNavigationMenu.List>\n>(({ className, ...rest }, ref) => (\n  <RadixNavigationMenu.List\n    ref={ref}\n    className={[listClasses, className].filter(Boolean).join(' ')}\n    {...rest}\n  />\n));\nNavigationMenuList.displayName = 'NavigationMenuList';\n\nexport interface NavigationMenuItemProps extends ComponentPropsWithoutRef<\n  typeof RadixNavigationMenu.Item\n> {\n  /**\n   * Stable opaque id of this top-level item. When provided, emitted as\n   * `data-nav-id` so an agent / UI bridge can target the item. Distinct\n   * from Radix's internal `value`, which controls open-state matching;\n   * pass the same string to both if you want them aligned.\n   */\n  navId?: string;\n}\n\nconst NavigationMenuItem = forwardRef<\n  ElementRef<typeof RadixNavigationMenu.Item>,\n  NavigationMenuItemProps\n>(({ navId, ...rest }, ref) => (\n  <RadixNavigationMenu.Item ref={ref} data-nav-id={navId} {...rest} />\n));\nNavigationMenuItem.displayName = 'NavigationMenuItem';\n\n/* -------------------------------------------------------------------- */\n/* Trigger                                                               */\n/* -------------------------------------------------------------------- */\n\nconst triggerClasses = [\n  'ds:group ds:inline-flex ds:items-center ds:justify-center',\n  'ds:min-h-[var(--min-target-size)]',\n  'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-sm)]',\n  'ds:rounded-[var(--radius-sm)]',\n  'ds:text-[var(--font-size-sm)] ds:font-[var(--font-weight-medium)]',\n  'ds:text-[var(--foreground)]',\n  'ds:hover:bg-[var(--muted)]/20',\n  'ds:data-[state=open]:bg-[var(--muted)]/20',\n  'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n  'ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n  'ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none',\n  'ds:disabled:cursor-not-allowed ds:disabled:opacity-50',\n  'ds:gap-[var(--spacing-xs)]',\n].join(' ');\n\nconst chevronClasses = [\n  'ds:size-3 ds:transition-transform ds:duration-[var(--animation-duration)]',\n  'ds:group-data-[state=open]:rotate-180',\n  'ds:rtl:-scale-x-100 ds:motion-reduce:transition-none',\n].join(' ');\n\nconst NavigationMenuTrigger = forwardRef<\n  ElementRef<typeof RadixNavigationMenu.Trigger>,\n  ComponentPropsWithoutRef<typeof RadixNavigationMenu.Trigger>\n>(({ className, children, ...rest }, ref) => (\n  <RadixNavigationMenu.Trigger\n    ref={ref}\n    className={[triggerClasses, className].filter(Boolean).join(' ')}\n    {...rest}\n  >\n    {children}\n    <ChevronDown aria-hidden=\"true\" className={chevronClasses} />\n  </RadixNavigationMenu.Trigger>\n));\nNavigationMenuTrigger.displayName = 'NavigationMenuTrigger';\n\n/* -------------------------------------------------------------------- */\n/* Content                                                               */\n/* -------------------------------------------------------------------- */\n\nconst contentBase = [\n  'ds:absolute ds:start-0 ds:top-0 ds:w-full',\n  'ds:md:w-auto',\n  'ds:bg-[var(--background)] ds:text-[var(--foreground)]',\n  'ds:rounded-[var(--radius-md)] ds:border ds:border-[var(--border)]',\n  'ds:shadow-[var(--shadow-lg)]',\n  'ds:p-[var(--spacing-md)]',\n  'ds:data-[motion^=from-]:animate-in ds:data-[motion^=to-]:animate-out',\n  // Logical start/end motion mapped onto physical Tailwind animation utilities.\n  // The `rtl:` variants mirror the slide direction so `from-start` enters from\n  // the inline-start edge in both LTR and RTL.\n  'ds:data-[motion=from-start]:slide-in-from-left-52 ds:rtl:data-[motion=from-start]:slide-in-from-right-52',\n  'ds:data-[motion=from-end]:slide-in-from-right-52 ds:rtl:data-[motion=from-end]:slide-in-from-left-52',\n  'ds:data-[motion=to-start]:slide-out-to-left-52 ds:rtl:data-[motion=to-start]:slide-out-to-right-52',\n  'ds:data-[motion=to-end]:slide-out-to-right-52 ds:rtl:data-[motion=to-end]:slide-out-to-left-52',\n  'ds:motion-reduce:animate-none',\n].join(' ');\n\nconst contentVariants = cva(contentBase, {\n  variants: {\n    layout: {\n      simple: 'ds:min-w-[16rem]',\n      mega: 'ds:grid ds:grid-cols-[repeat(auto-fit,minmax(12rem,1fr))] ds:gap-[var(--spacing-md)] ds:min-w-[32rem]',\n    },\n  },\n  defaultVariants: { layout: 'simple' },\n});\n\nexport interface NavigationMenuContentProps\n  extends\n    ComponentPropsWithoutRef<typeof RadixNavigationMenu.Content>,\n    VariantProps<typeof contentVariants> {}\n\nconst NavigationMenuContent = forwardRef<\n  ElementRef<typeof RadixNavigationMenu.Content>,\n  NavigationMenuContentProps\n>(({ layout, className, ...rest }, ref) => (\n  <RadixNavigationMenu.Content\n    ref={ref}\n    className={contentVariants({ layout, className })}\n    {...rest}\n  />\n));\nNavigationMenuContent.displayName = 'NavigationMenuContent';\n\n/* -------------------------------------------------------------------- */\n/* Link                                                                  */\n/* -------------------------------------------------------------------- */\n\nconst linkClasses = [\n  'ds:block ds:rounded-[var(--radius-sm)]',\n  'ds:min-h-[var(--min-target-size)]',\n  'ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]',\n  'ds:py-[var(--spacing-xs)]',\n  'ds:text-[var(--font-size-sm)] ds:font-[var(--font-weight-medium)]',\n  'ds:text-[var(--foreground)]',\n  'ds:no-underline',\n  'ds:hover:bg-[var(--muted)]/20',\n  'ds:data-[active]:underline ds:data-[active]:underline-offset-[var(--spacing-xs)]',\n  'ds:aria-[current=page]:underline ds:aria-[current=page]:underline-offset-[var(--spacing-xs)]',\n  'ds:aria-[current=page]:font-[var(--font-weight-semibold)]',\n  'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n  'ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n  'ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none',\n].join(' ');\n\nexport interface NavigationMenuLinkProps extends ComponentPropsWithoutRef<\n  typeof RadixNavigationMenu.Link\n> {\n  /** Render through Radix Slot so routers can inject their own link element. */\n  asChild?: boolean;\n}\n\nconst NavigationMenuLink = forwardRef<\n  ElementRef<typeof RadixNavigationMenu.Link>,\n  NavigationMenuLinkProps\n>(({ asChild = false, className, children, ...rest }, ref) => (\n  <RadixNavigationMenu.Link\n    ref={ref}\n    asChild={asChild}\n    className={\n      asChild ? undefined : [linkClasses, className].filter(Boolean).join(' ')\n    }\n    {...rest}\n  >\n    {asChild ? (\n      <Slot className={[linkClasses, className].filter(Boolean).join(' ')}>\n        {children}\n      </Slot>\n    ) : (\n      children\n    )}\n  </RadixNavigationMenu.Link>\n));\nNavigationMenuLink.displayName = 'NavigationMenuLink';\n\n/* -------------------------------------------------------------------- */\n/* Indicator + Viewport                                                  */\n/* -------------------------------------------------------------------- */\n\nconst indicatorClasses = [\n  'ds:top-full ds:z-[1] ds:flex ds:h-2 ds:items-end ds:justify-center ds:overflow-hidden',\n  'ds:data-[state=visible]:animate-in ds:data-[state=hidden]:animate-out',\n  'ds:data-[state=visible]:fade-in ds:data-[state=hidden]:fade-out',\n  'ds:motion-reduce:animate-none',\n].join(' ');\n\nconst NavigationMenuIndicator = forwardRef<\n  ElementRef<typeof RadixNavigationMenu.Indicator>,\n  ComponentPropsWithoutRef<typeof RadixNavigationMenu.Indicator>\n>(({ className, ...rest }, ref) => (\n  <RadixNavigationMenu.Indicator\n    ref={ref}\n    className={[indicatorClasses, className].filter(Boolean).join(' ')}\n    {...rest}\n  >\n    <span className=\"ds:relative ds:top-[60%] ds:h-2 ds:w-2 ds:rotate-45 ds:rounded-tl-sm ds:bg-[var(--border)]\" />\n  </RadixNavigationMenu.Indicator>\n));\nNavigationMenuIndicator.displayName = 'NavigationMenuIndicator';\n\nconst viewportClasses = [\n  'ds:origin-top-center ds:relative ds:mt-[var(--spacing-xs)]',\n  'ds:h-[var(--radix-navigation-menu-viewport-height)]',\n  'ds:w-full ds:overflow-hidden',\n  'ds:rounded-[var(--radius-md)] ds:border ds:border-[var(--border)]',\n  'ds:bg-[var(--background)] ds:text-[var(--foreground)]',\n  'ds:shadow-[var(--shadow-lg)]',\n  'ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out',\n  'ds:data-[state=open]:zoom-in-90 ds:data-[state=closed]:zoom-out-95',\n  'ds:motion-reduce:animate-none',\n].join(' ');\n\nconst NavigationMenuViewport = forwardRef<\n  ElementRef<typeof RadixNavigationMenu.Viewport>,\n  ComponentPropsWithoutRef<typeof RadixNavigationMenu.Viewport>\n>(({ className, ...rest }, ref) => (\n  <div className=\"ds:absolute ds:start-0 ds:top-full ds:flex ds:justify-center\">\n    <RadixNavigationMenu.Viewport\n      ref={ref}\n      className={[viewportClasses, className].filter(Boolean).join(' ')}\n      {...rest}\n    />\n  </div>\n));\nNavigationMenuViewport.displayName = 'NavigationMenuViewport';\n\n/* -------------------------------------------------------------------- */\n/* Exports                                                               */\n/* -------------------------------------------------------------------- */\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuTrigger,\n  NavigationMenuContent,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  SkipLink,\n};\n"],"names":["navigationMenuAgent","handle","args","rootClasses","NavigationMenu","forwardRef","ariaLabel","className","children","id","value","defaultValue","onValueChange","rest","ref","t","useTranslation","rootRef","useRef","dir","useDirection","activeValueRaw","handleValueChange","useControllableState","activeValue","useMemo","nextId","useImperativeHandle","useAgentRegistration","jsxs","RadixNavigationMenu","NavigationMenuViewport","listClasses","NavigationMenuList","jsx","NavigationMenuItem","navId","triggerClasses","chevronClasses","NavigationMenuTrigger","ChevronDown","contentBase","contentVariants","cva","NavigationMenuContent","layout","linkClasses","NavigationMenuLink","asChild","Slot","indicatorClasses","NavigationMenuIndicator","viewportClasses"],"mappings":"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"}