@krizaka/ui 3.22.0 → 3.24.0

package/registry/examples/captcha/form.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/captcha/form.tsx
+import { Button } from "@krizaka/ui/button";
+import { Captcha, CaptchaDisclosure } from "@krizaka/ui/captcha";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CaptchaForm() {
+  const [token, setToken] = useState(null);
+  return /* @__PURE__ */ jsxs("form", { className: "flex w-80 max-w-full flex-col gap-3", onSubmit: (e) => e.preventDefault(), children: [
+    /* @__PURE__ */ jsx(Captcha, { siteKey: "1x00000000000000000000AA", onToken: setToken }),
+    /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !token, children: "Send" }),
+    /* @__PURE__ */ jsx(CaptchaDisclosure, {})
+  ] });
+}
+export {
+  CaptchaForm as default
+};

package/registry/examples/captcha/form.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { Button } from "@krizaka/ui/button";
+import { Captcha, CaptchaDisclosure } from "@krizaka/ui/captcha";
+import { useState } from "react";
+
+// Nothing shows for a normal visitor; the button unlocks when the token arrives. 1x00000000000000000000AA is Cloudflare's always-passing test key.
+export default function CaptchaForm() {
+  const [token, setToken] = useState<string | null>(null);
+  return (
+    <form className="flex w-80 max-w-full flex-col gap-3" onSubmit={(e) => e.preventDefault()}>
+      <Captcha siteKey="1x00000000000000000000AA" onToken={setToken} />
+      <Button type="submit" disabled={!token}>Send</Button>
+      <CaptchaDisclosure />
+    </form>
+  );
+}

package/registry/examples/card-grid/hover-quiet.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/card-grid/hover-quiet.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/card-grid/hover-quiet.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { jsx } from "react/jsx-runtime";
+var shortcuts = [
+  { id: "cli", logo: "orazaka", title: "The CLI", text: "npx orazaka install, start, dev \u2014 then every command and option." },
+  { id: "packs", logo: "orazaka", title: "Packs & Studios", text: "The business offers Orazaka installs without code." },
+  { id: "admin", logo: "orochia", title: "Orochia admin console", text: "Verification, moderation, payouts \u2014 behind four gates." }
+];
+function CardGridHoverQuiet() {
+  return /* @__PURE__ */ jsx(CardGrid, { className: "w-full max-w-4xl", min: 260, reveal: false, hover: "quiet", children: shortcuts.map((s) => /* @__PURE__ */ jsx(LinkCard, { href: `#${s.id}`, icon: /* @__PURE__ */ jsx(ProductLogo, { id: s.logo, size: 24, animated: false }), title: s.title, description: s.text, cta: "Open" }, s.id)) });
+}
+export {
+  CardGridHoverQuiet as default
+};

package/registry/examples/card-grid/hover-quiet.tsx

@@ -0,0 +1,20 @@
+import { ProductLogo } from "@krizaka/ui";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { LinkCard } from "@krizaka/ui/link-card";
+
+const shortcuts = [
+  { id: "cli", logo: "orazaka", title: "The CLI", text: "npx orazaka install, start, dev — then every command and option." },
+  { id: "packs", logo: "orazaka", title: "Packs & Studios", text: "The business offers Orazaka installs without code." },
+  { id: "admin", logo: "orochia", title: "Orochia admin console", text: "Verification, moderation, payouts — behind four gates." },
+] as const;
+
+// A whole grid quiet: `hover="quiet"` on the grid, the cards inherit it (a card can still say `hover="light"`).
+export default function CardGridHoverQuiet() {
+  return (
+    <CardGrid className="w-full max-w-4xl" min={260} reveal={false} hover="quiet">
+      {shortcuts.map((s) => (
+        <LinkCard key={s.id} href={`#${s.id}`} icon={<ProductLogo id={s.logo} size={24} animated={false} />} title={s.title} description={s.text} cta="Open" />
+      ))}
+    </CardGrid>
+  );
+}

