@krizaka/ui 2.0.0-beta.5 → 2.0.0

package/registry/examples/section-backdrop/plain.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/section-backdrop/plain.tsx
+import { SectionBackdrop } from "@krizaka/ui/section-backdrop";
+import { jsx } from "react/jsx-runtime";
+function SectionBackdropPlain() {
+  return /* @__PURE__ */ jsx(SectionBackdrop, { dome: false, className: "px-8 py-12", children: /* @__PURE__ */ jsx("p", { className: "text-fg", children: "The gradient alone, ending on the page surface." }) });
+}
+export {
+  SectionBackdropPlain as default
+};

package/registry/examples/section-backdrop/plain.tsx

@@ -0,0 +1,10 @@
+import { SectionBackdrop } from "@krizaka/ui/section-backdrop";
+
+// Without the grid nor the dome: the gradient alone, ending on the page surface.
+export default function SectionBackdropPlain() {
+  return (
+    <SectionBackdrop dome={false} className="px-8 py-12">
+      <p className="text-fg">The gradient alone, ending on the page surface.</p>
+    </SectionBackdrop>
+  );
+}

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

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/section-backdrop/sequence.tsx
+import { SectionBackdrop } from "@krizaka/ui/section-backdrop";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SectionBackdropSequence() {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(SectionBackdrop, { grid: true, className: "px-8 py-14", children: /* @__PURE__ */ jsx("p", { className: "text-xl font-semibold text-fg", children: "One section" }) }),
+    /* @__PURE__ */ jsx(SectionBackdrop, { dome: false, className: "px-8 py-14", children: /* @__PURE__ */ jsx("p", { className: "text-xl font-semibold text-fg", children: "The next one" }) })
+  ] });
+}
+export {
+  SectionBackdropSequence as default
+};

package/registry/examples/section-backdrop/sequence.tsx

@@ -0,0 +1,15 @@
+import { SectionBackdrop } from "@krizaka/ui/section-backdrop";
+
+// Two sections in a row: the first ends where the second begins.
+export default function SectionBackdropSequence() {
+  return (
+    <div>
+      <SectionBackdrop grid className="px-8 py-14">
+        <p className="text-xl font-semibold text-fg">One section</p>
+      </SectionBackdrop>
+      <SectionBackdrop dome={false} className="px-8 py-14">
+        <p className="text-xl font-semibold text-fg">The next one</p>
+      </SectionBackdrop>
+    </div>
+  );
+}

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

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/section-backdrop/up.tsx
+import { SectionBackdrop } from "@krizaka/ui/section-backdrop";
+import { jsx } from "react/jsx-runtime";
+function SectionBackdropUp() {
+  return /* @__PURE__ */ jsx(SectionBackdrop, { direction: "up", className: "px-8 py-12", children: /* @__PURE__ */ jsx("p", { className: "text-fg", children: "Start in minutes." }) });
+}
+export {
+  SectionBackdropUp as default
+};

package/registry/examples/section-backdrop/up.tsx

@@ -0,0 +1,10 @@
+import { SectionBackdrop } from "@krizaka/ui/section-backdrop";
+
+// `direction="up"`: the tint at the bottom, for a closing call to action.
+export default function SectionBackdropUp() {
+  return (
+    <SectionBackdrop direction="up" className="px-8 py-12">
+      <p className="text-fg">Start in minutes.</p>
+    </SectionBackdrop>
+  );
+}

package/registry/examples/segmented/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/segmented/native/default.js

@@ -0,0 +1,19 @@
+"use client";
+
+// registry/examples/segmented/native/default.tsx
+import { Segmented } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+var OPTIONS = [
+  { value: "feed", label: "Feed" },
+  { value: "auctions", label: "Auctions" },
+  { value: "challenges", label: "Challenges" }
+];
+function NativeSegmentedDefault() {
+  const [value, setValue] = useState("auctions");
+  return /* @__PURE__ */ jsx(View, { style: { width: 320 }, children: /* @__PURE__ */ jsx(Segmented, { "aria-label": "View", options: OPTIONS, value, onValueChange: setValue }) });
+}
+export {
+  NativeSegmentedDefault as default
+};

package/registry/examples/segmented/native/default.tsx

@@ -0,0 +1,19 @@
+import { Segmented } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+
+const OPTIONS = [
+  { value: "feed", label: "Feed" },
+  { value: "auctions", label: "Auctions" },
+  { value: "challenges", label: "Challenges" },
+] as const;
+
+// Controlled: the screen holds the value and shows the matching view.
+export default function NativeSegmentedDefault() {
+  const [value, setValue] = useState<(typeof OPTIONS)[number]["value"]>("auctions");
+  return (
+    <View style={{ width: 320 }}>
+      <Segmented aria-label="View" options={OPTIONS} value={value} onValueChange={setValue} />
+    </View>
+  );
+}

