@krizaka/ui 2.6.0 → 2.9.0

package/registry/examples/marketing-layout/pricing.tsx

@@ -0,0 +1,55 @@
+import { Badge } from "@krizaka/ui/badge";
+import { Button } from "@krizaka/ui/button";
+import { GlowCard } from "@krizaka/ui/glow-card";
+import { Meter } from "@krizaka/ui/meter";
+import { Section } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+
+const PLANS = [
+  { id: "community", name: "Community", price: "Free", unit: "self-hosted", points: ["Every feature", "Your hardware", "Community support"] },
+  { id: "workspace", name: "Workspace", price: "€29", unit: "per month · 12,000 credits", points: ["Packs & Studios", "Shared workspaces", "Email support"], featured: true },
+  { id: "sovereign", name: "Sovereign", price: "Custom", unit: "on your servers", points: ["Installation with you", "Law 25 review", "A named engineer"] },
+];
+
+// TEMPLATE — pricing and credits: the plans side by side (the featured one lit by its turning ring), what a credit buys,
+// and the credits left for a signed-in visitor. On a phone the plans stack, the featured one first in the reading order
+// it already has; every action is the cut button, the featured one primary.
+export default function MarketingLayoutPricing() {
+  return (
+    <div className="w-full">
+      <PageHero eyebrow="Pricing" title="Pay once for what was done" lead="Credits buy answers, images and minutes of video — never a seat you do not use." align="center" backdrop="plain" />
+      <Section aria-label="Plans" spacing="sm">
+        <ul className="grid gap-4 md:grid-cols-3">
+          {PLANS.map((p) => (
+            <li key={p.id} className="flex">
+              <GlowCard alive={p.featured} className="flex w-full flex-col gap-4">
+                <div className="flex items-center justify-between gap-2">
+                  <h2 className="font-display text-lg font-bold text-fg">{p.name}</h2>
+                  {p.featured && <Badge tone="accent">Most chosen</Badge>}
+                </div>
+                <p>
+                  <span className="font-display text-4xl font-extrabold text-fg">{p.price}</span>
+                  <span className="mt-1 block text-sm text-fg-secondary">{p.unit}</span>
+                </p>
+                <ul className="flex flex-col gap-2 text-sm text-fg-secondary">
+                  {p.points.map((x) => (
+                    <li key={x}>— {x}</li>
+                  ))}
+                </ul>
+                <Button variant={p.featured ? "primary" : "secondary"} shape="cut" className="mt-auto w-full">
+                  Choose {p.name}
+                </Button>
+              </GlowCard>
+            </li>
+          ))}
+        </ul>
+      </Section>
+      <Section id="credits" title="Your credits" headingSize="sm" spacing="sm" divider>
+        <div className="max-w-md">
+          <Meter label="Credits this month" value={3800} max={12000} valueText="3,800 of 12,000 used" thresholds={{ low: 0.7, high: 0.9 }} showLabel />
+          <p className="mt-3 text-sm text-fg-secondary">One credit ≈ one chat answer · 4 credits an image · 30 a minute of video.</p>
+        </div>
+      </Section>
+    </div>
+  );
+}

package/registry/examples/marketing-layout/product-page.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/marketing-layout/product-page.js

