@krizaka/ui 3.3.0 → 3.5.0

package/registry/examples/activity-feed/native/notifications.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/activity-feed/native/notifications.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/activity-feed/native/notifications.tsx
+import { ActivityFeed } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+var events = [
+  { id: "e1", at: "2026-10-11T14:58:00Z", title: "Dubbing of \u201CSunset session\u201D finished", tone: "success" },
+  { id: "e2", at: "2026-10-11T13:05:00Z", title: "Mina tipped your video $5", kind: "tip", actor: "mina", tone: "success" },
+  { id: "e3", at: "2026-10-11T12:50:00Z", title: "Mina tipped your video $5", kind: "tip", actor: "mina", tone: "success" },
+  { id: "e4", at: "2026-10-10T18:20:00Z", title: "Clip job failed", description: "The source is too short", tone: "danger" }
+];
+function NativeActivityFeedNotifications() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 340, height: 300 }, children: /* @__PURE__ */ jsx(ActivityFeed, { "aria-label": "Activity", events, now: /* @__PURE__ */ new Date("2026-10-11T15:00:00Z") }) });
+}
+export {
+  NativeActivityFeedNotifications as default
+};

package/registry/examples/activity-feed/native/notifications.tsx

@@ -0,0 +1,18 @@
+import { ActivityFeed } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+const events = [
+  { id: "e1", at: "2026-10-11T14:58:00Z", title: "Dubbing of “Sunset session” finished", tone: "success" as const },
+  { id: "e2", at: "2026-10-11T13:05:00Z", title: "Mina tipped your video $5", kind: "tip", actor: "mina", tone: "success" as const },
+  { id: "e3", at: "2026-10-11T12:50:00Z", title: "Mina tipped your video $5", kind: "tip", actor: "mina", tone: "success" as const },
+  { id: "e4", at: "2026-10-10T18:20:00Z", title: "Clip job failed", description: "The source is too short", tone: "danger" as const },
+];
+
+// The activity tab: by day, the tips folded, how long ago.
+export default function NativeActivityFeedNotifications() {
+  return (
+    <View style={{ width: 340, height: 300 }}>
+      <ActivityFeed aria-label="Activity" events={events} now={new Date("2026-10-11T15:00:00Z")} />
+    </View>
+  );
+}

package/registry/examples/activity-feed/timeline.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/activity-feed/timeline.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/activity-feed/timeline.tsx
+import { Timeline } from "@krizaka/ui/activity-feed";
+import { jsx } from "react/jsx-runtime";
+function ActivityFeedTimeline() {
+  return /* @__PURE__ */ jsx(
+    Timeline,
+    {
+      "aria-label": "History of the payout",
+      locale: "en-GB",
+      timeStyle: "datetime",
+      className: "max-w-md",
+      events: [
+        { id: "t1", at: "2026-10-09T09:00:00Z", title: "Payout requested", description: "$120.00 to the account ending 4821" },
+        { id: "t2", at: "2026-10-09T09:01:00Z", title: "Funds reserved", tone: "accent" },
+        { id: "t3", at: "2026-10-10T07:30:00Z", title: "Sent to Stripe", tone: "info" },
+        { id: "t4", at: "2026-10-11T10:12:00Z", title: "Arrived at the bank", tone: "success" }
+      ]
+    }
+  );
+}
+export {
+  ActivityFeedTimeline as default
+};

package/registry/examples/activity-feed/timeline.tsx

