@krizaka/ui 2.8.0 → 2.10.0

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

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

@@ -0,0 +1,17 @@
+import { Mascot } from "@krizaka/ui/mascots";
+import { PromiseCard } from "@krizaka/ui/promise-card";
+
+// A product's guarantee with the bird that keeps it — the owl reads your documents and keeps them in the house.
+export default function PromiseCardGuarantee() {
+  return (
+    <PromiseCard
+      className="w-[30rem] max-w-full"
+      label="Our promise"
+      promise="Your documents never leave your servers."
+      keys={["⌘", "K"]}
+      bearer={<Mascot bird="owl" mood="success" size={48} animated={false} />}
+      bearerLabel="Kept by"
+      bearerName="The owl · reads, and keeps it in the house"
+    />
+  );
+}

package/registry/examples/scroll-stage/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/scroll-stage/arcade.js

@@ -0,0 +1,16 @@
+"use client";
+
+// registry/examples/scroll-stage/arcade.tsx
+import { GoalGauge } from "@krizaka/ui/goal-gauge";
+import { Scene, ScrollStage } from "@krizaka/ui/scroll-stage";
+import { StageBanner } from "@krizaka/ui/stage-banner";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ScrollStageArcade() {
+  return /* @__PURE__ */ jsx(ScrollStage, { variant: "arcade", className: "grid w-full max-w-xl gap-8", children: /* @__PURE__ */ jsxs(Scene, { brand: "orochia", className: "grid justify-items-center gap-4 text-center", children: [
+    /* @__PURE__ */ jsx(StageBanner, { size: "lg", stage: "Final round", title: "Eight problems in the way", subtitle: "One by one, they fall." }),
+    /* @__PURE__ */ jsx(GoalGauge, { label: "Problems left", segments: 8, value: 0, mode: "drain", valueText: "0 of 8 left" })
+  ] }) });
+}
+export {
+  ScrollStageArcade as default
+};

package/registry/examples/scroll-stage/arcade.tsx

@@ -0,0 +1,15 @@
+import { GoalGauge } from "@krizaka/ui/goal-gauge";
+import { Scene, ScrollStage } from "@krizaka/ui/scroll-stage";
+import { StageBanner } from "@krizaka/ui/stage-banner";
+
+// `variant="arcade"` once on the stage: every storytelling component inside takes the cabinet flavour.
+export default function ScrollStageArcade() {
+  return (
+    <ScrollStage variant="arcade" className="grid w-full max-w-xl gap-8">
+      <Scene brand="orochia" className="grid justify-items-center gap-4 text-center">
+        <StageBanner size="lg" stage="Final round" title="Eight problems in the way" subtitle="One by one, they fall." />
+        <GoalGauge label="Problems left" segments={8} value={0} mode="drain" valueText="0 of 8 left" />
+      </Scene>
+    </ScrollStage>
+  );
+}

