@krizaka/ui 2.2.0 → 2.4.0

package/registry/examples/loader/region-handover.js

@@ -0,0 +1,42 @@
+"use client";
+
+// registry/examples/loader/region-handover.tsx
+import { Button } from "@krizaka/ui/button";
+import { LoadingRegion } from "@krizaka/ui/loader";
+import { Skeleton } from "@krizaka/ui/skeleton";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function LoaderRegionHandover() {
+  const [loading, setLoading] = useState(false);
+  const card = "flex items-center gap-3 rounded-xl border border-border-default bg-surface-1 p-4";
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-sm flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(
+      LoadingRegion,
+      {
+        loading,
+        label: "Loading the creator",
+        slowLabel: "Still loading \u2014 the server is busy",
+        slowAfter: 2500,
+        delay: 0,
+        skeleton: /* @__PURE__ */ jsxs("div", { className: card, children: [
+          /* @__PURE__ */ jsx(Skeleton, { shape: "circle" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "w-1/2" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "w-3/4" })
+          ] })
+        ] }),
+        children: /* @__PURE__ */ jsxs("div", { className: card, children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-10 w-10 rounded-full bg-accent-soft" }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "font-semibold text-fg", children: "Eric Moreau" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: "1,204 supporters" })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => setLoading((l) => !l), children: loading ? "Finish loading" : "Load again" })
+  ] });
+}
+export {
+  LoaderRegionHandover as default
+};

package/registry/examples/loader/region-handover.tsx

@@ -0,0 +1,29 @@
+"use client";
+import { Button } from "@krizaka/ui/button";
+import { LoadingRegion } from "@krizaka/ui/loader";
+import { Skeleton } from "@krizaka/ui/skeleton";
+import { useState } from "react";
+
+// Press “Load again”: the region hands over — a skeleton of its shape → words when it lasts → the content, fading in.
+export default function LoaderRegionHandover() {
+  const [loading, setLoading] = useState(false);
+  const card = "flex items-center gap-3 rounded-xl border border-border-default bg-surface-1 p-4";
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-3">
+      <LoadingRegion
+        loading={loading}
+        label="Loading the creator"
+        slowLabel="Still loading — the server is busy"
+        slowAfter={2500}
+        delay={0}
+        skeleton={<div className={card}><Skeleton shape="circle" /><div className="flex flex-1 flex-col gap-2"><Skeleton className="w-1/2" /><Skeleton className="w-3/4" /></div></div>}
+      >
+        <div className={card}>
+          <span aria-hidden className="h-10 w-10 rounded-full bg-accent-soft" />
+          <div><p className="font-semibold text-fg">Eric Moreau</p><p className="text-sm text-fg-secondary">1,204 supporters</p></div>
+        </div>
+      </LoadingRegion>
+      <Button size="sm" onClick={() => setLoading((l) => !l)}>{loading ? "Finish loading" : "Load again"}</Button>
+    </div>
+  );
+}

package/registry/examples/loader/upload-eta.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/loader/upload-eta.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/loader/upload-eta.tsx
+import { Loader } from "@krizaka/ui/loader";
+import { jsx } from "react/jsx-runtime";
+function LoaderUploadEta() {
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-sm rounded-xl border border-border-default bg-surface-1 p-4", children: /* @__PURE__ */ jsx(Loader, { label: "Uploading \u201CNight walk.mp4\u201D", value: 0.62, eta: "About 40 s left", delay: 0 }) });
+}
+export {
+  LoaderUploadEta as default
+};

package/registry/examples/loader/upload-eta.tsx

@@ -0,0 +1,10 @@
+import { Loader } from "@krizaka/ui/loader";
+
+// A determinate wait with its time left: the trace grows, the percentage and the ETA read in tabular figures.
+export default function LoaderUploadEta() {
+  return (
+    <div className="w-full max-w-sm rounded-xl border border-border-default bg-surface-1 p-4">
+      <Loader label="Uploading “Night walk.mp4”" value={0.62} eta="About 40 s left" delay={0} />
+    </div>
+  );
+}

