@krizaka/ui 2.8.0 → 2.10.0

package/registry/examples/app-shell/orochia-studio.tsx

@@ -0,0 +1,101 @@
+import { ProductLogo } from "@krizaka/ui";
+import { AppShell } from "@krizaka/ui/app-shell";
+import { Avatar } from "@krizaka/ui/avatar";
+import { Badge } from "@krizaka/ui/badge";
+import { Button } from "@krizaka/ui/button";
+import { DashboardLayout, Widget } from "@krizaka/ui/dashboard-layout";
+import { Meter } from "@krizaka/ui/meter";
+import { Stat } from "@krizaka/ui/stat";
+
+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>
+);
+const NAV = [
+  { id: "home", label: "Home", d: "M4 11 12 4l8 7v9H4z", current: true },
+  { id: "videos", label: "Videos", d: "M4 6h12v12H4zM16 10l4-2v8l-4-2", badge: 2 },
+  { id: "auctions", label: "Auctions", d: "M5 19h10M8 5l6 6M11 2l6 6M6 13l4-4" },
+  { id: "challenges", label: "Challenges", d: "M12 3v18M5 7h10l-2 3 2 3H5" },
+];
+const MONEY = [
+  { id: "earnings", label: "Earnings", d: "M4 18h16M7 14l3-3 3 2 5-6" },
+  { id: "payouts", label: "Payouts", d: "M3 7h18v10H3zM12 12h.01" },
+];
+const SALES = [
+  { what: "Unlock · “Night shoot, part 2”", who: "Léa M.", net: "€4.50" },
+  { what: "Tip", who: "Samir K.", net: "€9.00" },
+  { what: "Auction won · “Backstage cut”", who: "Inès B.", net: "€61.20" },
+];
+
+// TEMPLATE — Orochia's creator studio, Elena's home: the shell (sidebar of the studio, drawer on a phone) around a
+// dashboard — this week's figures, the payout on its way, the latest sales, the next auction. On a phone the sidebar
+// is a drawer, the stats stack two by two, every widget takes the full width.
+export default function AppShellOrochiaStudio() {
+  return (
+    <div className="brand-orochia">
+      <AppShell.Root>
+        <AppShell.Sidebar
+          label="Studio"
+          brand={<><ProductLogo id="orochia" size={24} animated={false} /> Orochia</>}
+          collapseLabels={["Collapse", "Expand"]}
+          closeLabel="Close the menu"
+          footer={
+            <div className="flex items-center gap-2.5 px-2 py-2 text-sm">
+              <Avatar fallback="EV" size="sm" />
+              <span className="min-w-0 truncate font-medium">Elena Varga</span>
+            </div>
+          }
+        >
+          {NAV.map((n) => (
+            <AppShell.Item key={n.id} href={`#${n.id}`} icon={icon(n.d)} label={n.label} current={n.current} badge={n.badge} />
+          ))}
+          <AppShell.Group>Money</AppShell.Group>
+          {MONEY.map((n) => (
+            <AppShell.Item key={n.id} href={`#${n.id}`} icon={icon(n.d)} label={n.label} />
+          ))}
+        </AppShell.Sidebar>
+        <AppShell.Body>
+          <AppShell.Header
+            title="Studio"
+            menuLabel="Open the menu"
+            actions={<Button size="sm" variant="primary" shape="cut">Upload a video</Button>}
+          />
+          <AppShell.Main>
+            <DashboardLayout headingAs="h2" eyebrow="This week" title="Good morning, Elena" description="Three sales since yesterday — your auction ends tonight.">
+              <Widget level={3} title="Your week" span="full">
+                <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
+                  <Stat label="Views" value="12.4k" trend="up" trendLabel="+8 %" hint="7 days" />
+                  <Stat label="Supporters" value="318" trend="up" trendLabel="+21" hint="7 days" />
+                  <Stat label="Earned" value="€902" trend="up" trendLabel="+14 %" hint="after the 10 % fee" />
+                  <Stat label="Unlocks" value="146" trend="flat" trendLabel="±0" hint="7 days" />
+                </div>
+              </Widget>
+              <Widget level={3} title="Next payout" description="Every Monday, from €20" span={2}>
+                <Meter label="Towards your payout" value={74} max={100} valueText="€74 of €100 goal" showLabel />
+                <p className="mt-3 text-sm text-fg-secondary">€902 will reach your bank on Monday.</p>
+              </Widget>
+              <Widget level={3} title="Auction" description="“Backstage cut”" span={2} action={<Badge tone="accent" dot>Open</Badge>}>
+                <p className="font-display text-3xl font-extrabold text-fg">€68</p>
+                <p className="text-sm text-fg-secondary">7 bids · ends tonight at 21:00</p>
+              </Widget>
+              <Widget level={3} title="Latest sales" span="full" action={<Button size="sm" variant="ghost">See all</Button>}>
+                <ul className="divide-y divide-border-subtle">
+                  {SALES.map((s) => (
+                    <li key={s.what} className="flex items-center justify-between gap-3 py-2.5 text-sm">
+                      <span className="min-w-0">
+                        <span className="block truncate font-medium text-fg">{s.what}</span>
+                        <span className="text-fg-secondary">{s.who}</span>
+                      </span>
+                      <span className="font-mono font-semibold text-fg-success">{s.net}</span>
+                    </li>
+                  ))}
+                </ul>
+              </Widget>
+            </DashboardLayout>
+          </AppShell.Main>
+        </AppShell.Body>
+      </AppShell.Root>
+    </div>
+  );
+}

