@krizaka/ui 3.3.0 → 3.5.0

package/registry/examples/tab-bar/native/main-sections.js

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/tab-bar/native/main-sections.tsx
+import { TabBar } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { jsx } from "react/jsx-runtime";
+var icon = (d) => (on, color) => /* @__PURE__ */ jsx(Svg, { width: 24, height: 24, viewBox: "0 0 24 24", fill: on ? color : "none", stroke: color, strokeWidth: 2, strokeLinejoin: "round", children: /* @__PURE__ */ jsx(Path, { d }) });
+function NativeTabBarMainSections() {
+  const [tab, setTab] = useState("home");
+  return /* @__PURE__ */ jsx(View, { style: { width: 360 }, children: /* @__PURE__ */ jsx(
+    TabBar,
+    {
+      "aria-label": "Main sections",
+      value: tab,
+      onValueChange: setTab,
+      items: [
+        { value: "home", label: "Home", icon: icon("M3 11 12 4l9 7v9h-6v-6H9v6H3z") },
+        { value: "auctions", label: "Auctions", icon: icon("M14 4l6 6-3 3-6-6zM11 7l-8 8 3 3 8-8M4 21h9") },
+        { value: "messages", label: "Messages", badge: 3, badgeLabel: "3 unread", icon: icon("M4 5h16v11H8l-4 4z") },
+        { value: "me", label: "Me", icon: icon("M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 21a8 8 0 0 1 16 0") }
+      ]
+    }
+  ) });
+}
+export {
+  NativeTabBarMainSections as default
+};

package/registry/examples/tab-bar/native/main-sections.tsx

@@ -0,0 +1,30 @@
+import { TabBar } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+
+const icon = (d: string) => (on: boolean, color: string) => (
+  <Svg width={24} height={24} viewBox="0 0 24 24" fill={on ? color : "none"} stroke={color} strokeWidth={2} strokeLinejoin="round">
+    <Path d={d} />
+  </Svg>
+);
+
+// Orochia's main sections: the current one in the accent, a badge on Messages, a tick on change.
+export default function NativeTabBarMainSections() {
+  const [tab, setTab] = useState<"home" | "auctions" | "messages" | "me">("home");
+  return (
+    <View style={{ width: 360 }}>
+      <TabBar
+        aria-label="Main sections"
+        value={tab}
+        onValueChange={setTab}
+        items={[
+          { value: "home", label: "Home", icon: icon("M3 11 12 4l9 7v9h-6v-6H9v6H3z") },
+          { value: "auctions", label: "Auctions", icon: icon("M14 4l6 6-3 3-6-6zM11 7l-8 8 3 3 8-8M4 21h9") },
+          { value: "messages", label: "Messages", badge: 3, badgeLabel: "3 unread", icon: icon("M4 5h16v11H8l-4 4z") },
+          { value: "me", label: "Me", icon: icon("M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 21a8 8 0 0 1 16 0") },
+        ]}
+      />
+    </View>
+  );
+}

package/registry/examples/tabs/native/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/tabs/native/sections.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/tabs/native/sections.tsx
+import { Tabs, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeTabsSections() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 340 }, children: /* @__PURE__ */ jsx(
+    Tabs,
+    {
+      "aria-label": "Elena's page",
+      items: [
+        { value: "videos", label: "Videos", count: 42, content: /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: "42 videos, newest first." }) },
+        { value: "auctions", label: "Auctions", count: 3, content: /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: "3 auctions running." }) },
+        { value: "challenges", label: "Challenges", content: /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: "Dares from fans." }) },
+        { value: "about", label: "About", content: /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: "Covers and live sessions." }) }
+      ]
+    }
+  ) });
+}
+export {
+  NativeTabsSections as default
+};

package/registry/examples/tabs/native/sections.tsx

@@ -0,0 +1,19 @@
+import { Tabs, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// A creator's page: sections that scroll sideways when they do not fit, a count after the words.
+export default function NativeTabsSections() {
+  return (
+    <View style={{ width: 340 }}>
+      <Tabs
+        aria-label="Elena's page"
+        items={[
+          { value: "videos", label: "Videos", count: 42, content: <Txt tone="secondary">42 videos, newest first.</Txt> },
+          { value: "auctions", label: "Auctions", count: 3, content: <Txt tone="secondary">3 auctions running.</Txt> },
+          { value: "challenges", label: "Challenges", content: <Txt tone="secondary">Dares from fans.</Txt> },
+          { value: "about", label: "About", content: <Txt tone="secondary">Covers and live sessions.</Txt> },
+        ]}
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/tabs/native/segmented.tsx
+import { Tabs, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeTabsSegmented() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 320 }, children: /* @__PURE__ */ jsx(
+    Tabs,
+    {
+      variant: "segmented",
+      "aria-label": "Story insights",
+      items: [
+        { value: "viewers", label: "Viewers", content: /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: "312 people watched." }) },
+        { value: "tips", label: "Tips", content: /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: "$46 from 9 fans." }) }
+      ]
+    }
+  ) });
+}
+export {
+  NativeTabsSegmented as default
+};

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

