@krizaka/ui 2.2.0 → 2.3.0

package/registry/examples/meter/balance.tsx

@@ -0,0 +1,15 @@
+import { Meter, MeterValue } from "@krizaka/ui/meter";
+
+// A balance, where high is good (`optimum="high"`): it turns to danger as it runs low.
+export default function MeterBalance() {
+  return (
+    <div className="flex items-center gap-6">
+      <Meter variant="ring" label="Credits left" value={12} max={100} valueText="12 credits of 100" thresholds={{ low: 0.25, high: 0.6 }} optimum="high">
+        <MeterValue value="12" caption="credits" />
+      </Meter>
+      <Meter variant="ring" label="Credits left" value={80} max={100} valueText="80 credits of 100" thresholds={{ low: 0.25, high: 0.6 }} optimum="high">
+        <MeterValue value="80" caption="credits" />
+      </Meter>
+    </div>
+  );
+}

package/registry/examples/meter/quota.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/meter/quota.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/meter/quota.tsx
+import { Meter } from "@krizaka/ui/meter";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MeterQuota() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-sm flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(Meter, { label: "Storage", value: 18, max: 50, valueText: "18 GB of 50 GB", thresholds: { low: 0.7, high: 0.9 }, showLabel: true }),
+    /* @__PURE__ */ jsx(Meter, { label: "GPU minutes", value: 41, max: 50, valueText: "41 of 50 min", thresholds: { low: 0.7, high: 0.9 }, showLabel: true }),
+    /* @__PURE__ */ jsx(Meter, { label: "API calls", value: 970, max: 1e3, valueText: "970 of 1,000", thresholds: { low: 0.7, high: 0.9 }, showLabel: true })
+  ] });
+}
+export {
+  MeterQuota as default
+};

package/registry/examples/meter/quota.tsx

@@ -0,0 +1,12 @@
+import { Meter } from "@krizaka/ui/meter";
+
+// Quotas: the tone turns to warning past 70 %, to danger past 90 % — and the value is said in words.
+export default function MeterQuota() {
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-4">
+      <Meter label="Storage" value={18} max={50} valueText="18 GB of 50 GB" thresholds={{ low: 0.7, high: 0.9 }} showLabel />
+      <Meter label="GPU minutes" value={41} max={50} valueText="41 of 50 min" thresholds={{ low: 0.7, high: 0.9 }} showLabel />
+      <Meter label="API calls" value={970} max={1000} valueText="970 of 1,000" thresholds={{ low: 0.7, high: 0.9 }} showLabel />
+    </div>
+  );
+}

package/registry/examples/meter/split.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/meter/split.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/meter/split.tsx
+import { Meter, MeterValue } from "@krizaka/ui/meter";
+import { jsx, jsxs } from "react/jsx-runtime";
+var parts = [
+  { label: "To the creator", value: 90, valueText: "\u20AC9.00" },
+  { label: "Platform", value: 10, valueText: "\u20AC1.00" }
+];
+function MeterSplit() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-md flex-wrap items-center gap-8", children: [
+    /* @__PURE__ */ jsx(Meter, { variant: "ring", label: "Split of a \u20AC10 tip", parts, children: /* @__PURE__ */ jsx(MeterValue, { value: "90 %", caption: "creator" }) }),
+    /* @__PURE__ */ jsx(Meter, { label: "Split of a \u20AC10 tip", parts, showLabel: true, className: "min-w-48 flex-1" })
+  ] });
+}
+export {
+  MeterSplit as default
+};

package/registry/examples/meter/split.tsx

@@ -0,0 +1,18 @@
+import { Meter, MeterValue } from "@krizaka/ui/meter";
+
+// Where a €10 tip goes: a split drawn as a ring and a bar, each with its legend — the text version of what it draws.
+const parts = [
+  { label: "To the creator", value: 90, valueText: "€9.00" },
+  { label: "Platform", value: 10, valueText: "€1.00" },
+];
+
+export default function MeterSplit() {
+  return (
+    <div className="flex w-full max-w-md flex-wrap items-center gap-8">
+      <Meter variant="ring" label="Split of a €10 tip" parts={parts}>
+        <MeterValue value="90 %" caption="creator" />
+      </Meter>
+      <Meter label="Split of a €10 tip" parts={parts} showLabel className="min-w-48 flex-1" />
+    </div>
+  );
+}

