@krizaka/ui 2.9.0 → 3.0.0

package/registry/error-page.json

@@ -0,0 +1,183 @@
+{
+  "name": "error-page",
+  "type": "primitive",
+  "title": "Error page",
+  "summary": "When a page is not there: the code drawn huge, the bird that lost its way, one sentence, a search and the ways back — never a dead end.",
+  "description": "When a page is not there: the code drawn huge, the bird that lost its way, one sentence, a search and the ways back — never a dead end.",
+  "status": "beta",
+  "category": "templates",
+  "platforms": "web",
+  "whenToUse": [
+    "Not found (404), server error (500), offline.",
+    "Any page that cannot show what was asked."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "For something not built yet.",
+      "use": "status-page"
+    },
+    {
+      "when": "For an empty list inside a page.",
+      "use": "empty-state"
+    }
+  ],
+  "bestPractices": [
+    "The title says it in words; the code is drawn, not read.",
+    "Offer a search and two or three ways back.",
+    "Words and content arrive as props; the motion is the platform's (`[data-reveal]`, still under reduced motion)."
+  ],
+  "accessibility": {
+    "keyboard": [],
+    "notes": [
+      "The code is hidden from assistive technology; the `h1` says what happened.",
+      "The ways back are a named list of links."
+    ]
+  },
+  "related": [
+    "status-page",
+    "search-field",
+    "action-bar"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/error-page",
+    "import": "import { ErrorPage } from \"@krizaka/ui/error-page\";",
+    "props": [
+      {
+        "component": "ErrorPage",
+        "description": "An error page: the code drawn, the bird, a sentence, a search and the ways back.",
+        "props": [
+          {
+            "name": "code",
+            "type": "string",
+            "default": null,
+            "description": "The code (`404`, `500`): drawn, not read — the title says it in words.",
+            "required": true
+          },
+          {
+            "name": "title",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The page's `h1` (`This page took another road`).",
+            "required": true
+          },
+          {
+            "name": "actions",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The ways back (an ActionBar: home, the docs, contact).",
+            "required": false
+          },
+          {
+            "name": "mascot",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The bird beside the code (a Mascot in its `empty` or `error` mood).",
+            "required": false
+          },
+          {
+            "name": "search",
+            "type": "ReactNode",
+            "default": null,
+            "description": "A search, to find what was meant.",
+            "required": false
+          },
+          {
+            "name": "text",
+            "type": "ReactNode",
+            "default": null,
+            "description": "What happened and what to do, in one or two sentences.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "not-found",
+        "title": "Not found",
+        "description": "The pigeon, a search and three ways back.",
+        "template": true,
+        "path": "examples/error-page/not-found.tsx",
+        "module": "@krizaka/ui/registry/examples/error-page/not-found",
+        "code": "import { ActionBar } from \"@krizaka/ui/action-bar\";\nimport { ErrorPage } from \"@krizaka/ui/error-page\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\nimport { SearchField } from \"@krizaka/ui/search-field\";\n\n// TEMPLATE — a page that is not there: the code drawn, the pigeon that lost its way, one sentence, a search, the ways\n// back. Never a dead end.\nexport default function ErrorPageNotFound() {\n  return (\n    <ErrorPage\n      code=\"404\"\n      mascot={<Mascot bird=\"pigeon\" mood=\"empty\" size={96} />}\n      title=\"This page took another road\"\n      text=\"The address may have changed. Search for it, or start again from one of these.\"\n      search={<SearchField label=\"Search the site\" placeholder=\"Search…\" />}\n      actions={<ActionBar label=\"Ways back\" primaryFirst actions={[{ href: \"#home\", label: \"Home\" }, { href: \"#docs\", label: \"Documentation\" }, { href: \"#contact\", label: \"Contact\" }]} />}\n    />\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "files": [
+    {
+      "path": "error-page/error-page.tsx",
+      "content": "// Server-safe. When a page is not there (blocks.css `.kz-tpl-error`): the code drawn huge in outline, the bird that\n// lost its way beside it, one sentence, a search, and the ways back — never a dead end. The same frame as every page.\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport type ErrorPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The code (`404`, `500`): drawn, not read — the title says it in words. */\n  code: string;\n  /** The bird beside the code (a Mascot in its `empty` or `error` mood). */\n  mascot?: React.ReactNode;\n  /** The page's `h1` (`This page took another road`). */\n  title: React.ReactNode;\n  /** What happened and what to do, in one or two sentences. */\n  text?: React.ReactNode;\n  /** A search, to find what was meant. */\n  search?: React.ReactNode;\n  /** The ways back (an ActionBar: home, the docs, contact). */\n  actions?: React.ReactNode;\n  /** Under the actions: the most visited pages. */\n  children?: React.ReactNode;\n};\n\n/** An error page: the code drawn, the bird, a sentence, a search and the ways back. */\nexport function ErrorPage({ code, mascot, title, text, search, actions, className, children, ...props }: ErrorPageProps) {\n  return (\n    <div className={cn(\"kz-frame kz-tpl-error\", className)} {...props}>\n      <p className=\"kz-tpl-error-code\" aria-hidden>\n        {code}\n        {mascot}\n      </p>\n      <h1>{title}</h1>\n      {text && <p>{text}</p>}\n      {search && <div className=\"kz-tpl-error-search\">{search}</div>}\n      {actions}\n      {children}\n    </div>\n  );\n}\n"
+    },
+    {
+      "path": "error-page/index.ts",
+      "content": "/** @krizaka/ui/error-page — `ErrorPage`: An error page: the code drawn, the bird, a sentence, a search and the ways back. Server-safe; a page template. */\nexport { ErrorPage, type ErrorPageProps } from \"./error-page\";\n"
+    },
+    {
+      "path": "error-page/meta.ts",
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Error page\",\n  summary: \"When a page is not there: the code drawn huge, the bird that lost its way, one sentence, a search and the ways back — never a dead end.\",\n  status: \"beta\",\n  category: \"templates\",\n  platforms: \"web\",\n  whenToUse: [\"Not found (404), server error (500), offline.\", \"Any page that cannot show what was asked.\"],\n  whenNotToUse: [\n    { when: \"For something not built yet.\", use: \"status-page\" },\n    { when: \"For an empty list inside a page.\", use: \"empty-state\" },\n  ],\n  bestPractices: [\"The title says it in words; the code is drawn, not read.\", \"Offer a search and two or three ways back.\", \"Words and content arrive as props; the motion is the platform's (`[data-reveal]`, still under reduced motion).\"],\n  accessibility: {\n    keyboard: [],\n    notes: [\"The code is hidden from assistive technology; the `h1` says what happened.\", \"The ways back are a named list of links.\"],\n  },\n  related: [\"status-page\", \"search-field\", \"action-bar\"],\n  web: {\n    imports: [\"ErrorPage\"],\n    examples: [\n      { name: \"not-found\", title: \"Not found\", description: \"The pigeon, a search and three ways back.\", template: true },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+    },
+    {
+      "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  | \"achievement\"\n  | \"action-bar\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"error-page\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\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/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"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   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\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  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\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"
+    }
+  ],
+  "dependencies": [],
+  "registryDependencies": [
+    "cn"
+  ],
+  "demo": {
+    "path": "examples/error-page/not-found.tsx",
+    "content": "import { ActionBar } from \"@krizaka/ui/action-bar\";\nimport { ErrorPage } from \"@krizaka/ui/error-page\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\nimport { SearchField } from \"@krizaka/ui/search-field\";\n\n// TEMPLATE — a page that is not there: the code drawn, the pigeon that lost its way, one sentence, a search, the ways\n// back. Never a dead end.\nexport default function ErrorPageNotFound() {\n  return (\n    <ErrorPage\n      code=\"404\"\n      mascot={<Mascot bird=\"pigeon\" mood=\"empty\" size={96} />}\n      title=\"This page took another road\"\n      text=\"The address may have changed. Search for it, or start again from one of these.\"\n      search={<SearchField label=\"Search the site\" placeholder=\"Search…\" />}\n      actions={<ActionBar label=\"Ways back\" primaryFirst actions={[{ href: \"#home\", label: \"Home\" }, { href: \"#docs\", label: \"Documentation\" }, { href: \"#contact\", label: \"Contact\" }]} />}\n    />\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "ErrorPage",
+      "description": "An error page: the code drawn, the bird, a sentence, a search and the ways back.",
+      "props": [
+        {
+          "name": "code",
+          "type": "string",
+          "default": null,
+          "description": "The code (`404`, `500`): drawn, not read — the title says it in words.",
+          "required": true
+        },
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The page's `h1` (`This page took another road`).",
+          "required": true
+        },
+        {
+          "name": "actions",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The ways back (an ActionBar: home, the docs, contact).",
+          "required": false
+        },
+        {
+          "name": "mascot",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The bird beside the code (a Mascot in its `empty` or `error` mood).",
+          "required": false
+        },
+        {
+          "name": "search",
+          "type": "ReactNode",
+          "default": null,
+          "description": "A search, to find what was meant.",
+          "required": false
+        },
+        {
+          "name": "text",
+          "type": "ReactNode",
+          "default": null,
+          "description": "What happened and what to do, in one or two sentences.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/registry/examples/catalogue-page/components.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/catalogue-page/components.js

@@ -0,0 +1,33 @@
+"use client";
+
+// registry/examples/catalogue-page/components.tsx
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { CataloguePage } from "@krizaka/ui/catalogue-page";
+import { ChipLink } from "@krizaka/ui/chip-link";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { SearchField } from "@krizaka/ui/search-field";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ITEMS = ["Button", "Card", "Dialog", "Tabs", "Toast", "Data table"];
+function CataloguePageComponents() {
+  return /* @__PURE__ */ jsx(
+    CataloguePage,
+    {
+      eyebrow: "Krizaka UI",
+      title: "Components",
+      lead: "Every component, web and mobile, documented from its code.",
+      search: /* @__PURE__ */ jsx(SearchField, { label: "Search the components", placeholder: "Button, dialog\u2026" }),
+      filtersLabel: "Filters",
+      filters: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2 lg:flex-col lg:items-start", children: [
+        /* @__PURE__ */ jsx("p", { className: "kz-label", children: "Platform" }),
+        /* @__PURE__ */ jsx(ChipLink, { href: "#all", selected: true, children: "All" }),
+        /* @__PURE__ */ jsx(ChipLink, { href: "#web", children: "Web" }),
+        /* @__PURE__ */ jsx(ChipLink, { href: "#mobile", children: "Mobile" })
+      ] }),
+      count: `${ITEMS.length} components`,
+      children: /* @__PURE__ */ jsx(CardGrid, { as: "ul", min: 200, reveal: false, children: ITEMS.map((name) => /* @__PURE__ */ jsx(LinkCard, { href: `#${name}`, title: name, titleAs: "span", description: "Web + Mobile" }, name)) })
+    }
+  );
+}
+export {
+  CataloguePageComponents as default
+};

package/registry/examples/catalogue-page/components.tsx

@@ -0,0 +1,36 @@
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { CataloguePage } from "@krizaka/ui/catalogue-page";
+import { ChipLink } from "@krizaka/ui/chip-link";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { SearchField } from "@krizaka/ui/search-field";
+
+const ITEMS = ["Button", "Card", "Dialog", "Tabs", "Toast", "Data table"];
+
+// TEMPLATE — a catalogue (the components of Krizaka UI): the search in the hero, the filters in a sticky column beside
+// the results — as links, the address keeps them — the count said politely, the results as compact link cards.
+export default function CataloguePageComponents() {
+  return (
+    <CataloguePage
+      eyebrow="Krizaka UI"
+      title="Components"
+      lead="Every component, web and mobile, documented from its code."
+      search={<SearchField label="Search the components" placeholder="Button, dialog…" />}
+      filtersLabel="Filters"
+      filters={
+        <div className="flex flex-wrap gap-2 lg:flex-col lg:items-start">
+          <p className="kz-label">Platform</p>
+          <ChipLink href="#all" selected>All</ChipLink>
+          <ChipLink href="#web">Web</ChipLink>
+          <ChipLink href="#mobile">Mobile</ChipLink>
+        </div>
+      }
+      count={`${ITEMS.length} components`}
+    >
+      <CardGrid as="ul" min={200} reveal={false}>
+        {ITEMS.map((name) => (
+          <LinkCard key={name} href={`#${name}`} title={name} titleAs="span" description="Web + Mobile" />
+        ))}
+      </CardGrid>
+    </CataloguePage>
+  );
+}

package/registry/examples/changelog-page/releases.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/changelog-page/releases.js

@@ -0,0 +1,44 @@
+"use client";
+
+// registry/examples/changelog-page/releases.tsx
+import { ChangelogPage } from "@krizaka/ui/changelog-page";
+import { jsx } from "react/jsx-runtime";
+function ChangelogPageReleases() {
+  return /* @__PURE__ */ jsx(
+    ChangelogPage,
+    {
+      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" },
+      logLabel: "Releases",
+      entries: [
+        {
+          id: "v2-6-0",
+          date: "2026-10-11",
+          dateLabel: "11 Oct 2026",
+          version: "2.6.0",
+          title: "Page blocks",
+          changes: [
+            { kind: "added", text: "Page, PageHero, CardGrid, LinkCard, ArgumentCard and seven more blocks." },
+            { kind: "changed", text: "The blocks' stylesheet is imported once by the app." }
+          ]
+        },
+        {
+          id: "v2-4-0",
+          date: "2026-10-09",
+          dateLabel: "9 Oct 2026",
+          version: "2.4.0",
+          title: "Data and media",
+          changes: [
+            { kind: "added", text: "DataTable, Combobox, DatePicker, VideoPlayer." },
+            { kind: "fixed", text: "A live line chart no longer hides its line." }
+          ]
+        }
+      ]
+    }
+  );
+}
+export {
+  ChangelogPageReleases as default
+};

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

@@ -0,0 +1,39 @@
+import { ChangelogPage } from "@krizaka/ui/changelog-page";
+
+// TEMPLATE — what changed (Krizaka UI's releases): the date and version stick beside each entry, the changes by kind in
+// words and colour. On a phone the date sits above its entry.
+export default function ChangelogPageReleases() {
+  return (
+    <ChangelogPage
+      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" }}
+      logLabel="Releases"
+      entries={[
+        {
+          id: "v2-6-0",
+          date: "2026-10-11",
+          dateLabel: "11 Oct 2026",
+          version: "2.6.0",
+          title: "Page blocks",
+          changes: [
+            { kind: "added", text: "Page, PageHero, CardGrid, LinkCard, ArgumentCard and seven more blocks." },
+            { kind: "changed", text: "The blocks' stylesheet is imported once by the app." },
+          ],
+        },
+        {
+          id: "v2-4-0",
+          date: "2026-10-09",
+          dateLabel: "9 Oct 2026",
+          version: "2.4.0",
+          title: "Data and media",
+          changes: [
+            { kind: "added", text: "DataTable, Combobox, DatePicker, VideoPlayer." },
+            { kind: "fixed", text: "A live line chart no longer hides its line." },
+          ],
+        },
+      ]}
+    />
+  );
+}

package/registry/examples/component-page/button.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/component-page/button.js

@@ -0,0 +1,33 @@
+"use client";
+
+// registry/examples/component-page/button.tsx
+import { Button } from "@krizaka/ui/button";
+import { ComponentPage } from "@krizaka/ui/component-page";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ComponentPageButton() {
+  return /* @__PURE__ */ jsx(
+    ComponentPage,
+    {
+      className: "w-full",
+      back: /* @__PURE__ */ jsx("a", { href: "#catalogue", children: "\u2190 Components" }),
+      eyebrow: "Actions",
+      title: "Button",
+      summary: "The action: six looks, three sizes, the Krizaka cut, and the whole life of an action built in.",
+      facts: [{ label: "Web + Mobile", tone: "ok" }, { label: "Stable" }],
+      preview: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 p-8", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "primary", shape: "cut", shimmer: true, children: "Publish" }),
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", shape: "cut", children: "Save a draft" })
+      ] }),
+      install: { code: 'import { Button } from "@krizaka/ui/button";', language: "ts", copyLabel: "Copy", copiedLabel: "Copied" },
+      sections: [
+        { id: "when", title: "When to use", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: "For the action a block is about; links that look like actions use `asChild`." }) },
+        { id: "a11y", title: "Accessibility", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: "A real button; while loading it says so in a live region." }) }
+      ],
+      aside: /* @__PURE__ */ jsx(LinkCard, { href: "#confirm-button", title: "Confirm button", description: "A destructive action in two presses.", titleAs: "span" })
+    }
+  );
+}
+export {
+  ComponentPageButton as default
+};

