@krizaka/ui 3.53.0 → 3.55.0

package/registry/examples/detail-layout/profile.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/detail-layout/profile.tsx
+import { Avatar } from "@krizaka/ui/avatar";
+import { Button } from "@krizaka/ui/button";
+import { DetailLayout } from "@krizaka/ui/detail-layout";
+import { jsx } from "react/jsx-runtime";
+function DetailLayoutProfile() {
+  return /* @__PURE__ */ jsx(
+    DetailLayout,
+    {
+      className: "w-full",
+      back: /* @__PURE__ */ jsx("a", { href: "#clients", children: "\u2190 Clients" }),
+      cover: true,
+      media: /* @__PURE__ */ jsx(Avatar, { defaultAvatar: { brand: "yomizaka", seed: "eric" }, alt: "", fallback: "E", size: "xl" }),
+      eyebrow: "Applicant",
+      title: "Eric Tremblay",
+      meta: "Unit 4B \xB7 file complete",
+      actions: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", children: "Open the file" }),
+      children: /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: "The applicant's documents and checks appear here." })
+    }
+  );
+}
+export {
+  DetailLayoutProfile as default
+};

package/registry/examples/detail-layout/profile.tsx

@@ -0,0 +1,21 @@
+import { Avatar } from "@krizaka/ui/avatar";
+import { Button } from "@krizaka/ui/button";
+import { DetailLayout } from "@krizaka/ui/detail-layout";
+
+// A person's page: `cover` turns the header into a ProfileBanner — the cover, the avatar over its edge, the name, the actions.
+export default function DetailLayoutProfile() {
+  return (
+    <DetailLayout
+      className="w-full"
+      back={<a href="#clients">← Clients</a>}
+      cover
+      media={<Avatar defaultAvatar={{ brand: "yomizaka", seed: "eric" }} alt="" fallback="E" size="xl" />}
+      eyebrow="Applicant"
+      title="Eric Tremblay"
+      meta="Unit 4B · file complete"
+      actions={<Button size="sm" variant="primary">Open the file</Button>}
+    >
+      <p className="text-sm text-fg-secondary">The applicant's documents and checks appear here.</p>
+    </DetailLayout>
+  );
+}

package/registry/examples/doodle/kinds.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/doodle/kinds.js

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/doodle/kinds.tsx
+import { Doodle } from "@krizaka/ui/doodle";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DoodleKinds() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-8 p-4", children: [
+    /* @__PURE__ */ jsx(Doodle, { kind: "arrow", place: "inline" }),
+    /* @__PURE__ */ jsx(Doodle, { kind: "circle", word: "\xE7a !", place: "inline" }),
+    /* @__PURE__ */ jsx(Doodle, { kind: "star", place: "inline" }),
+    /* @__PURE__ */ jsx(Doodle, { kind: "wave", place: "inline" }),
+    /* @__PURE__ */ jsx(Doodle, { kind: "bird", place: "inline" })
+  ] });
+}
+export {
+  DoodleKinds as default
+};

package/registry/examples/doodle/kinds.tsx

@@ -0,0 +1,14 @@
+import { Doodle } from "@krizaka/ui/doodle";
+
+// The five doodles, kept in the flow (`place="inline"`) so each can be seen at any width.
+export default function DoodleKinds() {
+  return (
+    <div className="flex flex-wrap items-center gap-8 p-4">
+      <Doodle kind="arrow" place="inline" />
+      <Doodle kind="circle" word="ça !" place="inline" />
+      <Doodle kind="star" place="inline" />
+      <Doodle kind="wave" place="inline" />
+      <Doodle kind="bird" place="inline" />
+    </div>
+  );
+}

package/registry/examples/doodle/margin.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/doodle/margin.js

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/doodle/margin.tsx
+import { Card } from "@krizaka/ui/card";
+import { Doodle } from "@krizaka/ui/doodle";
+import { Page } from "@krizaka/ui/page";
+import { Stuck } from "@krizaka/ui/stuck";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DoodleMargin() {
+  return /* @__PURE__ */ jsx(Page, { size: "full", children: /* @__PURE__ */ jsx(Stuck, { className: "w-full", hold: "tape-corners", seed: "margin", doodle: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Doodle, { kind: "arrow", top: "16px" }),
+    /* @__PURE__ */ jsx(Doodle, { kind: "star", side: "right", top: "40px" })
+  ] }), children: /* @__PURE__ */ jsx(Card.Root, { className: "p-5", children: /* @__PURE__ */ jsx("p", { className: "m-0", children: "Nothing here depends on the doodles: they are only a margin note drawn by hand." }) }) }) });
+}
+export {
+  DoodleMargin as default
+};

