@krizaka/ui 2.2.0 → 2.3.0

package/registry/nav-bar.json

@@ -0,0 +1,480 @@
+{
+  "name": "nav-bar",
+  "type": "primitive",
+  "title": "Nav bar",
+  "summary": "The Krizaka navigation bar: a floating pill that tightens as the page scrolls, one light that glides to the item under the pointer or the focus and rests on the current page, accessible menus with rich links, and a mobile panel.",
+  "description": "The Krizaka navigation bar: a floating pill that tightens as the page scrolls, one light that glides to the item under the pointer or the focus and rests on the current page, accessible menus with rich links, and a mobile panel.",
+  "status": "beta",
+  "category": "navigation",
+  "platforms": "web",
+  "whenToUse": [
+    "The top navigation of a site or a product: a brand, a few links, one or two menus, actions on the right.",
+    "A section bar inside an app (`floating={false}`): videos, earnings, auctions."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "To switch views inside a page without changing the address.",
+      "use": "tabs"
+    },
+    {
+      "when": "For a list of actions on one object.",
+      "use": "dropdown-menu"
+    },
+    {
+      "when": "For search and commands across the app.",
+      "use": "command"
+    }
+  ],
+  "bestPractices": [
+    "Five items at most on the bar; group the rest in a menu, each link with a name and one line (`NavBar.MenuLink`).",
+    "Mark the current page with `active`: the light rests on it, `aria-current=\"page\"` says it.",
+    "Use your router's link with `asChild` on `NavBar.Link`, `NavBar.MenuLink` and `NavBar.MobileLink`.",
+    "One primary action at most in `NavBar.Actions` (a `Button` `size=\"sm\"` `shape=\"pill\"`).",
+    "Wrap it in a `sticky top-3` (floating) or `sticky top-0` container to keep it on screen."
+  ],
+  "accessibility": {
+    "keyboard": [
+      {
+        "keys": "Tab",
+        "action": "Moves between the brand, the items and the actions; leaving an open menu closes it."
+      },
+      {
+        "keys": "Enter / Space / ↓",
+        "action": "Opens a menu and moves into it."
+      },
+      {
+        "keys": "↑ / ↓ · Home / End",
+        "action": "Walks the links of an open menu."
+      },
+      {
+        "keys": "← / →",
+        "action": "Moves between the items of the bar."
+      },
+      {
+        "keys": "Esc",
+        "action": "Closes the menu or the mobile panel and returns the focus to its trigger."
+      }
+    ],
+    "notes": [
+      "A `nav` named by `label`, a list of links and menu triggers (Radix NavigationMenu): `aria-expanded` and `aria-controls` on each trigger.",
+      "The mobile panel is a disclosure (no focus trap): its toggle is named by `openLabel` / `closeLabel` and says `aria-expanded`.",
+      "The light, the chevron and the tightening do not move under `prefers-reduced-motion`; the current page is tinted before scripts load."
+    ]
+  },
+  "related": [
+    "tabs",
+    "dropdown-menu",
+    "command",
+    "button"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/nav-bar",
+    "import": "import { NavBar } from \"@krizaka/ui/nav-bar\";",
+    "props": [
+      {
+        "component": "NavBarRoot",
+        "description": "The bar. Place it in a `sticky top-3` (floating) or `sticky top-0` wrapper — or let it scroll.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The accessible name of the navigation (“Main”) — passed translated.",
+            "required": true
+          },
+          {
+            "name": "compactAfter",
+            "type": "number | false",
+            "default": "24",
+            "description": "Pixels of scroll after which the bar tightens (denser, lower, lifted). `false`: never.",
+            "required": false
+          },
+          {
+            "name": "floating",
+            "type": "boolean",
+            "default": "true",
+            "description": "A floating pill (the Krizaka bar) or a full-width bar with a hairline under it.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "NavBarBrand",
+        "description": "The brand: a mark and a name, linking home.",
+        "props": [
+          {
+            "name": "asChild",
+            "type": "boolean",
+            "default": null,
+            "description": "Renders your link (a router `<Link>`) with the brand's look.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "NavBarItems",
+        "description": "The desktop navigation: links and menus, with the light that glides between them. Hidden below `md` (see `NavBar.Mobile`).",
+        "props": []
+      },
+      {
+        "component": "NavBarLink",
+        "description": "A link of the bar. `asChild` renders your router's `<Link>`.",
+        "props": [
+          {
+            "name": "active",
+            "type": "boolean",
+            "default": null,
+            "description": "The current page: `aria-current=\"page\"`, and the light rests on it.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "NavBarMenu",
+        "description": "A menu of the bar: its trigger, and its links in a panel that opens under the bar.",
+        "props": [
+          {
+            "name": "children",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The menu's links (`NavBar.MenuLink`), laid out in a panel; `columns` sets the grid.",
+            "required": true
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The trigger's words (“Products”) — passed translated.",
+            "required": true
+          },
+          {
+            "name": "active",
+            "type": "boolean",
+            "default": null,
+            "description": "The current page is inside this menu: the light rests on its trigger.",
+            "required": false
+          },
+          {
+            "name": "columns",
+            "type": "1 | 2",
+            "default": "1",
+            "description": "Columns of the panel.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "NavBarMenuLink",
+        "description": "A link inside a menu: an icon, a name and a line of text.",
+        "props": [
+          {
+            "name": "title",
+            "type": "string",
+            "default": null,
+            "description": "The link's name — passed translated.",
+            "required": true
+          },
+          {
+            "name": "active",
+            "type": "boolean",
+            "default": null,
+            "description": "The current page.",
+            "required": false
+          },
+          {
+            "name": "description",
+            "type": "string",
+            "default": null,
+            "description": "One line under it — passed translated.",
+            "required": false
+          },
+          {
+            "name": "icon",
+            "type": "ReactNode",
+            "default": null,
+            "description": "An icon (a signature icon of `@krizaka/icons`: its node lights up on hover).",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "NavBarActions",
+        "description": "The right side: search, theme, language, the call to action.",
+        "props": []
+      },
+      {
+        "component": "NavBarMobile",
+        "description": "Below `md`: a toggle, and a panel under the bar with its links (`NavBar.MobileLink`). A disclosure: Escape and a click\non a link close it, the focus returns to the toggle.",
+        "props": [
+          {
+            "name": "closeLabel",
+            "type": "string",
+            "default": null,
+            "description": "The toggle's name when open (“Close the menu”) — passed translated.",
+            "required": true
+          },
+          {
+            "name": "openLabel",
+            "type": "string",
+            "default": null,
+            "description": "The toggle's name when closed (“Open the menu”) — passed translated.",
+            "required": true
+          }
+        ]
+      },
+      {
+        "component": "NavBarMobileLink",
+        "description": "A link of the mobile panel.",
+        "props": [
+          {
+            "name": "active",
+            "type": "boolean",
+            "default": null,
+            "description": "The current page.",
+            "required": false
+          },
+          {
+            "name": "asChild",
+            "type": "boolean",
+            "default": null,
+            "description": "Renders your router's `<Link>`.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "site",
+        "title": "A site's bar",
+        "description": "Brand, a Products menu, links, a call to action, a mobile panel — hover the items: one light glides between them.",
+        "path": "examples/nav-bar/site.tsx",
+        "module": "@krizaka/ui/registry/examples/nav-bar/site",
+        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { NavBar } from \"@krizaka/ui/nav-bar\";\n\nconst products = [\n  { href: \"#orazaka\", title: \"Orazaka\", description: \"Sovereign AI, on your own servers.\" },\n  { href: \"#orochia\", title: \"Orochia\", description: \"Creators keep 90 % of every support.\" },\n  { href: \"#ui\", title: \"Krizaka UI\", description: \"The components behind both.\" },\n];\n\n// The site's bar: a floating pill that tightens on scroll, one light gliding between its items and resting on the\n// current page, an accessible menu (Enter or ↓ opens, Escape closes), and a panel below `md`.\nexport default function NavBarSite() {\n  return (\n    <NavBar.Root label=\"Main\">\n      <NavBar.Brand href=\"#home\">Krizaka</NavBar.Brand>\n      <NavBar.Items>\n        <NavBar.Menu label=\"Products\">\n          {products.map((p) => (\n            <NavBar.MenuLink key={p.href} {...p} />\n          ))}\n        </NavBar.Menu>\n        <NavBar.Link href=\"#docs\">Docs</NavBar.Link>\n        <NavBar.Link href=\"#story\" active>Our story</NavBar.Link>\n      </NavBar.Items>\n      <NavBar.Actions>\n        <Button variant=\"primary\" size=\"sm\" shape=\"pill\" className=\"hidden sm:inline-flex\">Contact</Button>\n        <NavBar.Mobile openLabel=\"Open the menu\" closeLabel=\"Close the menu\">\n          {products.map((p) => (\n            <NavBar.MobileLink key={p.href} href={p.href}>{p.title}</NavBar.MobileLink>\n          ))}\n          <NavBar.MobileLink href=\"#story\" active>Our story</NavBar.MobileLink>\n        </NavBar.Mobile>\n      </NavBar.Actions>\n    </NavBar.Root>\n  );\n}\n"
+      },
+      {
+        "name": "menu-open",
+        "title": "A rich menu",
+        "description": "Two columns of links with icons whose node lights up, the current page tinted.",
+        "path": "examples/nav-bar/menu-open.tsx",
+        "module": "@krizaka/ui/registry/examples/nav-bar/menu-open",
+        "code": "import { NavBar } from \"@krizaka/ui/nav-bar\";\n\nconst icon = (\n  <svg data-kz-icon viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\" aria-hidden>\n    <path d=\"M12 3 19.8 7.5v9L12 21l-7.8-4.5v-9Z\" />\n    <circle data-node cx=\"12\" cy=\"12\" r=\"2.4\" fill=\"currentColor\" />\n  </svg>\n);\n\n// A menu in two columns, open: icons whose node lights up under the pointer, the current page tinted.\nexport default function NavBarMenuOpen({ defaultOpen = false }: { defaultOpen?: boolean }) {\n  return (\n    <NavBar.Root label=\"Main\" className=\"mb-72\">\n      <NavBar.Brand href=\"#home\">Krizaka</NavBar.Brand>\n      <NavBar.Items defaultValue={defaultOpen ? \"products\" : undefined}>\n        <NavBar.Menu value=\"products\" label=\"Products\" columns={2} active>\n          <NavBar.MenuLink href=\"#overview\" icon={icon} title=\"Overview\" description=\"What it does, in one page.\" active />\n          <NavBar.MenuLink href=\"#how\" icon={icon} title=\"How it works\" description=\"The request journey, step by step.\" />\n          <NavBar.MenuLink href=\"#demo\" icon={icon} title=\"Demo\" description=\"Try it on the real application.\" />\n          <NavBar.MenuLink href=\"#signature\" icon={icon} title=\"Signature\" description=\"What only it does.\" />\n        </NavBar.Menu>\n        <NavBar.Link href=\"#docs\">Docs</NavBar.Link>\n      </NavBar.Items>\n    </NavBar.Root>\n  );\n}\n"
+      },
+      {
+        "name": "app-bar",
+        "title": "Inside an app",
+        "description": "`floating={false}`: a full-width bar with a hairline, for an app's sections.",
+        "path": "examples/nav-bar/app-bar.tsx",
+        "module": "@krizaka/ui/registry/examples/nav-bar/app-bar",
+        "code": "import { NavBar } from \"@krizaka/ui/nav-bar\";\n\n// Inside an app: `floating={false}` — a full-width bar with a hairline, the same light between sections.\nexport default function NavBarAppBar() {\n  return (\n    <NavBar.Root label=\"Studio\" floating={false} compactAfter={false}>\n      <NavBar.Brand href=\"#studio\">Studio</NavBar.Brand>\n      <NavBar.Items>\n        <NavBar.Link href=\"#videos\" active>Videos</NavBar.Link>\n        <NavBar.Link href=\"#earnings\">Earnings</NavBar.Link>\n        <NavBar.Link href=\"#auctions\">Auctions</NavBar.Link>\n      </NavBar.Items>\n      <NavBar.Actions>\n        <NavBar.Mobile openLabel=\"Open the menu\" closeLabel=\"Close the menu\">\n          <NavBar.MobileLink href=\"#videos\" active>Videos</NavBar.MobileLink>\n          <NavBar.MobileLink href=\"#earnings\">Earnings</NavBar.MobileLink>\n        </NavBar.Mobile>\n      </NavBar.Actions>\n    </NavBar.Root>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "files": [
+    {
+      "path": "meta.ts",
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"alert\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"cn\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"countdown\"\n  | \"dialog\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"glow-card\"\n  | \"iso\"\n  | \"kbd\"\n  | \"loader\"\n  | \"marquee\"\n  | \"mascots\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page-header\"\n  | \"popover\"\n  | \"progress\"\n  | \"radio-group\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"stat\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"theme\"\n  | \"toast\"\n  | \"tooltip\"\n  | \"txt\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/** The group of the catalogue. */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+    },
+    {
+      "path": "nav-bar/index.ts",
+      "content": "/** @krizaka/ui/nav-bar — `NavBar` (Root, Brand, Items, Link, Menu, MenuLink, Actions, Mobile, MobileLink), `navBar`. Client. */\nexport {\n  NavBar,\n  navBar,\n  NavBarActions,\n  NavBarBrand,\n  type NavBarBrandProps,\n  NavBarItems,\n  NavBarLink,\n  type NavBarLinkProps,\n  NavBarMenu,\n  NavBarMenuLink,\n  type NavBarMenuLinkProps,\n  type NavBarMenuProps,\n  NavBarMobile,\n  NavBarMobileLink,\n  type NavBarMobileLinkProps,\n  type NavBarMobileProps,\n  NavBarRoot,\n  type NavBarRootProps,\n} from \"./nav-bar\";\n"
+    },
+    {
+      "path": "nav-bar/meta.ts",
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Nav bar\",\n  summary:\n    \"The Krizaka navigation bar: a floating pill that tightens as the page scrolls, one light that glides to the item under the pointer or the focus and rests on the current page, accessible menus with rich links, and a mobile panel.\",\n  status: \"beta\",\n  category: \"navigation\",\n  platforms: \"web\",\n  whenToUse: [\n    \"The top navigation of a site or a product: a brand, a few links, one or two menus, actions on the right.\",\n    \"A section bar inside an app (`floating={false}`): videos, earnings, auctions.\",\n  ],\n  whenNotToUse: [\n    { when: \"To switch views inside a page without changing the address.\", use: \"tabs\" },\n    { when: \"For a list of actions on one object.\", use: \"dropdown-menu\" },\n    { when: \"For search and commands across the app.\", use: \"command\" },\n  ],\n  bestPractices: [\n    \"Five items at most on the bar; group the rest in a menu, each link with a name and one line (`NavBar.MenuLink`).\",\n    \"Mark the current page with `active`: the light rests on it, `aria-current=\\\"page\\\"` says it.\",\n    \"Use your router's link with `asChild` on `NavBar.Link`, `NavBar.MenuLink` and `NavBar.MobileLink`.\",\n    \"One primary action at most in `NavBar.Actions` (a `Button` `size=\\\"sm\\\"` `shape=\\\"pill\\\"`).\",\n    \"Wrap it in a `sticky top-3` (floating) or `sticky top-0` container to keep it on screen.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Tab\", action: \"Moves between the brand, the items and the actions; leaving an open menu closes it.\" },\n      { keys: \"Enter / Space / ↓\", action: \"Opens a menu and moves into it.\" },\n      { keys: \"↑ / ↓ · Home / End\", action: \"Walks the links of an open menu.\" },\n      { keys: \"← / →\", action: \"Moves between the items of the bar.\" },\n      { keys: \"Esc\", action: \"Closes the menu or the mobile panel and returns the focus to its trigger.\" },\n    ],\n    notes: [\n      \"A `nav` named by `label`, a list of links and menu triggers (Radix NavigationMenu): `aria-expanded` and `aria-controls` on each trigger.\",\n      \"The mobile panel is a disclosure (no focus trap): its toggle is named by `openLabel` / `closeLabel` and says `aria-expanded`.\",\n      \"The light, the chevron and the tightening do not move under `prefers-reduced-motion`; the current page is tinted before scripts load.\",\n    ],\n  },\n  related: [\"tabs\", \"dropdown-menu\", \"command\", \"button\"],\n  web: {\n    imports: [\"NavBar\"],\n    examples: [\n      { name: \"site\", title: \"A site's bar\", description: \"Brand, a Products menu, links, a call to action, a mobile panel — hover the items: one light glides between them.\" },\n      { name: \"menu-open\", title: \"A rich menu\", description: \"Two columns of links with icons whose node lights up, the current page tinted.\" },\n      { name: \"app-bar\", title: \"Inside an app\", description: \"`floating={false}`: a full-width bar with a hairline, for an app's sections.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+    },
+    {
+      "path": "nav-bar/nav-bar.tsx",
+      "content": "// Client (scroll, a sliding indicator, menus). Radix NavigationMenu does the menus' semantics and keyboard (Enter, Space\n// and ↓ open; ↑ ↓ Home End walk; Escape closes and returns the focus; Tab out closes); this file draws the Krizaka bar:\n// a floating pill that tightens once the page scrolls, one light that glides to the item under the pointer or the\n// focus and rests on the current page, and a mobile panel that is a plain disclosure (no focus trap, Escape closes).\nimport { NavigationMenu as Nav, Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { useSlidingIndicator } from \"../sliding-indicator\";\n\nexport const navBar = tv({\n  slots: {\n    root:\n      \"group/nav relative z-40 mx-auto flex h-14 w-full items-center gap-2 border-border-subtle bg-surface-1/75 backdrop-blur-xl backdrop-saturate-150 \" +\n      \"transition-[height,background-color,border-color,box-shadow] duration-300 motion-reduce:transition-none \" +\n      \"data-compact:h-12 data-compact:border-border-default data-compact:bg-surface-1/90 data-compact:shadow-lg\",\n    brand:\n      \"mr-2 inline-flex shrink-0 items-center gap-2 font-display text-[15px] font-bold tracking-tight text-fg no-underline \" +\n      \"rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    items: \"relative hidden md:block\",\n    list:\n      \"group/list relative isolate flex items-center gap-0.5 \" +\n      // The light: under the item that is pointed at or focused, resting on the current page.\n      \"before:absolute before:left-0 before:top-0 before:-z-10 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) \" +\n      \"before:rounded-full before:bg-surface-3 before:opacity-0 before:transition-[translate,width,opacity] before:duration-300 motion-reduce:before:transition-none \" +\n      \"data-[indicator=on]:before:opacity-100\",\n    item:\n      \"inline-flex h-9 select-none items-center gap-1 rounded-full px-3.5 text-sm font-medium text-fg-secondary no-underline transition-colors \" +\n      \"hover:text-fg data-active:text-fg data-[state=open]:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      // Before the light is ready (server render), the current page carries its own tint.\n      \"group-not-data-[indicator=on]/list:data-active:bg-surface-3\",\n    chevron: \"h-3.5 w-3.5 transition-transform duration-300 group-data-[state=open]/trigger:rotate-180 motion-reduce:transition-none\",\n    viewport:\n      \"kz-pop absolute left-0 top-full mt-2 h-(--radix-navigation-menu-viewport-height) w-(--radix-navigation-menu-viewport-width) origin-top-left overflow-hidden \" +\n      \"rounded-2xl border border-border-default bg-surface-1 shadow-lg transition-[width,height] duration-300 motion-reduce:transition-none\",\n    panel: \"grid w-max max-w-[min(92vw,30rem)] gap-1 p-2\",\n    menuLink:\n      \"group/link flex items-start gap-3 rounded-xl p-3 text-left no-underline outline-hidden transition-colors \" +\n      \"hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring data-active:bg-accent-soft\",\n    menuIcon:\n      \"mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border-default bg-surface-2 text-fg-accent \" +\n      \"transition-[transform,border-color] duration-300 group-hover/link:-translate-y-0.5 group-hover/link:border-accent [&>svg]:h-4.5 [&>svg]:w-4.5 motion-reduce:transform-none\",\n    menuTitle: \"block text-sm font-semibold text-fg\",\n    menuText: \"mt-0.5 block text-xs leading-relaxed text-fg-secondary\",\n    actions: \"ml-auto flex items-center gap-2\",\n    toggle:\n      \"inline-flex h-9 w-9 items-center justify-center rounded-full border border-border-subtle bg-surface-2/60 text-fg md:hidden \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    mobile: \"kz-pop absolute inset-x-0 top-full mt-2 grid gap-1 rounded-2xl border border-border-default bg-surface-1 p-2 shadow-lg md:hidden\",\n    mobileLink:\n      \"flex items-center justify-between rounded-xl px-3 py-3 text-[15px] font-medium text-fg no-underline hover:bg-surface-2 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-fg-accent\",\n  },\n  variants: {\n    floating: {\n      true: { root: \"max-w-5xl rounded-full border pl-5 pr-2 data-compact:max-w-4xl\" },\n      false: { root: \"border-b px-4 md:px-6\" },\n    },\n  },\n  defaultVariants: { floating: true },\n});\nconst s = navBar();\n\ninterface NavBarContext {\n  label: string;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  panelId: string;\n}\nconst Context = React.createContext<NavBarContext | null>(null);\nconst useNavBar = () => {\n  const ctx = React.useContext(Context);\n  if (!ctx) throw new Error(\"NavBar parts must be inside <NavBar.Root>.\");\n  return ctx;\n};\n\nexport type NavBarRootProps = React.ComponentProps<\"header\"> & {\n  /** The accessible name of the navigation (“Main”) — passed translated. */\n  label: string;\n  /**\n   * Pixels of scroll after which the bar tightens (denser, lower, lifted). `false`: never.\n   * @default 24\n   */\n  compactAfter?: number | false;\n  /**\n   * A floating pill (the Krizaka bar) or a full-width bar with a hairline under it.\n   * @default true\n   */\n  floating?: boolean;\n};\n\n/** The bar. Place it in a `sticky top-3` (floating) or `sticky top-0` wrapper — or let it scroll. */\nexport function NavBarRoot({ label, compactAfter = 24, floating = true, className, children, ...props }: NavBarRootProps) {\n  const [compact, setCompact] = React.useState(false);\n  const [open, setOpen] = React.useState(false);\n  const panelId = React.useId();\n  React.useEffect(() => {\n    if (compactAfter === false) return;\n    const onScroll = () => setCompact(window.scrollY > compactAfter);\n    onScroll();\n    window.addEventListener(\"scroll\", onScroll, { passive: true });\n    return () => window.removeEventListener(\"scroll\", onScroll);\n  }, [compactAfter]);\n  const ctx = React.useMemo(() => ({ label, open, setOpen, panelId }), [label, open, panelId]);\n  return (\n    <Context.Provider value={ctx}>\n      <header data-compact={compact ? \"\" : undefined} data-floating={floating} className={navBar({ floating }).root({ className })} {...props}>\n        {children}\n      </header>\n    </Context.Provider>\n  );\n}\n\nexport type NavBarBrandProps = React.ComponentProps<\"a\"> & {\n  /** Renders your link (a router `<Link>`) with the brand's look. */\n  asChild?: boolean;\n};\n\n/** The brand: a mark and a name, linking home. */\nexport function NavBarBrand({ asChild, className, ...props }: NavBarBrandProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return <Comp className={s.brand({ className })} {...props} />;\n}\n\n/** The desktop navigation: links and menus, with the light that glides between them. Hidden below `md` (see `NavBar.Mobile`). */\nexport function NavBarItems({ className, children, ...props }: Omit<React.ComponentProps<typeof Nav.Root>, \"orientation\">) {\n  const { label } = useNavBar();\n  const { ref, handlers } = useSlidingIndicator<HTMLUListElement>({ item: \"[data-nav-item]\", active: \"[data-nav-item][data-active]\", follow: true });\n  return (\n    <Nav.Root aria-label={label} className={s.items({ className })} delayDuration={80} {...props}>\n      <Nav.List ref={ref} className={s.list()} {...handlers}>\n        {children}\n      </Nav.List>\n      <Nav.Viewport className={s.viewport()} />\n    </Nav.Root>\n  );\n}\n\nexport type NavBarLinkProps = Omit<React.ComponentProps<typeof Nav.Link>, \"active\"> & {\n  /** The current page: `aria-current=\"page\"`, and the light rests on it. */\n  active?: boolean;\n};\n\n/** A link of the bar. `asChild` renders your router's `<Link>`. */\nexport function NavBarLink({ active, className, ...props }: NavBarLinkProps) {\n  return (\n    <Nav.Item>\n      <Nav.Link data-nav-item=\"\" data-active={active ? \"\" : undefined} active={active} aria-current={active ? \"page\" : undefined} className={s.item({ className })} {...props} />\n    </Nav.Item>\n  );\n}\n\nexport type NavBarMenuProps = Omit<React.ComponentProps<typeof Nav.Item>, \"children\"> & {\n  /** The trigger's words (“Products”) — passed translated. */\n  label: string;\n  /** The current page is inside this menu: the light rests on its trigger. */\n  active?: boolean;\n  /** The menu's links (`NavBar.MenuLink`), laid out in a panel; `columns` sets the grid. */\n  children: React.ReactNode;\n  /**\n   * Columns of the panel.\n   * @default 1\n   */\n  columns?: 1 | 2;\n};\n\n/** A menu of the bar: its trigger, and its links in a panel that opens under the bar. */\nexport function NavBarMenu({ label, active, columns = 1, children, className, ...props }: NavBarMenuProps) {\n  return (\n    <Nav.Item className={className} {...props}>\n      <Nav.Trigger data-nav-item=\"\" data-active={active ? \"\" : undefined} className={cn(s.item(), \"group/trigger\")}>\n        {label}\n        <svg viewBox=\"0 0 24 24\" className={s.chevron()} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          <path d=\"m6 9 6 6 6-6\" />\n        </svg>\n      </Nav.Trigger>\n      <Nav.Content className={cn(s.panel(), columns === 2 && \"md:grid-cols-2\")}>{children}</Nav.Content>\n    </Nav.Item>\n  );\n}\n\nexport type NavBarMenuLinkProps = Omit<React.ComponentProps<typeof Nav.Link>, \"title\" | \"active\"> & {\n  /** The link's name — passed translated. */\n  title: string;\n  /** One line under it — passed translated. */\n  description?: string;\n  /** An icon (a signature icon of `@krizaka/icons`: its node lights up on hover). */\n  icon?: React.ReactNode;\n  /** The current page. */\n  active?: boolean;\n};\n\n/** A link inside a menu: an icon, a name and a line of text. */\nexport function NavBarMenuLink({ title, description, icon, active, href, className, asChild, children, ...props }: NavBarMenuLinkProps) {\n  const body = (\n    <>\n      {icon && <span className={s.menuIcon()}>{icon}</span>}\n      <span className=\"min-w-0\">\n        <span className={s.menuTitle()}>{title}</span>\n        {description && <span className={s.menuText()}>{description}</span>}\n      </span>\n    </>\n  );\n  return (\n    <Nav.Link asChild={asChild} href={asChild ? undefined : href} active={active} aria-current={active ? \"page\" : undefined} data-active={active ? \"\" : undefined} className={s.menuLink({ className })} {...props}>\n      {asChild && React.isValidElement<{ children?: React.ReactNode }>(children) ? React.cloneElement(children, undefined, body) : body}\n    </Nav.Link>\n  );\n}\n\n/** The right side: search, theme, language, the call to action. */\nexport function NavBarActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.actions({ className })} {...props} />;\n}\n\nexport type NavBarMobileProps = React.ComponentProps<\"nav\"> & {\n  /** The toggle's name when closed (“Open the menu”) — passed translated. */\n  openLabel: string;\n  /** The toggle's name when open (“Close the menu”) — passed translated. */\n  closeLabel: string;\n};\n\n/**\n * Below `md`: a toggle, and a panel under the bar with its links (`NavBar.MobileLink`). A disclosure: Escape and a click\n * on a link close it, the focus returns to the toggle.\n */\nexport function NavBarMobile({ openLabel, closeLabel, className, children, ...props }: NavBarMobileProps) {\n  const { label, open, setOpen, panelId } = useNavBar();\n  const toggle = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Escape\") return;\n      setOpen(false);\n      toggle.current?.focus();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, setOpen]);\n  return (\n    <>\n      <button ref={toggle} type=\"button\" aria-expanded={open} aria-controls={panelId} aria-label={open ? closeLabel : openLabel} onClick={() => setOpen(!open)} className={s.toggle()}>\n        <svg viewBox=\"0 0 24 24\" className=\"h-4.5 w-4.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          {open ? <path d=\"M18 6 6 18M6 6l12 12\" /> : <path d=\"M4 7h16M4 12h16M4 17h10\" />}\n        </svg>\n      </button>\n      {open && (\n        <nav\n          id={panelId}\n          aria-label={label}\n          className={s.mobile({ className })}\n          onClick={(e) => {\n            if ((e.target as Element).closest(\"a\")) setOpen(false);\n          }}\n          {...props}\n        >\n          {children}\n        </nav>\n      )}\n    </>\n  );\n}\n\nexport type NavBarMobileLinkProps = React.ComponentProps<\"a\"> & {\n  /** The current page. */\n  active?: boolean;\n  /** Renders your router's `<Link>`. */\n  asChild?: boolean;\n};\n\n/** A link of the mobile panel. */\nexport function NavBarMobileLink({ active, asChild, className, ...props }: NavBarMobileLinkProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return <Comp aria-current={active ? \"page\" : undefined} className={s.mobileLink({ className })} {...props} />;\n}\n\n/**\n * `NavBar.Root/Brand/Items/Link/Menu/MenuLink/Actions/Mobile/MobileLink` — the Krizaka navigation bar: floating, tightening\n * on scroll, one light gliding between its items, accessible menus, a mobile panel.\n */\nexport const NavBar = {\n  Root: NavBarRoot,\n  Brand: NavBarBrand,\n  Items: NavBarItems,\n  Link: NavBarLink,\n  Menu: NavBarMenu,\n  MenuLink: NavBarMenuLink,\n  Actions: NavBarActions,\n  Mobile: NavBarMobile,\n  MobileLink: NavBarMobileLink,\n};\n"
+    },
+    {
+      "path": "sliding-indicator.ts",
+      "content": "// The shared sliding indicator (NavBar, Tabs): one element that glides from item to item instead of each item lighting\n// up on its own. It writes the target's box as CSS variables on the list (`--kz-ind-x/y/w/h`) and `data-indicator=\"on\"`\n// — no re-render, no animation frame: the glide is a CSS transition (none under reduced motion). Before hydration the\n// items keep their own active style, so nothing flashes.\nimport * as React from \"react\";\n\nconst useIsoLayoutEffect = typeof window === \"undefined\" ? React.useEffect : React.useLayoutEffect;\n\nexport function useSlidingIndicator<T extends HTMLElement>({ item, active, follow = false }: { item: string; active: string; follow?: boolean }) {\n  const ref = React.useRef<T>(null);\n  const place = React.useCallback((target: Element | null) => {\n    const list = ref.current;\n    if (!list) return;\n    if (!(target instanceof HTMLElement) || !list.contains(target)) {\n      list.removeAttribute(\"data-indicator\");\n      return;\n    }\n    const a = target.getBoundingClientRect();\n    const b = list.getBoundingClientRect();\n    list.style.setProperty(\"--kz-ind-x\", `${a.left - b.left + list.scrollLeft}px`);\n    list.style.setProperty(\"--kz-ind-y\", `${a.top - b.top + list.scrollTop}px`);\n    list.style.setProperty(\"--kz-ind-w\", `${a.width}px`);\n    list.style.setProperty(\"--kz-ind-h\", `${a.height}px`);\n    list.setAttribute(\"data-indicator\", \"on\");\n  }, []);\n  const rest = React.useCallback(() => place(ref.current?.querySelector(active) ?? null), [place, active]);\n\n  useIsoLayoutEffect(() => {\n    const list = ref.current;\n    if (!list) return;\n    rest();\n    const resize = new ResizeObserver(rest);\n    resize.observe(list);\n    const changes = new MutationObserver(rest);\n    changes.observe(list, { subtree: true, attributes: true, attributeFilter: [\"data-state\", \"aria-current\", \"data-active\"] });\n    return () => {\n      resize.disconnect();\n      changes.disconnect();\n    };\n  }, [rest]);\n\n  const handlers = follow\n    ? {\n        onPointerOver: (e: React.PointerEvent) => place((e.target as Element).closest(item)),\n        onPointerLeave: rest,\n        onFocus: (e: React.FocusEvent) => place((e.target as Element).closest(item)),\n        onBlur: rest,\n      }\n    : {};\n  return { ref, handlers };\n}\n"
+    }
+  ],
+  "dependencies": [
+    "radix-ui@^1.7.0",
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [
+    "cn"
+  ],
+  "demo": {
+    "path": "examples/nav-bar/site.tsx",
+    "content": "import { Button } from \"@krizaka/ui/button\";\nimport { NavBar } from \"@krizaka/ui/nav-bar\";\n\nconst products = [\n  { href: \"#orazaka\", title: \"Orazaka\", description: \"Sovereign AI, on your own servers.\" },\n  { href: \"#orochia\", title: \"Orochia\", description: \"Creators keep 90 % of every support.\" },\n  { href: \"#ui\", title: \"Krizaka UI\", description: \"The components behind both.\" },\n];\n\n// The site's bar: a floating pill that tightens on scroll, one light gliding between its items and resting on the\n// current page, an accessible menu (Enter or ↓ opens, Escape closes), and a panel below `md`.\nexport default function NavBarSite() {\n  return (\n    <NavBar.Root label=\"Main\">\n      <NavBar.Brand href=\"#home\">Krizaka</NavBar.Brand>\n      <NavBar.Items>\n        <NavBar.Menu label=\"Products\">\n          {products.map((p) => (\n            <NavBar.MenuLink key={p.href} {...p} />\n          ))}\n        </NavBar.Menu>\n        <NavBar.Link href=\"#docs\">Docs</NavBar.Link>\n        <NavBar.Link href=\"#story\" active>Our story</NavBar.Link>\n      </NavBar.Items>\n      <NavBar.Actions>\n        <Button variant=\"primary\" size=\"sm\" shape=\"pill\" className=\"hidden sm:inline-flex\">Contact</Button>\n        <NavBar.Mobile openLabel=\"Open the menu\" closeLabel=\"Close the menu\">\n          {products.map((p) => (\n            <NavBar.MobileLink key={p.href} href={p.href}>{p.title}</NavBar.MobileLink>\n          ))}\n          <NavBar.MobileLink href=\"#story\" active>Our story</NavBar.MobileLink>\n        </NavBar.Mobile>\n      </NavBar.Actions>\n    </NavBar.Root>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "NavBarRoot",
+      "description": "The bar. Place it in a `sticky top-3` (floating) or `sticky top-0` wrapper — or let it scroll.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The accessible name of the navigation (“Main”) — passed translated.",
+          "required": true
+        },
+        {
+          "name": "compactAfter",
+          "type": "number | false",
+          "default": "24",
+          "description": "Pixels of scroll after which the bar tightens (denser, lower, lifted). `false`: never.",
+          "required": false
+        },
+        {
+          "name": "floating",
+          "type": "boolean",
+          "default": "true",
+          "description": "A floating pill (the Krizaka bar) or a full-width bar with a hairline under it.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "NavBarBrand",
+      "description": "The brand: a mark and a name, linking home.",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "default": null,
+          "description": "Renders your link (a router `<Link>`) with the brand's look.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "NavBarItems",
+      "description": "The desktop navigation: links and menus, with the light that glides between them. Hidden below `md` (see `NavBar.Mobile`).",
+      "props": []
+    },
+    {
+      "component": "NavBarLink",
+      "description": "A link of the bar. `asChild` renders your router's `<Link>`.",
+      "props": [
+        {
+          "name": "active",
+          "type": "boolean",
+          "default": null,
+          "description": "The current page: `aria-current=\"page\"`, and the light rests on it.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "NavBarMenu",
+      "description": "A menu of the bar: its trigger, and its links in a panel that opens under the bar.",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The menu's links (`NavBar.MenuLink`), laid out in a panel; `columns` sets the grid.",
+          "required": true
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The trigger's words (“Products”) — passed translated.",
+          "required": true
+        },
+        {
+          "name": "active",
+          "type": "boolean",
+          "default": null,
+          "description": "The current page is inside this menu: the light rests on its trigger.",
+          "required": false
+        },
+        {
+          "name": "columns",
+          "type": "1 | 2",
+          "default": "1",
+          "description": "Columns of the panel.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "NavBarMenuLink",
+      "description": "A link inside a menu: an icon, a name and a line of text.",
+      "props": [
+        {
+          "name": "title",
+          "type": "string",
+          "default": null,
+          "description": "The link's name — passed translated.",
+          "required": true
+        },
+        {
+          "name": "active",
+          "type": "boolean",
+          "default": null,
+          "description": "The current page.",
+          "required": false
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "default": null,
+          "description": "One line under it — passed translated.",
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "default": null,
+          "description": "An icon (a signature icon of `@krizaka/icons`: its node lights up on hover).",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "NavBarActions",
+      "description": "The right side: search, theme, language, the call to action.",
+      "props": []
+    },
+    {
+      "component": "NavBarMobile",
+      "description": "Below `md`: a toggle, and a panel under the bar with its links (`NavBar.MobileLink`). A disclosure: Escape and a click\non a link close it, the focus returns to the toggle.",
+      "props": [
+        {
+          "name": "closeLabel",
+          "type": "string",
+          "default": null,
+          "description": "The toggle's name when open (“Close the menu”) — passed translated.",
+          "required": true
+        },
+        {
+          "name": "openLabel",
+          "type": "string",
+          "default": null,
+          "description": "The toggle's name when closed (“Open the menu”) — passed translated.",
+          "required": true
+        }
+      ]
+    },
+    {
+      "component": "NavBarMobileLink",
+      "description": "A link of the mobile panel.",
+      "props": [
+        {
+          "name": "active",
+          "type": "boolean",
+          "default": null,
+          "description": "The current page.",
+          "required": false
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "default": null,
+          "description": "Renders your router's `<Link>`.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}