package/registry/examples/auth-layout/onboarding.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/auth-layout/onboarding.js

@@ -0,0 +1,56 @@
+"use client";
+
+// registry/examples/auth-layout/onboarding.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { AuthLayout } from "@krizaka/ui/auth-layout";
+import { Button } from "@krizaka/ui/button";
+import { Field, Input } from "@krizaka/ui/field";
+import { Stepper } from "@krizaka/ui/stepper";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var labels = { done: "Done", current: "Current step", upcoming: "Upcoming", error: "Failed" };
+function AuthLayoutOnboarding() {
+  return /* @__PURE__ */ jsx("div", { className: "brand-orochia", children: /* @__PURE__ */ jsxs(
+    AuthLayout,
+    {
+      brand: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ProductLogo, { id: "orochia", size: 28, animated: false }),
+        " Orochia"
+      ] }),
+      promise: "Three steps, then your first video.",
+      aside: /* @__PURE__ */ jsx("p", { children: "Your identity is checked once, by a person, and never shown to your fans." }),
+      asideFooter: "\xA9 Krizaka \xB7 Montr\xE9al",
+      title: "Your payout account",
+      description: "Where your earnings go every Monday.",
+      children: [
+        /* @__PURE__ */ jsx(
+          Stepper,
+          {
+            "aria-label": "Onboarding",
+            orientation: "horizontal",
+            labels,
+            current: 1,
+            steps: [{ title: "Profile" }, { title: "Payouts" }, { title: "Identity" }]
+          }
+        ),
+        /* @__PURE__ */ jsxs("form", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsxs(Field.Root, { children: [
+            /* @__PURE__ */ jsx(Field.Label, { htmlFor: "onboarding-holder", children: "Account holder" }),
+            /* @__PURE__ */ jsx(Input, { id: "onboarding-holder", autoComplete: "name", defaultValue: "Elena Varga" })
+          ] }),
+          /* @__PURE__ */ jsxs(Field.Root, { children: [
+            /* @__PURE__ */ jsx(Field.Label, { htmlFor: "onboarding-iban", children: "IBAN" }),
+            /* @__PURE__ */ jsx(Input, { id: "onboarding-iban", inputMode: "text", placeholder: "FR76 \u2026", "aria-describedby": "onboarding-iban-hint" }),
+            /* @__PURE__ */ jsx(Field.Hint, { id: "onboarding-iban-hint", children: "Checked before your first payout." })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "lg", shape: "cut", className: "flex-1", children: "Back" }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "lg", shape: "cut", className: "flex-1", children: "Continue" })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  AuthLayoutOnboarding as default
+};

package/registry/examples/auth-layout/onboarding.tsx

@@ -0,0 +1,47 @@
+import { ProductLogo } from "@krizaka/ui";
+import { AuthLayout } from "@krizaka/ui/auth-layout";
+import { Button } from "@krizaka/ui/button";
+import { Field, Input } from "@krizaka/ui/field";
+import { Stepper } from "@krizaka/ui/stepper";
+
+const labels = { done: "Done", current: "Current step", upcoming: "Upcoming", error: "Failed" };
+
+// TEMPLATE — onboarding a creator (Orochia): the steps said in words above the form of the current one; the brand panel
+// says why it is worth it. On a phone the steps stay horizontal and compact above the fields.
+export default function AuthLayoutOnboarding() {
+  return (
+    <div className="brand-orochia">
+      <AuthLayout
+        brand={<><ProductLogo id="orochia" size={28} animated={false} /> Orochia</>}
+        promise="Three steps, then your first video."
+        aside={<p>Your identity is checked once, by a person, and never shown to your fans.</p>}
+        asideFooter="© Krizaka · Montréal"
+        title="Your payout account"
+        description="Where your earnings go every Monday."
+      >
+        <Stepper
+          aria-label="Onboarding"
+          orientation="horizontal"
+          labels={labels}
+          current={1}
+          steps={[{ title: "Profile" }, { title: "Payouts" }, { title: "Identity" }]}
+        />
+        <form className="flex flex-col gap-4">
+          <Field.Root>
+            <Field.Label htmlFor="onboarding-holder">Account holder</Field.Label>
+            <Input id="onboarding-holder" autoComplete="name" defaultValue="Elena Varga" />
+          </Field.Root>
+          <Field.Root>
+            <Field.Label htmlFor="onboarding-iban">IBAN</Field.Label>
+            <Input id="onboarding-iban" inputMode="text" placeholder="FR76 …" aria-describedby="onboarding-iban-hint" />
+            <Field.Hint id="onboarding-iban-hint">Checked before your first payout.</Field.Hint>
+          </Field.Root>
+          <div className="flex gap-2">
+            <Button type="button" variant="secondary" size="lg" shape="cut" className="flex-1">Back</Button>
+            <Button type="submit" variant="primary" size="lg" shape="cut" className="flex-1">Continue</Button>
+          </div>
+        </form>
+      </AuthLayout>
+    </div>
+  );
+}

package/registry/examples/auth-layout/sign-in.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/auth-layout/sign-in.js

@@ -0,0 +1,55 @@
+"use client";
+
+// registry/examples/auth-layout/sign-in.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { AuthLayout } from "@krizaka/ui/auth-layout";
+import { Button } from "@krizaka/ui/button";
+import { Field, Input } from "@krizaka/ui/field";
+import { Mascot } from "@krizaka/ui/mascots";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function AuthLayoutSignIn() {
+  return /* @__PURE__ */ jsx("div", { className: "brand-orochia", children: /* @__PURE__ */ jsx(
+    AuthLayout,
+    {
+      brand: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ProductLogo, { id: "orochia", size: 28, animated: false }),
+        " Orochia"
+      ] }),
+      promise: "Your fans pay you, not an algorithm.",
+      aside: /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-3", children: [
+        /* @__PURE__ */ jsx(Mascot, { bird: "flamingo", mood: "welcome", size: 64 }),
+        /* @__PURE__ */ jsx("p", { children: "\u201C90 % of every tip, unlock and auction reaches me \u2014 on Monday.\u201D \u2014 Elena, creator" })
+      ] }),
+      asideFooter: "\xA9 Krizaka \xB7 Montr\xE9al",
+      title: "Welcome back",
+      description: "Sign in to your studio.",
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        "No account yet? ",
+        /* @__PURE__ */ jsx("a", { className: "font-semibold text-fg-accent", href: "#sign-up", children: "Create one" })
+      ] }),
+      legal: /* @__PURE__ */ jsxs(Fragment, { children: [
+        "By signing in you accept the ",
+        /* @__PURE__ */ jsx("a", { className: "underline", href: "#terms", children: "terms" }),
+        " and the ",
+        /* @__PURE__ */ jsx("a", { className: "underline", href: "#privacy", children: "privacy policy" }),
+        "."
+      ] }),
+      children: /* @__PURE__ */ jsxs("form", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { htmlFor: "sign-in-email", children: "Email" }),
+          /* @__PURE__ */ jsx(Input, { id: "sign-in-email", type: "email", autoComplete: "email", placeholder: "you@example.com" })
+        ] }),
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { htmlFor: "sign-in-password", children: "Password" }),
+          /* @__PURE__ */ jsx(Input, { id: "sign-in-password", type: "password", autoComplete: "current-password" }),
+          /* @__PURE__ */ jsx(Field.Hint, { children: /* @__PURE__ */ jsx("a", { className: "text-fg-accent", href: "#reset", children: "Forgot it?" }) })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "lg", shape: "cut", shimmer: true, className: "w-full", children: "Sign in" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "lg", shape: "cut", className: "w-full", children: "Use a passkey" })
+      ] })
+    }
+  ) });
+}
+export {
+  AuthLayoutSignIn as default
+};