@@ -0,0 +1,79 @@
+"use client";
+
+// registry/examples/marketing-layout/product-page.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { ActionBar } from "@krizaka/ui/action-bar";
+import { ArgumentCard } from "@krizaka/ui/argument-card";
+import { Button } from "@krizaka/ui/button";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { CtaPanel } from "@krizaka/ui/cta-panel";
+import { DecisionList } from "@krizaka/ui/decision-list";
+import { MarketingLayout } from "@krizaka/ui/marketing-layout";
+import { MascotQuote } from "@krizaka/ui/mascot-quote";
+import { Mascot } from "@krizaka/ui/mascots";
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { Facts, Section } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+import { jsx, jsxs } from "react/jsx-runtime";
+var WHY = [
+  { id: "local", title: "Local inference", hook: "Elsewhere, every prompt crosses the ocean.", bird: "falcon" },
+  { id: "paid", title: "Paid once", hook: "Elsewhere, you pay per token, forever.", bird: "flamingo" },
+  { id: "asked", title: "Agents that ask", hook: "Elsewhere, an agent acts first and apologises later.", bird: "pigeon" }
+];
+var DECISIONS = [
+  { id: "local", chose: "Local models by default.", refused: "A hosted API as the default path.", because: "A prompt that never leaves cannot leak.", cost: "You need a GPU, or patience on a CPU." },
+  { id: "telemetry", chose: "Zero telemetry.", refused: "Anonymous usage statistics.", because: "Anonymous rarely stays anonymous.", cost: "You tell us what breaks." }
+];
+var labels = { chose: "We chose", refused: "We refused", because: "Because", cost: "What it costs you" };
+function MarketingLayoutProductPage() {
+  return /* @__PURE__ */ jsx("div", { className: "brand-orazaka", children: /* @__PURE__ */ jsxs(
+    MarketingLayout,
+    {
+      skipLabel: "Skip to content",
+      header: /* @__PURE__ */ jsxs(NavBar.Root, { label: "Main", compactAfter: false, className: "max-w-(--kz-page-max,72rem)", children: [
+        /* @__PURE__ */ jsxs(NavBar.Brand, { href: "#home", children: [
+          /* @__PURE__ */ jsx(ProductLogo, { id: "orazaka", size: 22, animated: false }),
+          " Orazaka"
+        ] }),
+        /* @__PURE__ */ jsxs(NavBar.Items, { children: [
+          /* @__PURE__ */ jsx(NavBar.Link, { href: "#why", active: true, children: "Why" }),
+          /* @__PURE__ */ jsx(NavBar.Link, { href: "#decisions", children: "Decisions" })
+        ] })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxs(
+          PageHero,
+          {
+            eyebrow: "Sovereign AI \xB7 open source",
+            title: "The AI that never leaves home",
+            lead: "Chat, image, voice and video on your own server \u2014 one governed pipeline, nothing sent anywhere.",
+            aside: /* @__PURE__ */ jsx(Mascot, { bird: "owl", mood: "welcome", size: 112 }),
+            children: [
+              /* @__PURE__ */ jsx(Facts, { items: [{ label: "Apache-2.0", tone: "ok" }, { label: "Law 25 \xB7 GDPR" }] }),
+              /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", shape: "cut", shimmer: true, children: "Install in three commands" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Section, { id: "why", eyebrow: "Why", title: "Three traps it removes", children: /* @__PURE__ */ jsx(CardGrid, { min: 260, fit: "fit", reveal: false, children: WHY.map((w) => /* @__PURE__ */ jsx(
+          ArgumentCard,
+          {
+            id: `why-${w.id}`,
+            title: w.title,
+            mark: /* @__PURE__ */ jsx(Mascot, { bird: w.bird, size: 40, animated: false }),
+            hook: { label: "The trap", text: w.hook },
+            more: { href: `#${w.id}`, label: "Details" }
+          },
+          w.id
+        )) }) }),
+        /* @__PURE__ */ jsxs(Section, { id: "decisions", eyebrow: "Decisions", title: "What we chose, and what it costs you", divider: true, children: [
+          /* @__PURE__ */ jsx(DecisionList, { decisions: DECISIONS, labels, reveal: false }),
+          /* @__PURE__ */ jsx("div", { className: "mt-8", children: /* @__PURE__ */ jsx(MascotQuote, { variant: "callout", bird: "owl", label: "The owl's promise", children: "Every personal record stays in Qu\xE9bec, and you can read who touched it." }) })
+        ] }),
+        /* @__PURE__ */ jsx(Section, { spacing: "sm", "aria-labelledby": "product-cta", children: /* @__PURE__ */ jsx(CtaPanel, { id: "product-cta", title: "Ready to run it at home?", body: "Three commands, then your first private answer.", children: /* @__PURE__ */ jsx(ActionBar, { primaryFirst: true, size: "lg", label: "Get started", actions: [{ href: "#install", label: "Install" }, { href: "#contact", label: "Talk to us" }] }) }) })
+      ]
+    }
+  ) });
+}
+export {
+  MarketingLayoutProductPage as default
+};