package/registry/examples/component-page/button.tsx

@@ -0,0 +1,30 @@
+import { Button } from "@krizaka/ui/button";
+import { ComponentPage } from "@krizaka/ui/component-page";
+import { LinkCard } from "@krizaka/ui/link-card";
+
+// TEMPLATE — a component's page (what krizaka.com/docs/ui generates from the registry): name, summary, status and
+// platforms, the live preview, the import line, its sections; related components aside (under it on a phone).
+export default function ComponentPageButton() {
+  return (
+    <ComponentPage
+      className="w-full"
+      back={<a href="#catalogue">← Components</a>}
+      eyebrow="Actions"
+      title="Button"
+      summary="The action: six looks, three sizes, the Krizaka cut, and the whole life of an action built in."
+      facts={[{ label: "Web + Mobile", tone: "ok" }, { label: "Stable" }]}
+      preview={
+        <div className="flex flex-wrap items-center justify-center gap-3 p-8">
+          <Button variant="primary" shape="cut" shimmer>Publish</Button>
+          <Button variant="secondary" shape="cut">Save a draft</Button>
+        </div>
+      }
+      install={{ code: 'import { Button } from "@krizaka/ui/button";', language: "ts", copyLabel: "Copy", copiedLabel: "Copied" }}
+      sections={[
+        { id: "when", title: "When to use", children: <p className="text-sm text-fg-secondary">For the action a block is about; links that look like actions use `asChild`.</p> },
+        { id: "a11y", title: "Accessibility", children: <p className="text-sm text-fg-secondary">A real button; while loading it says so in a live region.</p> },
+      ]}
+      aside={<LinkCard href="#confirm-button" title="Confirm button" description="A destructive action in two presses." titleAs="span" />}
+    />
+  );
+}

