@krizaka/ui 2.2.0 → 2.4.0

package/registry/examples/nav-bar/site.tsx

@@ -0,0 +1,36 @@
+import { Button } from "@krizaka/ui/button";
+import { NavBar } from "@krizaka/ui/nav-bar";
+
+const products = [
+  { href: "#orazaka", title: "Orazaka", description: "Sovereign AI, on your own servers." },
+  { href: "#orochia", title: "Orochia", description: "Creators keep 90 % of every support." },
+  { href: "#ui", title: "Krizaka UI", description: "The components behind both." },
+];
+
+// The site's bar: a floating pill that tightens on scroll, one light gliding between its items and resting on the
+// current page, an accessible menu (Enter or ↓ opens, Escape closes), and a panel below `md`.
+export default function NavBarSite() {
+  return (
+    <NavBar.Root label="Main">
+      <NavBar.Brand href="#home">Krizaka</NavBar.Brand>
+      <NavBar.Items>
+        <NavBar.Menu label="Products">
+          {products.map((p) => (
+            <NavBar.MenuLink key={p.href} {...p} />
+          ))}
+        </NavBar.Menu>
+        <NavBar.Link href="#docs">Docs</NavBar.Link>
+        <NavBar.Link href="#story" active>Our story</NavBar.Link>
+      </NavBar.Items>
+      <NavBar.Actions>
+        <Button variant="primary" size="sm" shape="pill" className="hidden sm:inline-flex">Contact</Button>
+        <NavBar.Mobile openLabel="Open the menu" closeLabel="Close the menu">
+          {products.map((p) => (
+            <NavBar.MobileLink key={p.href} href={p.href}>{p.title}</NavBar.MobileLink>
+          ))}
+          <NavBar.MobileLink href="#story" active>Our story</NavBar.MobileLink>
+        </NavBar.Mobile>
+      </NavBar.Actions>
+    </NavBar.Root>
+  );
+}

package/registry/examples/number-ticker/gradient.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/number-ticker/gradient.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/number-ticker/gradient.tsx
+import { NumberTicker } from "@krizaka/ui/number-ticker";
+import { jsx } from "react/jsx-runtime";
+function NumberTickerGradient() {
+  return /* @__PURE__ */ jsx("p", { className: "bg-linear-to-r from-accent to-accent-2 bg-clip-text font-display text-5xl font-bold text-transparent", children: /* @__PURE__ */ jsx(NumberTicker, { value: 4.9, format: { maximumFractionDigits: 1 }, locale: "en" }) });
+}
+export {
+  NumberTickerGradient as default
+};

package/registry/examples/number-ticker/gradient.tsx

@@ -0,0 +1,10 @@
+import { NumberTicker } from "@krizaka/ui/number-ticker";
+
+// Inside gradient text: every box of the figure carries the gradient, so the climbing digits stay painted.
+export default function NumberTickerGradient() {
+  return (
+    <p className="bg-linear-to-r from-accent to-accent-2 bg-clip-text font-display text-5xl font-bold text-transparent">
+      <NumberTicker value={4.9} format={{ maximumFractionDigits: 1 }} locale="en" />
+    </p>
+  );
+}

package/registry/examples/number-ticker/live-total.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/number-ticker/live-total.js

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/number-ticker/live-total.tsx
+import { Button } from "@krizaka/ui/button";
+import { NumberTicker } from "@krizaka/ui/number-ticker";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NumberTickerLiveTotal() {
+  const [bid, setBid] = useState(1250);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+    /* @__PURE__ */ jsx("p", { className: "font-display text-3xl font-semibold text-fg", children: /* @__PURE__ */ jsx(NumberTicker, { value: bid, trigger: "change", announce: true, locale: "en", format: { style: "currency", currency: "EUR", maximumFractionDigits: 0 } }) }),
+    /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", onClick: () => setBid((b) => b + 50), children: "Outbid by \u20AC50" })
+  ] });
+}
+export {
+  NumberTickerLiveTotal as default
+};

