@krizaka/ui 2.0.0-beta.5 → 2.0.0

package/registry/examples/chip/native/single.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/chip/native/single.tsx
+import { Chip } from "@krizaka/ui/native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeChipSingle() {
+  return /* @__PURE__ */ jsxs(Chip.Group, { type: "single", defaultValue: "all", "aria-label": "Filter", children: [
+    /* @__PURE__ */ jsx(Chip, { value: "all", children: "All" }),
+    /* @__PURE__ */ jsx(Chip, { value: "live", children: "Live" }),
+    /* @__PURE__ */ jsx(Chip, { value: "ending", children: "Ending soon" })
+  ] });
+}
+export {
+  NativeChipSingle as default
+};

package/registry/examples/chip/native/single.tsx

@@ -0,0 +1,11 @@
+import { Chip } from "@krizaka/ui/native";
+
+export default function NativeChipSingle() {
+  return (
+    <Chip.Group type="single" defaultValue="all" aria-label="Filter">
+      <Chip value="all">All</Chip>
+      <Chip value="live">Live</Chip>
+      <Chip value="ending">Ending soon</Chip>
+    </Chip.Group>
+  );
+}

package/registry/examples/chip/native/toggle.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/chip/native/toggle.js

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/chip/native/toggle.tsx
+import { Chip } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeChipToggle() {
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 8, alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx(Chip, { children: "Night" }),
+    /* @__PURE__ */ jsx(Chip, { defaultSelected: true, children: "Live" }),
+    /* @__PURE__ */ jsx(Chip, { size: "sm", defaultSelected: true, children: "Small" }),
+    /* @__PURE__ */ jsx(Chip, { disabled: true, children: "Disabled" })
+  ] });
+}
+export {
+  NativeChipToggle as default
+};

package/registry/examples/chip/native/toggle.tsx

@@ -0,0 +1,16 @@
+import { Chip } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// Alone, a chip is a checkbox: `selected` / `onSelectedChange`, or `defaultSelected`.
+export default function NativeChipToggle() {
+  return (
+    <View style={{ flexDirection: "row", gap: 8, alignItems: "center" }}>
+      <Chip>Night</Chip>
+      <Chip defaultSelected>Live</Chip>
+      <Chip size="sm" defaultSelected>
+        Small
+      </Chip>
+      <Chip disabled>Disabled</Chip>
+    </View>
+  );
+}

package/registry/examples/chip/removable.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/chip/removable.js

@@ -0,0 +1,16 @@
+"use client";
+
+// registry/examples/chip/removable.tsx
+import { Chip } from "@krizaka/ui/chip";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChipRemovable() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+    /* @__PURE__ */ jsx(Chip, { removable: true, removeLabel: "Remove #night", onRemove: () => {
+    }, children: "#night" }),
+    /* @__PURE__ */ jsx(Chip, { removable: true, removeLabel: "Remove #city", onRemove: () => {
+    }, children: "#city" })
+  ] });
+}
+export {
+  ChipRemovable as default
+};

package/registry/examples/chip/removable.tsx

@@ -0,0 +1,15 @@
+import { Chip } from "@krizaka/ui/chip";
+
+// Chosen tags, each with a named remove button.
+export default function ChipRemovable() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Chip removable removeLabel="Remove #night" onRemove={() => {}}>
+        #night
+      </Chip>
+      <Chip removable removeLabel="Remove #city" onRemove={() => {}}>
+        #city
+      </Chip>
+    </div>
+  );
+}

package/registry/examples/chip/single.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/chip/single.js

@@ -0,0 +1,16 @@
+"use client";
+
+// registry/examples/chip/single.tsx
+import { Chip } from "@krizaka/ui/chip";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChipSingle() {
+  return /* @__PURE__ */ jsxs(Chip.Group, { type: "single", label: "Format", defaultValue: "all", required: true, children: [
+    /* @__PURE__ */ jsx(Chip, { value: "all", children: "All" }),
+    /* @__PURE__ */ jsx(Chip, { value: "videos", children: "Videos" }),
+    /* @__PURE__ */ jsx(Chip, { value: "stories", children: "Stories" }),
+    /* @__PURE__ */ jsx(Chip, { value: "collections", children: "Collections" })
+  ] });
+}
+export {
+  ChipSingle as default
+};