package/registry/examples/contact-page/team.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/contact-page/team.js

@@ -0,0 +1,39 @@
+"use client";
+
+// registry/examples/contact-page/team.tsx
+import { Button } from "@krizaka/ui/button";
+import { ContactPage } from "@krizaka/ui/contact-page";
+import { Field, Input, Textarea } from "@krizaka/ui/field";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { Mascot } from "@krizaka/ui/mascots";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ContactPageTeam() {
+  return /* @__PURE__ */ jsx(
+    ContactPage,
+    {
+      eyebrow: "Contact",
+      title: "Talk to the people who build it",
+      lead: "A person answers within two working days, in English or in French.",
+      aside: /* @__PURE__ */ jsx(Mascot, { bird: "flamingo", mood: "welcome", size: 112 }),
+      channels: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(LinkCard, { href: "https://github.com/orgs/krizaka/discussions", title: "Discussions", description: "Questions and ideas, in public.", titleAs: "span" }),
+        /* @__PURE__ */ jsx(LinkCard, { href: "https://github.com/krizaka", title: "Report a problem", description: "An issue on the repository.", titleAs: "span" })
+      ] }),
+      form: /* @__PURE__ */ jsxs("form", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { htmlFor: "contact-email", children: "Email" }),
+          /* @__PURE__ */ jsx(Input, { id: "contact-email", type: "email", autoComplete: "email" })
+        ] }),
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { htmlFor: "contact-message", children: "Message" }),
+          /* @__PURE__ */ jsx(Textarea, { id: "contact-message", rows: 4 })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "lg", shape: "cut", shimmer: true, children: "Send" })
+      ] }),
+      next: { title: "What happens next", steps: [{ title: "We read it", text: "The same day, on working days." }, { title: "We answer", text: "Within two working days." }] }
+    }
+  );
+}
+export {
+  ContactPageTeam as default
+};

