@krizaka/ui 2.8.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/mascots/native/phoenix.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/phoenix.js

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/mascots/native/phoenix.tsx
+import { Phoenix, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeMascotPhoenix() {
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 20, alignItems: "flex-end" }, children: [
+    /* @__PURE__ */ jsxs(View, { style: { alignItems: "center", gap: 4 }, children: [
+      /* @__PURE__ */ jsx(Phoenix, { size: 88, animated: false }),
+      /* @__PURE__ */ jsx(Txt, { variant: "caption", children: "own" })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: { alignItems: "center", gap: 4 }, children: [
+      /* @__PURE__ */ jsx(Phoenix, { size: 88, tone: "brand", animated: false }),
+      /* @__PURE__ */ jsx(Txt, { variant: "caption", children: "brand" })
+    ] })
+  ] });
+}
+export {
+  NativeMascotPhoenix as default
+};

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

@@ -0,0 +1,18 @@
+import { Phoenix, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// The comeback: the phoenix in its own colours, then in the app's accent.
+export default function NativeMascotPhoenix() {
+  return (
+    <View style={{ flexDirection: "row", gap: 20, alignItems: "flex-end" }}>
+      <View style={{ alignItems: "center", gap: 4 }}>
+        <Phoenix size={88} animated={false} />
+        <Txt variant="caption">own</Txt>
+      </View>
+      <View style={{ alignItems: "center", gap: 4 }}>
+        <Phoenix size={88} tone="brand" animated={false} />
+        <Txt variant="caption">brand</Txt>
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/mascots/phoenix.tsx
+import { Phoenix } from "@krizaka/ui/mascots";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MascotPhoenix() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end gap-8", children: [
+    /* @__PURE__ */ jsx(Phoenix, { size: 112, title: "The phoenix" }),
+    /* @__PURE__ */ jsx(Phoenix, { size: 112, tone: "brand", title: "The phoenix in the brand's colours" })
+  ] });
+}
+export {
+  MascotPhoenix as default
+};

package/registry/examples/mascots/phoenix.tsx

@@ -0,0 +1,11 @@
+import { Phoenix } from "@krizaka/ui/mascots";
+
+// The phoenix stands for a comeback — a relaunch, a recovered account: its own colours, then the product's accent.
+export default function MascotPhoenix() {
+  return (
+    <div className="flex flex-wrap items-end gap-8">
+      <Phoenix size={112} title="The phoenix" />
+      <Phoenix size={112} tone="brand" title="The phoenix in the brand's colours" />
+    </div>
+  );
+}

package/registry/examples/profile-card/arcade.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/profile-card/arcade.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/profile-card/arcade.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { Emblem } from "@krizaka/ui/achievement";
+import { ProfileCard } from "@krizaka/ui/profile-card";
+import { jsx } from "react/jsx-runtime";
+function ProfileCardArcade() {
+  return /* @__PURE__ */ jsx(
+    ProfileCard,
+    {
+      variant: "arcade",
+      brand: "orazaka",
+      nameAs: "p",
+      visual: /* @__PURE__ */ jsx(ProductLogo, { id: "orazaka", size: 120, animated: false }),
+      icon: /* @__PURE__ */ jsx(Emblem, { kind: "mirror", size: 16 }),
+      name: "Mirror clan",
+      statLabel: "Data kept at home",
+      caption: "\u014Dr\u0101re + zaka"
+    }
+  );
+}
+export {
+  ProfileCardArcade as default
+};

package/registry/examples/profile-card/arcade.tsx

@@ -0,0 +1,19 @@
+import { ProductLogo } from "@krizaka/ui";
+import { Emblem } from "@krizaka/ui/achievement";
+import { ProfileCard } from "@krizaka/ui/profile-card";
+
+// The arcade flavour: the brand's light, a ring and a breathing aura, a skewed gauge — for a told page, not a dashboard.
+export default function ProfileCardArcade() {
+  return (
+    <ProfileCard
+      variant="arcade"
+      brand="orazaka"
+      nameAs="p"
+      visual={<ProductLogo id="orazaka" size={120} animated={false} />}
+      icon={<Emblem kind="mirror" size={16} />}
+      name="Mirror clan"
+      statLabel="Data kept at home"
+      caption="ōrāre + zaka"
+    />
+  );
+}