package/registry/examples/marquee/cards.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/marquee/cards.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/marquee/cards.tsx
+import { Marquee } from "@krizaka/ui/marquee";
+import { jsx, jsxs } from "react/jsx-runtime";
+var quotes = [
+  { who: "Maya, illustrator", text: "My supporters see exactly where their tip goes." },
+  { who: "Eric, filmmaker", text: "I sold a cut to the highest bidder, live." },
+  { who: "Sam, musician", text: "90 % to me \u2014 and it shows on every payout." }
+];
+function MarqueeCards() {
+  return /* @__PURE__ */ jsx(Marquee, { label: "What creators say", pauseLabel: "Pause", playLabel: "Play", direction: "right", speed: 24, className: "w-full max-w-2xl", children: quotes.map((q) => /* @__PURE__ */ jsxs("figure", { className: "w-72 rounded-xl border border-border-default bg-surface-1 p-4", children: [
+    /* @__PURE__ */ jsxs("blockquote", { className: "text-sm text-fg", children: [
+      "\u201C",
+      q.text,
+      "\u201D"
+    ] }),
+    /* @__PURE__ */ jsx("figcaption", { className: "mt-2 text-xs text-fg-secondary", children: q.who })
+  ] }, q.who)) });
+}
+export {
+  MarqueeCards as default
+};

package/registry/examples/marquee/cards.tsx

@@ -0,0 +1,21 @@
+import { Marquee } from "@krizaka/ui/marquee";
+
+const quotes = [
+  { who: "Maya, illustrator", text: "My supporters see exactly where their tip goes." },
+  { who: "Eric, filmmaker", text: "I sold a cut to the highest bidder, live." },
+  { who: "Sam, musician", text: "90 % to me — and it shows on every payout." },
+];
+
+// Cards sliding the other way, slower; each card's text is read once (the copy is hidden from assistive technology).
+export default function MarqueeCards() {
+  return (
+    <Marquee label="What creators say" pauseLabel="Pause" playLabel="Play" direction="right" speed={24} className="w-full max-w-2xl">
+      {quotes.map((q) => (
+        <figure key={q.who} className="w-72 rounded-xl border border-border-default bg-surface-1 p-4">
+          <blockquote className="text-sm text-fg">“{q.text}”</blockquote>
+          <figcaption className="mt-2 text-xs text-fg-secondary">{q.who}</figcaption>
+        </figure>
+      ))}
+    </Marquee>
+  );
+}

package/registry/examples/marquee/logos.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/marquee/logos.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/marquee/logos.tsx
+import { Marquee } from "@krizaka/ui/marquee";
+import { jsx } from "react/jsx-runtime";
+var names = ["Postgres", "Ollama", "Spring", "Kafka", "Keycloak", "Qdrant", "MinIO", "Grafana"];
+function MarqueeLogos() {
+  return /* @__PURE__ */ jsx(Marquee, { label: "Built on open source", pauseLabel: "Pause the band", playLabel: "Play the band", className: "w-full max-w-2xl", children: names.map((name) => /* @__PURE__ */ jsx("span", { className: "font-display text-lg font-semibold text-fg-secondary", children: name }, name)) });
+}
+export {
+  MarqueeLogos as default
+};

package/registry/examples/marquee/logos.tsx

@@ -0,0 +1,17 @@
+import { Marquee } from "@krizaka/ui/marquee";
+
+const names = ["Postgres", "Ollama", "Spring", "Kafka", "Keycloak", "Qdrant", "MinIO", "Grafana"];
+
+// A band of names at 40 px/s: it pauses under the pointer or the focus, and its pause button (top right, on hover or
+// focus) stops it for good. Under reduced motion it is a still row you scroll.
+export default function MarqueeLogos() {
+  return (
+    <Marquee label="Built on open source" pauseLabel="Pause the band" playLabel="Play the band" className="w-full max-w-2xl">
+      {names.map((name) => (
+        <span key={name} className="font-display text-lg font-semibold text-fg-secondary">
+          {name}
+        </span>
+      ))}
+    </Marquee>
+  );
+}

package/registry/examples/media-capture/clip.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/media-capture/clip.js

@@ -0,0 +1,20 @@
+"use client";
+
+// registry/examples/media-capture/clip.tsx
+import { MediaCapture } from "@krizaka/ui/media-capture";
+import { jsx } from "react/jsx-runtime";
+function MediaCaptureClip() {
+  return /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(
+    MediaCapture,
+    {
+      mode: "both",
+      maxDuration: 60,
+      aspectRatio: "9 / 16",
+      onCapture: (result) => console.info(result.kind, result.blob.size),
+      labels: { prompt: "Film a story of up to 60 seconds, or take a photo." }
+    }
+  ) });
+}
+export {
+  MediaCaptureClip as default
+};