package/registry/examples/segmented/native/small.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/segmented/native/small.js

@@ -0,0 +1,19 @@
+"use client";
+
+// registry/examples/segmented/native/small.tsx
+import { Segmented } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+var OPTIONS = [
+  { value: "feed", label: "Feed" },
+  { value: "auctions", label: "Auctions" },
+  { value: "challenges", label: "Challenges" }
+];
+function NativeSegmentedSmall() {
+  const [value, setValue] = useState("auctions");
+  return /* @__PURE__ */ jsx(View, { style: { width: 320 }, children: /* @__PURE__ */ jsx(Segmented, { "aria-label": "View", options: OPTIONS, value, onValueChange: setValue, size: "sm" }) });
+}
+export {
+  NativeSegmentedSmall as default
+};

package/registry/examples/segmented/native/small.tsx

@@ -0,0 +1,19 @@
+import { Segmented } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+
+const OPTIONS = [
+  { value: "feed", label: "Feed" },
+  { value: "auctions", label: "Auctions" },
+  { value: "challenges", label: "Challenges" },
+] as const;
+
+// `size="sm"`: in a header or a sheet.
+export default function NativeSegmentedSmall() {
+  const [value, setValue] = useState<(typeof OPTIONS)[number]["value"]>("auctions");
+  return (
+    <View style={{ width: 320 }}>
+      <Segmented aria-label="View" options={OPTIONS} value={value} onValueChange={setValue} size="sm" />
+    </View>
+  );
+}

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

@@ -1,9 +1,9 @@
 "use client";
 
-// registry/demos/separator.tsx
+// registry/examples/separator/horizontal.tsx
 import { Separator } from "@krizaka/ui/separator";
 import { jsx, jsxs } from "react/jsx-runtime";
-function SeparatorDemo() {
+function SeparatorHorizontal() {
   return /* @__PURE__ */ jsxs("div", { className: "flex w-72 flex-col gap-3 text-sm text-fg", children: [
     /* @__PURE__ */ jsx("p", { children: "Account" }),
     /* @__PURE__ */ jsx(Separator, {}),
@@ -11,5 +11,5 @@ function SeparatorDemo() {
   ] });
 }
 export {
-  SeparatorDemo as default
+  SeparatorHorizontal as default
 };

package/registry/{demos/separator.tsx → examples/separator/horizontal.tsx}

@@ -1,6 +1,6 @@
 import { Separator } from "@krizaka/ui/separator";
 
-export default function SeparatorDemo() {
+export default function SeparatorHorizontal() {
   return (
     <div className="flex w-72 flex-col gap-3 text-sm text-fg">
       <p>Account</p>

package/registry/examples/separator/vertical.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/separator/vertical.js

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/separator/vertical.tsx
+import { Separator } from "@krizaka/ui/separator";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SeparatorVertical() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-6 items-center gap-3 text-sm text-fg-secondary", children: [
+    /* @__PURE__ */ jsx("span", { children: "Videos" }),
+    /* @__PURE__ */ jsx(Separator, { orientation: "vertical", decorative: false }),
+    /* @__PURE__ */ jsx("span", { children: "Live" }),
+    /* @__PURE__ */ jsx(Separator, { orientation: "vertical", decorative: false }),
+    /* @__PURE__ */ jsx("span", { children: "Shop" })
+  ] });
+}
+export {
+  SeparatorVertical as default
+};

package/registry/examples/separator/vertical.tsx

@@ -0,0 +1,14 @@
+import { Separator } from "@krizaka/ui/separator";
+
+// `decorative={false}`: a real separator, read by assistive technology.
+export default function SeparatorVertical() {
+  return (
+    <div className="flex h-6 items-center gap-3 text-sm text-fg-secondary">
+      <span>Videos</span>
+      <Separator orientation="vertical" decorative={false} />
+      <span>Live</span>
+      <Separator orientation="vertical" decorative={false} />
+      <span>Shop</span>
+    </div>
+  );
+}

package/registry/examples/skeleton/circle.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/skeleton/circle.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/skeleton/circle.tsx
+import { Skeleton } from "@krizaka/ui/skeleton";
+import { jsx } from "react/jsx-runtime";
+function SkeletonCircle() {
+  return /* @__PURE__ */ jsx(Skeleton, { shape: "circle" });
+}
+export {
+  SkeletonCircle as default
+};

package/registry/examples/skeleton/circle.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from "@krizaka/ui/skeleton";
+
+export default function SkeletonCircle() {
+  return <Skeleton shape="circle" />;
+}

package/registry/examples/skeleton/composition.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/skeleton.js → examples/skeleton/composition.js}

