@krizaka/ui 2.6.0 → 2.9.0

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

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;