package/registry/examples/media-capture/clip.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { MediaCapture } from "@krizaka/ui/media-capture";
+
+// A photo or a clip of 60 seconds at most, for a story; the blob goes to the upload queue.
+export default function MediaCaptureClip() {
+  return (
+    <div className="w-72">
+      <MediaCapture
+        mode="both"
+        maxDuration={60}
+        aspectRatio="9 / 16"
+        onCapture={(result) => console.info(result.kind, result.blob.size)}
+        labels={{ prompt: "Film a story of up to 60 seconds, or take a photo." }}
+      />
+    </div>
+  );
+}

package/registry/examples/media-capture/native/photo.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/media-capture/native/photo.js

@@ -0,0 +1,27 @@
+"use client";
+
+// registry/examples/media-capture/native/photo.tsx
+import { MediaCapture } from "@krizaka/ui/native/media-capture";
+import { jsx } from "react/jsx-runtime";
+function NativeMediaCapturePhoto() {
+  return /* @__PURE__ */ jsx(
+    MediaCapture,
+    {
+      mode: "photo",
+      onCapture: ({ uri }) => console.info(uri),
+      labels: {
+        prompt: "Take a profile picture with your camera.",
+        start: "Turn on the camera",
+        denied: "Camera access is off. Turn it on in Settings.",
+        settings: "Open Settings",
+        takePhoto: "Take photo",
+        startRecording: "Start recording",
+        stopRecording: "Stop recording",
+        switchCamera: "Switch camera"
+      }
+    }
+  );
+}
+export {
+  NativeMediaCapturePhoto as default
+};

package/registry/examples/media-capture/native/photo.tsx

@@ -0,0 +1,20 @@
+import { MediaCapture } from "@krizaka/ui/native/media-capture";
+
+export default function NativeMediaCapturePhoto() {
+  return (
+    <MediaCapture
+      mode="photo"
+      onCapture={({ uri }) => console.info(uri)}
+      labels={{
+        prompt: "Take a profile picture with your camera.",
+        start: "Turn on the camera",
+        denied: "Camera access is off. Turn it on in Settings.",
+        settings: "Open Settings",
+        takePhoto: "Take photo",
+        startRecording: "Start recording",
+        stopRecording: "Stop recording",
+        switchCamera: "Switch camera",
+      }}
+    />
+  );
+}

package/registry/examples/media-capture/profile-photo.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/media-capture/profile-photo.js

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/media-capture/profile-photo.tsx
+import { MediaCapture } from "@krizaka/ui/media-capture";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MediaCaptureProfilePhoto() {
+  const [photo, setPhoto] = React.useState(null);
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-72 flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(
+      MediaCapture,
+      {
+        mode: "photo",
+        facing: "user",
+        onCapture: (result) => setPhoto(result.url),
+        labels: { prompt: "Take a profile picture with your camera.", start: "Turn on the camera" }
+      }
+    ),
+    photo && /* @__PURE__ */ jsx("img", { src: photo, alt: "Your new profile picture", className: "h-20 w-20 rounded-full object-cover" })
+  ] });
+}
+export {
+  MediaCaptureProfilePhoto as default
+};

package/registry/examples/media-capture/profile-photo.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { MediaCapture } from "@krizaka/ui/media-capture";
+import * as React from "react";
+
+// The front camera, a photo; the browser asks only when the button is pressed.
+export default function MediaCaptureProfilePhoto() {
+  const [photo, setPhoto] = React.useState<string | null>(null);
+  return (
+    <div className="flex w-72 flex-col gap-3">
+      <MediaCapture
+        mode="photo"
+        facing="user"
+        onCapture={(result) => setPhoto(result.url)}
+        labels={{ prompt: "Take a profile picture with your camera.", start: "Turn on the camera" }}
+      />
+      {photo && <img src={photo} alt="Your new profile picture" className="h-20 w-20 rounded-full object-cover" />}
+    </div>
+  );
+}

