@krizaka/ui 2.0.0-beta.5 → 2.0.0

package/registry/examples/page-header/with-actions.tsx

@@ -0,0 +1,17 @@
+import { Button } from "@krizaka/ui/button";
+import { PageHeader } from "@krizaka/ui/page-header";
+
+export default function PageHeaderWithActions() {
+  return (
+    <PageHeader
+      title="Payouts"
+      description="Your earnings are paid every Monday to the account on file."
+      actions={
+        <>
+          <Button variant="outline">Export</Button>
+          <Button variant="primary">Withdraw</Button>
+        </>
+      }
+    />
+  );
+}

package/registry/examples/page-header/with-breadcrumb.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/page-header/with-breadcrumb.js

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/page-header/with-breadcrumb.tsx
+import { Button } from "@krizaka/ui/button";
+import { PageHeader } from "@krizaka/ui/page-header";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PageHeaderWithBreadcrumb() {
+  return /* @__PURE__ */ jsx(
+    PageHeader,
+    {
+      title: "Payouts",
+      description: "Your earnings are paid every Monday to the account on file.",
+      actions: /* @__PURE__ */ jsx(Button, { variant: "primary", children: "Withdraw" }),
+      breadcrumb: /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsxs("ol", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: "#studio", className: "hover:text-fg", children: "Studio" }) }),
+        /* @__PURE__ */ jsx("li", { "aria-hidden": true, children: "/" }),
+        /* @__PURE__ */ jsx("li", { "aria-current": "page", children: "Payouts" })
+      ] }) })
+    }
+  );
+}
+export {
+  PageHeaderWithBreadcrumb as default
+};

package/registry/examples/page-header/with-breadcrumb.tsx

@@ -0,0 +1,26 @@
+import { Button } from "@krizaka/ui/button";
+import { PageHeader } from "@krizaka/ui/page-header";
+
+// The breadcrumb is a slot: the product's own `<nav aria-label>`.
+export default function PageHeaderWithBreadcrumb() {
+  return (
+    <PageHeader
+      title="Payouts"
+      description="Your earnings are paid every Monday to the account on file."
+      actions={<Button variant="primary">Withdraw</Button>}
+      breadcrumb={
+        <nav aria-label="Breadcrumb">
+          <ol className="flex items-center gap-1.5">
+            <li>
+              <a href="#studio" className="hover:text-fg">
+                Studio
+              </a>
+            </li>
+            <li aria-hidden>/</li>
+            <li aria-current="page">Payouts</li>
+          </ol>
+        </nav>
+      }
+    />
+  );
+}

package/registry/examples/popover/form.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/{demos/popover.js → examples/popover/form.js}

@@ -1,11 +1,11 @@
 "use client";
 
-// registry/demos/popover.tsx
+// registry/examples/popover/form.tsx
 import { Button } from "@krizaka/ui/button";
 import { Field, Input } from "@krizaka/ui/field";
 import { Popover } from "@krizaka/ui/popover";
 import { jsx, jsxs } from "react/jsx-runtime";