package/registry/examples/profile-card/creator.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/profile-card/creator.js

@@ -0,0 +1,31 @@
+"use client";
+
+// registry/examples/profile-card/creator.tsx
+import { Avatar } from "@krizaka/ui/avatar";
+import { Button } from "@krizaka/ui/button";
+import { ProfileCard } from "@krizaka/ui/profile-card";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ProfileCardCreator() {
+  return /* @__PURE__ */ jsxs(
+    ProfileCard,
+    {
+      visual: /* @__PURE__ */ jsx(Avatar, { fallback: "EM", size: "xl" }),
+      visualSize: 96,
+      name: "Elena Marchetti",
+      statLabel: "Profile complete",
+      value: 80,
+      stats: [
+        { label: "Challenges met", value: 12, max: 15, valueText: "12 of 15" },
+        { label: "Replies within a day", value: 94 }
+      ],
+      caption: "Dance and street fashion \xB7 Montr\xE9al",
+      children: [
+        /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", children: "Follow" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", children: "Message" })
+      ]
+    }
+  );
+}
+export {
+  ProfileCardCreator as default
+};

package/registry/examples/profile-card/creator.tsx

@@ -0,0 +1,26 @@
+import { Avatar } from "@krizaka/ui/avatar";
+import { Button } from "@krizaka/ui/button";
+import { ProfileCard } from "@krizaka/ui/profile-card";
+
+// A creator at a glance: the headline gauge, the stats with their values in words, the actions under them.
+export default function ProfileCardCreator() {
+  return (
+    <ProfileCard
+      visual={<Avatar fallback="EM" size="xl" />}
+      visualSize={96}
+      name="Elena Marchetti"
+      statLabel="Profile complete"
+      value={80}
+      stats={[
+        { label: "Challenges met", value: 12, max: 15, valueText: "12 of 15" },
+        { label: "Replies within a day", value: 94 },
+      ]}
+      caption="Dance and street fashion · Montréal"
+    >
+      <Button variant="primary" size="sm">
+        Follow
+      </Button>
+      <Button size="sm">Message</Button>
+    </ProfileCard>
+  );
+}

package/registry/examples/profile-card/match.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/profile-card/match.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/profile-card/match.tsx
+import { Avatar } from "@krizaka/ui/avatar";
+import { ProfileCard } from "@krizaka/ui/profile-card";
+import { jsx } from "react/jsx-runtime";
+function ProfileCardMatch() {
+  return /* @__PURE__ */ jsx(
+    ProfileCard,
+    {
+      brand: "yazakia",
+      visual: /* @__PURE__ */ jsx(Avatar, { fallback: "AR", size: "xl" }),
+      visualSize: 88,
+      name: "Alex, 29",
+      stats: [
+        { label: "Interests in common", value: 4, max: 6, valueText: "4 of 6" },
+        { label: "Answers that match", value: 7, max: 10, valueText: "7 of 10" }
+      ],
+      caption: "You both answered \u201Ca slow Sunday market\u201D first."
+    }
+  );
+}
+export {
+  ProfileCardMatch as default
+};

package/registry/examples/profile-card/match.tsx

@@ -0,0 +1,19 @@
+import { Avatar } from "@krizaka/ui/avatar";
+import { ProfileCard } from "@krizaka/ui/profile-card";
+
+// A match in a dating app: what you share, in words — never a score alone.
+export default function ProfileCardMatch() {
+  return (
+    <ProfileCard
+      brand="yazakia"
+      visual={<Avatar fallback="AR" size="xl" />}
+      visualSize={88}
+      name="Alex, 29"
+      stats={[
+        { label: "Interests in common", value: 4, max: 6, valueText: "4 of 6" },
+        { label: "Answers that match", value: 7, max: 10, valueText: "7 of 10" },
+      ]}
+      caption="You both answered “a slow Sunday market” first."
+    />
+  );
+}

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