package/registry/examples/meter/balance.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/meter/balance.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/meter/balance.tsx
+import { Meter, MeterValue } from "@krizaka/ui/meter";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MeterBalance() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
+    /* @__PURE__ */ jsx(Meter, { variant: "ring", label: "Credits left", value: 12, max: 100, valueText: "12 credits of 100", thresholds: { low: 0.25, high: 0.6 }, optimum: "high", children: /* @__PURE__ */ jsx(MeterValue, { value: "12", caption: "credits" }) }),
+    /* @__PURE__ */ jsx(Meter, { variant: "ring", label: "Credits left", value: 80, max: 100, valueText: "80 credits of 100", thresholds: { low: 0.25, high: 0.6 }, optimum: "high", children: /* @__PURE__ */ jsx(MeterValue, { value: "80", caption: "credits" }) })
+  ] });
+}
+export {
+  MeterBalance as default
+};

package/registry/examples/meter/balance.tsx

@@ -0,0 +1,15 @@
+import { Meter, MeterValue } from "@krizaka/ui/meter";
+
+// A balance, where high is good (`optimum="high"`): it turns to danger as it runs low.
+export default function MeterBalance() {
+  return (
+    <div className="flex items-center gap-6">
+      <Meter variant="ring" label="Credits left" value={12} max={100} valueText="12 credits of 100" thresholds={{ low: 0.25, high: 0.6 }} optimum="high">
+        <MeterValue value="12" caption="credits" />
+      </Meter>
+      <Meter variant="ring" label="Credits left" value={80} max={100} valueText="80 credits of 100" thresholds={{ low: 0.25, high: 0.6 }} optimum="high">
+        <MeterValue value="80" caption="credits" />
+      </Meter>
+    </div>
+  );
+}

package/registry/examples/meter/quota.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/meter/quota.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/meter/quota.tsx
+import { Meter } from "@krizaka/ui/meter";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MeterQuota() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-sm flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(Meter, { label: "Storage", value: 18, max: 50, valueText: "18 GB of 50 GB", thresholds: { low: 0.7, high: 0.9 }, showLabel: true }),
+    /* @__PURE__ */ jsx(Meter, { label: "GPU minutes", value: 41, max: 50, valueText: "41 of 50 min", thresholds: { low: 0.7, high: 0.9 }, showLabel: true }),
+    /* @__PURE__ */ jsx(Meter, { label: "API calls", value: 970, max: 1e3, valueText: "970 of 1,000", thresholds: { low: 0.7, high: 0.9 }, showLabel: true })
+  ] });
+}
+export {
+  MeterQuota as default
+};

package/registry/examples/meter/quota.tsx

@@ -0,0 +1,12 @@
+import { Meter } from "@krizaka/ui/meter";
+
+// Quotas: the tone turns to warning past 70 %, to danger past 90 % — and the value is said in words.
+export default function MeterQuota() {
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-4">
+      <Meter label="Storage" value={18} max={50} valueText="18 GB of 50 GB" thresholds={{ low: 0.7, high: 0.9 }} showLabel />
+      <Meter label="GPU minutes" value={41} max={50} valueText="41 of 50 min" thresholds={{ low: 0.7, high: 0.9 }} showLabel />
+      <Meter label="API calls" value={970} max={1000} valueText="970 of 1,000" thresholds={{ low: 0.7, high: 0.9 }} showLabel />
+    </div>
+  );
+}

package/registry/examples/meter/split.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/meter/split.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/meter/split.tsx
+import { Meter, MeterValue } from "@krizaka/ui/meter";
+import { jsx, jsxs } from "react/jsx-runtime";
+var parts = [
+  { label: "To the creator", value: 90, valueText: "\u20AC9.00" },
+  { label: "Platform", value: 10, valueText: "\u20AC1.00" }
+];
+function MeterSplit() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-md flex-wrap items-center gap-8", children: [
+    /* @__PURE__ */ jsx(Meter, { variant: "ring", label: "Split of a \u20AC10 tip", parts, children: /* @__PURE__ */ jsx(MeterValue, { value: "90 %", caption: "creator" }) }),
+    /* @__PURE__ */ jsx(Meter, { label: "Split of a \u20AC10 tip", parts, showLabel: true, className: "min-w-48 flex-1" })
+  ] });
+}
+export {
+  MeterSplit as default
+};

package/registry/examples/meter/split.tsx