package/registry/examples/nav-bar/app-bar.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/nav-bar/app-bar.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/nav-bar/app-bar.tsx
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NavBarAppBar() {
+  return /* @__PURE__ */ jsxs(NavBar.Root, { label: "Studio", floating: false, compactAfter: false, children: [
+    /* @__PURE__ */ jsx(NavBar.Brand, { href: "#studio", children: "Studio" }),
+    /* @__PURE__ */ jsxs(NavBar.Items, { children: [
+      /* @__PURE__ */ jsx(NavBar.Link, { href: "#videos", active: true, children: "Videos" }),
+      /* @__PURE__ */ jsx(NavBar.Link, { href: "#earnings", children: "Earnings" }),
+      /* @__PURE__ */ jsx(NavBar.Link, { href: "#auctions", children: "Auctions" })
+    ] }),
+    /* @__PURE__ */ jsx(NavBar.Actions, { children: /* @__PURE__ */ jsxs(NavBar.Mobile, { openLabel: "Open the menu", closeLabel: "Close the menu", children: [
+      /* @__PURE__ */ jsx(NavBar.MobileLink, { href: "#videos", active: true, children: "Videos" }),
+      /* @__PURE__ */ jsx(NavBar.MobileLink, { href: "#earnings", children: "Earnings" })
+    ] }) })
+  ] });
+}
+export {
+  NavBarAppBar as default
+};

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

@@ -0,0 +1,21 @@
+import { NavBar } from "@krizaka/ui/nav-bar";
+
+// Inside an app: `floating={false}` — a full-width bar with a hairline, the same light between sections.
+export default function NavBarAppBar() {
+  return (
+    <NavBar.Root label="Studio" floating={false} compactAfter={false}>
+      <NavBar.Brand href="#studio">Studio</NavBar.Brand>
+      <NavBar.Items>
+        <NavBar.Link href="#videos" active>Videos</NavBar.Link>
+        <NavBar.Link href="#earnings">Earnings</NavBar.Link>
+        <NavBar.Link href="#auctions">Auctions</NavBar.Link>
+      </NavBar.Items>
+      <NavBar.Actions>
+        <NavBar.Mobile openLabel="Open the menu" closeLabel="Close the menu">
+          <NavBar.MobileLink href="#videos" active>Videos</NavBar.MobileLink>
+          <NavBar.MobileLink href="#earnings">Earnings</NavBar.MobileLink>
+        </NavBar.Mobile>
+      </NavBar.Actions>
+    </NavBar.Root>
+  );
+}

package/registry/examples/nav-bar/menu-open.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/nav-bar/menu-open.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/nav-bar/menu-open.tsx
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { jsx, jsxs } from "react/jsx-runtime";
+var icon = /* @__PURE__ */ jsxs("svg", { "data-kz-icon": true, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": true, children: [
+  /* @__PURE__ */ jsx("path", { d: "M12 3 19.8 7.5v9L12 21l-7.8-4.5v-9Z" }),
+  /* @__PURE__ */ jsx("circle", { "data-node": true, cx: "12", cy: "12", r: "2.4", fill: "currentColor" })
+] });
+function NavBarMenuOpen({ defaultOpen = false }) {
+  return /* @__PURE__ */ jsxs(NavBar.Root, { label: "Main", className: "mb-72", children: [
+    /* @__PURE__ */ jsx(NavBar.Brand, { href: "#home", children: "Krizaka" }),
+    /* @__PURE__ */ jsxs(NavBar.Items, { defaultValue: defaultOpen ? "products" : void 0, children: [
+      /* @__PURE__ */ jsxs(NavBar.Menu, { value: "products", label: "Products", columns: 2, active: true, children: [
+        /* @__PURE__ */ jsx(NavBar.MenuLink, { href: "#overview", icon, title: "Overview", description: "What it does, in one page.", active: true }),
+        /* @__PURE__ */ jsx(NavBar.MenuLink, { href: "#how", icon, title: "How it works", description: "The request journey, step by step." }),
+        /* @__PURE__ */ jsx(NavBar.MenuLink, { href: "#demo", icon, title: "Demo", description: "Try it on the real application." }),
+        /* @__PURE__ */ jsx(NavBar.MenuLink, { href: "#signature", icon, title: "Signature", description: "What only it does." })
+      ] }),
+      /* @__PURE__ */ jsx(NavBar.Link, { href: "#docs", children: "Docs" })
+    ] })
+  ] });
+}
+export {
+  NavBarMenuOpen as default
+};

package/registry/examples/nav-bar/menu-open.tsx

