@krizaka/ui 2.2.0 → 2.4.0

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

@@ -0,0 +1,13 @@
+"use client";
+
+// registry/examples/search-field/native/default.tsx
+import { SearchField } from "@krizaka/ui/native";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function NativeSearchFieldDefault() {
+  const [query, setQuery] = React.useState("sunset");
+  return /* @__PURE__ */ jsx(SearchField, { label: "Search videos", placeholder: "Search videos", value: query, onValueChange: setQuery, clearLabel: "Clear search" });
+}
+export {
+  NativeSearchFieldDefault as default
+};

package/registry/examples/search-field/native/default.tsx

@@ -0,0 +1,7 @@
+import { SearchField } from "@krizaka/ui/native";
+import * as React from "react";
+
+export default function NativeSearchFieldDefault() {
+  const [query, setQuery] = React.useState("sunset");
+  return <SearchField label="Search videos" placeholder="Search videos" value={query} onValueChange={setQuery} clearLabel="Clear search" />;
+}

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

@@ -0,0 +1,30 @@
+"use client";
+
+// registry/examples/search-field/suggestions.tsx
+import { SearchField } from "@krizaka/ui/search-field";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var RECENT = [
+  { value: "sunset", label: "sunset timelapse", meta: "Tag" },
+  { value: "eric", label: "Eric Tremblay", meta: "Creator" },
+  { value: "studio", label: "studio lighting", meta: "2 days ago" }
+];
+function SearchFieldSuggestions() {
+  const [query, setQuery] = React.useState("");
+  const shown = RECENT.filter((s) => s.label.includes(query.toLowerCase()));
+  return /* @__PURE__ */ jsx(
+    SearchField,
+    {
+      label: "Search videos",
+      placeholder: "Search videos",
+      value: query,
+      onValueChange: setQuery,
+      suggestions: shown,
+      suggestionsLabel: "Recent searches",
+      onSuggestionSelect: (s) => setQuery(s.label)
+    }
+  );
+}
+export {
+  SearchFieldSuggestions as default
+};

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

@@ -0,0 +1,27 @@
+"use client";
+
+import { SearchField } from "@krizaka/ui/search-field";
+import * as React from "react";
+
+const RECENT = [
+  { value: "sunset", label: "sunset timelapse", meta: "Tag" },
+  { value: "eric", label: "Eric Tremblay", meta: "Creator" },
+  { value: "studio", label: "studio lighting", meta: "2 days ago" },
+];
+
+// Recent searches under the field: the arrows walk them, Enter picks one.
+export default function SearchFieldSuggestions() {
+  const [query, setQuery] = React.useState("");
+  const shown = RECENT.filter((s) => s.label.includes(query.toLowerCase()));
+  return (
+    <SearchField
+      label="Search videos"
+      placeholder="Search videos"
+      value={query}
+      onValueChange={setQuery}
+      suggestions={shown}
+      suggestionsLabel="Recent searches"
+      onSuggestionSelect={(s) => setQuery(s.label)}
+    />
+  );
+}

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

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/search-field/toolbar.tsx
+import { SearchField } from "@krizaka/ui/search-field";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MODELS = ["Flux 1.1", "Whisper large", "XTTS v2", "Llama 3.3", "Qwen 2.5"];
+function SearchFieldToolbar() {
+  const [query, setQuery] = React.useState("");
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-72 flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(SearchField, { label: "Filter models", placeholder: "Filter models", size: "sm", landmark: false, onSearch: setQuery, debounce: 150 }),
+    /* @__PURE__ */ jsx("ul", { className: "text-sm text-fg-secondary", children: MODELS.filter((m) => m.toLowerCase().includes(query.toLowerCase())).map((m) => /* @__PURE__ */ jsx("li", { children: m }, m)) })
+  ] });
+}
+export {
+  SearchFieldToolbar as default
+};

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