@@ -0,0 +1,27 @@
+"use client";
+
+// registry/examples/profile-card/native/default.tsx
+import { Avatar, Button, ProfileCard } from "@krizaka/ui/native";
+import { jsx } from "react/jsx-runtime";
+function NativeProfileCardDefault() {
+  return /* @__PURE__ */ jsx(
+    ProfileCard,
+    {
+      visual: /* @__PURE__ */ jsx(Avatar, { fallback: "EM", size: "xl" }),
+      name: "Elena Marchetti",
+      statLabel: "Profile complete",
+      value: 80,
+      stats: [
+        { label: "Challenges met", value: 12, max: 15, valueText: "12 of 15" },
+        { label: "Replies within a day", value: 94 }
+      ],
+      caption: "Dance and street fashion \xB7 Montr\xE9al",
+      animated: false,
+      style: { width: 300 },
+      children: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", label: "Follow" })
+    }
+  );
+}
+export {
+  NativeProfileCardDefault as default
+};

package/registry/examples/profile-card/native/default.tsx

@@ -0,0 +1,22 @@
+import { Avatar, Button, ProfileCard } from "@krizaka/ui/native";
+
+// A creator at a glance on mobile: the headline gauge, two stats in words, one action.
+export default function NativeProfileCardDefault() {
+  return (
+    <ProfileCard
+      visual={<Avatar fallback="EM" size="xl" />}
+      name="Elena Marchetti"
+      statLabel="Profile complete"
+      value={80}
+      stats={[
+        { label: "Challenges met", value: 12, max: 15, valueText: "12 of 15" },
+        { label: "Replies within a day", value: 94 },
+      ]}
+      caption="Dance and street fashion · Montréal"
+      animated={false}
+      style={{ width: 300 }}
+    >
+      <Button variant="primary" size="sm" label="Follow" />
+    </ProfileCard>
+  );
+}

package/registry/examples/promise-card/arcade.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/promise-card/arcade.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/promise-card/arcade.tsx
+import { Mascot } from "@krizaka/ui/mascots";
+import { PromiseCard } from "@krizaka/ui/promise-card";
+import { jsx } from "react/jsx-runtime";
+function PromiseCardArcade() {
+  return /* @__PURE__ */ jsx(
+    PromiseCard,
+    {
+      variant: "arcade",
+      brand: "orochia",
+      className: "w-[30rem] max-w-full",
+      label: "Special move",
+      promise: "90 % to the creator. On every sale.",
+      keys: ["\u2192", "\u2193", "\u2198", "P+K"],
+      bearer: /* @__PURE__ */ jsx(Mascot, { bird: "flamingo", mood: "success", size: 48, animated: false }),
+      bearerLabel: "In the corner",
+      bearerName: "The flamingo \xB7 gets paid"
+    }
+  );
+}
+export {
+  PromiseCardArcade as default
+};

package/registry/examples/promise-card/arcade.tsx

@@ -0,0 +1,19 @@
+import { Mascot } from "@krizaka/ui/mascots";
+import { PromiseCard } from "@krizaka/ui/promise-card";
+
+// The special move of a told page: the input lights key by key, then the move lands, carried by the clan's bird.
+export default function PromiseCardArcade() {
+  return (
+    <PromiseCard
+      variant="arcade"
+      brand="orochia"
+      className="w-[30rem] max-w-full"
+      label="Special move"
+      promise="90 % to the creator. On every sale."
+      keys={["→", "↓", "↘", "P+K"]}
+      bearer={<Mascot bird="flamingo" mood="success" size={48} animated={false} />}
+      bearerLabel="In the corner"
+      bearerName="The flamingo · gets paid"
+    />
+  );
+}

package/registry/examples/promise-card/guarantee.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/promise-card/guarantee.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/promise-card/guarantee.tsx
+import { Mascot } from "@krizaka/ui/mascots";
+import { PromiseCard } from "@krizaka/ui/promise-card";
+import { jsx } from "react/jsx-runtime";
+function PromiseCardGuarantee() {
+  return /* @__PURE__ */ jsx(
+    PromiseCard,
+    {
+      className: "w-[30rem] max-w-full",
+      label: "Our promise",
+      promise: "Your documents never leave your servers.",
+      keys: ["\u2318", "K"],
+      bearer: /* @__PURE__ */ jsx(Mascot, { bird: "owl", mood: "success", size: 48, animated: false }),
+      bearerLabel: "Kept by",
+      bearerName: "The owl \xB7 reads, and keeps it in the house"
+    }
+  );
+}
+export {
+  PromiseCardGuarantee as default
+};