@@ -0,0 +1,18 @@
+import { Meter, MeterValue } from "@krizaka/ui/meter";
+
+// Where a €10 tip goes: a split drawn as a ring and a bar, each with its legend — the text version of what it draws.
+const parts = [
+  { label: "To the creator", value: 90, valueText: "€9.00" },
+  { label: "Platform", value: 10, valueText: "€1.00" },
+];
+
+export default function MeterSplit() {
+  return (
+    <div className="flex w-full max-w-md flex-wrap items-center gap-8">
+      <Meter variant="ring" label="Split of a €10 tip" parts={parts}>
+        <MeterValue value="90 %" caption="creator" />
+      </Meter>
+      <Meter label="Split of a €10 tip" parts={parts} showLabel className="min-w-48 flex-1" />
+    </div>
+  );
+}

package/registry/examples/nav-bar/app-bar.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/nav-bar/app-bar.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/nav-bar/app-bar.tsx
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NavBarAppBar() {
+  return /* @__PURE__ */ jsxs(NavBar.Root, { label: "Studio", floating: false, compactAfter: false, children: [
+    /* @__PURE__ */ jsx(NavBar.Brand, { href: "#studio", children: "Studio" }),
+    /* @__PURE__ */ jsxs(NavBar.Items, { children: [
+      /* @__PURE__ */ jsx(NavBar.Link, { href: "#videos", active: true, children: "Videos" }),
+      /* @__PURE__ */ jsx(NavBar.Link, { href: "#earnings", children: "Earnings" }),
+      /* @__PURE__ */ jsx(NavBar.Link, { href: "#auctions", children: "Auctions" })
+    ] }),
+    /* @__PURE__ */ jsx(NavBar.Actions, { children: /* @__PURE__ */ jsxs(NavBar.Mobile, { openLabel: "Open the menu", closeLabel: "Close the menu", children: [
+      /* @__PURE__ */ jsx(NavBar.MobileLink, { href: "#videos", active: true, children: "Videos" }),
+      /* @__PURE__ */ jsx(NavBar.MobileLink, { href: "#earnings", children: "Earnings" })
+    ] }) })
+  ] });
+}
+export {
+  NavBarAppBar as default
+};

package/registry/examples/nav-bar/app-bar.tsx

@@ -0,0 +1,21 @@
+import { NavBar } from "@krizaka/ui/nav-bar";
+
+// Inside an app: `floating={false}` — a full-width bar with a hairline, the same light between sections.
+export default function NavBarAppBar() {
+  return (
+    <NavBar.Root label="Studio" floating={false} compactAfter={false}>
+      <NavBar.Brand href="#studio">Studio</NavBar.Brand>
+      <NavBar.Items>
+        <NavBar.Link href="#videos" active>Videos</NavBar.Link>
+        <NavBar.Link href="#earnings">Earnings</NavBar.Link>
+        <NavBar.Link href="#auctions">Auctions</NavBar.Link>
+      </NavBar.Items>
+      <NavBar.Actions>
+        <NavBar.Mobile openLabel="Open the menu" closeLabel="Close the menu">
+          <NavBar.MobileLink href="#videos" active>Videos</NavBar.MobileLink>
+          <NavBar.MobileLink href="#earnings">Earnings</NavBar.MobileLink>
+        </NavBar.Mobile>
+      </NavBar.Actions>
+    </NavBar.Root>
+  );
+}

package/registry/examples/nav-bar/menu-open.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/nav-bar/menu-open.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/nav-bar/menu-open.tsx
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { jsx, jsxs } from "react/jsx-runtime";
+var icon = /* @__PURE__ */ jsxs("svg", { "data-kz-icon": true, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": true, children: [
+  /* @__PURE__ */ jsx("path", { d: "M12 3 19.8 7.5v9L12 21l-7.8-4.5v-9Z" }),
+  /* @__PURE__ */ jsx("circle", { "data-node": true, cx: "12", cy: "12", r: "2.4", fill: "currentColor" })
+] });
+function NavBarMenuOpen({ defaultOpen = false }) {
+  return /* @__PURE__ */ jsxs(NavBar.Root, { label: "Main", className: "mb-72", children: [
+    /* @__PURE__ */ jsx(NavBar.Brand, { href: "#home", children: "Krizaka" }),
+    /* @__PURE__ */ jsxs(NavBar.Items, { defaultValue: defaultOpen ? "products" : void 0, children: [
+      /* @__PURE__ */ jsxs(NavBar.Menu, { value: "products", label: "Products", columns: 2, active: true, children: [
+        /* @__PURE__ */ jsx(NavBar.MenuLink, { href: "#overview", icon, title: "Overview", description: "What it does, in one page.", active: true }),
+        /* @__PURE__ */ jsx(NavBar.MenuLink, { href: "#how", icon, title: "How it works", description: "The request journey, step by step." }),
+        /* @__PURE__ */ jsx(NavBar.MenuLink, { href: "#demo", icon, title: "Demo", description: "Try it on the real application." }),
+        /* @__PURE__ */ jsx(NavBar.MenuLink, { href: "#signature", icon, title: "Signature", description: "What only it does." })
+      ] }),
+      /* @__PURE__ */ jsx(NavBar.Link, { href: "#docs", children: "Docs" })
+    ] })
+  ] });
+}
+export {
+  NavBarMenuOpen as default
+};