@@ -0,0 +1,18 @@
+import { Tabs, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// Two views of the same content: `variant="segmented"`.
+export default function NativeTabsSegmented() {
+  return (
+    <View style={{ width: 320 }}>
+      <Tabs
+        variant="segmented"
+        aria-label="Story insights"
+        items={[
+          { value: "viewers", label: "Viewers", content: <Txt tone="secondary">312 people watched.</Txt> },
+          { value: "tips", label: "Tips", content: <Txt tone="secondary">$46 from 9 fans.</Txt> },
+        ]}
+      />
+    </View>
+  );
+}

package/registry/examples/tag-selector/interests.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/tag-selector/interests.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/tag-selector/interests.tsx
+import { TagSelector } from "@krizaka/ui/tag-selector";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var INTERESTS = ["Music", "Surf", "Cooking", "Hiking", "Cinema", "Climbing", "Travel", "Gaming", "Yoga", "Photography"].map((t) => ({ value: t.toLowerCase(), label: t }));
+function TagSelectorInterests() {
+  const [chosen, setChosen] = useState(["music", "surf", "travel"]);
+  return /* @__PURE__ */ jsx(TagSelector, { className: "max-w-md", label: "Interests", options: INTERESTS, value: chosen, onValueChange: setChosen, max: 5, countLabel: (n, max) => `${n} of ${max} chosen` });
+}
+export {
+  TagSelectorInterests as default
+};

package/registry/examples/tag-selector/interests.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { TagSelector } from "@krizaka/ui/tag-selector";
+import { useState } from "react";
+
+const INTERESTS = ["Music", "Surf", "Cooking", "Hiking", "Cinema", "Climbing", "Travel", "Gaming", "Yoga", "Photography"].map((t) => ({ value: t.toLowerCase(), label: t }));
+
+// Up to five interests: the others rest once five are chosen.
+export default function TagSelectorInterests() {
+  const [chosen, setChosen] = useState<string[]>(["music", "surf", "travel"]);
+  return <TagSelector className="max-w-md" label="Interests" options={INTERESTS} value={chosen} onValueChange={setChosen} max={5} countLabel={(n, max) => `${n} of ${max} chosen`} />;
+}

package/registry/examples/tag-selector/native/interests.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/tag-selector/native/interests.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/tag-selector/native/interests.tsx
+import { TagSelector } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+var INTERESTS = ["Music", "Surf", "Cooking", "Hiking", "Cinema", "Climbing", "Travel", "Gaming", "Yoga", "Photography"].map((t) => ({ value: t.toLowerCase(), label: t }));
+function NativeTagSelectorInterests() {
+  const [chosen, setChosen] = useState(["music", "surf", "travel"]);
+  return /* @__PURE__ */ jsx(View, { style: { width: 340 }, children: /* @__PURE__ */ jsx(TagSelector, { label: "Interests", options: INTERESTS, value: chosen, onValueChange: setChosen, max: 5, countLabel: (n, max) => `${n} of ${max} chosen` }) });
+}
+export {
+  NativeTagSelectorInterests as default
+};

package/registry/examples/tag-selector/native/interests.tsx

@@ -0,0 +1,15 @@
+import { TagSelector } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+
+const INTERESTS = ["Music", "Surf", "Cooking", "Hiking", "Cinema", "Climbing", "Travel", "Gaming", "Yoga", "Photography"].map((t) => ({ value: t.toLowerCase(), label: t }));
+
+// Up to five interests: the others rest once five are chosen, the count says so.
+export default function NativeTagSelectorInterests() {
+  const [chosen, setChosen] = useState<string[]>(["music", "surf", "travel"]);
+  return (
+    <View style={{ width: 340 }}>
+      <TagSelector label="Interests" options={INTERESTS} value={chosen} onValueChange={setChosen} max={5} countLabel={(n, max) => `${n} of ${max} chosen`} />
+    </View>
+  );
+}

package/registry/examples/toast/native/snackbar.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/toast/native/snackbar.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/toast/native/snackbar.tsx
+import { Button, toast, Toaster } from "@krizaka/ui/native";
+import { useEffect } from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+var archive = () => toast("Conversation archived", { id: "archived", action: { label: "Undo", onPress: () => void 0 } });
+function NativeToastSnackbar({ defaultOpen = false }) {
+  useEffect(() => {
+    if (!defaultOpen) return;
+    toast.dismiss();
+    archive();
+    return () => toast.dismiss();
+  }, [defaultOpen]);
+  return /* @__PURE__ */ jsxs(View, { style: { width: 360, height: 200 }, children: [
+    /* @__PURE__ */ jsx(Button, { variant: "outline", label: "Archive", onPress: archive }),
+    /* @__PURE__ */ jsx(Toaster, { closeLabel: "Dismiss", position: "bottom", offset: 16, duration: defaultOpen ? Number.POSITIVE_INFINITY : 5e3 })
+  ] });
+}
+export {
+  NativeToastSnackbar as default
+};

package/registry/examples/toast/native/snackbar.tsx

@@ -0,0 +1,21 @@
+import { Button, toast, Toaster } from "@krizaka/ui/native";
+import { useEffect } from "react";
+import { View } from "react-native";
+
+const archive = () => toast("Conversation archived", { id: "archived", action: { label: "Undo", onPress: () => undefined } });
+
+// A snackbar: at the bottom, above the tab bar (`offset`), one action; swipe it away, a tick for its tone.
+export default function NativeToastSnackbar({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  useEffect(() => {
+    if (!defaultOpen) return;
+    toast.dismiss();
+    archive();
+    return () => toast.dismiss();
+  }, [defaultOpen]);
+  return (
+    <View style={{ width: 360, height: 200 }}>
+      <Button variant="outline" label="Archive" onPress={archive} />
+      <Toaster closeLabel="Dismiss" position="bottom" offset={16} duration={defaultOpen ? Number.POSITIVE_INFINITY : 5000} />
+    </View>
+  );
+}

package/registry/examples/tree-view/docs.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/tree-view/docs.js

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/tree-view/docs.tsx
+import { TreeView } from "@krizaka/ui/tree-view";
+import { jsx } from "react/jsx-runtime";
+var nodes = [
+  {
+    id: "orazaka",
+    label: "Orazaka",
+    children: [
+      { id: "getting-started", label: "Getting started" },
+      { id: "studios", label: "Studios", meta: "12", children: [{ id: "dubbing", label: "Dubbing" }, { id: "transcript", label: "Transcript" }, { id: "clips", label: "Clips" }] },
+      { id: "api", label: "API reference" }
+    ]
+  },
+  { id: "orochia", label: "Orochia", children: [{ id: "auctions", label: "Auctions" }, { id: "challenges", label: "Challenges" }] },
+  { id: "ui", label: "Krizaka UI", children: [{ id: "components", label: "Components" }] }
+];
+function TreeViewDocs() {
+  return /* @__PURE__ */ jsx(TreeView, { "aria-label": "Documentation", nodes, defaultExpanded: ["orazaka", "studios"], defaultSelected: "dubbing", className: "max-w-xs" });
+}
+export {
+  TreeViewDocs as default
+};

package/registry/examples/tree-view/docs.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { TreeView } from "@krizaka/ui/tree-view";
+
+const nodes = [
+  {
+    id: "orazaka",
+    label: "Orazaka",
+    children: [
+      { id: "getting-started", label: "Getting started" },
+      { id: "studios", label: "Studios", meta: "12", children: [{ id: "dubbing", label: "Dubbing" }, { id: "transcript", label: "Transcript" }, { id: "clips", label: "Clips" }] },
+      { id: "api", label: "API reference" },
+    ],
+  },
+  { id: "orochia", label: "Orochia", children: [{ id: "auctions", label: "Auctions" }, { id: "challenges", label: "Challenges" }] },
+  { id: "ui", label: "Krizaka UI", children: [{ id: "components", label: "Components" }] },
+];
+
+// The documentation's sections: one tab stop, the arrows walk and open, a letter jumps.
+export default function TreeViewDocs() {
+  return <TreeView aria-label="Documentation" nodes={nodes} defaultExpanded={["orazaka", "studios"]} defaultSelected="dubbing" className="max-w-xs" />;
+}

package/registry/examples/tree-view/lazy.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/tree-view/lazy.js

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/tree-view/lazy.tsx
+import { TreeView } from "@krizaka/ui/tree-view";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function TreeViewLazy() {
+  const [nodes, setNodes] = useState([
+    { id: "voices", label: "Voices", hasChildren: true, meta: "3" },
+    { id: "glossaries", label: "Glossaries", hasChildren: true, meta: "2" },
+    { id: "readme", label: "README.md" }
+  ]);
+  const load = (node) => setTimeout(() => {
+    const files = Array.from({ length: Number(node.meta) }, (_, i) => ({ id: `${node.id}-${i}`, label: `${node.label.toLowerCase()}-${i + 1}.json` }));
+    setNodes((all) => all.map((n) => n.id === node.id ? { ...n, children: files } : n));
+  }, 600);
+  return /* @__PURE__ */ jsx(TreeView, { "aria-label": "Datasets", nodes, onLoadChildren: load, loadingLabel: "Loading the files", className: "max-w-xs" });
+}
+export {
+  TreeViewLazy as default
+};

package/registry/examples/tree-view/lazy.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { type TreeNode, TreeView } from "@krizaka/ui/tree-view";
+import { useState } from "react";
+
+// A studio's datasets: a branch loads its files when it opens (here after 600 ms).
+export default function TreeViewLazy() {
+  const [nodes, setNodes] = useState<TreeNode[]>([
+    { id: "voices", label: "Voices", hasChildren: true, meta: "3" },
+    { id: "glossaries", label: "Glossaries", hasChildren: true, meta: "2" },
+    { id: "readme", label: "README.md" },
+  ]);
+  const load = (node: TreeNode) =>
+    setTimeout(() => {
+      const files = Array.from({ length: Number(node.meta) }, (_, i) => ({ id: `${node.id}-${i}`, label: `${node.label.toLowerCase()}-${i + 1}.json` }));
+      setNodes((all) => all.map((n) => (n.id === node.id ? { ...n, children: files } : n)));
+    }, 600);
+  return <TreeView aria-label="Datasets" nodes={nodes} onLoadChildren={load} loadingLabel="Loading the files" className="max-w-xs" />;
+}

package/registry/examples/verified-badge/native/verified.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/verified-badge/native/verified.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/verified-badge/native/verified.tsx
+import { Txt, VerifiedBadge } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeVerifiedBadgeVerified() {
+  return /* @__PURE__ */ jsxs(View, { style: { gap: 12 }, children: [
+    /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 6 }, children: [
+      /* @__PURE__ */ jsx(Txt, { variant: "title", children: "Elena Ruiz" }),
+      /* @__PURE__ */ jsx(VerifiedBadge, { label: "Verified profile", size: 18 })
+    ] }),
+    /* @__PURE__ */ jsx(VerifiedBadge, { label: "Verified with a selfie", showLabel: true })
+  ] });
+}
+export {
+  NativeVerifiedBadgeVerified as default
+};