package/registry/examples/doodle/margin.tsx

@@ -0,0 +1,17 @@
+import { Card } from "@krizaka/ui/card";
+import { Doodle } from "@krizaka/ui/doodle";
+import { Page } from "@krizaka/ui/page";
+import { Stuck } from "@krizaka/ui/stuck";
+
+// In the page margin, beside the block, from 1360 px; below that the doodles are not displayed.
+export default function DoodleMargin() {
+  return (
+    <Page size="full">
+      <Stuck className="w-full" hold="tape-corners" seed="margin" doodle={<><Doodle kind="arrow" top="16px" /><Doodle kind="star" side="right" top="40px" /></>}>
+        <Card.Root className="p-5">
+          <p className="m-0">Nothing here depends on the doodles: they are only a margin note drawn by hand.</p>
+        </Card.Root>
+      </Stuck>
+    </Page>
+  );
+}

package/registry/examples/markdown/native/wide-table.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/markdown/native/wide-table.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/markdown/native/wide-table.tsx
+import { Markdown } from "@krizaka/ui/native/markdown";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+var text = `## Generated reference
+
+Swipe sideways to read the reference. Identifiers keep their full width.
+
+| Identifier | Profile | Account | Upload | Review | Delivery | Presence | Discovery | Queue |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| \`profile-photo-check\` | \`profile-photo-check\` | \`account-access-review\` | \`upload-retry-policy\` | \`review-pending-items\` | \`delivery-status-check\` | \`presence-channel-join\` | \`discovery-manifest-signature\` | \`queue-priority-update\` |
+| \`account-access-review\` | \`profile-photo-refresh\` | \`account-session-refresh\` | \`upload-content-validation\` | \`review-assignment-update\` | \`delivery-receipt-confirm\` | \`presence-heartbeat-renewal\` | \`discovery-address-allowlist\` | \`queue-backoff-duration\` |
+
+A long word: documentationidentifierswithoutanynaturalbreakopportunitiesstillfitonthephone.
+`;
+function NativeMarkdownWideTable() {
+  return /* @__PURE__ */ jsx(View, { style: { width: "100%", maxWidth: 640 }, children: /* @__PURE__ */ jsx(Markdown, { generated: true, generatedLabel: "Generated", children: text }) });
+}
+export {
+  NativeMarkdownWideTable as default
+};

package/registry/examples/markdown/native/wide-table.tsx

@@ -0,0 +1,22 @@
+import { Markdown } from "@krizaka/ui/native/markdown";
+import { View } from "react-native";
+
+const text = `## Generated reference
+
+Swipe sideways to read the reference. Identifiers keep their full width.
+
+| Identifier | Profile | Account | Upload | Review | Delivery | Presence | Discovery | Queue |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| \`profile-photo-check\` | \`profile-photo-check\` | \`account-access-review\` | \`upload-retry-policy\` | \`review-pending-items\` | \`delivery-status-check\` | \`presence-channel-join\` | \`discovery-manifest-signature\` | \`queue-priority-update\` |
+| \`account-access-review\` | \`profile-photo-refresh\` | \`account-session-refresh\` | \`upload-content-validation\` | \`review-assignment-update\` | \`delivery-receipt-confirm\` | \`presence-heartbeat-renewal\` | \`discovery-address-allowlist\` | \`queue-backoff-duration\` |
+
+A long word: documentationidentifierswithoutanynaturalbreakopportunitiesstillfitonthephone.
+`;
+
+export default function NativeMarkdownWideTable() {
+  return (
+    <View style={{ width: "100%", maxWidth: 640 }}>
+      <Markdown generated generatedLabel="Generated">{text}</Markdown>
+    </View>
+  );
+}

package/registry/examples/markdown/wide-table.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/markdown/wide-table.js