-function PopoverDemo({ defaultOpen = false }) {
+function PopoverForm({ defaultOpen = false }) {
   return /* @__PURE__ */ jsxs(Popover.Root, { defaultOpen, children: [
     /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Set a goal" }) }),
     /* @__PURE__ */ jsx(Popover.Content, { "aria-label": "Set a goal", align: "center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
@@ -21,5 +21,5 @@ function PopoverDemo({ defaultOpen = false }) {
   ] });
 }
 export {
-  PopoverDemo as default
+  PopoverForm as default
 };

package/registry/{demos/popover.tsx → examples/popover/form.tsx}

@@ -2,7 +2,7 @@ import { Button } from "@krizaka/ui/button";
 import { Field, Input } from "@krizaka/ui/field";
 import { Popover } from "@krizaka/ui/popover";
 
-export default function PopoverDemo({ defaultOpen = false }: { defaultOpen?: boolean }) {
+export default function PopoverForm({ defaultOpen = false }: { defaultOpen?: boolean }) {
   return (
     <Popover.Root defaultOpen={defaultOpen}>
       <Popover.Trigger asChild>

package/registry/examples/progress/bar-indeterminate.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/progress/bar-indeterminate.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/progress/bar-indeterminate.tsx
+import { Progress } from "@krizaka/ui/progress";
+import { jsx } from "react/jsx-runtime";
+function ProgressBarIndeterminate() {
+  return /* @__PURE__ */ jsx(Progress, { label: "Processing" });
+}
+export {
+  ProgressBarIndeterminate as default
+};

package/registry/examples/progress/bar-indeterminate.tsx

@@ -0,0 +1,6 @@
+import { Progress } from "@krizaka/ui/progress";
+
+// No `value`: a wait of unknown length (still under reduced motion).
+export default function ProgressBarIndeterminate() {
+  return <Progress label="Processing" />;
+}

package/registry/examples/progress/bar-sizes.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/progress/bar-sizes.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/progress/bar-sizes.tsx
+import { Progress } from "@krizaka/ui/progress";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ProgressBarSizes() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(Progress, { label: "Small", size: "sm", value: 30 }),
+    /* @__PURE__ */ jsx(Progress, { label: "Medium", size: "md", value: 55 }),
+    /* @__PURE__ */ jsx(Progress, { label: "Large", size: "lg", value: 80 })
+  ] });
+}
+export {
+  ProgressBarSizes as default
+};

package/registry/examples/progress/bar-sizes.tsx

@@ -0,0 +1,11 @@
+import { Progress } from "@krizaka/ui/progress";
+
+export default function ProgressBarSizes() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Progress label="Small" size="sm" value={30} />
+      <Progress label="Medium" size="md" value={55} />
+      <Progress label="Large" size="lg" value={80} />
+    </div>
+  );
+}

package/registry/examples/progress/bar.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/{demos/progress.js → examples/progress/bar.js}

@@ -1,11 +1,11 @@
 "use client";
 
-// registry/demos/progress.tsx
+// registry/examples/progress/bar.tsx
 import { Progress } from "@krizaka/ui/progress";
 import { jsx } from "react/jsx-runtime";
-function ProgressDemo() {
+function ProgressBar() {
   return /* @__PURE__ */ jsx(Progress, { label: "Upload", value: 64 });
 }
 export {
-  ProgressDemo as default
+  ProgressBar as default
 };

package/registry/{demos/progress.tsx → examples/progress/bar.tsx}

@@ -1,5 +1,5 @@
 import { Progress } from "@krizaka/ui/progress";
 
-export default function ProgressDemo() {
+export default function ProgressBar() {
   return <Progress label="Upload" value={64} />;
 }

package/registry/examples/progress/native/bar.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/progress/native/bar.js

@@ -0,0 +1,16 @@
+"use client";
+
+// registry/examples/progress/native/bar.tsx
+import { Progress } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeProgressBar() {
+  return /* @__PURE__ */ jsxs(View, { style: { width: 320, gap: 16 }, children: [
+    /* @__PURE__ */ jsx(Progress, { label: "Upload", value: 64, size: "sm" }),
+    /* @__PURE__ */ jsx(Progress, { label: "Upload", value: 64, size: "md" }),
+    /* @__PURE__ */ jsx(Progress, { label: "Upload", value: 64, size: "lg" })
+  ] });
+}
+export {
+  NativeProgressBar as default
+};

package/registry/examples/progress/native/bar.tsx

@@ -0,0 +1,12 @@
+import { Progress } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+export default function NativeProgressBar() {
+  return (
+    <View style={{ width: 320, gap: 16 }}>
+      <Progress label="Upload" value={64} size="sm" />
+      <Progress label="Upload" value={64} size="md" />
+      <Progress label="Upload" value={64} size="lg" />
+    </View>
+  );
+}

package/registry/examples/progress/native/indeterminate.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/progress/native/indeterminate.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/progress/native/indeterminate.tsx
+import { Progress } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeProgressIndeterminate() {
+  return /* @__PURE__ */ jsxs(View, { style: { width: 320, gap: 16 }, children: [
+    /* @__PURE__ */ jsx(Progress, { label: "Processing" }),
+    /* @__PURE__ */ jsx(Progress, { variant: "ring", label: "Processing" })
+  ] });
+}
+export {
+  NativeProgressIndeterminate as default
+};

package/registry/examples/progress/native/indeterminate.tsx

@@ -0,0 +1,12 @@
+import { Progress } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// No value: a wait of unknown length (still under reduced motion).
+export default function NativeProgressIndeterminate() {
+  return (
+    <View style={{ width: 320, gap: 16 }}>
+      <Progress label="Processing" />
+      <Progress variant="ring" label="Processing" />
+    </View>
+  );
+}

package/registry/examples/progress/native/ring.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/progress/native/ring.js

@@ -0,0 +1,19 @@
+"use client";
+
+// registry/examples/progress/native/ring.tsx
+import { Progress, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeProgressRing() {
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 16, alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx(Progress, { variant: "ring", size: "sm", value: 30, label: "Goal" }),
+    /* @__PURE__ */ jsx(Progress, { variant: "ring", size: "md", value: 64, label: "Goal", children: /* @__PURE__ */ jsx(Txt, { variant: "label", children: "64%" }) }),
+    /* @__PURE__ */ jsxs(Progress, { variant: "ring", size: "lg", value: 420, max: 1e3, label: "Raised towards the goal", valueText: "$420 of $1,000", children: [
+      /* @__PURE__ */ jsx(Txt, { variant: "title", children: "$420" }),
+      /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "secondary", children: "of $1,000" })
+    ] })
+  ] });
+}
+export {
+  NativeProgressRing as default
+};