package/registry/examples/contact-page/team.tsx

@@ -0,0 +1,38 @@
+import { Button } from "@krizaka/ui/button";
+import { ContactPage } from "@krizaka/ui/contact-page";
+import { Field, Input, Textarea } from "@krizaka/ui/field";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { Mascot } from "@krizaka/ui/mascots";
+
+// TEMPLATE — reaching the team: the public channels as cards beside the private form, then what happens after sending.
+// On a phone the form comes after the channels, its fields at full width.
+export default function ContactPageTeam() {
+  return (
+    <ContactPage
+      eyebrow="Contact"
+      title="Talk to the people who build it"
+      lead="A person answers within two working days, in English or in French."
+      aside={<Mascot bird="flamingo" mood="welcome" size={112} />}
+      channels={
+        <>
+          <LinkCard href="https://github.com/orgs/krizaka/discussions" title="Discussions" description="Questions and ideas, in public." titleAs="span" />
+          <LinkCard href="https://github.com/krizaka" title="Report a problem" description="An issue on the repository." titleAs="span" />
+        </>
+      }
+      form={
+        <form className="flex flex-col gap-4">
+          <Field.Root>
+            <Field.Label htmlFor="contact-email">Email</Field.Label>
+            <Input id="contact-email" type="email" autoComplete="email" />
+          </Field.Root>
+          <Field.Root>
+            <Field.Label htmlFor="contact-message">Message</Field.Label>
+            <Textarea id="contact-message" rows={4} />
+          </Field.Root>
+          <Button type="submit" variant="primary" size="lg" shape="cut" shimmer>Send</Button>
+        </form>
+      }
+      next={{ title: "What happens next", steps: [{ title: "We read it", text: "The same day, on working days." }, { title: "We answer", text: "Within two working days." }] }}
+    />
+  );
+}