package/registry/examples/chip/single.tsx

@@ -0,0 +1,13 @@
+import { Chip } from "@krizaka/ui/chip";
+
+// One choice: a filter. `required` keeps one chosen.
+export default function ChipSingle() {
+  return (
+    <Chip.Group type="single" label="Format" defaultValue="all" required>
+      <Chip value="all">All</Chip>
+      <Chip value="videos">Videos</Chip>
+      <Chip value="stories">Stories</Chip>
+      <Chip value="collections">Collections</Chip>
+    </Chip.Group>
+  );
+}

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

@@ -0,0 +1,16 @@
+"use client";
+
+// registry/examples/chip/small.tsx
+import { Chip } from "@krizaka/ui/chip";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChipSmall() {
+  return /* @__PURE__ */ jsxs(Chip.Group, { type: "single", label: "Speed", size: "sm", defaultValue: "1", children: [
+    /* @__PURE__ */ jsx(Chip, { value: "0.5", children: "0.5\xD7" }),
+    /* @__PURE__ */ jsx(Chip, { value: "1", children: "1\xD7" }),
+    /* @__PURE__ */ jsx(Chip, { value: "1.5", children: "1.5\xD7" }),
+    /* @__PURE__ */ jsx(Chip, { value: "2", children: "2\xD7" })
+  ] });
+}
+export {
+  ChipSmall as default
+};

package/registry/examples/chip/small.tsx

@@ -0,0 +1,12 @@
+import { Chip } from "@krizaka/ui/chip";
+
+export default function ChipSmall() {
+  return (
+    <Chip.Group type="single" label="Speed" size="sm" defaultValue="1">
+      <Chip value="0.5">0.5×</Chip>
+      <Chip value="1">1×</Chip>
+      <Chip value="1.5">1.5×</Chip>
+      <Chip value="2">2×</Chip>
+    </Chip.Group>
+  );
+}

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

@@ -1,9 +1,9 @@
 "use client";
 
-// registry/demos/chip.tsx
+// registry/examples/chip/toggle.tsx
 import { Chip } from "@krizaka/ui/chip";
 import { jsx, jsxs } from "react/jsx-runtime";
-function ChipDemo() {
+function ChipToggle() {
   return /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
     /* @__PURE__ */ jsx(Chip, { children: "Subtitles" }),
     /* @__PURE__ */ jsx(Chip, { defaultSelected: true, children: "HD" }),
@@ -11,5 +11,5 @@ function ChipDemo() {
   ] });
 }
 export {
-  ChipDemo as default
+  ChipToggle as default
 };

package/registry/{demos/chip.tsx → examples/chip/toggle.tsx}

@@ -1,6 +1,7 @@
 import { Chip } from "@krizaka/ui/chip";
 