package/registry/examples/marketing-layout/product-page.tsx

@@ -0,0 +1,83 @@
+import { ProductLogo } from "@krizaka/ui";
+import { ActionBar } from "@krizaka/ui/action-bar";
+import { ArgumentCard } from "@krizaka/ui/argument-card";
+import { Button } from "@krizaka/ui/button";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { CtaPanel } from "@krizaka/ui/cta-panel";
+import { DecisionList } from "@krizaka/ui/decision-list";
+import { MarketingLayout } from "@krizaka/ui/marketing-layout";
+import { MascotQuote } from "@krizaka/ui/mascot-quote";
+import { Mascot } from "@krizaka/ui/mascots";
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { Facts, Section } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+
+const WHY = [
+  { id: "local", title: "Local inference", hook: "Elsewhere, every prompt crosses the ocean.", bird: "falcon" as const },
+  { id: "paid", title: "Paid once", hook: "Elsewhere, you pay per token, forever.", bird: "flamingo" as const },
+  { id: "asked", title: "Agents that ask", hook: "Elsewhere, an agent acts first and apologises later.", bird: "pigeon" as const },
+];
+const DECISIONS = [
+  { id: "local", chose: "Local models by default.", refused: "A hosted API as the default path.", because: "A prompt that never leaves cannot leak.", cost: "You need a GPU, or patience on a CPU." },
+  { id: "telemetry", chose: "Zero telemetry.", refused: "Anonymous usage statistics.", because: "Anonymous rarely stays anonymous.", cost: "You tell us what breaks." },
+];
+const labels = { chose: "We chose", refused: "We refused", because: "Because", cost: "What it costs you" };
+
+// TEMPLATE — a product page (Orazaka): the hero with its facts and its main action (cut, shimmer), the reasons as compact
+// argument cards (the bird in the corner), the decisions with their cost, the owl's promise, the closing call. On a
+// phone the hero's bird goes above the title, the cards stack, the decisions' three parts stack under the choice.
+export default function MarketingLayoutProductPage() {
+  return (
+    <div className="brand-orazaka">
+      <MarketingLayout
+        skipLabel="Skip to content"
+        header={
+          <NavBar.Root label="Main" compactAfter={false} className="max-w-(--kz-page-max,72rem)">
+            <NavBar.Brand href="#home"><ProductLogo id="orazaka" size={22} animated={false} /> Orazaka</NavBar.Brand>
+            <NavBar.Items>
+              <NavBar.Link href="#why" active>Why</NavBar.Link>
+              <NavBar.Link href="#decisions">Decisions</NavBar.Link>
+            </NavBar.Items>
+          </NavBar.Root>
+        }
+      >
+        <PageHero
+          eyebrow="Sovereign AI · open source"
+          title="The AI that never leaves home"
+          lead="Chat, image, voice and video on your own server — one governed pipeline, nothing sent anywhere."
+          aside={<Mascot bird="owl" mood="welcome" size={112} />}
+        >
+          <Facts items={[{ label: "Apache-2.0", tone: "ok" }, { label: "Law 25 · GDPR" }]} />
+          <Button variant="primary" size="lg" shape="cut" shimmer>Install in three commands</Button>
+        </PageHero>
+        <Section id="why" eyebrow="Why" title="Three traps it removes">
+          <CardGrid min={260} fit="fit" reveal={false}>
+            {WHY.map((w) => (
+              <ArgumentCard
+                key={w.id}
+                id={`why-${w.id}`}
+                title={w.title}
+                mark={<Mascot bird={w.bird} size={40} animated={false} />}
+                hook={{ label: "The trap", text: w.hook }}
+                more={{ href: `#${w.id}`, label: "Details" }}
+              />
+            ))}
+          </CardGrid>
+        </Section>
+        <Section id="decisions" eyebrow="Decisions" title="What we chose, and what it costs you" divider>
+          <DecisionList decisions={DECISIONS} labels={labels} reveal={false} />
+          <div className="mt-8">
+            <MascotQuote variant="callout" bird="owl" label="The owl's promise">
+              Every personal record stays in Québec, and you can read who touched it.
+            </MascotQuote>
+          </div>
+        </Section>
+        <Section spacing="sm" aria-labelledby="product-cta">
+          <CtaPanel id="product-cta" title="Ready to run it at home?" body="Three commands, then your first private answer.">
+            <ActionBar primaryFirst size="lg" label="Get started" actions={[{ href: "#install", label: "Install" }, { href: "#contact", label: "Talk to us" }]} />
+          </CtaPanel>
+        </Section>
+      </MarketingLayout>
+    </div>
+  );
+}