package/registry/examples/data-table/details.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/data-table/details.js

@@ -0,0 +1,33 @@
+"use client";
+
+// registry/examples/data-table/details.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { DataTable } from "@krizaka/ui/data-table";
+import { jsx } from "react/jsx-runtime";
+var requests = [
+  { id: "v-1042", creator: "Elena Varga", kind: "Identity check", status: "pending", note: "Passport, expires 2031. Selfie matches." },
+  { id: "v-1041", creator: "Noah Petit", kind: "Payout account", status: "pending", note: "IBAN FR76 \u2022\u2022\u2022\u2022 0412, holder name matches." },
+  { id: "v-1039", creator: "Maya Chen", kind: "Identity check", status: "approved", note: "Approved by Sam on Oct 11." }
+];
+var columns = [
+  { id: "creator", header: "Creator", card: "title" },
+  { id: "kind", header: "Request" },
+  { id: "status", header: "Status", cell: (r) => /* @__PURE__ */ jsx(Badge, { tone: r.status === "pending" ? "warning" : "success", children: r.status }) }
+];
+function DataTableDetails() {
+  return /* @__PURE__ */ jsx(
+    DataTable,
+    {
+      caption: "Verification requests",
+      rows: requests,
+      columns,
+      getRowId: (r) => r.id,
+      rowLabel: (r) => r.creator,
+      defaultExpanded: { "v-1042": true },
+      renderDetail: (r) => /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: r.note })
+    }
+  );
+}
+export {
+  DataTableDetails as default
+};