@@ -1,9 +1,9 @@
 "use client";
 
-// registry/demos/skeleton.tsx
+// registry/examples/skeleton/composition.tsx
 import { Skeleton } from "@krizaka/ui/skeleton";
 import { jsx, jsxs } from "react/jsx-runtime";
-function SkeletonDemo() {
+function SkeletonComposition() {
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-xl border border-border-default bg-surface-1 p-4", children: [
     /* @__PURE__ */ jsx(Skeleton, { shape: "rect", className: "h-32" }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
@@ -16,5 +16,5 @@ function SkeletonDemo() {
   ] });
 }
 export {
-  SkeletonDemo as default
+  SkeletonComposition as default
 };

package/registry/{demos/skeleton.tsx → examples/skeleton/composition.tsx}

@@ -1,6 +1,6 @@
 import { Skeleton } from "@krizaka/ui/skeleton";
 
-export default function SkeletonDemo() {
+export default function SkeletonComposition() {
   return (
     <div className="flex flex-col gap-3 rounded-xl border border-border-default bg-surface-1 p-4">
       <Skeleton shape="rect" className="h-32" />

package/registry/examples/skeleton/native/shapes.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/skeleton/native/shapes.js

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/skeleton/native/shapes.tsx
+import { Skeleton } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeSkeletonShapes() {
+  return /* @__PURE__ */ jsxs(View, { style: { width: 320, gap: 12 }, children: [
+    /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 12, alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx(Skeleton, { shape: "circle" }),
+      /* @__PURE__ */ jsxs(View, { style: { flex: 1, gap: 8 }, children: [
+        /* @__PURE__ */ jsx(Skeleton, { shape: "text", width: "60%" }),
+        /* @__PURE__ */ jsx(Skeleton, { shape: "text", width: "40%" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Skeleton, { shape: "rect" })
+  ] });
+}
+export {
+  NativeSkeletonShapes as default
+};

package/registry/examples/skeleton/native/shapes.tsx

@@ -0,0 +1,18 @@
+import { Skeleton } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// text · circle · rect, composed into what is loading; hidden from screen readers.
+export default function NativeSkeletonShapes() {
+  return (
+    <View style={{ width: 320, gap: 12 }}>
+      <View style={{ flexDirection: "row", gap: 12, alignItems: "center" }}>
+        <Skeleton shape="circle" />
+        <View style={{ flex: 1, gap: 8 }}>
+          <Skeleton shape="text" width="60%" />
+          <Skeleton shape="text" width="40%" />
+        </View>
+      </View>
+      <Skeleton shape="rect" />
+    </View>
+  );
+}

package/registry/examples/skeleton/rect.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/skeleton/rect.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/skeleton/rect.tsx
+import { Skeleton } from "@krizaka/ui/skeleton";
+import { jsx } from "react/jsx-runtime";
+function SkeletonRect() {
+  return /* @__PURE__ */ jsx(Skeleton, { shape: "rect" });
+}
+export {
+  SkeletonRect as default
+};

package/registry/examples/skeleton/rect.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from "@krizaka/ui/skeleton";
+
+export default function SkeletonRect() {
+  return <Skeleton shape="rect" />;
+}

package/registry/examples/skeleton/text.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/skeleton/text.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/skeleton/text.tsx
+import { Skeleton } from "@krizaka/ui/skeleton";
+import { jsx } from "react/jsx-runtime";
+function SkeletonText() {
+  return /* @__PURE__ */ jsx(Skeleton, {});
+}
+export {
+  SkeletonText as default
+};

package/registry/examples/skeleton/text.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from "@krizaka/ui/skeleton";
+
+export default function SkeletonText() {
+  return <Skeleton />;
+}

package/registry/examples/slider/centred.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/slider/centred.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/slider/centred.tsx
+import { Slider } from "@krizaka/ui/slider";
+import { jsx } from "react/jsx-runtime";
+function SliderCentred() {
+  return /* @__PURE__ */ jsx(Slider, { label: "Brightness", showLabel: true, defaultValue: -30, min: -100, max: 100, origin: 0, formatValue: (v) => `${v > 0 ? "+" : ""}${v} %` });
+}
+export {
+  SliderCentred as default
+};

package/registry/examples/slider/centred.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { Slider } from "@krizaka/ui/slider";
+
+// `origin={0}` on a ±range: the fill starts at the centre.
+export default function SliderCentred() {
+  return <Slider label="Brightness" showLabel defaultValue={-30} min={-100} max={100} origin={0} formatValue={(v) => `${v > 0 ? "+" : ""}${v} %`} />;
+}

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

@@ -1,11 +1,11 @@
 "use client";
 
-// registry/demos/slider.tsx
+// registry/examples/slider/default.tsx
 import { Slider } from "@krizaka/ui/slider";
 import { jsx } from "react/jsx-runtime";
-function SliderDemo() {
+function SliderDefault() {
   return /* @__PURE__ */ jsx(Slider, { label: "Volume", defaultValue: 60 });
 }
 export {
-  SliderDemo as default
+  SliderDefault as default
 };

package/registry/{demos/slider.tsx → examples/slider/default.tsx}

@@ -1,5 +1,5 @@
 import { Slider } from "@krizaka/ui/slider";
 
-export default function SliderDemo() {
+export default function SliderDefault() {
   return <Slider label="Volume" defaultValue={60} />;
 }

package/registry/examples/slider/disabled.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/slider/disabled.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/slider/disabled.tsx
+import { Slider } from "@krizaka/ui/slider";
+import { jsx } from "react/jsx-runtime";
+function SliderDisabled() {
+  return /* @__PURE__ */ jsx(Slider, { label: "Volume", defaultValue: 60, disabled: true });
+}
+export {
+  SliderDisabled as default
+};

package/registry/examples/slider/disabled.tsx

@@ -0,0 +1,5 @@
+import { Slider } from "@krizaka/ui/slider";
+
+export default function SliderDisabled() {
+  return <Slider label="Volume" defaultValue={60} disabled />;
+}

package/registry/examples/slider/range.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/slider/range.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/slider/range.tsx
+import { Slider } from "@krizaka/ui/slider";
+import { jsx } from "react/jsx-runtime";
+function SliderRange() {
+  return /* @__PURE__ */ jsx(
+    Slider,
+    {
+      label: "Price",
+      thumbLabels: ["Minimum price", "Maximum price"],
+      showLabel: true,
+      defaultValue: [10, 60],
+      max: 100,
+      step: 5,
+      formatValue: (v) => `$${v}`
+    }
+  );
+}
+export {
+  SliderRange as default
+};

package/registry/examples/slider/range.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { Slider } from "@krizaka/ui/slider";
+
+// Two thumbs, each named by `thumbLabels`.
+export default function SliderRange() {
+  return (
+    <Slider<[number, number]>
+      label="Price"
+      thumbLabels={["Minimum price", "Maximum price"]}
+      showLabel
+      defaultValue={[10, 60]}
+      max={100}
+      step={5}
+      formatValue={(v) => `$${v}`}
+    />
+  );
+}

package/registry/examples/slider/with-label.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/slider/with-label.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/slider/with-label.tsx
+import { Slider } from "@krizaka/ui/slider";
+import { jsx } from "react/jsx-runtime";
+function SliderWithLabel() {
+  return /* @__PURE__ */ jsx(Slider, { label: "Speed", showLabel: true, defaultValue: 1.5, min: 0.5, max: 2, step: 0.25, formatValue: (v) => `${v}\xD7` });
+}
+export {
+  SliderWithLabel as default
+};

package/registry/examples/slider/with-label.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { Slider } from "@krizaka/ui/slider";
+
+// `showLabel`: the label and the formatted value above the track.
+export default function SliderWithLabel() {
+  return <Slider label="Speed" showLabel defaultValue={1.5} min={0.5} max={2} step={0.25} formatValue={(v) => `${v}×`} />;
+}

package/registry/examples/slot/as-child.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/slot.js → examples/slot/as-child.js}

@@ -1,14 +1,14 @@
 "use client";
 
-// registry/demos/slot.tsx
+// registry/examples/slot/as-child.tsx
 import { Slot, VisuallyHidden } from "@krizaka/ui/slot";
 import { jsx, jsxs } from "react/jsx-runtime";
-function SlotDemo() {
+function SlotAsChild() {
   return /* @__PURE__ */ jsx(Slot, { className: "text-sm font-semibold text-fg underline underline-offset-4", children: /* @__PURE__ */ jsxs("a", { href: "#docs", children: [
     "Read the docs",
     /* @__PURE__ */ jsx(VisuallyHidden, { children: " about Slot" })
   ] }) });
 }
 export {
-  SlotDemo as default
+  SlotAsChild as default
 };