package/registry/examples/mascot-state/empty.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/mascot-state/empty.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/mascot-state/empty.tsx
+import { Button } from "@krizaka/ui/button";
+import { MascotState } from "@krizaka/ui/mascot-state";
+import { jsx } from "react/jsx-runtime";
+function MascotStateEmpty() {
+  return /* @__PURE__ */ jsx(
+    MascotState,
+    {
+      bird: "pigeon",
+      framed: true,
+      className: "w-96",
+      title: "No messages yet",
+      description: "Answer a challenge or tip a creator to start a conversation.",
+      action: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", children: "Find creators" })
+    }
+  );
+}
+export {
+  MascotStateEmpty as default
+};

package/registry/examples/mascot-state/empty.tsx

@@ -0,0 +1,20 @@
+import { Button } from "@krizaka/ui/button";
+import { MascotState } from "@krizaka/ui/mascot-state";
+
+// An empty inbox: the pigeon has nothing to deliver yet; the action fills it.
+export default function MascotStateEmpty() {
+  return (
+    <MascotState
+      bird="pigeon"
+      framed
+      className="w-96"
+      title="No messages yet"
+      description="Answer a challenge or tip a creator to start a conversation."
+      action={
+        <Button variant="primary" size="sm">
+          Find creators
+        </Button>
+      }
+    />
+  );
+}

package/registry/examples/mascot-state/error.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/mascot-state/error.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/mascot-state/error.tsx
+import { Button } from "@krizaka/ui/button";
+import { ErrorState } from "@krizaka/ui/mascot-state";
+import { jsx } from "react/jsx-runtime";
+function MascotStateError() {
+  return /* @__PURE__ */ jsx(
+    ErrorState,
+    {
+      bird: "owl",
+      size: "lg",
+      titleAs: "h1",
+      className: "w-96",
+      title: "This page does not exist",
+      description: "The link may be old, or the page has moved.",
+      action: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", children: "Back to the home page" })
+    }
+  );
+}
+export {
+  MascotStateError as default
+};

package/registry/examples/mascot-state/error.tsx

@@ -0,0 +1,21 @@
+import { Button } from "@krizaka/ui/button";
+import { ErrorState } from "@krizaka/ui/mascot-state";
+
+// A page that does not exist: the owl read everywhere and did not find it; the way back is the action.
+export default function MascotStateError() {
+  return (
+    <ErrorState
+      bird="owl"
+      size="lg"
+      titleAs="h1"
+      className="w-96"
+      title="This page does not exist"
+      description="The link may be old, or the page has moved."
+      action={
+        <Button variant="secondary" size="sm">
+          Back to the home page
+        </Button>
+      }
+    />
+  );
+}

package/registry/examples/mascot-state/loading.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/mascot-state/loading.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/mascot-state/loading.tsx
+import { LoadingState } from "@krizaka/ui/mascot-state";
+import { jsx } from "react/jsx-runtime";
+function MascotStateLoading() {
+  return /* @__PURE__ */ jsx(
+    LoadingState,
+    {
+      bird: "duck",
+      size: "sm",
+      layout: "inline",
+      framed: true,
+      className: "w-96",
+      title: "Building the preview",
+      description: "About two minutes. You can leave this page."
+    }
+  );
+}
+export {
+  MascotStateLoading as default
+};

package/registry/examples/mascot-state/loading.tsx

@@ -0,0 +1,16 @@
+import { LoadingState } from "@krizaka/ui/mascot-state";
+
+// A job of a few minutes, in a card: the duck builds; the words say what runs.
+export default function MascotStateLoading() {
+  return (
+    <LoadingState
+      bird="duck"
+      size="sm"
+      layout="inline"
+      framed
+      className="w-96"
+      title="Building the preview"
+      description="About two minutes. You can leave this page."
+    />
+  );
+}