@@ -0,0 +1,19 @@
+import { Timeline } from "@krizaka/ui/activity-feed";
+
+// One thing's history, oldest first: a payout from request to bank.
+export default function ActivityFeedTimeline() {
+  return (
+    <Timeline
+      aria-label="History of the payout"
+      locale="en-GB"
+      timeStyle="datetime"
+      className="max-w-md"
+      events={[
+        { id: "t1", at: "2026-10-09T09:00:00Z", title: "Payout requested", description: "$120.00 to the account ending 4821" },
+        { id: "t2", at: "2026-10-09T09:01:00Z", title: "Funds reserved", tone: "accent" },
+        { id: "t3", at: "2026-10-10T07:30:00Z", title: "Sent to Stripe", tone: "info" },
+        { id: "t4", at: "2026-10-11T10:12:00Z", title: "Arrived at the bank", tone: "success" },
+      ]}
+    />
+  );
+}

package/registry/examples/avatar/native/presence.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/avatar/native/presence.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/avatar/native/presence.tsx
+import { Avatar } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeAvatarPresence() {
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 16, alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx(Avatar, { alt: "Elena", size: "lg", presence: "online", presenceLabel: "online" }),
+    /* @__PURE__ */ jsx(Avatar, { alt: "Alex", size: "lg", presence: "away", presenceLabel: "away" }),
+    /* @__PURE__ */ jsx(Avatar, { alt: "Mina", size: "lg", presence: "offline", presenceLabel: "offline" }),
+    /* @__PURE__ */ jsx(Avatar, { alt: "Elena's story, new", size: "lg", ring: "story" }),
+    /* @__PURE__ */ jsx(Avatar, { alt: "Alex's story, seen", size: "lg", ring: "seen" })
+  ] });
+}
+export {
+  NativeAvatarPresence as default
+};

package/registry/examples/avatar/native/presence.tsx

@@ -0,0 +1,15 @@
+import { Avatar } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// Presence in Messages, story rings in the rail: the dot and the ring are said with the name.
+export default function NativeAvatarPresence() {
+  return (
+    <View style={{ flexDirection: "row", gap: 16, alignItems: "center" }}>
+      <Avatar alt="Elena" size="lg" presence="online" presenceLabel="online" />
+      <Avatar alt="Alex" size="lg" presence="away" presenceLabel="away" />
+      <Avatar alt="Mina" size="lg" presence="offline" presenceLabel="offline" />
+      <Avatar alt="Elena's story, new" size="lg" ring="story" />
+      <Avatar alt="Alex's story, seen" size="lg" ring="seen" />
+    </View>
+  );
+}

package/registry/examples/chat/conversation.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/chat/conversation.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/chat/conversation.tsx
+import { MessageBubble, MessageComposer, TypingIndicator } from "@krizaka/ui/chat";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChatConversation() {
+  const [draft, setDraft] = useState("");
+  return /* @__PURE__ */ jsxs("div", { className: "flex max-w-md flex-col overflow-hidden rounded-xl border border-border-default bg-surface-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 p-3", children: [
+      /* @__PURE__ */ jsx(MessageBubble, { text: "Hey! Loved your sunset photo \u{1F305}", time: "19:02", grouped: "first" }),
+      /* @__PURE__ */ jsx(MessageBubble, { text: "Was it Cabo da Roca?", time: "19:02", grouped: "last" }),
+      /* @__PURE__ */ jsx(MessageBubble, { mine: true, text: "It was! Have you been?", time: "19:05", grouped: "first" }),
+      /* @__PURE__ */ jsx(MessageBubble, { mine: true, text: "We should go this weekend", time: "19:05", grouped: "last", status: "read", showStatus: true }),
+      /* @__PURE__ */ jsx(TypingIndicator, { label: "Elena is typing" })
+    ] }),
+    /* @__PURE__ */ jsx(MessageComposer, { value: draft, onValueChange: setDraft, onSend: () => setDraft(""), placeholder: "Message", sendLabel: "Send" })
+  ] });
+}
+export {
+  ChatConversation as default
+};