@@ -0,0 +1,21 @@
+"use client";
+
+import { SearchField } from "@krizaka/ui/search-field";
+import * as React from "react";
+
+const MODELS = ["Flux 1.1", "Whisper large", "XTTS v2", "Llama 3.3", "Qwen 2.5"];
+
+// A small field that filters a list as you type (debounced).
+export default function SearchFieldToolbar() {
+  const [query, setQuery] = React.useState("");
+  return (
+    <div className="flex w-72 flex-col gap-2">
+      <SearchField label="Filter models" placeholder="Filter models" size="sm" landmark={false} onSearch={setQuery} debounce={150} />
+      <ul className="text-sm text-fg-secondary">
+        {MODELS.filter((m) => m.toLowerCase().includes(query.toLowerCase())).map((m) => (
+          <li key={m}>{m}</li>
+        ))}
+      </ul>
+    </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
+};

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

@@ -0,0 +1,26 @@
+import { SkeletonShape } from "@krizaka/ui/skeleton";
+
+function CreatorCard({ name, line }: { name: string; line: string }) {
+  return (
+    <div className="flex items-center gap-3 rounded-xl border border-border-default bg-surface-1 p-4">
+      <span data-skeleton aria-hidden className="h-10 w-10 shrink-0 rounded-full bg-accent-soft" />
+      <div className="min-w-0">
+        <p className="font-semibold text-fg">{name}</p>
+        <p className="text-sm text-fg-secondary">{line}</p>
+      </div>
+    </div>
+  );
+}
+
+// The skeleton of the real card: the same component with placeholder words, its text and media turned into shapes.
+// The layout is exact — nothing drawn twice, nothing jumps when the data arrives. `data-skeleton` marks any other shape.
+export default function SkeletonShapeOfContent() {
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-3">
+      <SkeletonShape>
+        <CreatorCard name="Placeholder name" line="Placeholder supporters line" />
+      </SkeletonShape>
+      <CreatorCard name="Eric Moreau" line="1,204 supporters · Paris" />
+    </div>
+  );
+}

package/registry/examples/spinner/default.js

@@ -2,9 +2,12 @@
 
 // registry/examples/spinner/default.tsx
 import { Spinner } from "@krizaka/ui/spinner";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 function SpinnerDefault() {
-  return /* @__PURE__ */ jsx(Spinner, { label: "Loading" });
+  return /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 text-sm text-fg-secondary", children: [
+    /* @__PURE__ */ jsx(Spinner, { label: "Searching", size: "sm" }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "Searching your library\u2026" })
+  ] });
 }
 export {
   SpinnerDefault as default

package/registry/examples/spinner/default.tsx

@@ -1,5 +1,11 @@
 import { Spinner } from "@krizaka/ui/spinner";
 
+// A short wait in place: light travels around the hexagon, the node breathes. Still and legible under reduced motion.
 export default function SpinnerDefault() {
-  return <Spinner label="Loading" />;
+  return (
+    <p className="flex items-center gap-2 text-sm text-fg-secondary">
+      <Spinner label="Searching" size="sm" />
+      <span aria-hidden>Searching your library…</span>
+    </p>
+  );
 }

package/registry/examples/spinner/sizes.js

@@ -7,7 +7,8 @@ function SpinnerSizes() {
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
     /* @__PURE__ */ jsx(Spinner, { label: "Loading", size: "sm" }),
     /* @__PURE__ */ jsx(Spinner, { label: "Loading", size: "md" }),
-    /* @__PURE__ */ jsx(Spinner, { label: "Loading", size: "lg" })
+    /* @__PURE__ */ jsx(Spinner, { label: "Loading", size: "lg" }),
+    /* @__PURE__ */ jsx(Spinner, { label: "Loading", size: "lg", className: "text-fg-secondary" })
   ] });
 }
 export {

package/registry/examples/spinner/sizes.tsx

@@ -1,11 +1,13 @@
 import { Spinner } from "@krizaka/ui/spinner";
 
+// The minimal API, last: `size` sm · md · lg; the colour is `currentColor` (the accent by default, or `className`).
 export default function SpinnerSizes() {
   return (
     <div className="flex items-center gap-4">
       <Spinner label="Loading" size="sm" />
       <Spinner label="Loading" size="md" />
       <Spinner label="Loading" size="lg" />
+      <Spinner label="Loading" size="lg" className="text-fg-secondary" />
     </div>
   );
 }

package/registry/examples/spinner/value.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/spinner/value.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/spinner/value.tsx
+import { Spinner } from "@krizaka/ui/spinner";
+import { jsx } from "react/jsx-runtime";
+function SpinnerValue() {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: [0.25, 0.6, 0.9].map((value) => /* @__PURE__ */ jsx(Spinner, { label: `Uploading, ${Math.round(value * 100)} %`, value, size: "lg" }, value)) });
+}
+export {
+  SpinnerValue as default
+};

package/registry/examples/spinner/value.tsx

@@ -0,0 +1,12 @@
+import { Spinner } from "@krizaka/ui/spinner";
+
+// `value` (0–1): the trace grows to what is done — a determinate wait in the same small footprint.
+export default function SpinnerValue() {
+  return (
+    <div className="flex items-center gap-4">
+      {[0.25, 0.6, 0.9].map((value) => (
+        <Spinner key={value} label={`Uploading, ${Math.round(value * 100)} %`} value={value} size="lg" />
+      ))}
+    </div>
+  );
+}