package/registry/examples/progress/native/ring.tsx

@@ -0,0 +1,19 @@
+import { Progress, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+export default function NativeProgressRing() {
+  return (
+    <View style={{ flexDirection: "row", gap: 16, alignItems: "center" }}>
+      <Progress variant="ring" size="sm" value={30} label="Goal" />
+      <Progress variant="ring" size="md" value={64} label="Goal">
+        <Txt variant="label">64%</Txt>
+      </Progress>
+      <Progress variant="ring" size="lg" value={420} max={1000} label="Raised towards the goal" valueText="$420 of $1,000">
+        <Txt variant="title">$420</Txt>
+        <Txt variant="caption" tone="secondary">
+          of $1,000
+        </Txt>
+      </Progress>
+    </View>
+  );
+}

package/registry/examples/progress/ring-indeterminate.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/progress/ring-indeterminate.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/progress/ring-indeterminate.tsx
+import { Progress } from "@krizaka/ui/progress";
+import { jsx } from "react/jsx-runtime";
+function ProgressRingIndeterminate() {
+  return /* @__PURE__ */ jsx(Progress, { variant: "ring", size: "md", label: "Loading" });
+}
+export {
+  ProgressRingIndeterminate as default
+};

package/registry/examples/progress/ring-indeterminate.tsx

@@ -0,0 +1,5 @@
+import { Progress } from "@krizaka/ui/progress";
+
+export default function ProgressRingIndeterminate() {
+  return <Progress variant="ring" size="md" label="Loading" />;
+}

package/registry/examples/progress/ring.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/progress/ring.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/progress/ring.tsx
+import { Progress } from "@krizaka/ui/progress";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ProgressRing() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-6", children: [
+    /* @__PURE__ */ jsx(Progress, { variant: "ring", size: "sm", label: "Profile completed", value: 40 }),
+    /* @__PURE__ */ jsx(Progress, { variant: "ring", size: "md", label: "Raised", value: 420, max: 1e3, valueText: "$420 of $1,000", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-fg", children: "42%" }) }),
+    /* @__PURE__ */ jsxs(Progress, { variant: "ring", size: "lg", label: "Raised towards the goal", value: 750, max: 1e3, valueText: "$750 of $1,000", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-display text-2xl font-black text-fg", children: "$750" }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-fg-secondary", children: "of $1,000" })
+    ] })
+  ] });
+}
+export {
+  ProgressRing as default
+};

package/registry/examples/progress/ring.tsx