package/registry/examples/scroll-stage/chapters.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/scroll-stage/chapters.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/scroll-stage/chapters.tsx
+import { GoalGauge } from "@krizaka/ui/goal-gauge";
+import { Scene, ScrollStage } from "@krizaka/ui/scroll-stage";
+import { StageBanner } from "@krizaka/ui/stage-banner";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ScrollStageChapters() {
+  return /* @__PURE__ */ jsxs(ScrollStage, { className: "grid w-full max-w-xl gap-10", children: [
+    /* @__PURE__ */ jsxs(Scene, { className: "grid gap-3", children: [
+      /* @__PURE__ */ jsx(StageBanner, { stage: "Step 01", name: "Your profile" }),
+      /* @__PURE__ */ jsxs("div", { "data-kzs-reveal": true, children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-fg", children: "Say who you are, in your words" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: "Three questions, two photos. Nothing is public until you say so." })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Scene, { className: "grid gap-3", children: [
+      /* @__PURE__ */ jsx(StageBanner, { stage: "Step 02", name: "Your first goal" }),
+      /* @__PURE__ */ jsx(GoalGauge, { label: "Backers", segments: 10, value: 6, valueText: "6 of 10 backers" })
+    ] })
+  ] });
+}
+export {
+  ScrollStageChapters as default
+};

package/registry/examples/scroll-stage/chapters.tsx

@@ -0,0 +1,22 @@
+import { GoalGauge } from "@krizaka/ui/goal-gauge";
+import { Scene, ScrollStage } from "@krizaka/ui/scroll-stage";
+import { StageBanner } from "@krizaka/ui/stage-banner";
+
+// A told page: each chapter plays once as it scrolls in — the banner, then the words (`data-kzs-reveal`), then the gauge.
+export default function ScrollStageChapters() {
+  return (
+    <ScrollStage className="grid w-full max-w-xl gap-10">
+      <Scene className="grid gap-3">
+        <StageBanner stage="Step 01" name="Your profile" />
+        <div data-kzs-reveal>
+          <h3 className="text-lg font-semibold text-fg">Say who you are, in your words</h3>
+          <p className="text-sm text-fg-secondary">Three questions, two photos. Nothing is public until you say so.</p>
+        </div>
+      </Scene>
+      <Scene className="grid gap-3">
+        <StageBanner stage="Step 02" name="Your first goal" />
+        <GoalGauge label="Backers" segments={10} value={6} valueText="6 of 10 backers" />
+      </Scene>
+    </ScrollStage>
+  );
+}

package/registry/examples/settings-layout/account.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/settings-layout/account.js

@@ -0,0 +1,51 @@
+"use client";
+
+// registry/examples/settings-layout/account.tsx
+import { Button } from "@krizaka/ui/button";
+import { Field, Input, Select } from "@krizaka/ui/field";
+import { SettingsLayout, SettingsSection } from "@krizaka/ui/settings-layout";
+import { Switch } from "@krizaka/ui/switch";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NAV = [
+  { id: "profile", label: "Profile", href: "#profile", current: true },
+  { id: "notifications", label: "Notifications", href: "#notifications" },
+  { id: "payouts", label: "Payouts", href: "#payouts" },
+  { id: "security", label: "Security", href: "#security" }
+];
+function SettingsLayoutAccount() {
+  return /* @__PURE__ */ jsxs(SettingsLayout, { className: "w-full", title: "Settings", description: "Your profile, what we tell you and how you are paid.", nav: NAV, navLabel: "Settings sections", children: [
+    /* @__PURE__ */ jsxs(
+      SettingsSection,
+      {
+        id: "profile",
+        title: "Profile",
+        description: "What your fans see.",
+        footer: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", shape: "cut", children: "Save the profile" }),
+        children: [
+          /* @__PURE__ */ jsxs(Field.Root, { children: [
+            /* @__PURE__ */ jsx(Field.Label, { htmlFor: "settings-name", children: "Display name" }),
+            /* @__PURE__ */ jsx(Input, { id: "settings-name", defaultValue: "Elena Varga" })
+          ] }),
+          /* @__PURE__ */ jsxs(Field.Root, { children: [
+            /* @__PURE__ */ jsx(Field.Label, { htmlFor: "settings-language", children: "Language" }),
+            /* @__PURE__ */ jsxs(Select, { id: "settings-language", defaultValue: "fr", children: [
+              /* @__PURE__ */ jsx("option", { value: "en", children: "English" }),
+              /* @__PURE__ */ jsx("option", { value: "fr", children: "Fran\xE7ais" })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(SettingsSection, { id: "notifications", title: "Notifications", description: "Only what you ask for.", children: [
+      { id: "unlock", label: "A fan unlocks a video", on: true },
+      { id: "auction", label: "An auction ends", on: true },
+      { id: "weekly", label: "Weekly summary by email", on: false }
+    ].map((n) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 text-sm text-fg", children: [
+      /* @__PURE__ */ jsx("span", { id: `notify-${n.id}`, children: n.label }),
+      /* @__PURE__ */ jsx(Switch, { "aria-labelledby": `notify-${n.id}`, defaultChecked: n.on })
+    ] }, n.id)) })
+  ] });
+}
+export {
+  SettingsLayoutAccount as default
+};

package/registry/examples/settings-layout/account.tsx

@@ -0,0 +1,50 @@
+import { Button } from "@krizaka/ui/button";
+import { Field, Input, Select } from "@krizaka/ui/field";
+import { SettingsLayout, SettingsSection } from "@krizaka/ui/settings-layout";
+import { Switch } from "@krizaka/ui/switch";
+
+const NAV = [
+  { id: "profile", label: "Profile", href: "#profile", current: true },
+  { id: "notifications", label: "Notifications", href: "#notifications" },
+  { id: "payouts", label: "Payouts", href: "#payouts" },
+  { id: "security", label: "Security", href: "#security" },
+];
+
+// TEMPLATE — account settings: the sections on the left (a row of chips that scrolls on a phone), each form a titled
+// card with its own save, so a change in one never waits for another.
+export default function SettingsLayoutAccount() {
+  return (
+    <SettingsLayout className="w-full" title="Settings" description="Your profile, what we tell you and how you are paid." nav={NAV} navLabel="Settings sections">
+      <SettingsSection
+        id="profile"
+        title="Profile"
+        description="What your fans see."
+        footer={<Button size="sm" variant="primary" shape="cut">Save the profile</Button>}
+      >
+        <Field.Root>
+          <Field.Label htmlFor="settings-name">Display name</Field.Label>
+          <Input id="settings-name" defaultValue="Elena Varga" />
+        </Field.Root>
+        <Field.Root>
+          <Field.Label htmlFor="settings-language">Language</Field.Label>
+          <Select id="settings-language" defaultValue="fr">
+            <option value="en">English</option>
+            <option value="fr">Français</option>
+          </Select>
+        </Field.Root>
+      </SettingsSection>
+      <SettingsSection id="notifications" title="Notifications" description="Only what you ask for.">
+        {[
+          { id: "unlock", label: "A fan unlocks a video", on: true },
+          { id: "auction", label: "An auction ends", on: true },
+          { id: "weekly", label: "Weekly summary by email", on: false },
+        ].map((n) => (
+          <div key={n.id} className="flex items-center justify-between gap-4 text-sm text-fg">
+            <span id={`notify-${n.id}`}>{n.label}</span>
+            <Switch aria-labelledby={`notify-${n.id}`} defaultChecked={n.on} />
+          </div>
+        ))}
+      </SettingsSection>
+    </SettingsLayout>
+  );
+}

package/registry/examples/settings-layout/sections.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/settings-layout/sections.js

@@ -0,0 +1,27 @@
+"use client";
+
+// registry/examples/settings-layout/sections.tsx
+import { Button } from "@krizaka/ui/button";
+import { Field, Input } from "@krizaka/ui/field";
+import { SettingsLayout, SettingsSection } from "@krizaka/ui/settings-layout";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SettingsLayoutSections() {
+  return /* @__PURE__ */ jsx(
+    SettingsLayout,
+    {
+      className: "w-full",
+      nav: [
+        { id: "workspace", label: "Workspace", href: "#workspace", current: true },
+        { id: "models", label: "Models", href: "#models" }
+      ],
+      navLabel: "Settings sections",
+      children: /* @__PURE__ */ jsx(SettingsSection, { title: "Workspace", footer: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", shape: "cut", children: "Save" }), children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { htmlFor: "sections-name", children: "Name" }),
+        /* @__PURE__ */ jsx(Input, { id: "sections-name", defaultValue: "Tremblay & associ\xE9s" })
+      ] }) })
+    }
+  );
+}
+export {
+  SettingsLayoutSections as default
+};

package/registry/examples/settings-layout/sections.tsx

@@ -0,0 +1,24 @@
+import { Button } from "@krizaka/ui/button";
+import { Field, Input } from "@krizaka/ui/field";
+import { SettingsLayout, SettingsSection } from "@krizaka/ui/settings-layout";
+
+// One section per page: the navigation's links are pages, the current one is marked.
+export default function SettingsLayoutSections() {
+  return (
+    <SettingsLayout
+      className="w-full"
+      nav={[
+        { id: "workspace", label: "Workspace", href: "#workspace", current: true },
+        { id: "models", label: "Models", href: "#models" },
+      ]}
+      navLabel="Settings sections"
+    >
+      <SettingsSection title="Workspace" footer={<Button size="sm" variant="primary" shape="cut">Save</Button>}>
+        <Field.Root>
+          <Field.Label htmlFor="sections-name">Name</Field.Label>
+          <Input id="sections-name" defaultValue="Tremblay & associés" />
+        </Field.Root>
+      </SettingsSection>
+    </SettingsLayout>
+  );
+}

package/registry/examples/split-view/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/split-view/empty.js

@@ -0,0 +1,19 @@
+"use client";
+
+// registry/examples/split-view/empty.tsx
+import { SplitView } from "@krizaka/ui/split-view";
+import { jsx } from "react/jsx-runtime";
+function SplitViewEmpty() {
+  return /* @__PURE__ */ jsx(
+    SplitView,
+    {
+      className: "w-full",
+      listTitle: "Moderation",
+      list: /* @__PURE__ */ jsx("p", { className: "p-4 text-sm text-fg-secondary", children: "5 comments waiting." }),
+      empty: "Choose a comment to review it."
+    }
+  );
+}
+export {
+  SplitViewEmpty as default
+};

package/registry/examples/split-view/empty.tsx

@@ -0,0 +1,13 @@
+import { SplitView } from "@krizaka/ui/split-view";
+
+// Nothing open yet: the detail pane says what to do (desktop); on a phone only the list shows.
+export default function SplitViewEmpty() {
+  return (
+    <SplitView
+      className="w-full"
+      listTitle="Moderation"
+      list={<p className="p-4 text-sm text-fg-secondary">5 comments waiting.</p>}
+      empty="Choose a comment to review it."
+    />
+  );
+}

package/registry/examples/split-view/messages.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/split-view/messages.js

@@ -0,0 +1,49 @@
+"use client";
+
+// registry/examples/split-view/messages.tsx
+import { Avatar } from "@krizaka/ui/avatar";
+import { Button } from "@krizaka/ui/button";
+import { Field, Textarea } from "@krizaka/ui/field";
+import { SplitView } from "@krizaka/ui/split-view";
+import { jsx, jsxs } from "react/jsx-runtime";
+var THREADS = [
+  { id: "lea", name: "L\xE9a M.", last: "Will part 3 be out before Friday?", time: "09:12", unread: true },
+  { id: "samir", name: "Samir K.", last: "Thanks for the backstage cut!", time: "Yesterday" },
+  { id: "ines", name: "In\xE8s B.", last: "I won the auction \u{1F389}", time: "Mon" }
+];
+function SplitViewMessages() {
+  return /* @__PURE__ */ jsx(
+    SplitView,
+    {
+      className: "w-full",
+      listTitle: "Messages",
+      showDetail: true,
+      back: /* @__PURE__ */ jsx("a", { href: "#messages", className: "text-sm font-medium text-fg-secondary", children: "\u2190 Messages" }),
+      list: /* @__PURE__ */ jsx("ul", { children: THREADS.map((t, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", { href: `#${t.id}`, "aria-current": i === 0 ? "page" : void 0, className: "flex items-center gap-3 border-b border-border-subtle px-4 py-3 text-sm no-underline hover:bg-surface-2 aria-[current=page]:bg-accent-soft", children: [
+        /* @__PURE__ */ jsx(Avatar, { fallback: t.name.slice(0, 2), size: "sm" }),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-semibold text-fg", children: t.name }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-fg-secondary", children: t.time })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: t.unread ? "block truncate font-medium text-fg" : "block truncate text-fg-secondary", children: t.last })
+        ] })
+      ] }) }, t.id)) }),
+      detailHead: /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-fg", children: "L\xE9a M." }),
+      detail: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col gap-4", children: [
+        /* @__PURE__ */ jsx("p", { className: "max-w-[80%] rounded-2xl rounded-bl-md bg-surface-2 px-3.5 py-2 text-sm text-fg", children: "Will part 3 be out before Friday?" }),
+        /* @__PURE__ */ jsx("p", { className: "ml-auto max-w-[80%] rounded-2xl rounded-br-md bg-accent-soft px-3.5 py-2 text-sm text-fg", children: "Thursday evening \u2014 you'll be the first to know." }),
+        /* @__PURE__ */ jsxs("form", { className: "mt-auto flex items-end gap-2", children: [
+          /* @__PURE__ */ jsxs(Field.Root, { className: "flex-1", children: [
+            /* @__PURE__ */ jsx(Field.Label, { htmlFor: "reply", className: "sr-only", children: "Reply to L\xE9a" }),
+            /* @__PURE__ */ jsx(Textarea, { id: "reply", rows: 2, placeholder: "Write a reply\u2026" })
+          ] }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", shape: "cut", children: "Send" })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  SplitViewMessages as default
+};