@krizaka/ui 3.54.0 → 3.55.0

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;

package/registry/examples/rail-nav/shortcuts.js

@@ -0,0 +1,49 @@
+"use client";
+
+// registry/examples/rail-nav/shortcuts.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { AccountMenu } from "@krizaka/ui/account-menu";
+import { AppHeader, AppHeaderCount } from "@krizaka/ui/app-header";
+import { AppHeaderSearch } from "@krizaka/ui/app-header/search";
+import { RailNav } from "@krizaka/ui/rail-nav";
+import { jsx, jsxs } from "react/jsx-runtime";
+var dot = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "7" }) });
+function RailNavShortcuts() {
+  return /* @__PURE__ */ jsxs(RailNav.Shell, { children: [
+    /* @__PURE__ */ jsxs(
+      RailNav.Root,
+      {
+        label: "Akinaza",
+        accent: "akinaza",
+        expandable: true,
+        expandLabels: ["Show the words", "Hide the words"],
+        mark: /* @__PURE__ */ jsx("a", { href: "#home", "aria-label": "Akinaza, home", children: /* @__PURE__ */ jsx(ProductLogo, { id: "akinaza", size: 26, animated: false }) }),
+        shortcutsLabel: "Shortcuts",
+        shortcuts: [/* @__PURE__ */ jsx(RailNav.Item, { href: "#clients?view=regulars", icon: dot, label: "Regular clients" }, "r"), /* @__PURE__ */ jsx(RailNav.Item, { href: "#invoices/new", icon: dot, label: "New invoice" }, "n")],
+        children: [
+          /* @__PURE__ */ jsx(RailNav.Item, { href: "#today", icon: dot, label: "Today", current: true }),
+          /* @__PURE__ */ jsx(RailNav.Item, { href: "#clients", icon: dot, label: "Clients" }),
+          /* @__PURE__ */ jsx(RailNav.Item, { href: "#invoices", icon: dot, label: "Invoices" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(RailNav.Body, { children: [
+      /* @__PURE__ */ jsx(
+        AppHeader,
+        {
+          name: "Akinaza",
+          mark: /* @__PURE__ */ jsx(ProductLogo, { id: "akinaza", size: 22, animated: false }),
+          search: /* @__PURE__ */ jsx(AppHeaderSearch, { label: "Search clients and invoices", onOpen: () => {
+          }, shortcut: false }),
+          notifications: /* @__PURE__ */ jsx(AppHeaderCount, { label: "Notifications", icon: dot, count: 2, countLabel: "2 new" }),
+          account: /* @__PURE__ */ jsx(AccountMenu, { label: "Account", name: "Eric Tremblay", showName: "lg", avatar: { defaultAvatar: { brand: "akinaza", seed: "eric" } }, signOut: { label: "Sign out", onSelect: () => {
+          } } })
+        }
+      ),
+      /* @__PURE__ */ jsx("main", { className: "p-6 text-sm text-fg-secondary", children: "The screen's content." })
+    ] })
+  ] });
+}
+export {
+  RailNavShortcuts as default
+};

package/registry/examples/rail-nav/shortcuts.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { ProductLogo } from "@krizaka/ui";
+import { AccountMenu } from "@krizaka/ui/account-menu";
+import { AppHeader, AppHeaderCount } from "@krizaka/ui/app-header";
+import { AppHeaderSearch } from "@krizaka/ui/app-header/search";
+import { RailNav } from "@krizaka/ui/rail-nav";
+
+const dot = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden><circle cx="12" cy="12" r="7" /></svg>;
+
+// The family's frame: the rail with its « Shortcuts » (desktop), expanded from 1280 px; the top bar with the name from 1024 px.
+export default function RailNavShortcuts() {
+  return (
+    <RailNav.Shell>
+      <RailNav.Root
+        label="Akinaza"
+        accent="akinaza"
+        expandable
+        expandLabels={["Show the words", "Hide the words"]}
+        mark={<a href="#home" aria-label="Akinaza, home"><ProductLogo id="akinaza" size={26} animated={false} /></a>}
+        shortcutsLabel="Shortcuts"
+        shortcuts={[<RailNav.Item key="r" href="#clients?view=regulars" icon={dot} label="Regular clients" />, <RailNav.Item key="n" href="#invoices/new" icon={dot} label="New invoice" />]}
+      >
+        <RailNav.Item href="#today" icon={dot} label="Today" current />
+        <RailNav.Item href="#clients" icon={dot} label="Clients" />
+        <RailNav.Item href="#invoices" icon={dot} label="Invoices" />
+      </RailNav.Root>
+      <RailNav.Body>
+        <AppHeader
+          name="Akinaza"
+          mark={<ProductLogo id="akinaza" size={22} animated={false} />}
+          search={<AppHeaderSearch label="Search clients and invoices" onOpen={() => {}} shortcut={false} />}
+          notifications={<AppHeaderCount label="Notifications" icon={dot} count={2} countLabel="2 new" />}
+          account={<AccountMenu label="Account" name="Eric Tremblay" showName="lg" avatar={{ defaultAvatar: { brand: "akinaza", seed: "eric" } }} signOut={{ label: "Sign out", onSelect: () => {} }} />}
+        />
+        <main className="p-6 text-sm text-fg-secondary">The screen's content.</main>
+      </RailNav.Body>
+    </RailNav.Shell>
+  );
+}

package/registry/examples/retro-tv/cabinet.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/retro-tv/cabinet.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/retro-tv/cabinet.tsx
+import { RetroTv } from "@krizaka/ui/retro-tv";
+import { jsx } from "react/jsx-runtime";
+var TOUR = "https://www.krizaka.com/assets/orochia/tour";
+function RetroTvCabinet() {
+  return /* @__PURE__ */ jsx("div", { className: "w-72 max-w-full", children: /* @__PURE__ */ jsx(RetroTv, { title: "Story: behind the scenes", src: `${TOUR}/alex-story.mp4`, poster: `${TOUR}/alex-story.jpg`, channel: "CH 3 \xB7 Plateau" }) });
+}
+export {
+  RetroTvCabinet as default
+};

package/registry/examples/retro-tv/cabinet.tsx

@@ -0,0 +1,7 @@
+import { RetroTv } from "@krizaka/ui/retro-tv";
+
+const TOUR = "https://www.krizaka.com/assets/orochia/tour";
+
+export default function RetroTvCabinet() {
+  return <div className="w-72 max-w-full"><RetroTv title="Story: behind the scenes" src={`${TOUR}/alex-story.mp4`} poster={`${TOUR}/alex-story.jpg`} channel="CH 3 · Plateau" /></div>;
+}

package/registry/examples/retro-tv/portable.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/retro-tv/portable.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/retro-tv/portable.tsx
+import { RetroTv } from "@krizaka/ui/retro-tv";
+import { jsx } from "react/jsx-runtime";
+var TOUR = "https://www.krizaka.com/assets/orochia/tour";
+function RetroTvPortable() {
+  return /* @__PURE__ */ jsx("div", { className: "w-72 max-w-full", children: /* @__PURE__ */ jsx(RetroTv, { variant: "portable", title: "Story: behind the scenes", src: `${TOUR}/alex-story.mp4`, poster: `${TOUR}/alex-story.jpg`, channel: "CH 3 \xB7 Plateau" }) });
+}
+export {
+  RetroTvPortable as default
+};

package/registry/examples/retro-tv/portable.tsx

@@ -0,0 +1,7 @@
+import { RetroTv } from "@krizaka/ui/retro-tv";
+
+const TOUR = "https://www.krizaka.com/assets/orochia/tour";
+
+export default function RetroTvPortable() {
+  return <div className="w-72 max-w-full"><RetroTv variant="portable" title="Story: behind the scenes" src={`${TOUR}/alex-story.mp4`} poster={`${TOUR}/alex-story.jpg`} channel="CH 3 · Plateau" /></div>;
+}

package/registry/examples/signature/both.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;