package/registry/examples/chat/conversation.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { MessageBubble, MessageComposer, TypingIndicator } from "@krizaka/ui/chat";
+import { useState } from "react";
+
+// A conversation: runs grouped, the time inside, the receipt under the last of yours, typing, the composer.
+export default function ChatConversation() {
+  const [draft, setDraft] = useState("");
+  return (
+    <div className="flex max-w-md flex-col overflow-hidden rounded-xl border border-border-default bg-surface-0">
+      <div className="flex flex-col gap-1 p-3">
+        <MessageBubble text="Hey! Loved your sunset photo 🌅" time="19:02" grouped="first" />
+        <MessageBubble text="Was it Cabo da Roca?" time="19:02" grouped="last" />
+        <MessageBubble mine text="It was! Have you been?" time="19:05" grouped="first" />
+        <MessageBubble mine text="We should go this weekend" time="19:05" grouped="last" status="read" showStatus />
+        <TypingIndicator label="Elena is typing" />
+      </div>
+      <MessageComposer value={draft} onValueChange={setDraft} onSend={() => setDraft("")} placeholder="Message" sendLabel="Send" />
+    </div>
+  );
+}

package/registry/examples/chat/inbox.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/chat/inbox.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/chat/inbox.tsx
+import { ConversationItem } from "@krizaka/ui/chat";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChatInbox() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex max-w-md flex-col rounded-xl border border-border-default bg-surface-0 py-1", children: [
+    /* @__PURE__ */ jsx(ConversationItem, { name: "Elena", online: true, onlineLabel: "online", preview: "typing\u2026", typing: true, time: "19:06", unread: 2, unreadLabel: "2 unread", href: "#/chats/elena" }),
+    /* @__PURE__ */ jsx(ConversationItem, { name: "Noah", preview: "See you Saturday then!", time: "Mon", href: "#/chats/noah" }),
+    /* @__PURE__ */ jsx(ConversationItem, { name: "Mina", preview: "You: haha same", time: "Sun", href: "#/chats/mina" })
+  ] });
+}
+export {
+  ChatInbox as default
+};

package/registry/examples/chat/inbox.tsx

@@ -0,0 +1,12 @@
+import { ConversationItem } from "@krizaka/ui/chat";
+
+// The inbox: online, the last message or “typing…”, the time, the unread count.
+export default function ChatInbox() {
+  return (
+    <div className="flex max-w-md flex-col rounded-xl border border-border-default bg-surface-0 py-1">
+      <ConversationItem name="Elena" online onlineLabel="online" preview="typing…" typing time="19:06" unread={2} unreadLabel="2 unread" href="#/chats/elena" />
+      <ConversationItem name="Noah" preview="See you Saturday then!" time="Mon" href="#/chats/noah" />
+      <ConversationItem name="Mina" preview="You: haha same" time="Sun" href="#/chats/mina" />
+    </div>
+  );
+}

package/registry/examples/chat/native/conversation.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/chat/native/conversation.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/chat/native/conversation.tsx
+import { MessageBubble, MessageComposer, TypingIndicator } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeChatConversation() {
+  const [draft, setDraft] = useState("");
+  return /* @__PURE__ */ jsxs(View, { style: { width: 360, gap: 4 }, children: [
+    /* @__PURE__ */ jsxs(View, { style: { padding: 12, gap: 4 }, children: [
+      /* @__PURE__ */ jsx(MessageBubble, { text: "Hey! Loved your sunset photo \u{1F305}", time: "19:02", grouped: "first" }),
+      /* @__PURE__ */ jsx(MessageBubble, { text: "Was it Cabo da Roca?", time: "19:02", grouped: "last" }),
+      /* @__PURE__ */ jsx(MessageBubble, { mine: true, text: "It was! Have you been?", time: "19:05", grouped: "first" }),
+      /* @__PURE__ */ jsx(MessageBubble, { mine: true, text: "We should go this weekend", time: "19:05", grouped: "last", status: "read", showStatus: true, labels: { status: { read: "Read" } } }),
+      /* @__PURE__ */ jsx(TypingIndicator, { label: "Elena is typing" })
+    ] }),
+    /* @__PURE__ */ jsx(MessageComposer, { value: draft, onValueChange: setDraft, onSend: () => setDraft(""), placeholder: "Message", sendLabel: "Send" })
+  ] });
+}
+export {
+  NativeChatConversation as default
+};