package/registry/examples/mascot-state/native/default.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/mascot-state/native/default.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/mascot-state/native/default.tsx
+import { Button, ErrorState, SuccessState } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeMascotStateDefault() {
+  return /* @__PURE__ */ jsxs(View, { style: { width: 320, gap: 8 }, children: [
+    /* @__PURE__ */ jsx(SuccessState, { bird: "flamingo", size: "sm", animated: false, title: "Payment received", description: "120 credits are on your balance." }),
+    /* @__PURE__ */ jsx(
+      ErrorState,
+      {
+        bird: "falcon",
+        size: "sm",
+        animated: false,
+        title: "We could not verify this code",
+        description: "It may have expired. Ask for a new one.",
+        action: /* @__PURE__ */ jsx(Button, { variant: "secondary", label: "Send a new code" })
+      }
+    )
+  ] });
+}
+export {
+  NativeMascotStateDefault as default
+};

package/registry/examples/mascot-state/native/default.tsx

@@ -0,0 +1,19 @@
+import { Button, ErrorState, SuccessState } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// A payment received (the flamingo gets paid) and a verification that failed (the falcon watches).
+export default function NativeMascotStateDefault() {
+  return (
+    <View style={{ width: 320, gap: 8 }}>
+      <SuccessState bird="flamingo" size="sm" animated={false} title="Payment received" description="120 credits are on your balance." />
+      <ErrorState
+        bird="falcon"
+        size="sm"
+        animated={false}
+        title="We could not verify this code"
+        description="It may have expired. Ask for a new one."
+        action={<Button variant="secondary" label="Send a new code" />}
+      />
+    </View>
+  );
+}

package/registry/examples/mascot-state/success.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/mascot-state/success.js

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/mascot-state/success.tsx
+import { Button } from "@krizaka/ui/button";
+import { SuccessState } from "@krizaka/ui/mascot-state";
+import { jsx } from "react/jsx-runtime";
+function MascotStateSuccess() {
+  return /* @__PURE__ */ jsx(
+    SuccessState,
+    {
+      bird: "flamingo",
+      className: "w-96",
+      title: "Payment received",
+      description: "120 credits are on your balance. The receipt is in your email.",
+      action: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", children: "See the receipt" })
+    }
+  );
+}
+export {
+  MascotStateSuccess as default
+};

package/registry/examples/mascot-state/success.tsx

@@ -0,0 +1,19 @@
+import { Button } from "@krizaka/ui/button";
+import { SuccessState } from "@krizaka/ui/mascot-state";
+
+// A payment received: the flamingo gets paid and answers; the receipt is the next step.
+export default function MascotStateSuccess() {
+  return (
+    <SuccessState
+      bird="flamingo"
+      className="w-96"
+      title="Payment received"
+      description="120 credits are on your balance. The receipt is in your email."
+      action={
+        <Button variant="secondary" size="sm">
+          See the receipt
+        </Button>
+      }
+    />
+  );
+}

package/registry/examples/mascot-state/welcome.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/mascot-state/welcome.js

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/mascot-state/welcome.tsx
+import { Button } from "@krizaka/ui/button";
+import { WelcomeState } from "@krizaka/ui/mascot-state";
+import { jsx } from "react/jsx-runtime";
+function MascotStateWelcome() {
+  return /* @__PURE__ */ jsx(
+    WelcomeState,
+    {
+      bird: "falcon",
+      className: "w-96",
+      title: "Welcome, Eric",
+      description: "First, protect your account with a second factor. It takes a minute.",
+      action: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", children: "Protect my account" })
+    }
+  );
+}
+export {
+  MascotStateWelcome as default
+};

package/registry/examples/mascot-state/welcome.tsx

@@ -0,0 +1,19 @@
+import { Button } from "@krizaka/ui/button";
+import { WelcomeState } from "@krizaka/ui/mascot-state";
+
+// The first step of an onboarding: the falcon keeps the account safe — the step is a second factor.
+export default function MascotStateWelcome() {
+  return (
+    <WelcomeState
+      bird="falcon"
+      className="w-96"
+      title="Welcome, Eric"
+      description="First, protect your account with a second factor. It takes a minute."
+      action={
+        <Button variant="primary" size="sm">
+          Protect my account
+        </Button>
+      }
+    />
+  );
+}