-export default function ChipDemo() {
+// Alone, a chip is a pressed button: `selected` / `onSelectedChange`, or `defaultSelected`.
+export default function ChipToggle() {
   return (
     <div className="flex gap-2">
       <Chip>Subtitles</Chip>

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

@@ -1,9 +1,9 @@
 "use client";
 
-// registry/demos/cn.tsx
+// registry/examples/cn/merge.tsx
 import { cn } from "@krizaka/ui/cn";
 import { jsx, jsxs } from "react/jsx-runtime";
-function CnDemo({ selected = true }) {
+function CnMerge({ selected = true }) {
   return /* @__PURE__ */ jsxs("p", { className: cn("rounded-lg border border-border-default px-3 py-2 text-sm text-fg-secondary", selected && "border-accent text-fg", "px-4"), children: [
     "The last class wins: ",
     /* @__PURE__ */ jsx("code", { children: "px-4" }),
@@ -13,5 +13,5 @@ function CnDemo({ selected = true }) {
   ] });
 }
 export {
-  CnDemo as default
+  CnMerge as default
 };

package/registry/{demos/cn.tsx → examples/cn/merge.tsx}

@@ -1,6 +1,6 @@
 import { cn } from "@krizaka/ui/cn";
 
-export default function CnDemo({ selected = true }: { selected?: boolean }) {
+export default function CnMerge({ selected = true }: { selected?: boolean }) {
   return (
     <p className={cn("rounded-lg border border-border-default px-3 py-2 text-sm text-fg-secondary", selected && "border-accent text-fg", "px-4")}>
       The last class wins: <code>px-4</code> replaces <code>px-3</code>, and the selected colours replace the idle ones.

package/registry/examples/command/dialog.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/command/dialog.js

@@ -0,0 +1,39 @@
+"use client";
+
+// registry/examples/command/dialog.tsx
+import { Button } from "@krizaka/ui/button";
+import { Command, CommandDialog } from "@krizaka/ui/command";
+import { Kbd } from "@krizaka/ui/kbd";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function CommandDialogExample({ defaultOpen = false }) {
+  const [open, setOpen] = useState(defaultOpen);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: () => setOpen(true), children: [
+      "Search ",
+      /* @__PURE__ */ jsx(Kbd, { size: "sm", children: "\u2318K" })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      CommandDialog,
+      {
+        open,
+        onOpenChange: setOpen,
+        label: "Search",
+        footer: /* @__PURE__ */ jsx("p", { className: "border-t border-border-subtle bg-surface-2 px-4 py-2.5 text-xs text-fg-secondary", children: "\u2191\u2193 to move, \u21B5 to open" }),
+        children: [
+          /* @__PURE__ */ jsx(Command.Input, { placeholder: "Search creators, videos, tags" }),
+          /* @__PURE__ */ jsxs(Command.List, { label: "Results", emptyLabel: "Nothing matches.", children: [
+            /* @__PURE__ */ jsxs(Command.Group, { heading: "Pages", children: [
+              /* @__PURE__ */ jsx(Command.Item, { onSelect: () => setOpen(false), children: "Home" }),
+              /* @__PURE__ */ jsx(Command.Item, { onSelect: () => setOpen(false), children: "Wallet" })
+            ] }),
+            /* @__PURE__ */ jsx(Command.Group, { heading: "Actions", children: /* @__PURE__ */ jsx(Command.Item, { keywords: ["video", "new"], children: "Upload a video" }) })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  CommandDialogExample as default
+};

package/registry/examples/command/dialog.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { Button } from "@krizaka/ui/button";
+import { Command, CommandDialog } from "@krizaka/ui/command";
+import { Kbd } from "@krizaka/ui/kbd";
+import { useState } from "react";
+
+// The palette of an app, in the platform's Dialog: open it from a button or your own ⌘K shortcut.
+export default function CommandDialogExample({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  const [open, setOpen] = useState(defaultOpen);
+  return (
+    <>
+      <Button variant="outline" onClick={() => setOpen(true)}>
+        Search <Kbd size="sm">⌘K</Kbd>
+      </Button>
+      <CommandDialog
+        open={open}
+        onOpenChange={setOpen}
+        label="Search"
+        footer={<p className="border-t border-border-subtle bg-surface-2 px-4 py-2.5 text-xs text-fg-secondary">↑↓ to move, ↵ to open</p>}
+      >
+        <Command.Input placeholder="Search creators, videos, tags" />
+        <Command.List label="Results" emptyLabel="Nothing matches.">
+          <Command.Group heading="Pages">
+            <Command.Item onSelect={() => setOpen(false)}>Home</Command.Item>
+            <Command.Item onSelect={() => setOpen(false)}>Wallet</Command.Item>
+          </Command.Group>
+          <Command.Group heading="Actions">
+            <Command.Item keywords={["video", "new"]}>Upload a video</Command.Item>
+          </Command.Group>
+        </Command.List>
+      </CommandDialog>
+    </>
+  );
+}

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

@@ -1,13 +1,12 @@
 "use client";
 
-// registry/demos/command.tsx
+// registry/examples/command/inline.tsx
 import { Command } from "@krizaka/ui/command";
 import { jsx, jsxs } from "react/jsx-runtime";
-function CommandDemo() {
+function CommandInline() {
   return /* @__PURE__ */ jsxs(Command.Root, { label: "Commands", className: "w-[28rem] max-w-full rounded-xl border border-border-default shadow-lg", children: [
     /* @__PURE__ */ jsx(Command.Input, { placeholder: "Type a command or search" }),
-    /* @__PURE__ */ jsxs(Command.List, { label: "Suggestions", children: [
-      /* @__PURE__ */ jsx(Command.Empty, { emptyLabel: "Nothing matches." }),
+    /* @__PURE__ */ jsxs(Command.List, { label: "Suggestions", emptyLabel: "Nothing matches.", children: [
       /* @__PURE__ */ jsxs(Command.Group, { heading: "Pages", children: [
         /* @__PURE__ */ jsxs(Command.Item, { children: [
           "Home",
@@ -28,5 +27,5 @@ function CommandDemo() {
   ] });
 }
 export {
-  CommandDemo as default
+  CommandInline as default
 };

package/registry/{demos/command.tsx → examples/command/inline.tsx}

@@ -1,11 +1,10 @@
 import { Command } from "@krizaka/ui/command";
 
-export default function CommandDemo() {
+export default function CommandInline() {
   return (
     <Command.Root label="Commands" className="w-[28rem] max-w-full rounded-xl border border-border-default shadow-lg">
       <Command.Input placeholder="Type a command or search" />
-      <Command.List label="Suggestions">
-        <Command.Empty emptyLabel="Nothing matches." />
+      <Command.List label="Suggestions" emptyLabel="Nothing matches.">
         <Command.Group heading="Pages">
           <Command.Item>
             Home

package/registry/examples/command/no-results.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/command/no-results.js

@@ -0,0 +1,19 @@
+"use client";
+
+// registry/examples/command/no-results.tsx
+import { Command } from "@krizaka/ui/command";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CommandNoResults() {
+  const [query, setQuery] = useState("zzz");
+  return /* @__PURE__ */ jsxs(Command.Root, { label: "Commands", className: "w-[28rem] max-w-full rounded-xl border border-border-default shadow-lg", children: [
+    /* @__PURE__ */ jsx(Command.Input, { placeholder: "Type a command or search", value: query, onValueChange: setQuery }),
+    /* @__PURE__ */ jsx(Command.List, { label: "Suggestions", emptyLabel: `Nothing matches \u201C${query}\u201D.`, children: /* @__PURE__ */ jsxs(Command.Group, { heading: "Pages", children: [
+      /* @__PURE__ */ jsx(Command.Item, { children: "Home" }),
+      /* @__PURE__ */ jsx(Command.Item, { children: "Wallet" })
+    ] }) })
+  ] });
+}
+export {
+  CommandNoResults as default
+};

package/registry/examples/command/no-results.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { Command } from "@krizaka/ui/command";
+import { useState } from "react";
+
+// Nothing matches: `emptyLabel` is said beside the results, the listbox stays empty (valid for screen readers).
+export default function CommandNoResults() {
+  const [query, setQuery] = useState("zzz");
+  return (
+    <Command.Root label="Commands" className="w-[28rem] max-w-full rounded-xl border border-border-default shadow-lg">
+      <Command.Input placeholder="Type a command or search" value={query} onValueChange={setQuery} />
+      <Command.List label="Suggestions" emptyLabel={`Nothing matches “${query}”.`}>
+        <Command.Group heading="Pages">
+          <Command.Item>Home</Command.Item>
+          <Command.Item>Wallet</Command.Item>
+        </Command.Group>
+      </Command.List>
+    </Command.Root>
+  );
+}

package/registry/examples/confirm-button/armed.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/confirm-button/armed.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/confirm-button/armed.tsx
+import { ConfirmButton } from "@krizaka/ui/confirm-button";
+import { jsx } from "react/jsx-runtime";
+function ConfirmButtonArmed() {
+  return /* @__PURE__ */ jsx(ConfirmButton, { label: "Delete the comment", confirmLabel: "Delete?", size: "sm", timeoutMs: 6e5, onConfirm: () => {
+  }, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6" }) }) });
+}
+export {
+  ConfirmButtonArmed as default
+};

package/registry/examples/confirm-button/armed.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { ConfirmButton } from "@krizaka/ui/confirm-button";
+
+// Press once: it arms and says what will happen (`confirmLabel`); press again within `timeoutMs` to confirm.
+export default function ConfirmButtonArmed() {
+  return (
+    <ConfirmButton label="Delete the comment" confirmLabel="Delete?" size="sm" timeoutMs={600_000} onConfirm={() => {}}>
+      <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+        <path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6" />
+      </svg>
+    </ConfirmButton>
+  );
+}

package/registry/examples/confirm-button/idle.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/confirm-button.js → examples/confirm-button/idle.js}

@@ -1,12 +1,12 @@
 "use client";
 
-// registry/demos/confirm-button.tsx
+// registry/examples/confirm-button/idle.tsx
 import { ConfirmButton } from "@krizaka/ui/confirm-button";
 import { jsx } from "react/jsx-runtime";
-function ConfirmButtonDemo() {
+function ConfirmButtonIdle() {
   return /* @__PURE__ */ jsx(ConfirmButton, { label: "Delete the comment", confirmLabel: "Delete?", size: "sm", onConfirm: () => {
   }, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6" }) }) });
 }
 export {
-  ConfirmButtonDemo as default
+  ConfirmButtonIdle as default
 };

package/registry/{demos/confirm-button.tsx → examples/confirm-button/idle.tsx}

@@ -2,7 +2,7 @@
 
 import { ConfirmButton } from "@krizaka/ui/confirm-button";
 
-export default function ConfirmButtonDemo() {
+export default function ConfirmButtonIdle() {
   return (
     <ConfirmButton label="Delete the comment" confirmLabel="Delete?" size="sm" onConfirm={() => {}}>
       <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>

package/registry/examples/confirm-button/with-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/confirm-button/with-text.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/confirm-button/with-text.tsx
+import { ConfirmButton } from "@krizaka/ui/confirm-button";
+import { jsx } from "react/jsx-runtime";
+function ConfirmButtonWithText() {
+  return /* @__PURE__ */ jsx(ConfirmButton, { variant: "outline", confirmLabel: "Leave for good?", armedContent: "Leave for good?", onConfirm: () => {
+  }, children: "Leave the group" });
+}
+export {
+  ConfirmButtonWithText as default
+};

package/registry/examples/confirm-button/with-text.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { ConfirmButton } from "@krizaka/ui/confirm-button";
+
+// With words: once armed, `armedContent` replaces them.
+export default function ConfirmButtonWithText() {
+  return (
+    <ConfirmButton variant="outline" confirmLabel="Leave for good?" armedContent="Leave for good?" onConfirm={() => {}}>
+      Leave the group
+    </ConfirmButton>
+  );
+}

package/registry/examples/countdown/days.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/countdown/days.js

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/countdown/days.tsx
+import { Countdown } from "@krizaka/ui/countdown";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function CountdownDays() {
+  const [target] = useState(() => Date.now() + ((2 * 24 + 4) * 3600 + 13 * 60) * 1e3);
+  return /* @__PURE__ */ jsx(Countdown, { target, units: { d: "d", h: "h", m: "m", s: "s" }, label: "Ends in" });
+}
+export {
+  CountdownDays as default
+};

package/registry/examples/countdown/days.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { Countdown } from "@krizaka/ui/countdown";
+import { useState } from "react";
+
+// Days appear when there are some: days, hours, minutes.
+export default function CountdownDays() {
+  const [target] = useState(() => Date.now() + ((2 * 24 + 4) * 3600 + 13 * 60) * 1000);
+  return <Countdown target={target} units={{ d: "d", h: "h", m: "m", s: "s" }} label="Ends in" />;
+}

package/registry/examples/countdown/ended.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/countdown/ended.js

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/countdown/ended.tsx
+import { Countdown } from "@krizaka/ui/countdown";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function CountdownEnded() {
+  const [target] = useState(() => Date.now() - 1e3);
+  return /* @__PURE__ */ jsx(Countdown, { target, units: { d: "d", h: "h", m: "m", s: "s" }, label: "Ended" });
+}
+export {
+  CountdownEnded as default
+};

package/registry/examples/countdown/ended.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { Countdown } from "@krizaka/ui/countdown";
+import { useState } from "react";
+
+// Past the target: zeros and `data-ended`. Say what happens next next to it.
+export default function CountdownEnded() {
+  const [target] = useState(() => Date.now() - 1000);
+  return <Countdown target={target} units={{ d: "d", h: "h", m: "m", s: "s" }} label="Ended" />;
+}

package/registry/examples/countdown/hours.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;