package/registry/examples/chat/native/conversation.tsx

@@ -0,0 +1,20 @@
+import { MessageBubble, MessageComposer, TypingIndicator } from "@krizaka/ui/native";
+import { useState } from "react";
+import { View } from "react-native";
+
+// A conversation: runs grouped, the time inside, the receipt under the last of yours, the typing dots, the composer.
+export default function NativeChatConversation() {
+  const [draft, setDraft] = useState("");
+  return (
+    <View style={{ width: 360, gap: 4 }}>
+      <View style={{ padding: 12, gap: 4 }}>
+        <MessageBubble text="Hey! Loved your sunset photo 🌅" time="19:02" grouped="first" />
+        <MessageBubble text="Was it Cabo da Roca?" time="19:02" grouped="last" />
+        <MessageBubble mine text="It was! Have you been?" time="19:05" grouped="first" />
+        <MessageBubble mine text="We should go this weekend" time="19:05" grouped="last" status="read" showStatus labels={{ status: { read: "Read" } }} />
+        <TypingIndicator label="Elena is typing" />
+      </View>
+      <MessageComposer value={draft} onValueChange={setDraft} onSend={() => setDraft("")} placeholder="Message" sendLabel="Send" />
+    </View>
+  );
+}

package/registry/examples/chat/native/inbox.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/chat/native/inbox.js

@@ -0,0 +1,16 @@
+"use client";
+
+// registry/examples/chat/native/inbox.tsx
+import { ConversationItem } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeChatInbox() {
+  return /* @__PURE__ */ jsxs(View, { style: { width: 360 }, children: [
+    /* @__PURE__ */ jsx(ConversationItem, { name: "Elena", presence: "online", presenceLabel: "online", preview: "typing\u2026", typing: true, time: "19:06", unread: 2, unreadLabel: "2 unread" }),
+    /* @__PURE__ */ jsx(ConversationItem, { name: "Noah", presence: "away", presenceLabel: "away", preview: "See you Saturday then!", time: "Mon" }),
+    /* @__PURE__ */ jsx(ConversationItem, { name: "Mina", preview: "You: haha same", time: "Sun" })
+  ] });
+}
+export {
+  NativeChatInbox as default
+};

package/registry/examples/chat/native/inbox.tsx

@@ -0,0 +1,13 @@
+import { ConversationItem } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// The inbox: presence, the last message or “typing…”, the time, the unread count.
+export default function NativeChatInbox() {
+  return (
+    <View style={{ width: 360 }}>
+      <ConversationItem name="Elena" presence="online" presenceLabel="online" preview="typing…" typing time="19:06" unread={2} unreadLabel="2 unread" />
+      <ConversationItem name="Noah" presence="away" presenceLabel="away" preview="See you Saturday then!" time="Mon" />
+      <ConversationItem name="Mina" preview="You: haha same" time="Sun" />
+    </View>
+  );
+}

package/registry/examples/description-list/job-details.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/description-list/job-details.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/description-list/job-details.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { DescriptionList } from "@krizaka/ui/description-list";
+import { jsx } from "react/jsx-runtime";
+function DescriptionListJobDetails() {
+  return /* @__PURE__ */ jsx(
+    DescriptionList,
+    {
+      className: "max-w-sm",
+      items: [
+        { term: "Status", details: /* @__PURE__ */ jsx(Badge, { tone: "accent", children: "Running" }) },
+        { term: "Studio", details: "Dubbing \xB7 English, Spanish" },
+        { term: "Started", details: "Oct 11, 2026, 14:02", hint: "by Elena Ruiz" },
+        { term: "Credits", details: "120", hint: "estimated, charged at the end" }
+      ]
+    }
+  );
+}
+export {
+  DescriptionListJobDetails as default
+};