package/registry/examples/auth-layout/sign-in.tsx

@@ -0,0 +1,47 @@
+import { ProductLogo } from "@krizaka/ui";
+import { AuthLayout } from "@krizaka/ui/auth-layout";
+import { Button } from "@krizaka/ui/button";
+import { Field, Input } from "@krizaka/ui/field";
+import { Mascot } from "@krizaka/ui/mascots";
+
+// TEMPLATE — Orochia's sign-in: the brand panel (its gradient, the promise, a creator's sentence) beside a calm form;
+// on a phone one column, the mark above the form, the fields at full width with 44 px targets.
+export default function AuthLayoutSignIn() {
+  return (
+    <div className="brand-orochia">
+      <AuthLayout
+        brand={<><ProductLogo id="orochia" size={28} animated={false} /> Orochia</>}
+        promise="Your fans pay you, not an algorithm."
+        aside={
+          <div className="flex items-end gap-3">
+            <Mascot bird="flamingo" mood="welcome" size={64} />
+            <p>“90 % of every tip, unlock and auction reaches me — on Monday.” — Elena, creator</p>
+          </div>
+        }
+        asideFooter="© Krizaka · Montréal"
+        title="Welcome back"
+        description="Sign in to your studio."
+        footer={<>No account yet? <a className="font-semibold text-fg-accent" href="#sign-up">Create one</a></>}
+        legal={<>By signing in you accept the <a className="underline" href="#terms">terms</a> and the <a className="underline" href="#privacy">privacy policy</a>.</>}
+      >
+        <form className="flex flex-col gap-4">
+          <Field.Root>
+            <Field.Label htmlFor="sign-in-email">Email</Field.Label>
+            <Input id="sign-in-email" type="email" autoComplete="email" placeholder="you@example.com" />
+          </Field.Root>
+          <Field.Root>
+            <Field.Label htmlFor="sign-in-password">Password</Field.Label>
+            <Input id="sign-in-password" type="password" autoComplete="current-password" />
+            <Field.Hint><a className="text-fg-accent" href="#reset">Forgot it?</a></Field.Hint>
+          </Field.Root>
+          <Button type="submit" variant="primary" size="lg" shape="cut" shimmer className="w-full">
+            Sign in
+          </Button>
+          <Button type="button" variant="secondary" size="lg" shape="cut" className="w-full">
+            Use a passkey
+          </Button>
+        </form>
+      </AuthLayout>
+    </div>
+  );
+}