package/registry/examples/data-table/details.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Badge } from "@krizaka/ui/badge";
+import { DataTable, type DataTableColumn } from "@krizaka/ui/data-table";
+
+type Request = { id: string; creator: string; kind: string; status: "pending" | "approved"; note: string };
+const requests: Request[] = [
+  { id: "v-1042", creator: "Elena Varga", kind: "Identity check", status: "pending", note: "Passport, expires 2031. Selfie matches." },
+  { id: "v-1041", creator: "Noah Petit", kind: "Payout account", status: "pending", note: "IBAN FR76 •••• 0412, holder name matches." },
+  { id: "v-1039", creator: "Maya Chen", kind: "Identity check", status: "approved", note: "Approved by Sam on Oct 11." },
+];
+const columns: DataTableColumn<Request>[] = [
+  { id: "creator", header: "Creator", card: "title" },
+  { id: "kind", header: "Request" },
+  { id: "status", header: "Status", cell: (r) => <Badge tone={r.status === "pending" ? "warning" : "success"}>{r.status}</Badge> },
+];
+
+// A button per row opens a panel under it: the details, without leaving the list.
+export default function DataTableDetails() {
+  return (
+    <DataTable
+      caption="Verification requests"
+      rows={requests}
+      columns={columns}
+      getRowId={(r) => r.id}
+      rowLabel={(r) => r.creator}
+      defaultExpanded={{ "v-1042": true }}
+      renderDetail={(r) => <p className="text-sm text-fg-secondary">{r.note}</p>}
+    />
+  );
+}

package/registry/examples/data-table/filters.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;