@@ -0,0 +1,28 @@
+"use client";
+
+// registry/examples/markdown/wide-table.tsx
+import { Markdown } from "@krizaka/ui/markdown";
+import { jsx } from "react/jsx-runtime";
+var text = `## Generated reference
+
+Identifiers stay whole; move through the table with the arrow keys after focusing its frame.
+
+| Identifier | Profile | Account | Upload | Review | Delivery | Presence | Discovery | Queue |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| \`profile-photo-check\` | \`profile-photo-check\` | \`account-access-review\` | \`upload-retry-policy\` | \`review-pending-items\` | \`delivery-status-check\` | \`presence-channel-join\` | \`discovery-manifest-signature\` | \`queue-priority-update\` |
+| \`account-access-review\` | \`profile-photo-check\`, \`profile-photo-refresh\` | \`account-session-refresh\` | \`upload-content-validation\` | \`review-assignment-update\` | \`delivery-receipt-confirm\` | \`presence-heartbeat-renewal\` | \`discovery-address-allowlist\` | \`queue-backoff-duration-for-background-upload-retry-policy\` |
+
+A long word: documentationidentifierswithoutanynaturalbreakopportunitiesstillfitonthephone.
+
+- A long URL: [https://example.com/documentation/reference/identifierswithoutanynaturalbreakopportunities](https://example.com/documentation/reference/identifierswithoutanynaturalbreakopportunities)
+
+\`\`\`text
+profile-photo-check account-access-review upload-retry-policy discovery-manifest-signature
+\`\`\`
+`;
+function MarkdownWideTable() {
+  return /* @__PURE__ */ jsx(Markdown, { generated: true, generatedLabel: "Generated", className: "max-w-full", children: text });
+}
+export {
+  MarkdownWideTable as default
+};

package/registry/examples/markdown/wide-table.tsx

@@ -0,0 +1,23 @@
+import { Markdown } from "@krizaka/ui/markdown";
+
+const text = `## Generated reference
+
+Identifiers stay whole; move through the table with the arrow keys after focusing its frame.
+
+| Identifier | Profile | Account | Upload | Review | Delivery | Presence | Discovery | Queue |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| \`profile-photo-check\` | \`profile-photo-check\` | \`account-access-review\` | \`upload-retry-policy\` | \`review-pending-items\` | \`delivery-status-check\` | \`presence-channel-join\` | \`discovery-manifest-signature\` | \`queue-priority-update\` |
+| \`account-access-review\` | \`profile-photo-check\`, \`profile-photo-refresh\` | \`account-session-refresh\` | \`upload-content-validation\` | \`review-assignment-update\` | \`delivery-receipt-confirm\` | \`presence-heartbeat-renewal\` | \`discovery-address-allowlist\` | \`queue-backoff-duration-for-background-upload-retry-policy\` |
+
+A long word: documentationidentifierswithoutanynaturalbreakopportunitiesstillfitonthephone.
+
+- A long URL: [https://example.com/documentation/reference/identifierswithoutanynaturalbreakopportunities](https://example.com/documentation/reference/identifierswithoutanynaturalbreakopportunities)
+
+\`\`\`text
+profile-photo-check account-access-review upload-retry-policy discovery-manifest-signature
+\`\`\`
+`;
+
+export default function MarkdownWideTable() {
+  return <Markdown generated generatedLabel="Generated" className="max-w-full">{text}</Markdown>;
+}

package/registry/examples/nav-bar/family-product.js

@@ -2,9 +2,8 @@
 
 // registry/examples/nav-bar/family-product.tsx
 import { OrazakaLogo } from "@krizaka/ui";
-import { Button } from "@krizaka/ui/button";
 import { languagesFor } from "@krizaka/ui/language-switch";
-import { NavBar } from "@krizaka/ui/nav-bar";
+import { NavBar, ProductBarActions } from "@krizaka/ui/nav-bar";
 import { ThemeProvider, ThemeToggle } from "@krizaka/ui/theme";
 import { jsx, jsxs } from "react/jsx-runtime";
 var groups = [
@@ -28,8 +27,7 @@ function NavBarFamilyProduct() {
         theme,
         language
       ] }),