package/registry/examples/number-ticker/live-total.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { Button } from "@krizaka/ui/button";
+import { NumberTicker } from "@krizaka/ui/number-ticker";
+import { useState } from "react";
+
+// A live total (an auction's highest bid): each digit rolls to the new value, a rise flashes the success colour, and the
+// new amount is announced politely.
+export default function NumberTickerLiveTotal() {
+  const [bid, setBid] = useState(1250);
+  return (
+    <div className="flex items-center gap-4">
+      <p className="font-display text-3xl font-semibold text-fg">
+        <NumberTicker value={bid} trigger="change" announce locale="en" format={{ style: "currency", currency: "EUR", maximumFractionDigits: 0 }} />
+      </p>
+      <Button size="sm" variant="primary" onClick={() => setBid((b) => b + 50)}>
+        Outbid by €50
+      </Button>
+    </div>
+  );
+}

package/registry/examples/number-ticker/stats.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/number-ticker/stats.js

@@ -0,0 +1,19 @@
+"use client";
+
+// registry/examples/number-ticker/stats.tsx
+import { NumberTicker } from "@krizaka/ui/number-ticker";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NumberTickerStats() {
+  const stats = [
+    { value: 90, label: "of every support goes to the creator", format: { style: "unit", unit: "percent" } },
+    { value: 12480, label: "creators paid this month" },
+    { value: 1.2, label: "seconds to the first token", format: { maximumFractionDigits: 1 } }
+  ];
+  return /* @__PURE__ */ jsx("dl", { className: "grid gap-6 sm:grid-cols-3", children: stats.map((s) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-sm text-fg-secondary", children: s.label }),
+    /* @__PURE__ */ jsx("dd", { className: "order-first font-display text-4xl font-semibold text-fg", children: /* @__PURE__ */ jsx(NumberTicker, { value: s.value, locale: "en", format: s.format, align: "start" }) })
+  ] }, s.label)) });
+}
+export {
+  NumberTickerStats as default
+};

package/registry/examples/number-ticker/stats.tsx