package/registry/examples/stepper/checkout.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/stepper/checkout.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/stepper/checkout.tsx
+import { Stepper } from "@krizaka/ui/stepper";
+import { jsx } from "react/jsx-runtime";
+var labels = { done: "Done", current: "Current step", upcoming: "Upcoming", error: "Failed" };
+function StepperCheckout() {
+  return /* @__PURE__ */ jsx(
+    Stepper,
+    {
+      "aria-label": "Checkout",
+      orientation: "horizontal",
+      labels,
+      current: 1,
+      className: "w-full max-w-xl",
+      steps: [{ title: "Plan" }, { title: "Payment" }, { title: "Confirmation" }]
+    }
+  );
+}
+export {
+  StepperCheckout as default
+};

package/registry/examples/stepper/checkout.tsx

@@ -0,0 +1,17 @@
+import { Stepper } from "@krizaka/ui/stepper";
+
+const labels = { done: "Done", current: "Current step", upcoming: "Upcoming", error: "Failed" };
+
+// A short journey, horizontal: the connectors fill as it advances.
+export default function StepperCheckout() {
+  return (
+    <Stepper
+      aria-label="Checkout"
+      orientation="horizontal"
+      labels={labels}
+      current={1}
+      className="w-full max-w-xl"
+      steps={[{ title: "Plan" }, { title: "Payment" }, { title: "Confirmation" }]}
+    />
+  );
+}