package/registry/examples/verified-badge/native/verified.tsx

@@ -0,0 +1,15 @@
+import { Txt, VerifiedBadge } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// A seal beside a name, or with its words.
+export default function NativeVerifiedBadgeVerified() {
+  return (
+    <View style={{ gap: 12 }}>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+        <Txt variant="title">Elena Ruiz</Txt>
+        <VerifiedBadge label="Verified profile" size={18} />
+      </View>
+      <VerifiedBadge label="Verified with a selfie" showLabel />
+    </View>
+  );
+}

package/registry/examples/verified-badge/verified.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/verified-badge/verified.js

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/verified-badge/verified.tsx
+import { VerifiedBadge } from "@krizaka/ui/verified-badge";
+import { jsx, jsxs } from "react/jsx-runtime";
+function VerifiedBadgeVerified() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs("p", { className: "m-0 flex items-center gap-1.5 font-display text-lg font-bold text-fg", children: [
+      "Elena Ruiz ",
+      /* @__PURE__ */ jsx(VerifiedBadge, { label: "Verified profile", size: "lg" })
+    ] }),
+    /* @__PURE__ */ jsx(VerifiedBadge, { label: "Verified with a selfie", showLabel: true })
+  ] });
+}
+export {
+  VerifiedBadgeVerified as default
+};