@@ -0,0 +1,23 @@
+import { NumberTicker } from "@krizaka/ui/number-ticker";
+
+// Figures that climb once as they scroll into view. The server renders the final values: nothing jumps, and a reader
+// who lands with them already on screen sees them still.
+export default function NumberTickerStats() {
+  const stats = [
+    { value: 90, label: "of every support goes to the creator", format: { style: "unit", unit: "percent" } as const },
+    { value: 12480, label: "creators paid this month" },
+    { value: 1.2, label: "seconds to the first token", format: { maximumFractionDigits: 1 } },
+  ];
+  return (
+    <dl className="grid gap-6 sm:grid-cols-3">
+      {stats.map((s) => (
+        <div key={s.label} className="flex flex-col gap-1">
+          <dt className="text-sm text-fg-secondary">{s.label}</dt>
+          <dd className="order-first font-display text-4xl font-semibold text-fg">
+            <NumberTicker value={s.value} locale="en" format={s.format} align="start" />
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}

package/registry/examples/pagination/cursor.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/pagination/cursor.js

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/pagination/cursor.tsx
+import { Pagination } from "@krizaka/ui/pagination";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function PaginationCursor() {
+  const [pages, setPages] = React.useState(["start"]);
+  const index = pages.length - 1;
+  return /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      hasPrevious: index > 0,
+      hasNext: true,
+      onPrevious: () => setPages((p) => p.slice(0, -1)),
+      onNext: () => setPages((p) => [...p, `cursor-${p.length}`]),
+      status: `Jobs ${index * 25 + 1}\u2013${index * 25 + 25}`,
+      labels: { previous: "Newer jobs", next: "Older jobs" }
+    }
+  );
+}
+export {
+  PaginationCursor as default
+};

package/registry/examples/pagination/cursor.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { Pagination } from "@krizaka/ui/pagination";
+import * as React from "react";
+
+// An API that answers with a `nextCursor`: no total, previous and next only.
+export default function PaginationCursor() {
+  const [pages, setPages] = React.useState(["start"]);
+  const index = pages.length - 1;
+  return (
+    <Pagination
+      hasPrevious={index > 0}
+      hasNext
+      onPrevious={() => setPages((p) => p.slice(0, -1))}
+      onNext={() => setPages((p) => [...p, `cursor-${p.length}`])}
+      status={`Jobs ${index * 25 + 1}–${index * 25 + 25}`}
+      labels={{ previous: "Newer jobs", next: "Older jobs" }}
+    />
+  );
+}

package/registry/examples/pagination/links.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/pagination/links.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/pagination/links.tsx
+import { Pagination } from "@krizaka/ui/pagination";
+import { jsx } from "react/jsx-runtime";
+function PaginationLinks() {
+  return /* @__PURE__ */ jsx(Pagination, { page: 7, pageCount: 42, getHref: (page) => `/explore?q=sunset&page=${page}`, siblings: 2 });
+}
+export {
+  PaginationLinks as default
+};

package/registry/examples/pagination/links.tsx

@@ -0,0 +1,6 @@
+import { Pagination } from "@krizaka/ui/pagination";
+
+// Server-rendered: every page is a link, the page lives in the address (`?q=sunset&page=7`).
+export default function PaginationLinks() {
+  return <Pagination page={7} pageCount={42} getHref={(page) => `/explore?q=sunset&page=${page}`} siblings={2} />;
+}

package/registry/examples/pagination/native/cursor.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/pagination/native/cursor.js

@@ -0,0 +1,19 @@
+"use client";
+
+// registry/examples/pagination/native/cursor.tsx
+import { Pagination } from "@krizaka/ui/native";
+import { jsx } from "react/jsx-runtime";
+function NativePaginationCursor() {
+  return /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      hasPrevious: true,
+      hasNext: true,
+      status: "Payouts 21\u201340",
+      labels: { previous: "Newer payouts", next: "Older payouts", compact: (p, count) => `${p} / ${count}` }
+    }
+  );
+}
+export {
+  NativePaginationCursor as default
+};

package/registry/examples/pagination/native/cursor.tsx

@@ -0,0 +1,13 @@
+import { Pagination } from "@krizaka/ui/native";
+
+// A cursor: the range in between, no total.
+export default function NativePaginationCursor() {
+  return (
+    <Pagination
+      hasPrevious
+      hasNext
+      status="Payouts 21–40"
+      labels={{ previous: "Newer payouts", next: "Older payouts", compact: (p, count) => `${p} / ${count}` }}
+    />
+  );
+}

package/registry/examples/pagination/native/pages.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/pagination/native/pages.js

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/pagination/native/pages.tsx
+import { Pagination } from "@krizaka/ui/native";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function NativePaginationPages() {
+  const [page, setPage] = React.useState(3);
+  return /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      page,
+      pageCount: 12,
+      onPageChange: setPage,
+      labels: { previous: "Previous page", next: "Next page", compact: (p, count) => `Page ${p} of ${count}` }
+    }
+  );
+}
+export {
+  NativePaginationPages as default
+};

package/registry/examples/pagination/native/pages.tsx

@@ -0,0 +1,14 @@
+import { Pagination } from "@krizaka/ui/native";
+import * as React from "react";
+
+export default function NativePaginationPages() {
+  const [page, setPage] = React.useState(3);
+  return (
+    <Pagination
+      page={page}
+      pageCount={12}
+      onPageChange={setPage}
+      labels={{ previous: "Previous page", next: "Next page", compact: (p, count) => `Page ${p} of ${count}` }}
+    />
+  );
+}

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

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/pagination/results.tsx
+import { Pagination } from "@krizaka/ui/pagination";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function PaginationResults() {
+  const [page, setPage] = React.useState(4);
+  const first = (page - 1) * 20 + 1;
+  return /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      page,
+      pageCount: 20,
+      onPageChange: setPage,
+      status: `${first}\u2013${Math.min(first + 19, 392)} of 392 videos`,
+      labels: { nav: "Pages of results" }
+    }
+  );
+}
+export {
+  PaginationResults as default
+};