package/registry/examples/stepper/failed.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/stepper/failed.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/stepper/failed.tsx
+import { Button } from "@krizaka/ui/button";
+import { Stepper } from "@krizaka/ui/stepper";
+import { jsx } from "react/jsx-runtime";
+var labels = { done: "Done", current: "In progress", upcoming: "Upcoming", error: "Failed" };
+function StepperFailed() {
+  return /* @__PURE__ */ jsx(
+    Stepper,
+    {
+      "aria-label": "Payout",
+      labels,
+      current: 1,
+      className: "w-full max-w-sm",
+      steps: [
+        { title: "Requested", description: "\u20AC1,240.00" },
+        { title: "Bank transfer", description: "The bank refused the account number", status: "error", content: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", children: "Update the account" }) },
+        { title: "Received" }
+      ]
+    }
+  );
+}
+export {
+  StepperFailed as default
+};

package/registry/examples/stepper/failed.tsx

@@ -0,0 +1,21 @@
+import { Button } from "@krizaka/ui/button";
+import { Stepper } from "@krizaka/ui/stepper";
+
+const labels = { done: "Done", current: "In progress", upcoming: "Upcoming", error: "Failed" };
+
+// A step that failed says so (a cross, the danger colour, “Failed” in words) and offers what to do next.
+export default function StepperFailed() {
+  return (
+    <Stepper
+      aria-label="Payout"
+      labels={labels}
+      current={1}
+      className="w-full max-w-sm"
+      steps={[
+        { title: "Requested", description: "€1,240.00" },
+        { title: "Bank transfer", description: "The bank refused the account number", status: "error", content: <Button size="sm" variant="outline">Update the account</Button> },
+        { title: "Received" },
+      ]}
+    />
+  );
+}

package/registry/examples/stepper/job.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/stepper/job.js

@@ -0,0 +1,32 @@
+"use client";
+
+// registry/examples/stepper/job.tsx
+import { Progress } from "@krizaka/ui/progress";
+import { Stepper } from "@krizaka/ui/stepper";
+import { jsx } from "react/jsx-runtime";
+var labels = { done: "Done", current: "In progress", upcoming: "Upcoming", error: "Failed" };
+function StepperJob() {
+  return /* @__PURE__ */ jsx(
+    Stepper,
+    {
+      "aria-label": "Publishing \u201CNight walk\u201D",
+      labels,
+      current: 2,
+      className: "w-full max-w-sm",
+      steps: [
+        { title: "Uploaded", description: "1.2 GB in 48 s" },
+        { title: "Checked", description: "Format, rights, safety" },
+        {
+          title: "Transcoding",
+          description: "4K, 1080p, 720p",
+          value: 0.58,
+          content: /* @__PURE__ */ jsx(Progress, { label: "Transcoding", value: 58, eta: "About 2 min left", showLabel: true, size: "sm" })
+        },
+        { title: "Published", description: "Visible to your supporters" }
+      ]
+    }
+  );
+}
+export {
+  StepperJob as default
+};

package/registry/examples/stepper/job.tsx

@@ -0,0 +1,28 @@
+import { Progress } from "@krizaka/ui/progress";
+import { Stepper } from "@krizaka/ui/stepper";
+
+const labels = { done: "Done", current: "In progress", upcoming: "Upcoming", error: "Failed" };
+
+// A video job in steps: done ones checked, the current one traced and growing to its value with its own progress and
+// time left, the next ones waiting. Every state is said in words for assistive technology.
+export default function StepperJob() {
+  return (
+    <Stepper
+      aria-label="Publishing “Night walk”"
+      labels={labels}
+      current={2}
+      className="w-full max-w-sm"
+      steps={[
+        { title: "Uploaded", description: "1.2 GB in 48 s" },
+        { title: "Checked", description: "Format, rights, safety" },
+        {
+          title: "Transcoding",
+          description: "4K, 1080p, 720p",
+          value: 0.58,
+          content: <Progress label="Transcoding" value={58} eta="About 2 min left" showLabel size="sm" />,
+        },
+        { title: "Published", description: "Visible to your supporters" },
+      ]}
+    />
+  );
+}

package/registry/examples/tag-input/recipients.d.ts

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

package/registry/examples/tag-input/recipients.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/tag-input/recipients.tsx
+import { TagInput } from "@krizaka/ui/tag-input";
+import { jsx } from "react/jsx-runtime";
+var EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function TagInputRecipients() {
+  return /* @__PURE__ */ jsx(
+    TagInput,
+    {
+      label: "Invite by e-mail",
+      placeholder: "name@example.com",
+      defaultValue: ["ines@krizaka.com"],
+      separators: [",", " "],
+      normalize: (value) => value.trim().toLowerCase(),
+      validate: (value) => EMAIL.test(value) ? null : `\u201C${value}\u201D is not an e-mail address.`,
+      labels: { create: (value) => `Invite ${value}` }
+    }
+  );
+}
+export {
+  TagInputRecipients as default
+};

package/registry/examples/tag-input/recipients.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { TagInput } from "@krizaka/ui/tag-input";
+
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+// Paste “a@x.com, b@y.org” and both are added; what is not an address is refused, with the reason.
+export default function TagInputRecipients() {
+  return (
+    <TagInput
+      label="Invite by e-mail"
+      placeholder="name@example.com"
+      defaultValue={["ines@krizaka.com"]}
+      separators={[",", " "]}
+      normalize={(value) => value.trim().toLowerCase()}
+      validate={(value) => (EMAIL.test(value) ? null : `“${value}” is not an e-mail address.`)}
+      labels={{ create: (value) => `Invite ${value}` }}
+    />
+  );
+}

package/registry/examples/tag-input/video-tags.d.ts

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

package/registry/examples/tag-input/video-tags.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/tag-input/video-tags.tsx
+import { TagInput } from "@krizaka/ui/tag-input";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function TagInputVideoTags() {
+  const [tags, setTags] = React.useState(["montreal", "sunset"]);
+  return /* @__PURE__ */ jsx(
+    TagInput,
+    {
+      label: "Tags",
+      placeholder: "Add a tag",
+      value: tags,
+      onValueChange: setTags,
+      suggestions: ["timelapse", "travel", "skyline", "golden hour", "drone"],
+      normalize: (tag) => tag.trim().toLowerCase().replace(/^#/, ""),
+      max: 10,
+      hint: "Up to 10 tags, separated by commas.",
+      labels: { create: (tag) => `Add \u201C${tag}\u201D`, remove: (tag) => `Remove ${tag}` }
+    }
+  );
+}
+export {
+  TagInputVideoTags as default
+};

package/registry/examples/tag-input/video-tags.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { TagInput } from "@krizaka/ui/tag-input";
+import * as React from "react";
+
+// Lower case, no “#”: “#Sunset” and “sunset” are one tag.
+export default function TagInputVideoTags() {
+  const [tags, setTags] = React.useState(["montreal", "sunset"]);
+  return (
+    <TagInput
+      label="Tags"
+      placeholder="Add a tag"
+      value={tags}
+      onValueChange={setTags}
+      suggestions={["timelapse", "travel", "skyline", "golden hour", "drone"]}
+      normalize={(tag) => tag.trim().toLowerCase().replace(/^#/, "")}
+      max={10}
+      hint="Up to 10 tags, separated by commas."
+      labels={{ create: (tag) => `Add “${tag}”`, remove: (tag) => `Remove ${tag}` }}
+    />
+  );
+}

package/registry/examples/toast/grouped.d.ts

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

package/registry/examples/toast/grouped.js

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/toast/grouped.tsx
+import { Button } from "@krizaka/ui/button";
+import { groupedToast, Toaster } from "@krizaka/ui/toast";
+import { useEffect } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var toasterId = "grouped";
+var message = () => groupedToast("messages", "New message from @maya", { toasterId, countLabel: (n) => `${n} new messages` });
+function ToastGrouped({ defaultOpen = false }) {
+  useEffect(() => {
+    if (defaultOpen) for (let i = 0; i < 5; i++) message();
+  }, [defaultOpen]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Toaster, { id: toasterId, label: "Notifications", closeLabel: "Dismiss" }),
+    /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: message, children: "Receive a message" })
+  ] });
+}
+export {
+  ToastGrouped as default
+};