package/registry/examples/nav-bar/menu-open.tsx

@@ -0,0 +1,26 @@
+import { NavBar } from "@krizaka/ui/nav-bar";
+
+const icon = (
+  <svg data-kz-icon viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden>
+    <path d="M12 3 19.8 7.5v9L12 21l-7.8-4.5v-9Z" />
+    <circle data-node cx="12" cy="12" r="2.4" fill="currentColor" />
+  </svg>
+);
+
+// A menu in two columns, open: icons whose node lights up under the pointer, the current page tinted.
+export default function NavBarMenuOpen({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  return (
+    <NavBar.Root label="Main" className="mb-72">
+      <NavBar.Brand href="#home">Krizaka</NavBar.Brand>
+      <NavBar.Items defaultValue={defaultOpen ? "products" : undefined}>
+        <NavBar.Menu value="products" label="Products" columns={2} active>
+          <NavBar.MenuLink href="#overview" icon={icon} title="Overview" description="What it does, in one page." active />
+          <NavBar.MenuLink href="#how" icon={icon} title="How it works" description="The request journey, step by step." />
+          <NavBar.MenuLink href="#demo" icon={icon} title="Demo" description="Try it on the real application." />
+          <NavBar.MenuLink href="#signature" icon={icon} title="Signature" description="What only it does." />
+        </NavBar.Menu>
+        <NavBar.Link href="#docs">Docs</NavBar.Link>
+      </NavBar.Items>
+    </NavBar.Root>
+  );
+}

package/registry/examples/nav-bar/site.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/nav-bar/site.js

@@ -0,0 +1,31 @@
+"use client";
+
+// registry/examples/nav-bar/site.tsx
+import { Button } from "@krizaka/ui/button";
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { jsx, jsxs } from "react/jsx-runtime";
+var products = [
+  { href: "#orazaka", title: "Orazaka", description: "Sovereign AI, on your own servers." },
+  { href: "#orochia", title: "Orochia", description: "Creators keep 90 % of every support." },
+  { href: "#ui", title: "Krizaka UI", description: "The components behind both." }
+];
+function NavBarSite() {
+  return /* @__PURE__ */ jsxs(NavBar.Root, { label: "Main", children: [
+    /* @__PURE__ */ jsx(NavBar.Brand, { href: "#home", children: "Krizaka" }),
+    /* @__PURE__ */ jsxs(NavBar.Items, { children: [
+      /* @__PURE__ */ jsx(NavBar.Menu, { label: "Products", children: products.map((p) => /* @__PURE__ */ jsx(NavBar.MenuLink, { ...p }, p.href)) }),
+      /* @__PURE__ */ jsx(NavBar.Link, { href: "#docs", children: "Docs" }),
+      /* @__PURE__ */ jsx(NavBar.Link, { href: "#story", active: true, children: "Our story" })
+    ] }),
+    /* @__PURE__ */ jsxs(NavBar.Actions, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", shape: "pill", className: "hidden sm:inline-flex", children: "Contact" }),
+      /* @__PURE__ */ jsxs(NavBar.Mobile, { openLabel: "Open the menu", closeLabel: "Close the menu", children: [
+        products.map((p) => /* @__PURE__ */ jsx(NavBar.MobileLink, { href: p.href, children: p.title }, p.href)),
+        /* @__PURE__ */ jsx(NavBar.MobileLink, { href: "#story", active: true, children: "Our story" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  NavBarSite as default
+};