package/registry/examples/pagination/results.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { Pagination } from "@krizaka/ui/pagination";
+import * as React from "react";
+
+// The explore page of a video platform: 392 results, 20 per page.
+export default function PaginationResults() {
+  const [page, setPage] = React.useState(4);
+  const first = (page - 1) * 20 + 1;
+  return (
+    <Pagination
+      page={page}
+      pageCount={20}
+      onPageChange={setPage}
+      status={`${first}–${Math.min(first + 19, 392)} of 392 videos`}
+      labels={{ nav: "Pages of results" }}
+    />
+  );
+}

package/registry/examples/pagination/table-footer.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/pagination/table-footer.js

@@ -0,0 +1,31 @@
+"use client";
+
+// registry/examples/pagination/table-footer.tsx
+import { Pagination } from "@krizaka/ui/pagination";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function PaginationTableFooter() {
+  const [page, setPage] = React.useState(1);
+  const [size, setSize] = React.useState(20);
+  const total = 1284;
+  const count = Math.ceil(total / size);
+  const first = (page - 1) * size + 1;
+  return /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      page,
+      pageCount: count,
+      onPageChange: setPage,
+      pageSize: size,
+      pageSizeOptions: [10, 20, 50],
+      onPageSizeChange: (next) => {
+        setSize(next);
+        setPage(1);
+      },
+      status: `${first.toLocaleString("en")}\u2013${Math.min(first + size - 1, total).toLocaleString("en")} of ${total.toLocaleString("en")}`
+    }
+  );
+}
+export {
+  PaginationTableFooter as default
+};

package/registry/examples/pagination/table-footer.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Pagination } from "@krizaka/ui/pagination";
+import * as React from "react";
+
+// Under an admin table: rows per page, the range shown, the pages.
+export default function PaginationTableFooter() {
+  const [page, setPage] = React.useState(1);
+  const [size, setSize] = React.useState(20);
+  const total = 1284;
+  const count = Math.ceil(total / size);
+  const first = (page - 1) * size + 1;
+  return (
+    <Pagination
+      page={page}
+      pageCount={count}
+      onPageChange={setPage}
+      pageSize={size}
+      pageSizeOptions={[10, 20, 50]}
+      onPageSizeChange={(next) => {
+        setSize(next);
+        setPage(1);
+      }}
+      status={`${first.toLocaleString("en")}–${Math.min(first + size - 1, total).toLocaleString("en")} of ${total.toLocaleString("en")}`}
+    />
+  );
+}

package/registry/examples/progress/buffer.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/progress/buffer.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/progress/buffer.tsx
+import { Progress } from "@krizaka/ui/progress";
+import { jsx } from "react/jsx-runtime";
+function ProgressBuffer() {
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-sm", children: /* @__PURE__ */ jsx(Progress, { label: "Played", value: 38, buffer: 71, valueText: "1:54 of 5:00", size: "sm" }) });
+}
+export {
+  ProgressBuffer as default
+};

package/registry/examples/progress/buffer.tsx

@@ -0,0 +1,10 @@
+import { Progress } from "@krizaka/ui/progress";
+
+// A player's timeline: what is watched, and — lighter — what is already loaded ahead (`buffer`).
+export default function ProgressBuffer() {
+  return (
+    <div className="w-full max-w-sm">
+      <Progress label="Played" value={38} buffer={71} valueText="1:54 of 5:00" size="sm" />
+    </div>
+  );
+}

package/registry/examples/progress/statuses.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/progress/statuses.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/progress/statuses.tsx
+import { Progress } from "@krizaka/ui/progress";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ProgressStatuses() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-sm flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(Progress, { label: "Sync \u2014 paused, waiting for Wi-Fi", value: 45, status: "paused", showLabel: true }),
+    /* @__PURE__ */ jsx(Progress, { label: "Transcoding failed at 72 %", value: 72, status: "error", showLabel: true, valueText: "Retry" })
+  ] });
+}
+export {
+  ProgressStatuses as default
+};