package/registry/examples/description-list/job-details.tsx

@@ -0,0 +1,17 @@
+import { Badge } from "@krizaka/ui/badge";
+import { DescriptionList } from "@krizaka/ui/description-list";
+
+// A job's details, stacked: what a side panel shows.
+export default function DescriptionListJobDetails() {
+  return (
+    <DescriptionList
+      className="max-w-sm"
+      items={[
+        { term: "Status", details: <Badge tone="accent">Running</Badge> },
+        { term: "Studio", details: "Dubbing · English, Spanish" },
+        { term: "Started", details: "Oct 11, 2026, 14:02", hint: "by Elena Ruiz" },
+        { term: "Credits", details: "120", hint: "estimated, charged at the end" },
+      ]}
+    />
+  );
+}

package/registry/examples/description-list/key-value-grid.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/description-list/key-value-grid.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/description-list/key-value-grid.tsx
+import { KeyValueGrid } from "@krizaka/ui/description-list";
+import { jsx } from "react/jsx-runtime";
+function DescriptionListKeyValueGrid() {
+  return /* @__PURE__ */ jsx(
+    KeyValueGrid,
+    {
+      minWidth: 9,
+      items: [
+        { term: "Requests / min", details: "600" },
+        { term: "Concurrent jobs", details: "8" },
+        { term: "Storage", details: "50 GB", hint: "18 GB used" },
+        { term: "Retention", details: "30 days" }
+      ]
+    }
+  );
+}
+export {
+  DescriptionListKeyValueGrid as default
+};

package/registry/examples/description-list/key-value-grid.tsx

@@ -0,0 +1,16 @@
+import { KeyValueGrid } from "@krizaka/ui/description-list";
+
+// Key figures as cards that wrap: an account's limits in the console.
+export default function DescriptionListKeyValueGrid() {
+  return (
+    <KeyValueGrid
+      minWidth={9}
+      items={[
+        { term: "Requests / min", details: "600" },
+        { term: "Concurrent jobs", details: "8" },
+        { term: "Storage", details: "50 GB", hint: "18 GB used" },
+        { term: "Retention", details: "30 days" },
+      ]}
+    />
+  );
+}

package/registry/examples/description-list/native/job-details.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/description-list/native/job-details.js