package/registry/examples/changelog-page/releases.js

@@ -10,7 +10,7 @@ function ChangelogPageReleases() {
       eyebrow: "Krizaka UI",
       title: "What changed",
       lead: "Every release, newest first \u2014 and why, when it was a decision.",
-      kindLabels: { added: "Added", changed: "Changed", fixed: "Fixed", removed: "Removed" },
+      kindLabels: { added: "Added", changed: "Changed", fixed: "Fixed", removed: "Removed", security: "Security", breaking: "Breaking" },
       logLabel: "Releases",
       entries: [
         {

package/registry/examples/changelog-page/releases.tsx

@@ -8,7 +8,7 @@ export default function ChangelogPageReleases() {
       eyebrow="Krizaka UI"
       title="What changed"
       lead="Every release, newest first — and why, when it was a decision."
-      kindLabels={{ added: "Added", changed: "Changed", fixed: "Fixed", removed: "Removed" }}
+      kindLabels={{ added: "Added", changed: "Changed", fixed: "Fixed", removed: "Removed", security: "Security", breaking: "Breaking" }}
       logLabel="Releases"
       entries={[
         {

package/registry/examples/docs-nav/groups.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/docs-nav/groups.js

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/docs-nav/groups.tsx
+import { DocsNav } from "@krizaka/ui/docs-nav";
+import { jsx } from "react/jsx-runtime";
+function DocsNavGroups() {
+  return /* @__PURE__ */ jsx(
+    DocsNav,
+    {
+      label: "Documentation",
+      current: "/docs/auctions",
+      groups: [
+        { id: "guide", title: "Guide", items: [{ href: "/docs/start", label: "Get started" }, { href: "/docs/auctions", label: "Auctions" }] },
+        { id: "developers", title: "Developers", items: [{ href: "/docs/developers/architecture", label: "Architecture" }] }
+      ]
+    }
+  );
+}
+export {
+  DocsNavGroups as default
+};

package/registry/examples/docs-nav/groups.tsx

@@ -0,0 +1,15 @@
+import { DocsNav } from "@krizaka/ui/docs-nav";
+
+// Two audiences, two groups: the group of the current page is open, the other folds.
+export default function DocsNavGroups() {
+  return (
+    <DocsNav
+      label="Documentation"
+      current="/docs/auctions"
+      groups={[
+        { id: "guide", title: "Guide", items: [{ href: "/docs/start", label: "Get started" }, { href: "/docs/auctions", label: "Auctions" }] },
+        { id: "developers", title: "Developers", items: [{ href: "/docs/developers/architecture", label: "Architecture" }] },
+      ]}
+    />
+  );
+}

package/registry/examples/link-card/hover-light.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/link-card/hover-light.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/link-card/hover-light.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { jsx } from "react/jsx-runtime";
+var shortcuts = [
+  { id: "cli", logo: "orazaka", title: "The CLI", text: "npx orazaka install, start, dev \u2014 then every command and option." },
+  { id: "packs", logo: "orazaka", title: "Packs & Studios", text: "The business offers Orazaka installs without code." },
+  { id: "admin", logo: "orochia", title: "Orochia admin console", text: "Verification, moderation, payouts \u2014 behind four gates." }
+];
+function LinkCardHoverLight() {
+  return /* @__PURE__ */ jsx(CardGrid, { className: "w-full max-w-4xl", min: 260, reveal: false, children: shortcuts.map((s) => /* @__PURE__ */ jsx(LinkCard, { hover: "light", href: `#${s.id}`, icon: /* @__PURE__ */ jsx(ProductLogo, { id: s.logo, size: 24, animated: false }), title: s.title, description: s.text, cta: "Open" }, s.id)) });
+}
+export {
+  LinkCardHoverLight as default
+};

package/registry/examples/link-card/hover-light.tsx

@@ -0,0 +1,20 @@
+import { ProductLogo } from "@krizaka/ui";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { LinkCard } from "@krizaka/ui/link-card";
+
+const shortcuts = [
+  { id: "cli", logo: "orazaka", title: "The CLI", text: "npx orazaka install, start, dev — then every command and option." },
+  { id: "packs", logo: "orazaka", title: "Packs & Studios", text: "The business offers Orazaka installs without code." },
+  { id: "admin", logo: "orochia", title: "Orochia admin console", text: "Verification, moderation, payouts — behind four gates." },
+] as const;
+
+// The default hover, said explicitly: the pointer's light and the coloured lift.
+export default function LinkCardHoverLight() {
+  return (
+    <CardGrid className="w-full max-w-4xl" min={260} reveal={false}>
+      {shortcuts.map((s) => (
+        <LinkCard key={s.id} hover="light" href={`#${s.id}`} icon={<ProductLogo id={s.logo} size={24} animated={false} />} title={s.title} description={s.text} cta="Open" />
+      ))}
+    </CardGrid>
+  );
+}

package/registry/examples/link-card/hover-quiet.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/link-card/hover-quiet.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/link-card/hover-quiet.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { jsx } from "react/jsx-runtime";
+var shortcuts = [
+  { id: "cli", logo: "orazaka", title: "The CLI", text: "npx orazaka install, start, dev \u2014 then every command and option." },
+  { id: "packs", logo: "orazaka", title: "Packs & Studios", text: "The business offers Orazaka installs without code." },
+  { id: "admin", logo: "orochia", title: "Orochia admin console", text: "Verification, moderation, payouts \u2014 behind four gates." }
+];
+function LinkCardHoverQuiet() {
+  return /* @__PURE__ */ jsx(CardGrid, { className: "w-full max-w-4xl", min: 260, reveal: false, children: shortcuts.map((s) => /* @__PURE__ */ jsx(LinkCard, { hover: "quiet", href: `#${s.id}`, icon: /* @__PURE__ */ jsx(ProductLogo, { id: s.logo, size: 24, animated: false }), title: s.title, description: s.text, cta: "Open" }, s.id)) });
+}
+export {
+  LinkCardHoverQuiet as default
+};

package/registry/examples/link-card/hover-quiet.tsx

@@ -0,0 +1,20 @@
+import { ProductLogo } from "@krizaka/ui";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { LinkCard } from "@krizaka/ui/link-card";
+
+const shortcuts = [
+  { id: "cli", logo: "orazaka", title: "The CLI", text: "npx orazaka install, start, dev — then every command and option." },
+  { id: "packs", logo: "orazaka", title: "Packs & Studios", text: "The business offers Orazaka installs without code." },
+  { id: "admin", logo: "orochia", title: "Orochia admin console", text: "Verification, moderation, payouts — behind four gates." },
+] as const;
+
+// The quiet hover on a card: no glow, a 2 px lift, one step of surface and border, a ring on focus.
+export default function LinkCardHoverQuiet() {
+  return (
+    <CardGrid className="w-full max-w-4xl" min={260} reveal={false}>
+      {shortcuts.map((s) => (
+        <LinkCard key={s.id} hover="quiet" href={`#${s.id}`} icon={<ProductLogo id={s.logo} size={24} animated={false} />} title={s.title} description={s.text} cta="Open" />
+      ))}
+    </CardGrid>
+  );
+}

package/registry/examples/rail-nav/expandable.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/rail-nav/expandable.js

@@ -0,0 +1,34 @@
+"use client";
+
+// registry/examples/rail-nav/expandable.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { AppHeader } from "@krizaka/ui/app-header";
+import { RailNav } from "@krizaka/ui/rail-nav";
+import { jsx, jsxs } from "react/jsx-runtime";
+var dot = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "7" }) });
+function RailNavExpandable() {
+  return /* @__PURE__ */ jsxs(RailNav.Shell, { children: [
+    /* @__PURE__ */ jsxs(
+      RailNav.Root,
+      {
+        label: "Studio",
+        accent: "orochia",
+        expandable: true,
+        expandLabels: ["Show the words", "Hide the words"],
+        mark: /* @__PURE__ */ jsx("a", { href: "#home", "aria-label": "Orochia, home", children: /* @__PURE__ */ jsx(ProductLogo, { id: "orochia", size: 26, animated: false }) }),
+        children: [
+          /* @__PURE__ */ jsx(RailNav.Item, { href: "#home", icon: dot, label: "Home", current: true }),
+          /* @__PURE__ */ jsx(RailNav.Item, { href: "#videos", icon: dot, label: "Videos" }),
+          /* @__PURE__ */ jsx(RailNav.Item, { href: "#earnings", icon: dot, label: "Earnings" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(RailNav.Body, { children: [
+      /* @__PURE__ */ jsx(AppHeader, { name: "Orochia", mark: /* @__PURE__ */ jsx(ProductLogo, { id: "orochia", size: 22, animated: false }) }),
+      /* @__PURE__ */ jsx("main", { id: "content", className: "p-6 text-sm text-fg-secondary", children: "The screen's content." })
+    ] })
+  ] });
+}
+export {
+  RailNavExpandable as default
+};

package/registry/examples/rail-nav/expandable.tsx

@@ -0,0 +1,28 @@
+import { ProductLogo } from "@krizaka/ui";
+import { AppHeader } from "@krizaka/ui/app-header";
+import { RailNav } from "@krizaka/ui/rail-nav";
+
+const dot = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden><circle cx="12" cy="12" r="7" /></svg>;
+
+// `expandable` adds a button that widens the rail to show the words (desktop). The state can be kept with `expanded`.
+export default function RailNavExpandable() {
+  return (
+    <RailNav.Shell>
+      <RailNav.Root
+        label="Studio"
+        accent="orochia"
+        expandable
+        expandLabels={["Show the words", "Hide the words"]}
+        mark={<a href="#home" aria-label="Orochia, home"><ProductLogo id="orochia" size={26} animated={false} /></a>}
+      >
+        <RailNav.Item href="#home" icon={dot} label="Home" current />
+        <RailNav.Item href="#videos" icon={dot} label="Videos" />
+        <RailNav.Item href="#earnings" icon={dot} label="Earnings" />
+      </RailNav.Root>
+      <RailNav.Body>
+        <AppHeader name="Orochia" mark={<ProductLogo id="orochia" size={22} animated={false} />} />
+        <main id="content" className="p-6 text-sm text-fg-secondary">The screen's content.</main>
+      </RailNav.Body>
+    </RailNav.Shell>
+  );
+}

package/registry/examples/rail-nav/studio.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/rail-nav/studio.js

@@ -0,0 +1,43 @@
+"use client";
+
+// registry/examples/rail-nav/studio.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { AppHeader } from "@krizaka/ui/app-header";
+import { Badge } from "@krizaka/ui/badge";
+import { RailNav } from "@krizaka/ui/rail-nav";
+import { jsx, jsxs } from "react/jsx-runtime";
+var icon = (d) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d }) });
+function RailNavStudio() {
+  return /* @__PURE__ */ jsxs(RailNav.Shell, { children: [
+    /* @__PURE__ */ jsxs(
+      RailNav.Root,
+      {
+        label: "Orazaka",
+        accent: "orazaka",
+        mark: /* @__PURE__ */ jsx("a", { href: "#home", "aria-label": "Orazaka, home", children: /* @__PURE__ */ jsx(ProductLogo, { id: "orazaka", size: 26, animated: false }) }),
+        footer: /* @__PURE__ */ jsx(RailNav.Item, { href: "#settings", icon: icon("M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19 12l2-1-2-4-2 1-2-1-1-2h-4l-1 2-2 1-2-1-2 4 2 1v2l-2 1 2 4 2-1 2 1 1 2h4l1-2 2-1 2 1 2-4-2-1z"), label: "Settings" }),
+        children: [
+          /* @__PURE__ */ jsx(RailNav.Item, { href: "#home", icon: icon("M4 11 12 4l8 7v9H4z"), label: "Home", current: true }),
+          /* @__PURE__ */ jsx(RailNav.Item, { href: "#studios", icon: icon("M4 5h16v11H4zM8 20h8"), label: "Studios" }),
+          /* @__PURE__ */ jsx(RailNav.Item, { href: "#chat", icon: icon("M4 5h16v11H9l-5 4z"), label: "Chat", badge: 2, badgeLabel: "2 unread" }),
+          /* @__PURE__ */ jsx(RailNav.Item, { href: "#jobs", icon: icon("M5 6h14M5 12h14M5 18h9"), label: "Jobs" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(RailNav.Body, { children: [
+      /* @__PURE__ */ jsx(
+        AppHeader,
+        {
+          name: "Orazaka",
+          mark: /* @__PURE__ */ jsx(ProductLogo, { id: "orazaka", size: 22, animated: false }),
+          href: "#home",
+          chips: /* @__PURE__ */ jsx(Badge, { tone: "success", dot: true, children: "Local \xB7 Sovereign" })
+        }
+      ),
+      /* @__PURE__ */ jsx("main", { id: "content", className: "p-6 text-sm text-fg-secondary", children: "The screen's content." })
+    ] })
+  ] });
+}
+export {
+  RailNavStudio as default
+};

package/registry/examples/rail-nav/studio.tsx

@@ -0,0 +1,38 @@
+import { ProductLogo } from "@krizaka/ui";
+import { AppHeader } from "@krizaka/ui/app-header";
+import { Badge } from "@krizaka/ui/badge";
+import { RailNav } from "@krizaka/ui/rail-nav";
+
+const icon = (d: string) => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d={d} />
+  </svg>
+);
+
+// The mark lives in the rail; the header carries the name (and the mark on a phone, where the rail is the tab bar).
+export default function RailNavStudio() {
+  return (
+    <RailNav.Shell>
+      <RailNav.Root
+        label="Orazaka"
+        accent="orazaka"
+        mark={<a href="#home" aria-label="Orazaka, home"><ProductLogo id="orazaka" size={26} animated={false} /></a>}
+        footer={<RailNav.Item href="#settings" icon={icon("M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19 12l2-1-2-4-2 1-2-1-1-2h-4l-1 2-2 1-2-1-2 4 2 1v2l-2 1 2 4 2-1 2 1 1 2h4l1-2 2-1 2 1 2-4-2-1z")} label="Settings" />}
+      >
+        <RailNav.Item href="#home" icon={icon("M4 11 12 4l8 7v9H4z")} label="Home" current />
+        <RailNav.Item href="#studios" icon={icon("M4 5h16v11H4zM8 20h8")} label="Studios" />
+        <RailNav.Item href="#chat" icon={icon("M4 5h16v11H9l-5 4z")} label="Chat" badge={2} badgeLabel="2 unread" />
+        <RailNav.Item href="#jobs" icon={icon("M5 6h14M5 12h14M5 18h9")} label="Jobs" />
+      </RailNav.Root>
+      <RailNav.Body>
+        <AppHeader
+          name="Orazaka"
+          mark={<ProductLogo id="orazaka" size={22} animated={false} />}
+          href="#home"
+          chips={<Badge tone="success" dot>Local · Sovereign</Badge>}
+        />
+        <main id="content" className="p-6 text-sm text-fg-secondary">The screen's content.</main>
+      </RailNav.Body>
+    </RailNav.Shell>
+  );
+}

package/registry/examples/settings-layout/flat.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;