package/registry/examples/auth-layout/verify.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/auth-layout/verify.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/auth-layout/verify.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { AuthLayout } from "@krizaka/ui/auth-layout";
+import { Button } from "@krizaka/ui/button";
+import { Field, Input } from "@krizaka/ui/field";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function AuthLayoutVerify() {
+  return /* @__PURE__ */ jsx(AuthLayout, { brand: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ProductLogo, { id: "krizaka", size: 28, animated: false }),
+    " Krizaka"
+  ] }), title: "Check your email", description: "We sent a 6-digit code to eric@tremblay.ca.", children: /* @__PURE__ */ jsxs("form", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs(Field.Root, { children: [
+      /* @__PURE__ */ jsx(Field.Label, { htmlFor: "verify-code", children: "Code" }),
+      /* @__PURE__ */ jsx(Input, { id: "verify-code", inputMode: "numeric", autoComplete: "one-time-code", maxLength: 6 })
+    ] }),
+    /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "lg", shape: "cut", className: "w-full", children: "Verify" })
+  ] }) });
+}
+export {
+  AuthLayoutVerify as default
+};

package/registry/examples/auth-layout/verify.tsx

@@ -0,0 +1,19 @@
+import { ProductLogo } from "@krizaka/ui";
+import { AuthLayout } from "@krizaka/ui/auth-layout";
+import { Button } from "@krizaka/ui/button";
+import { Field, Input } from "@krizaka/ui/field";
+
+// The smallest entry screen: no promise, the brand panel still carries the product's gradient on a desktop.
+export default function AuthLayoutVerify() {
+  return (
+    <AuthLayout brand={<><ProductLogo id="krizaka" size={28} animated={false} /> Krizaka</>} title="Check your email" description="We sent a 6-digit code to eric@tremblay.ca.">
+      <form className="flex flex-col gap-4">
+        <Field.Root>
+          <Field.Label htmlFor="verify-code">Code</Field.Label>
+          <Input id="verify-code" inputMode="numeric" autoComplete="one-time-code" maxLength={6} />
+        </Field.Root>
+        <Button type="submit" variant="primary" size="lg" shape="cut" className="w-full">Verify</Button>
+      </form>
+    </AuthLayout>
+  );
+}

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/choice-grid/line-up.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/choice-grid/line-up.js