-      /* @__PURE__ */ jsx(Button, { asChild: true, variant: "ghost", size: "sm", className: "hidden md:inline-flex", children: /* @__PURE__ */ jsx("a", { href: "#sign-in", children: "Sign in" }) }),
-      /* @__PURE__ */ jsx(Button, { asChild: true, variant: "primary", size: "sm", className: "hidden md:inline-flex", children: /* @__PURE__ */ jsx("a", { href: "#talk", children: "Talk to us" }) }),
+      /* @__PURE__ */ jsx(ProductBarActions, { signIn: { href: "#sign-in", label: "Sign in" }, signupOpen: false }),
       /* @__PURE__ */ jsxs(NavBar.Mobile, { openLabel: "Open the menu", closeLabel: "Close the menu", children: [
         groups.map((g) => /* @__PURE__ */ jsx(NavBar.MobileGroup, { label: g.label, children: g.links.map(([href, title]) => /* @__PURE__ */ jsx(NavBar.MobileLink, { href, children: title }, href)) }, g.id)),
         /* @__PURE__ */ jsx(NavBar.MobileLink, { href: "#docs", children: "Docs" }),

package/registry/examples/nav-bar/family-product.tsx

@@ -1,10 +1,9 @@
 import { OrazakaLogo } from "@krizaka/ui";
-import { Button } from "@krizaka/ui/button";
 import { languagesFor } from "@krizaka/ui/language-switch";
-import { NavBar } from "@krizaka/ui/nav-bar";
+import { NavBar, ProductBarActions } from "@krizaka/ui/nav-bar";
 import { ThemeProvider, ThemeToggle } from "@krizaka/ui/theme";
 
-// The product standard: mark · Product ▾ · Platforms ▾ · Docs; theme, language, Sign in, one action; phone: groups, preferences.
+// The product standard: mark · Product ▾ · Platforms ▾ · Docs; theme, language, the product actions (using the app is primary; Contact lives in the footer); phone: groups, preferences.
 const groups = [
   { id: "product", label: "Product", links: [["#how", "How it works", "Install to first answer in three commands."], ["#demo", "Demo", "Real runs: prompts, images, videos."]] },
   { id: "platforms", label: "Platforms", links: [["#web", "Web", "The workspace in your browser."], ["#mac", "Mac", "Orazaka Desktop for Apple Silicon."]] },
@@ -25,8 +24,7 @@ export default function NavBarFamilyProduct() {
           <NavBar.Link href="#docs">Docs</NavBar.Link></NavBar.Items>
         <NavBar.Actions>
           <span className="hidden items-center gap-1 md:inline-flex">{theme}{language}</span>
-          <Button asChild variant="ghost" size="sm" className="hidden md:inline-flex"><a href="#sign-in">Sign in</a></Button>
-          <Button asChild variant="primary" size="sm" className="hidden md:inline-flex"><a href="#talk">Talk to us</a></Button>
+          <ProductBarActions signIn={{ href: "#sign-in", label: "Sign in" }} signupOpen={false} />
           <NavBar.Mobile openLabel="Open the menu" closeLabel="Close the menu">
             {groups.map((g) => (
               <NavBar.MobileGroup key={g.id} label={g.label}>{g.links.map(([href, title]) => <NavBar.MobileLink key={href} href={href}>{title}</NavBar.MobileLink>)}</NavBar.MobileGroup>

package/registry/examples/notification-preferences/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/notification-preferences/default.js

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/notification-preferences/default.tsx
+import { NotificationPreferences } from "@krizaka/ui/notification-preferences";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var channels = [
+  { id: "app", label: "In the app" },
+  { id: "email", label: "By e-mail" }
+];
+var categories = [
+  { id: "social", label: "Followers and replies", description: "Someone follows you or answers." },
+  { id: "messages", label: "Messages", description: "A new message in a conversation." },
+  { id: "earnings", label: "Earnings", description: "A sale, a tip, a payout." },
+  { id: "security", label: "Security", locked: true, lockedNote: "Always on: sign-ins and password changes." }
+];
+var all = (on) => Object.fromEntries(categories.map((c) => [c.id, { app: on, email: on }]));
+var presets = [
+  { id: "everything", label: "Everything", hint: "Every category, in the app and by e-mail.", value: all(true) },
+  { id: "essentials", label: "Essentials", hint: "In the app only, nothing by e-mail.", value: Object.fromEntries(categories.map((c) => [c.id, { app: true, email: false }])) },
+  { id: "quiet", label: "Quiet", hint: "Nothing but security.", value: all(false) }
+];
+function NotificationPreferencesDefault() {
+  const [value, setValue] = React.useState(presets[1].value);
+  return /* @__PURE__ */ jsx(NotificationPreferences, { label: "Notification settings", presetsLabel: "Presets", customHint: "A mix of your own.", channels, categories, presets, value, onValueChange: setValue, className: "max-w-2xl" });
+}
+export {
+  NotificationPreferencesDefault as default
+};

package/registry/examples/notification-preferences/default.tsx

@@ -0,0 +1,28 @@
+"use client";
+import { type NotificationMatrix,NotificationPreferences } from "@krizaka/ui/notification-preferences";
+import * as React from "react";
+
+const channels = [
+  { id: "app", label: "In the app" },
+  { id: "email", label: "By e-mail" },
+] as const;
+const categories = [
+  { id: "social", label: "Followers and replies", description: "Someone follows you or answers." },
+  { id: "messages", label: "Messages", description: "A new message in a conversation." },
+  { id: "earnings", label: "Earnings", description: "A sale, a tip, a payout." },
+  { id: "security", label: "Security", locked: true, lockedNote: "Always on: sign-ins and password changes." },
+] as const;
+const all = (on: boolean): NotificationMatrix => Object.fromEntries(categories.map((c) => [c.id, { app: on, email: on }]));
+const presets = [
+  { id: "everything", label: "Everything", hint: "Every category, in the app and by e-mail.", value: all(true) },
+  { id: "essentials", label: "Essentials", hint: "In the app only, nothing by e-mail.", value: Object.fromEntries(categories.map((c) => [c.id, { app: true, email: false }])) },
+  { id: "quiet", label: "Quiet", hint: "Nothing but security.", value: all(false) },
+];
+
+// TEMPLATE — the notifications part of an account page: presets first, then the matrix.
+export default function NotificationPreferencesDefault() {
+  const [value, setValue] = React.useState<NotificationMatrix>(presets[1]!.value);
+  return (
+    <NotificationPreferences label="Notification settings" presetsLabel="Presets" customHint="A mix of your own." channels={channels} categories={categories} presets={presets} value={value} onValueChange={setValue} className="max-w-2xl" />
+  );
+}

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

@@ -0,0 +1,28 @@
+"use client";
+
+// registry/examples/profile-card/banner.tsx
+import { Avatar } from "@krizaka/ui/avatar";
+import { Badge } from "@krizaka/ui/badge";
+import { Button } from "@krizaka/ui/button";
+import { ProfileBanner } from "@krizaka/ui/profile-card";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ProfileCardBanner() {
+  return /* @__PURE__ */ jsx(
+    ProfileBanner,
+    {
+      brand: "akinaza",
+      avatar: /* @__PURE__ */ jsx(Avatar, { defaultAvatar: { brand: "akinaza", seed: "eric" }, alt: "", fallback: "E", size: "xl" }),
+      eyebrow: "Client",
+      title: "Eric Tremblay",
+      status: /* @__PURE__ */ jsx(Badge, { tone: "success", size: "sm", children: "Regular" }),
+      meta: "Client since 2024 \xB7 14 visits",
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", children: "Book" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", children: "Message" })
+      ] })
+    }
+  );
+}
+export {
+  ProfileCardBanner as default
+};

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

@@ -0,0 +1,24 @@
+import { Avatar } from "@krizaka/ui/avatar";
+import { Badge } from "@krizaka/ui/badge";
+import { Button } from "@krizaka/ui/button";
+import { ProfileBanner } from "@krizaka/ui/profile-card";
+
+// A client's page: the brand's tinted cover, the family's default avatar overlapping it, the name (h1), its facts, the actions.
+export default function ProfileCardBanner() {
+  return (
+    <ProfileBanner
+      brand="akinaza"
+      avatar={<Avatar defaultAvatar={{ brand: "akinaza", seed: "eric" }} alt="" fallback="E" size="xl" />}
+      eyebrow="Client"
+      title="Eric Tremblay"
+      status={<Badge tone="success" size="sm">Regular</Badge>}
+      meta="Client since 2024 · 14 visits"
+      actions={
+        <>
+          <Button size="sm" variant="primary">Book</Button>
+          <Button size="sm">Message</Button>
+        </>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/profile-card/native/banner.tsx
+import { Avatar, Badge, Button, ProfileBanner } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeProfileCardBanner() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 340 }, children: /* @__PURE__ */ jsx(
+    ProfileBanner,
+    {
+      avatar: /* @__PURE__ */ jsx(Avatar, { defaultAvatar: { brand: "akinaza", seed: "eric" }, fallback: "E", size: "xl" }),
+      eyebrow: "Client",
+      title: "Eric Tremblay",
+      status: /* @__PURE__ */ jsx(Badge, { tone: "success", children: "Regular" }),
+      meta: "Client since 2024 \xB7 14 visits",
+      actions: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", label: "Book" })
+    }
+  ) });
+}
+export {
+  NativeProfileCardBanner as default
+};

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

@@ -0,0 +1,18 @@
+import { Avatar, Badge, Button, ProfileBanner } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// A client's screen on a phone: the brand's cover, the avatar over its edge, the name, its facts, the actions.
+export default function NativeProfileCardBanner() {
+  return (
+    <View style={{ width: 340 }}>
+      <ProfileBanner
+        avatar={<Avatar defaultAvatar={{ brand: "akinaza", seed: "eric" }} fallback="E" size="xl" />}
+        eyebrow="Client"
+        title="Eric Tremblay"
+        status={<Badge tone="success">Regular</Badge>}
+        meta="Client since 2024 · 14 visits"
+        actions={<Button variant="primary" size="sm" label="Book" />}
+      />
+    </View>
+  );
+}

package/registry/examples/quota-meter/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/quota-meter/default.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/quota-meter/default.tsx
+import { QuotaMeter } from "@krizaka/ui/quota-meter";
+import { jsx } from "react/jsx-runtime";
+function QuotaMeterDefault() {
+  return /* @__PURE__ */ jsx(
+    QuotaMeter,
+    {
+      className: "max-w-md",
+      title: "Storage",
+      plan: "Creator plan",
+      value: 8.6,
+      max: 10,
+      usedText: "8.6 GB of 10 GB",
+      meterLabel: "Storage used",
+      level: "warning",
+      statusText: "You are at 86 %. Remove a video or change plan before you reach the limit.",
+      details: ["412 of 600 minutes", "2 of 10 uploads today"],
+      action: /* @__PURE__ */ jsx("a", { href: "#manage", className: "font-semibold text-fg-accent hover:underline", children: "Manage your videos" })
+    }
+  );
+}
+export {
+  QuotaMeterDefault as default
+};

package/registry/examples/quota-meter/default.tsx

@@ -0,0 +1,20 @@
+import { QuotaMeter } from "@krizaka/ui/quota-meter";
+
+// TEMPLATE — the plan's room: storage used, what to do about it, the small figures.
+export default function QuotaMeterDefault() {
+  return (
+    <QuotaMeter
+      className="max-w-md"
+      title="Storage"
+      plan="Creator plan"
+      value={8.6}
+      max={10}
+      usedText="8.6 GB of 10 GB"
+      meterLabel="Storage used"
+      level="warning"
+      statusText="You are at 86 %. Remove a video or change plan before you reach the limit."
+      details={["412 of 600 minutes", "2 of 10 uploads today"]}
+      action={<a href="#manage" className="font-semibold text-fg-accent hover:underline">Manage your videos</a>}
+    />
+  );
+}

package/registry/examples/quota-meter/full.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/quota-meter/full.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/quota-meter/full.tsx
+import { QuotaMeter } from "@krizaka/ui/quota-meter";
+import { jsx } from "react/jsx-runtime";
+function QuotaMeterFull() {
+  return /* @__PURE__ */ jsx(
+    QuotaMeter,
+    {
+      className: "max-w-md",
+      title: "Storage",
+      plan: "Free plan",
+      value: 2,
+      max: 2,
+      usedText: "2 GB of 2 GB",
+      meterLabel: "Storage used",
+      level: "full",
+      statusText: "Your storage is full: new uploads wait.",
+      notices: ["2 uploads are on hold.", "Uploads are paused for everyone while we catch up."]
+    }
+  );
+}
+export {
+  QuotaMeterFull as default
+};

package/registry/examples/quota-meter/full.tsx

@@ -0,0 +1,18 @@
+import { QuotaMeter } from "@krizaka/ui/quota-meter";
+
+export default function QuotaMeterFull() {
+  return (
+    <QuotaMeter
+      className="max-w-md"
+      title="Storage"
+      plan="Free plan"
+      value={2}
+      max={2}
+      usedText="2 GB of 2 GB"
+      meterLabel="Storage used"
+      level="full"
+      statusText="Your storage is full: new uploads wait."
+      notices={["2 uploads are on hold.", "Uploads are paused for everyone while we catch up."]}
+    />
+  );
+}

package/registry/examples/rail-nav/shortcuts.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;