@@ -0,0 +1,26 @@
+import { NavBar } from "@krizaka/ui/nav-bar";
+
+const icon = (
+  <svg data-kz-icon viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden>
+    <path d="M12 3 19.8 7.5v9L12 21l-7.8-4.5v-9Z" />
+    <circle data-node cx="12" cy="12" r="2.4" fill="currentColor" />
+  </svg>
+);
+
+// A menu in two columns, open: icons whose node lights up under the pointer, the current page tinted.
+export default function NavBarMenuOpen({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  return (
+    <NavBar.Root label="Main" className="mb-72">
+      <NavBar.Brand href="#home">Krizaka</NavBar.Brand>
+      <NavBar.Items defaultValue={defaultOpen ? "products" : undefined}>
+        <NavBar.Menu value="products" label="Products" columns={2} active>
+          <NavBar.MenuLink href="#overview" icon={icon} title="Overview" description="What it does, in one page." active />
+          <NavBar.MenuLink href="#how" icon={icon} title="How it works" description="The request journey, step by step." />
+          <NavBar.MenuLink href="#demo" icon={icon} title="Demo" description="Try it on the real application." />
+          <NavBar.MenuLink href="#signature" icon={icon} title="Signature" description="What only it does." />
+        </NavBar.Menu>
+        <NavBar.Link href="#docs">Docs</NavBar.Link>
+      </NavBar.Items>
+    </NavBar.Root>
+  );
+}

package/registry/examples/nav-bar/site.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/nav-bar/site.js

@@ -0,0 +1,31 @@
+"use client";
+
+// registry/examples/nav-bar/site.tsx
+import { Button } from "@krizaka/ui/button";
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { jsx, jsxs } from "react/jsx-runtime";
+var 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." }
+];
+function NavBarSite() {
+  return /* @__PURE__ */ jsxs(NavBar.Root, { label: "Main", children: [
+    /* @__PURE__ */ jsx(NavBar.Brand, { href: "#home", children: "Krizaka" }),
+    /* @__PURE__ */ jsxs(NavBar.Items, { children: [
+      /* @__PURE__ */ jsx(NavBar.Menu, { label: "Products", children: products.map((p) => /* @__PURE__ */ jsx(NavBar.MenuLink, { ...p }, p.href)) }),
+      /* @__PURE__ */ jsx(NavBar.Link, { href: "#docs", children: "Docs" }),
+      /* @__PURE__ */ jsx(NavBar.Link, { href: "#story", active: true, children: "Our story" })
+    ] }),
+    /* @__PURE__ */ jsxs(NavBar.Actions, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", shape: "pill", className: "hidden sm:inline-flex", children: "Contact" }),
+      /* @__PURE__ */ jsxs(NavBar.Mobile, { openLabel: "Open the menu", closeLabel: "Close the menu", children: [
+        products.map((p) => /* @__PURE__ */ jsx(NavBar.MobileLink, { href: p.href, children: p.title }, p.href)),
+        /* @__PURE__ */ jsx(NavBar.MobileLink, { href: "#story", active: true, children: "Our story" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  NavBarSite as default
+};

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/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/skeleton/paragraph.d.ts

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

package/registry/examples/skeleton/paragraph.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/skeleton/paragraph.tsx
+import { Skeleton, SkeletonText } from "@krizaka/ui/skeleton";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SkeletonParagraph() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-sm flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-2/3" }),
+    /* @__PURE__ */ jsx(SkeletonText, { lines: 4 })
+  ] });
+}
+export {
+  SkeletonParagraph as default
+};

package/registry/examples/skeleton/paragraph.tsx

@@ -0,0 +1,12 @@
+import { Skeleton, SkeletonText } from "@krizaka/ui/skeleton";
+
+// An article on its way: a title, then `SkeletonText` — lines that wrap, the last one shorter. One reflection crosses
+// all of them together, like light across a page, rather than each one pulsing on its own.
+export default function SkeletonParagraph() {
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-3">
+      <Skeleton className="h-5 w-2/3" />
+      <SkeletonText lines={4} />
+    </div>
+  );
+}

package/registry/examples/skeleton/shape-of-content.d.ts

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

package/registry/examples/skeleton/shape-of-content.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/skeleton/shape-of-content.tsx
+import { SkeletonShape } from "@krizaka/ui/skeleton";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CreatorCard({ name, line }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-xl border border-border-default bg-surface-1 p-4", children: [
+    /* @__PURE__ */ jsx("span", { "data-skeleton": true, "aria-hidden": true, className: "h-10 w-10 shrink-0 rounded-full bg-accent-soft" }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("p", { className: "font-semibold text-fg", children: name }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: line })
+    ] })
+  ] });
+}
+function SkeletonShapeOfContent() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-sm flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(SkeletonShape, { children: /* @__PURE__ */ jsx(CreatorCard, { name: "Placeholder name", line: "Placeholder supporters line" }) }),
+    /* @__PURE__ */ jsx(CreatorCard, { name: "Eric Moreau", line: "1,204 supporters \xB7 Paris" })
+  ] });
+}
+export {
+  SkeletonShapeOfContent as default
+};