package/registry/examples/progress/statuses.tsx

@@ -0,0 +1,11 @@
+import { Progress } from "@krizaka/ui/progress";
+
+// When it stops: `paused` rests striped (it waits for someone), `error` turns to the danger colour where it stopped.
+export default function ProgressStatuses() {
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-4">
+      <Progress label="Sync — paused, waiting for Wi-Fi" value={45} status="paused" showLabel />
+      <Progress label="Transcoding failed at 72 %" value={72} status="error" showLabel valueText="Retry" />
+    </div>
+  );
+}

package/registry/examples/progress/steps.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/progress/steps.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/progress/steps.tsx
+import { Progress } from "@krizaka/ui/progress";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ProgressSteps() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-sm flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(Progress, { label: "Profile completed", value: 3, max: 5, valueText: "3 of 5 steps", segments: 5, showLabel: true }),
+    /* @__PURE__ */ jsx(Progress, { variant: "ring", label: "Goal", value: 7, max: 10, segments: 10, valueText: "7 of 10 supporters", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-fg", children: "7/10" }) })
+  ] });
+}
+export {
+  ProgressSteps as default
+};

package/registry/examples/progress/steps.tsx

@@ -0,0 +1,13 @@
+import { Progress } from "@krizaka/ui/progress";
+
+// A task in steps: `segments` cuts the bar into its parts — 3 of 5 done reads at a glance.
+export default function ProgressSteps() {
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-4">
+      <Progress label="Profile completed" value={3} max={5} valueText="3 of 5 steps" segments={5} showLabel />
+      <Progress variant="ring" label="Goal" value={7} max={10} segments={10} valueText="7 of 10 supporters">
+        <span className="text-sm font-semibold text-fg">7/10</span>
+      </Progress>
+    </div>
+  );
+}

package/registry/examples/progress/upload.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/progress/upload.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/progress/upload.tsx
+import { Progress } from "@krizaka/ui/progress";
+import { jsx } from "react/jsx-runtime";
+function ProgressUpload() {
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-sm", children: /* @__PURE__ */ jsx(Progress, { label: "Night walk.mp4", value: 64, eta: "About 40 s left", showLabel: true }) });
+}
+export {
+  ProgressUpload as default
+};

package/registry/examples/progress/upload.tsx

@@ -0,0 +1,10 @@
+import { Progress } from "@krizaka/ui/progress";
+
+// An upload the user follows: its name, the percentage and the time left above the bar — read as one sentence.
+export default function ProgressUpload() {
+  return (
+    <div className="w-full max-w-sm">
+      <Progress label="Night walk.mp4" value={64} eta="About 40 s left" showLabel />
+    </div>
+  );
+}

package/registry/examples/search-field/global.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/search-field/global.js

@@ -0,0 +1,19 @@
+"use client";
+
+// registry/examples/search-field/global.tsx
+import { SearchField } from "@krizaka/ui/search-field";
+import { jsx } from "react/jsx-runtime";
+function SearchFieldGlobal() {
+  return /* @__PURE__ */ jsx(
+    SearchField,
+    {
+      label: "Search Orochia",
+      placeholder: "Search creators, videos, tags",
+      shortcut: "k",
+      onSubmit: (query) => window.location.assign(`/explore?q=${encodeURIComponent(query)}`)
+    }
+  );
+}
+export {
+  SearchFieldGlobal as default
+};

package/registry/examples/search-field/global.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { SearchField } from "@krizaka/ui/search-field";
+
+// The site's search: ⌘K (Ctrl+K) focuses it from anywhere, Enter goes to the results.
+export default function SearchFieldGlobal() {
+  return (
+    <SearchField
+      label="Search Orochia"
+      placeholder="Search creators, videos, tags"
+      shortcut="k"
+      onSubmit={(query) => window.location.assign(`/explore?q=${encodeURIComponent(query)}`)}
+    />
+  );
+}