package/registry/examples/mascots/flock.tsx

@@ -1,6 +1,6 @@
 import { Mascot,MASCOT_BIRDS } from "@krizaka/ui/mascots";
 
-// The five birds in the host's brand colours: blue on Krizaka, orange in Orazaka, violet in Orochia.
+// The six birds in the host's brand colours: blue on Krizaka, orange in Orazaka, violet in Orochia, turquoise in Yazakia.
 export default function MascotFlock() {
   return (
     <div className="flex flex-wrap items-end gap-6">

package/registry/examples/mascots/lovebird.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/mascots/lovebird.js

@@ -0,0 +1,19 @@
+"use client";
+
+// registry/examples/mascots/lovebird.tsx
+import { Button } from "@krizaka/ui/button";
+import { Mascot } from "@krizaka/ui/mascots";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MascotLovebird() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-96 items-center gap-4 rounded-xl border border-border-default bg-surface-1 p-4", children: [
+    /* @__PURE__ */ jsx(Mascot, { bird: "lovebird", mood: "success", size: 88 }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-fg", children: "You are both interested" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-fg-secondary", children: "Your introduction is open for seven days." }),
+      /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", className: "mt-3", children: "Say hello" })
+    ] })
+  ] });
+}
+export {
+  MascotLovebird as default
+};

package/registry/examples/mascots/lovebird.tsx

@@ -0,0 +1,18 @@
+import { Button } from "@krizaka/ui/button";
+import { Mascot } from "@krizaka/ui/mascots";
+
+// The lovebird introduces: two people who chose each other meet — the words and the next step beside it.
+export default function MascotLovebird() {
+  return (
+    <div className="flex w-96 items-center gap-4 rounded-xl border border-border-default bg-surface-1 p-4">
+      <Mascot bird="lovebird" mood="success" size={88} />
+      <div className="flex-1">
+        <p className="text-sm font-medium text-fg">You are both interested</p>
+        <p className="mt-1 text-sm text-fg-secondary">Your introduction is open for seven days.</p>
+        <Button variant="primary" size="sm" className="mt-3">
+          Say hello
+        </Button>
+      </div>
+    </div>
+  );
+}

package/registry/examples/mascots/native/lovebird.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/mascots/native/lovebird.js

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/mascots/native/lovebird.tsx
+import { Mascot, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeMascotLovebird() {
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 16, alignItems: "flex-end" }, children: [
+    /* @__PURE__ */ jsxs(View, { style: { alignItems: "center", gap: 4 }, children: [
+      /* @__PURE__ */ jsx(Mascot, { bird: "lovebird", mood: "welcome", size: 80 }),
+      /* @__PURE__ */ jsx(Txt, { variant: "caption", children: "welcome" })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: { alignItems: "center", gap: 4 }, children: [
+      /* @__PURE__ */ jsx(Mascot, { bird: "lovebird", mood: "success", size: 80 }),
+      /* @__PURE__ */ jsx(Txt, { variant: "caption", children: "mutual" })
+    ] })
+  ] });
+}
+export {
+  NativeMascotLovebird as default
+};

package/registry/examples/mascots/native/lovebird.tsx

@@ -0,0 +1,18 @@
+import { Mascot, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// The lovebird introduces two people: welcoming, then celebrating a mutual interest.
+export default function NativeMascotLovebird() {
+  return (
+    <View style={{ flexDirection: "row", gap: 16, alignItems: "flex-end" }}>
+      <View style={{ alignItems: "center", gap: 4 }}>
+        <Mascot bird="lovebird" mood="welcome" size={80} />
+        <Txt variant="caption">welcome</Txt>
+      </View>
+      <View style={{ alignItems: "center", gap: 4 }}>
+        <Mascot bird="lovebird" mood="success" size={80} />
+        <Txt variant="caption">mutual</Txt>
+      </View>
+    </View>
+  );
+}