@krizaka/ui 2.5.0 → 2.8.0

package/registry/examples/link-card/docs-hub.js

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

package/registry/examples/link-card/docs-hub.tsx

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

package/registry/examples/link-card/external.d.ts

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

package/registry/examples/link-card/external.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/link-card/external.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { jsx } from "react/jsx-runtime";
+function LinkCardExternal() {
+  return /* @__PURE__ */ jsx(
+    LinkCard,
+    {
+      className: "max-w-sm",
+      href: "https://github.com/krizaka/krizaka-ui",
+      icon: /* @__PURE__ */ jsx(ProductLogo, { id: "krizaka", size: 24, animated: false }),
+      title: "krizaka-ui on GitHub",
+      description: "The sources, the issues, the discussions.",
+      cta: "Open the repository"
+    }
+  );
+}
+export {
+  LinkCardExternal as default
+};

package/registry/examples/link-card/external.tsx

@@ -0,0 +1,16 @@
+import { ProductLogo } from "@krizaka/ui";
+import { LinkCard } from "@krizaka/ui/link-card";
+
+// An absolute address opens in a new tab and wears the external mark instead of the arrow.
+export default function LinkCardExternal() {
+  return (
+    <LinkCard
+      className="max-w-sm"
+      href="https://github.com/krizaka/krizaka-ui"
+      icon={<ProductLogo id="krizaka" size={24} animated={false} />}
+      title="krizaka-ui on GitHub"
+      description="The sources, the issues, the discussions."
+      cta="Open the repository"
+    />
+  );
+}

package/registry/examples/link-card/stack.d.ts

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

package/registry/examples/link-card/stack.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/link-card/stack.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { Facts } from "@krizaka/ui/page";
+import { jsx } from "react/jsx-runtime";
+function LinkCardStack() {
+  return /* @__PURE__ */ jsx(
+    LinkCard,
+    {
+      className: "max-w-sm",
+      layout: "stack",
+      href: "#orazaka",
+      icon: /* @__PURE__ */ jsx(ProductLogo, { id: "orazaka", size: 26, animated: false }),
+      meta: "Product",
+      title: "Orazaka",
+      description: "The sovereign AI engine: chat, image, video and voice on your own servers.",
+      extra: /* @__PURE__ */ jsx(Facts, { items: [{ label: "Self-hosted", tone: "ok" }, { label: "Apache-2.0" }] }),
+      cta: "Overview"
+    }
+  );
+}
+export {
+  LinkCardStack as default
+};

package/registry/examples/link-card/stack.tsx

@@ -0,0 +1,21 @@
+import { ProductLogo } from "@krizaka/ui";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { Facts } from "@krizaka/ui/page";
+
+// `layout="stack"`: the icon above the text, for a few large entry points (the products). `meta` names the category,
+// `extra` carries facts — never another link: the card is one.
+export default function LinkCardStack() {
+  return (
+    <LinkCard
+      className="max-w-sm"
+      layout="stack"
+      href="#orazaka"
+      icon={<ProductLogo id="orazaka" size={26} animated={false} />}
+      meta="Product"
+      title="Orazaka"
+      description="The sovereign AI engine: chat, image, video and voice on your own servers."
+      extra={<Facts items={[{ label: "Self-hosted", tone: "ok" }, { label: "Apache-2.0" }]} />}
+      cta="Overview"
+    />
+  );
+}

package/registry/examples/mascot-quote/callout.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-quote/callout.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/mascot-quote/callout.tsx
+import { MascotQuote } from "@krizaka/ui/mascot-quote";
+import { jsx } from "react/jsx-runtime";
+function MascotQuoteCallout() {
+  return /* @__PURE__ */ jsx(MascotQuote, { className: "max-w-2xl", variant: "callout", bird: "owl", mood: "welcome", label: "The owl's promise", children: "Every personal record stays in Qu\xE9bec, and you can read who touched it \u2014 Law 25, by design." });
+}
+export {
+  MascotQuoteCallout as default
+};

package/registry/examples/mascot-quote/callout.tsx

@@ -0,0 +1,10 @@
+import { MascotQuote } from "@krizaka/ui/mascot-quote";
+
+// `callout`: a promise alone in a section — larger, the bird alive (its loop pauses off screen and under reduced motion).
+export default function MascotQuoteCallout() {
+  return (
+    <MascotQuote className="max-w-2xl" variant="callout" bird="owl" mood="welcome" label="The owl's promise">
+      Every personal record stays in Québec, and you can read who touched it — Law 25, by design.
+    </MascotQuote>
+  );
+}

package/registry/examples/mascot-quote/inline.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-quote/inline.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/mascot-quote/inline.tsx
+import { MascotQuote } from "@krizaka/ui/mascot-quote";
+import { jsx } from "react/jsx-runtime";
+function MascotQuoteInline() {
+  return /* @__PURE__ */ jsx(MascotQuote, { className: "max-w-sm", bird: "falcon", label: "The falcon's rule", children: "Nothing crosses the walls: no prompt, no file, no metric." });
+}
+export {
+  MascotQuoteInline as default
+};

package/registry/examples/mascot-quote/inline.tsx

@@ -0,0 +1,10 @@
+import { MascotQuote } from "@krizaka/ui/mascot-quote";
+
+// `inline`: a rule inside a card or beside a paragraph — small, the bird still (it hops once under the pointer).
+export default function MascotQuoteInline() {
+  return (
+    <MascotQuote className="max-w-sm" bird="falcon" label="The falcon's rule">
+      Nothing crosses the walls: no prompt, no file, no metric.
+    </MascotQuote>
+  );
+}

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>
+  );
+}

package/registry/examples/page/backdrop.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;