@@ -0,0 +1,17 @@
+import { Progress } from "@krizaka/ui/progress";
+
+// A ring holds its amount in the centre; `valueText` gives the words a screen reader reads.
+export default function ProgressRing() {
+  return (
+    <div className="flex items-end gap-6">
+      <Progress variant="ring" size="sm" label="Profile completed" value={40} />
+      <Progress variant="ring" size="md" label="Raised" value={420} max={1000} valueText="$420 of $1,000">
+        <span className="text-sm font-bold text-fg">42%</span>
+      </Progress>
+      <Progress variant="ring" size="lg" label="Raised towards the goal" value={750} max={1000} valueText="$750 of $1,000">
+        <span className="font-display text-2xl font-black text-fg">$750</span>
+        <span className="text-xs text-fg-secondary">of $1,000</span>
+      </Progress>
+    </div>
+  );
+}

package/registry/examples/radio-group/cards.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/radio-group/cards.js

@@ -0,0 +1,19 @@
+"use client";
+
+// registry/examples/radio-group/cards.tsx
+import { RadioGroup } from "@krizaka/ui/radio-group";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AMOUNTS = [
+  ["5", "$5", "A coffee"],
+  ["20", "$20", "A dinner"],
+  ["50", "$50", "A night out"]
+];
+function RadioGroupCards() {
+  return /* @__PURE__ */ jsx(RadioGroup.Root, { label: "Amount", defaultValue: "20", className: "grid w-[30rem] max-w-full grid-cols-3 gap-3", children: AMOUNTS.map(([value, amount, hint]) => /* @__PURE__ */ jsxs(RadioGroup.Card, { value, children: [
+    /* @__PURE__ */ jsx("span", { className: "font-display text-lg font-bold", children: amount }),
+    /* @__PURE__ */ jsx("span", { className: "text-xs text-fg-secondary", children: hint })
+  ] }, value)) });
+}
+export {
+  RadioGroupCards as default
+};

package/registry/examples/radio-group/cards.tsx

@@ -0,0 +1,21 @@
+import { RadioGroup } from "@krizaka/ui/radio-group";
+
+const AMOUNTS = [
+  ["5", "$5", "A coffee"],
+  ["20", "$20", "A dinner"],
+  ["50", "$50", "A night out"],
+];
+
+// Whole cards: the chosen one carries the accent border and tint.
+export default function RadioGroupCards() {
+  return (
+    <RadioGroup.Root label="Amount" defaultValue="20" className="grid w-[30rem] max-w-full grid-cols-3 gap-3">
+      {AMOUNTS.map(([value, amount, hint]) => (
+        <RadioGroup.Card key={value} value={value}>
+          <span className="font-display text-lg font-bold">{amount}</span>
+          <span className="text-xs text-fg-secondary">{hint}</span>
+        </RadioGroup.Card>
+      ))}
+    </RadioGroup.Root>
+  );
+}

package/registry/examples/radio-group/horizontal.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/radio-group/horizontal.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/radio-group/horizontal.tsx
+import { RadioGroup } from "@krizaka/ui/radio-group";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RadioGroupHorizontal() {
+  return /* @__PURE__ */ jsxs(RadioGroup.Root, { label: "Quality", defaultValue: "1080", orientation: "horizontal", className: "gap-5", children: [
+    /* @__PURE__ */ jsx(RadioGroup.Item, { value: "720", children: "720p" }),
+    /* @__PURE__ */ jsx(RadioGroup.Item, { value: "1080", children: "1080p" }),
+    /* @__PURE__ */ jsx(RadioGroup.Item, { value: "2160", children: "4K" })
+  ] });
+}
+export {
+  RadioGroupHorizontal as default
+};

package/registry/examples/radio-group/horizontal.tsx

@@ -0,0 +1,12 @@
+import { RadioGroup } from "@krizaka/ui/radio-group";
+
+// `orientation="horizontal"`: left and right arrows, the items in a row.
+export default function RadioGroupHorizontal() {
+  return (
+    <RadioGroup.Root label="Quality" defaultValue="1080" orientation="horizontal" className="gap-5">
+      <RadioGroup.Item value="720">720p</RadioGroup.Item>
+      <RadioGroup.Item value="1080">1080p</RadioGroup.Item>
+      <RadioGroup.Item value="2160">4K</RadioGroup.Item>
+    </RadioGroup.Root>
+  );
+}

package/registry/examples/radio-group/items.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/{demos/radio-group.js → examples/radio-group/items.js}

@@ -1,9 +1,9 @@
 "use client";
 