package/registry/examples/verified-badge/verified.tsx

@@ -0,0 +1,13 @@
+import { VerifiedBadge } from "@krizaka/ui/verified-badge";
+
+// A seal beside a name, or with its words.
+export default function VerifiedBadgeVerified() {
+  return (
+    <div className="flex flex-col gap-3">
+      <p className="m-0 flex items-center gap-1.5 font-display text-lg font-bold text-fg">
+        Elena Ruiz <VerifiedBadge label="Verified profile" size="lg" />
+      </p>
+      <VerifiedBadge label="Verified with a selfie" showLabel />
+    </div>
+  );
+}

package/registry/fab.json

@@ -0,0 +1,122 @@
+{
+  "name": "fab",
+  "type": "native",
+  "title": "Floating action button",
+  "summary": "The screen's one main action, floating above the content in the accent, clear of the safe area and the tab bar.",
+  "description": "The screen's one main action, floating above the content in the accent, clear of the safe area and the tab bar.",
+  "status": "beta",
+  "category": "actions",
+  "platforms": "native",
+  "whenToUse": [
+    "Create on a list screen: a new challenge, a new message.",
+    "Record on a camera-first screen."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "For a secondary action or several actions.",
+      "use": "button"
+    },
+    {
+      "when": "On a form: its submit button belongs at the bottom of the form.",
+      "use": "button"
+    }
+  ],
+  "bestPractices": [
+    "One per screen, for the action the screen exists for.",
+    "`extended` shows the words; collapse it while the list scrolls down.",
+    "Pass the tab bar's height in `offset`."
+  ],
+  "accessibility": {
+    "keyboard": [],
+    "notes": [
+      "A button named by `label`, extended or not.",
+      "56 points high; a light tap when pressed."
+    ]
+  },
+  "related": [
+    "button",
+    "tab-bar"
+  ],
+  "web": null,
+  "native": {
+    "entry": "@krizaka/ui/native",
+    "import": "import { Fab } from \"@krizaka/ui/native\";",
+    "differences": [],
+    "props": [
+      {
+        "component": "Fab",
+        "description": "The screen's main action, floating above the content in the accent — one per screen (create, compose, record). It\nkeeps clear of the safe area and the tab bar (`offset`), shows its words when `extended`, a light tap confirms.",
+        "props": [
+          {
+            "name": "icon",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The icon (decorative).",
+            "required": true
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The action in words (“New challenge”) — passed translated: the accessible name, and shown when `extended`.",
+            "required": true
+          },
+          {
+            "name": "onPress",
+            "type": "() => void",
+            "default": null,
+            "description": "What it does.",
+            "required": true
+          },
+          {
+            "name": "extended",
+            "type": "boolean",
+            "default": null,
+            "description": "Shows the words beside the icon (collapse it while the list scrolls down).",
+            "required": false
+          },
+          {
+            "name": "offset",
+            "type": "number",
+            "default": "0",
+            "description": "Extra distance from the bottom, above a tab bar (its height). Default 0.",
+            "required": false
+          },
+          {
+            "name": "placement",
+            "type": "\"center\" | \"end\" | \"start\"",
+            "default": "end",
+            "description": "Which corner. Default `end` (bottom right in left-to-right).",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "extended",
+        "title": "Extended and round",
+        "description": "With its words, and the round button alone.",
+        "path": "examples/fab/native/extended.tsx",
+        "module": "@krizaka/ui/registry/examples/fab/native/extended",
+        "code": "import { Fab, useTheme } from \"@krizaka/ui/native\";\nimport { View } from \"react-native\";\nimport Svg, { Path } from \"react-native-svg\";\n\n// The screen's one main action, floating over the list, above the tab bar (`offset`).\nexport default function NativeFabExtended() {\n  const { theme } = useTheme();\n  const plus = (\n    <Svg width={22} height={22} viewBox=\"0 0 24 24\" stroke={theme.onAccent} strokeWidth={2.4} strokeLinecap=\"round\">\n      <Path d=\"M12 5v14M5 12h14\" />\n    </Svg>\n  );\n  return (\n    <View style={{ width: 360, height: 200, flexDirection: \"row\" }}>\n      <View style={{ flex: 1 }}>\n        <Fab label=\"New challenge\" icon={plus} extended onPress={() => undefined} />\n      </View>\n      <View style={{ flex: 1 }}>\n        <Fab label=\"New challenge\" icon={plus} onPress={() => undefined} />\n      </View>\n    </View>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/fab/native/extended.dark.png",
+          "light": "examples/fab/native/extended.light.png"
+        }
+      }
+    ]
+  },
+  "files": [],
+  "dependencies": [],
+  "registryDependencies": [],
+  "demo": null,
+  "props": []
+}