@@ -0,0 +1,33 @@
+"use client";
+
+// registry/examples/description-list/native/job-details.tsx
+import { Badge, DescriptionList } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeDescriptionListJobDetails() {
+  return /* @__PURE__ */ jsxs(View, { style: { width: 320, gap: 24 }, children: [
+    /* @__PURE__ */ jsx(
+      DescriptionList,
+      {
+        items: [
+          { term: "Status", details: /* @__PURE__ */ jsx(Badge, { tone: "accent", children: "Running" }) },
+          { term: "Studio", details: "Dubbing \xB7 English, Spanish" },
+          { term: "Started", details: "Oct 11, 14:02", hint: "by Elena Ruiz" }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DescriptionList,
+      {
+        layout: "inline",
+        items: [
+          { term: "Estimated", details: "120 credits" },
+          { term: "Left this month", details: "1,880 credits" }
+        ]
+      }
+    )
+  ] });
+}
+export {
+  NativeDescriptionListJobDetails as default
+};

package/registry/examples/description-list/native/job-details.tsx

@@ -0,0 +1,24 @@
+import { Badge, DescriptionList } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// A job's details on a phone: stacked, then a receipt inline.
+export default function NativeDescriptionListJobDetails() {
+  return (
+    <View style={{ width: 320, gap: 24 }}>
+      <DescriptionList
+        items={[
+          { term: "Status", details: <Badge tone="accent">Running</Badge> },
+          { term: "Studio", details: "Dubbing · English, Spanish" },
+          { term: "Started", details: "Oct 11, 14:02", hint: "by Elena Ruiz" },
+        ]}
+      />
+      <DescriptionList
+        layout="inline"
+        items={[
+          { term: "Estimated", details: "120 credits" },
+          { term: "Left this month", details: "1,880 credits" },
+        ]}
+      />
+    </View>
+  );
+}

package/registry/examples/description-list/receipt.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/description-list/receipt.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/description-list/receipt.tsx
+import { DescriptionList } from "@krizaka/ui/description-list";
+import { jsx } from "react/jsx-runtime";
+function DescriptionListReceipt() {
+  return /* @__PURE__ */ jsx(
+    DescriptionList,
+    {
+      layout: "inline",
+      className: "max-w-sm",
+      items: [
+        { term: "Tip from @mina", details: "$10.00" },
+        { term: "Payment fees", details: "\u2212$0.50" },
+        { term: "Platform", details: "\u2212$1.00" },
+        { term: "To you", details: "$8.50", hint: "paid on Oct 15" }
+      ]
+    }
+  );
+}
+export {
+  DescriptionListReceipt as default
+};

package/registry/examples/description-list/receipt.tsx

@@ -0,0 +1,17 @@
+import { DescriptionList } from "@krizaka/ui/description-list";
+
+// Inline: a tip's breakdown, read like a receipt.
+export default function DescriptionListReceipt() {
+  return (
+    <DescriptionList
+      layout="inline"
+      className="max-w-sm"
+      items={[
+        { term: "Tip from @mina", details: "$10.00" },
+        { term: "Payment fees", details: "−$0.50" },
+        { term: "Platform", details: "−$1.00" },
+        { term: "To you", details: "$8.50", hint: "paid on Oct 15" },
+      ]}
+    />
+  );
+}

package/registry/examples/fab/native/extended.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/fab/native/extended.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/fab/native/extended.tsx
+import { Fab, useTheme } from "@krizaka/ui/native";
+import { View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeFabExtended() {
+  const { theme } = useTheme();
+  const plus = /* @__PURE__ */ jsx(Svg, { width: 22, height: 22, viewBox: "0 0 24 24", stroke: theme.onAccent, strokeWidth: 2.4, strokeLinecap: "round", children: /* @__PURE__ */ jsx(Path, { d: "M12 5v14M5 12h14" }) });
+  return /* @__PURE__ */ jsxs(View, { style: { width: 360, height: 200, flexDirection: "row" }, children: [
+    /* @__PURE__ */ jsx(View, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(Fab, { label: "New challenge", icon: plus, extended: true, onPress: () => void 0 }) }),
+    /* @__PURE__ */ jsx(View, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(Fab, { label: "New challenge", icon: plus, onPress: () => void 0 }) })
+  ] });
+}
+export {
+  NativeFabExtended as default
+};

package/registry/examples/fab/native/extended.tsx

@@ -0,0 +1,23 @@
+import { Fab, useTheme } from "@krizaka/ui/native";
+import { View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+
+// The screen's one main action, floating over the list, above the tab bar (`offset`).
+export default function NativeFabExtended() {
+  const { theme } = useTheme();
+  const plus = (
+    <Svg width={22} height={22} viewBox="0 0 24 24" stroke={theme.onAccent} strokeWidth={2.4} strokeLinecap="round">
+      <Path d="M12 5v14M5 12h14" />
+    </Svg>
+  );
+  return (
+    <View style={{ width: 360, height: 200, flexDirection: "row" }}>
+      <View style={{ flex: 1 }}>
+        <Fab label="New challenge" icon={plus} extended onPress={() => undefined} />
+      </View>
+      <View style={{ flex: 1 }}>
+        <Fab label="New challenge" icon={plus} onPress={() => undefined} />
+      </View>
+    </View>
+  );
+}

package/registry/examples/header/native/large-title.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;