-// registry/demos/radio-group.tsx
+// registry/examples/radio-group/items.tsx
 import { RadioGroup } from "@krizaka/ui/radio-group";
 import { jsx, jsxs } from "react/jsx-runtime";
-function RadioGroupDemo() {
+function RadioGroupItems() {
   return /* @__PURE__ */ jsxs(RadioGroup.Root, { label: "Notification frequency", defaultValue: "daily", children: [
     /* @__PURE__ */ jsx(RadioGroup.Item, { value: "instant", children: "Instantly" }),
     /* @__PURE__ */ jsx(RadioGroup.Item, { value: "daily", children: "Once a day" }),
@@ -12,5 +12,5 @@ function RadioGroupDemo() {
   ] });
 }
 export {
-  RadioGroupDemo as default
+  RadioGroupItems as default
 };

package/registry/{demos/radio-group.tsx → examples/radio-group/items.tsx}

@@ -1,6 +1,6 @@
 import { RadioGroup } from "@krizaka/ui/radio-group";
 
-export default function RadioGroupDemo() {
+export default function RadioGroupItems() {
   return (
     <RadioGroup.Root label="Notification frequency" defaultValue="daily">
       <RadioGroup.Item value="instant">Instantly</RadioGroup.Item>

package/registry/examples/section-backdrop/depth-of-field.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/section-backdrop/depth-of-field.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/section-backdrop/depth-of-field.tsx
+import { SectionBackdrop } from "@krizaka/ui/section-backdrop";
+import { jsx } from "react/jsx-runtime";
+function SectionBackdropDepthOfField() {
+  return /* @__PURE__ */ jsx(
+    SectionBackdrop,
+    {
+      className: "px-8 py-16",
+      media: /* @__PURE__ */ jsx("div", { className: "absolute -bottom-10 left-6 h-40 w-40 rounded-xl border border-border-strong bg-accent-soft" }),
+      children: /* @__PURE__ */ jsx("p", { className: "text-xl font-semibold text-fg", children: "Depth of field" })
+    }
+  );
+}
+export {
+  SectionBackdropDepthOfField as default
+};

package/registry/examples/section-backdrop/depth-of-field.tsx

@@ -0,0 +1,13 @@
+import { SectionBackdrop } from "@krizaka/ui/section-backdrop";
+
+// `media`: a foreground blurred for depth of field, decorative, behind the content.
+export default function SectionBackdropDepthOfField() {
+  return (
+    <SectionBackdrop
+      className="px-8 py-16"
+      media={<div className="absolute -bottom-10 left-6 h-40 w-40 rounded-xl border border-border-strong bg-accent-soft" />}
+    >
+      <p className="text-xl font-semibold text-fg">Depth of field</p>
+    </SectionBackdrop>
+  );
+}

package/registry/examples/section-backdrop/hero.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/{demos/section-backdrop.js → examples/section-backdrop/hero.js}

@@ -1,14 +1,14 @@
 "use client";
 
-// registry/demos/section-backdrop.tsx
+// registry/examples/section-backdrop/hero.tsx
 import { SectionBackdrop } from "@krizaka/ui/section-backdrop";
 import { jsx, jsxs } from "react/jsx-runtime";
-function SectionBackdropDemo() {
+function SectionBackdropHero() {
   return /* @__PURE__ */ jsxs(SectionBackdrop, { grid: true, className: "rounded-xl px-8 py-16", children: [
     /* @__PURE__ */ jsx("h2", { className: "font-display text-3xl font-semibold text-fg", children: "Sovereign by design" }),
     /* @__PURE__ */ jsx("p", { className: "mt-2 max-w-md text-fg-secondary", children: "Your models, your data, your servers." })
   ] });
 }
 export {
-  SectionBackdropDemo as default
+  SectionBackdropHero as default
 };

package/registry/{demos/section-backdrop.tsx → examples/section-backdrop/hero.tsx}

@@ -1,6 +1,6 @@
 import { SectionBackdrop } from "@krizaka/ui/section-backdrop";
 
-export default function SectionBackdropDemo() {
+export default function SectionBackdropHero() {
   return (
     <SectionBackdrop grid className="rounded-xl px-8 py-16">
       <h2 className="font-display text-3xl font-semibold text-fg">Sovereign by design</h2>

package/registry/examples/section-backdrop/plain.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;