@@ -0,0 +1,37 @@
+"use client";
+
+// registry/examples/choice-grid/line-up.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { ChoiceGrid } from "@krizaka/ui/choice-grid";
+import { StatGauge } from "@krizaka/ui/profile-card";
+import { jsx } from "react/jsx-runtime";
+var LINE_UP = [
+  { id: "orazaka", name: "Orazaka", title: "Sovereign AI", stat: "Data kept at home", value: 100 },
+  { id: "orochia", name: "Orochia", title: "Creator video", stat: "Creator share", value: 90 }
+];
+function ChoiceGridLineUp() {
+  return /* @__PURE__ */ jsx(
+    ChoiceGrid,
+    {
+      variant: "arcade",
+      label: "The products",
+      tag: "Team select",
+      caption: "One studio",
+      prompt: "Choose your fighter",
+      items: LINE_UP.map((p, i) => ({
+        id: p.id,
+        brand: p.id,
+        badge: `P${i + 1}`,
+        visual: /* @__PURE__ */ jsx(ProductLogo, { id: p.id, size: 84, animated: false }),
+        name: p.name,
+        title: p.title,
+        extra: /* @__PURE__ */ jsx(StatGauge, { label: p.stat, value: p.value }),
+        meta: `Stage 0${i + 1} \u2193`,
+        href: `#${p.id}`
+      }))
+    }
+  );
+}
+export {
+  ChoiceGridLineUp as default
+};

package/registry/examples/choice-grid/line-up.tsx

@@ -0,0 +1,32 @@
+import { ProductLogo } from "@krizaka/ui";
+import { ChoiceGrid } from "@krizaka/ui/choice-grid";
+import { StatGauge } from "@krizaka/ui/profile-card";
+
+const LINE_UP = [
+  { id: "orazaka", name: "Orazaka", title: "Sovereign AI", stat: "Data kept at home", value: 100 },
+  { id: "orochia", name: "Orochia", title: "Creator video", stat: "Creator share", value: 90 },
+] as const;
+
+// The select screen of a told page: each card in its brand, a gauge, and a link to its chapter.
+export default function ChoiceGridLineUp() {
+  return (
+    <ChoiceGrid
+      variant="arcade"
+      label="The products"
+      tag="Team select"
+      caption="One studio"
+      prompt="Choose your fighter"
+      items={LINE_UP.map((p, i) => ({
+        id: p.id,
+        brand: p.id,
+        badge: `P${i + 1}`,
+        visual: <ProductLogo id={p.id} size={84} animated={false} />,
+        name: p.name,
+        title: p.title,
+        extra: <StatGauge label={p.stat} value={p.value} />,
+        meta: `Stage 0${i + 1} ↓`,
+        href: `#${p.id}`,
+      }))}
+    />
+  );
+}

package/registry/examples/choice-grid/plans.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;