@krizaka/ui 2.5.0 → 2.6.0

package/dist/page.d.ts

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { SectionBackdropProps } from './section-backdrop.js';
+import 'tailwind-variants';
+
+type PageSize = "narrow" | "default" | "wide" | "full";
+type PageProps = React.HTMLAttributes<HTMLElement> & {
+    /**
+     * The width of the content: `default` (72rem, `--kz-page-max`), `narrow` (48rem, a reading column), `wide`
+     * (88rem, documentation with a sidebar), `full` (the gutters only).
+     * @default "default"
+     */
+    size?: PageSize;
+    /** The element: `div` (default), `main`, `header`, `footer`, `section` or `article`. */
+    as?: "div" | "main" | "header" | "footer" | "section" | "article";
+};
+/** The page frame: centred, at most `--kz-page-max` wide, with the gutters of `--kz-page-gutter` (16 → 32 px). */
+declare function Page({ size, as: Tag, className, ...props }: PageProps): React.JSX.Element;
+type SectionHeadingProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
+    /** The id of the title: the section's anchor and its accessible name. */
+    id?: string;
+    /** A short mono line above the title (the section's subject). */
+    eyebrow?: React.ReactNode;
+    /** The title. */
+    title: React.ReactNode;
+    /** One or two sentences under the title. */
+    lead?: React.ReactNode;
+    /** Actions on the right of the heading (a link to everything, a filter). */
+    actions?: React.ReactNode;
+    /**
+     * The level of the title.
+     * @default 2
+     */
+    level?: 2 | 3;
+    /**
+     * `md` for a section that argues, `sm` for a section of a reading page.
+     * @default "md"
+     */
+    size?: "sm" | "md";
+    /**
+     * `center` for a heading that stands alone above a grid.
+     * @default "start"
+     */
+    align?: "start" | "center";
+    /** Rises into place once, as it enters the viewport (`[data-reveal]`, MotionObserver). Never on the first screen. */
+    reveal?: boolean;
+};
+/** The head of a section: eyebrow (mono, the accent), title, lead — and its actions on the right. */
+declare function SectionHeading({ id, eyebrow, title, lead, actions, level, size, align, reveal, className, ...props }: SectionHeadingProps): React.JSX.Element;
+type SectionProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The id of the title (and the anchor of the section). Required with a `title`. */
+    id?: string;
+    /** The heading's eyebrow. */
+    eyebrow?: React.ReactNode;
+    /** The section's title: an `h2` (a `SectionHeading`), which names the section for assistive technology. */
+    title?: React.ReactNode;
+    /** The heading's lead. */
+    lead?: React.ReactNode;
+    /** The heading's actions. */
+    actions?: React.ReactNode;
+    /**
+     * The heading's size: `md` for a page that argues, `sm` for a reading page.
+     * @default "md"
+     */
+    headingSize?: "sm" | "md";
+    /**
+     * The heading's alignment.
+     * @default "start"
+     */
+    headingAlign?: "start" | "center";
+    /** The heading rises into place once (never on the first screen). */
+    reveal?: boolean;
+    /** A hairline above the section, inside the gutters: the transition between two sections of the same surface. */
+    divider?: boolean;
+    /**
+     * The vertical space above and below: `sm` (a reading page), `md`, `lg` (a page's main moments).
+     * @default "md"
+     */
+    spacing?: "sm" | "md" | "lg";
+    /**
+     * The width of the content.
+     * @default "default"
+     */
+    size?: PageSize;
+    /** The brand's colour transition behind the section (SectionBackdrop): `true`, or its props (`direction`, `grid`…). */
+    backdrop?: boolean | Omit<SectionBackdropProps, "as" | "children">;
+};
+/**
+ * A section of a page: full-bleed (its backdrop reaches the edges), its content in the page frame, its heading on top.
+ * Sections follow each other on one rhythm; a `divider` or a `backdrop` marks the transition.
+ */
+declare function Section({ id, eyebrow, title, lead, actions, headingSize, headingAlign, reveal, divider, spacing, size, backdrop, className, children, ...props }: SectionProps): React.JSX.Element;
+type TicksProps = {
+    /** A sentence where words between backticks are code: "Every request carries a `requestId`." */
+    children: string;
+};
+/** A sentence of a message catalogue where words between backticks read as code — no markup in the translations. */
+declare function Ticks({ children }: TicksProps): React.JSX.Element;
+interface Fact {
+    /** A few words: `npm 2.5.0`, `Maven Central`, `in progress`. */
+    label: string;
+    /**
+     * `ok` — published, usable today; `wip` — in progress, said honestly; `neutral` — a fact.
+     * @default "neutral"
+     */
+    tone?: "ok" | "wip" | "neutral";
+    /** Where the fact is proven (a registry page): the fact becomes a link. */
+    href?: string;
+}
+type FactsProps = React.HTMLAttributes<HTMLUListElement> & {
+    /** The facts, in reading order. */
+    items: readonly Fact[];
+};
+/** Compact facts on one line — a dot that says the state, a few mono words. Links open in a new tab. */
+declare function Facts({ items, className, ...props }: FactsProps): React.JSX.Element;
+
+export { type Fact, Facts, type FactsProps, Page, type PageProps, type PageSize, Section, SectionHeading, type SectionHeadingProps, type SectionProps, Ticks, type TicksProps };

package/dist/page.js

@@ -0,0 +1,17 @@
+import {
+  Facts,
+  Page,
+  Section,
+  SectionHeading,
+  Ticks
+} from "./chunk-K3SWZXYT.js";
+import "./chunk-XVLWVTQA.js";
+import "./chunk-FJDSLNXK.js";
+export {
+  Facts,
+  Page,
+  Section,
+  SectionHeading,
+  Ticks
+};
+//# sourceMappingURL=page.js.map

package/dist/page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/pagination.js

@@ -1,29 +1,10 @@
-// src/pagination/pagination.tsx
-import { tv } from "tailwind-variants";
-
-// src/glyphs.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function Glyph({ className = "h-4 w-4", fill, children }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      className,
-      fill: fill ? "currentColor" : "none",
-      stroke: fill ? "none" : "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": true,
-      focusable: "false",
-      children
-    }
-  );
-}
-var ChevronGlyph = ({ direction = "down", ...p }) => /* @__PURE__ */ jsx(Glyph, { ...p, children: /* @__PURE__ */ jsx("path", { d: { left: "m15 6-6 6 6 6", right: "m9 6 6 6-6 6", up: "m6 15 6-6 6 6", down: "m6 9 6 6 6-6" }[direction] }) });
+import {
+  ChevronGlyph
+} from "./chunk-XCBVFMNV.js";
 
 // src/pagination/pagination.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var pagination = tv({
   slots: {
     root: "@container flex w-full flex-wrap items-center justify-between gap-3 text-sm",
@@ -65,12 +46,12 @@ function pageRange(page, pageCount, siblings = 1, boundaries = 1) {
 function Item({ href, onClick, disabled, current, label, className, children }) {
   const common = { "aria-label": label, "aria-current": current ? "page" : void 0, className };
   if (href && !disabled) {
-    return /* @__PURE__ */ jsx2("a", { href, onClick, ...common, children });
+    return /* @__PURE__ */ jsx("a", { href, onClick, ...common, children });
   }
   if (href) {
-    return /* @__PURE__ */ jsx2("a", { role: "link", "aria-disabled": true, ...common, children });
+    return /* @__PURE__ */ jsx("a", { role: "link", "aria-disabled": true, ...common, children });
   }
-  return /* @__PURE__ */ jsx2("button", { type: "button", onClick, disabled, ...common, children });
+  return /* @__PURE__ */ jsx("button", { type: "button", onClick, disabled, ...common, children });
 }
 function Pagination({
   page = 1,
@@ -101,25 +82,25 @@ function Pagination({
   const canNext = paged ? current < count : Boolean(hasNext);
   const go = (target) => () => onPageChange?.(target);
   const href = (target) => paged && getHref ? getHref(target) : void 0;
-  return /* @__PURE__ */ jsxs2("nav", { "aria-label": labels.nav, className: s.root({ className }), ...props, children: [
-    status !== void 0 || pageSizeOptions ? /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-center gap-4", children: [
-      status !== void 0 && /* @__PURE__ */ jsx2("p", { className: s.status(), children: status }),
-      pageSizeOptions && pageSize !== void 0 && /* @__PURE__ */ jsxs2("label", { className: s.size(), children: [
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": labels.nav, className: s.root({ className }), ...props, children: [
+    status !== void 0 || pageSizeOptions ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [
+      status !== void 0 && /* @__PURE__ */ jsx("p", { className: s.status(), children: status }),
+      pageSizeOptions && pageSize !== void 0 && /* @__PURE__ */ jsxs("label", { className: s.size(), children: [
         labels.pageSize,
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx(
           "select",
           {
             className: s.select(),
             value: pageSize,
             disabled,
             onChange: (event) => onPageSizeChange?.(Number(event.target.value)),
-            children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx2("option", { value: size, children: size }, size))
+            children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
           }
         )
       ] })
     ] }) : null,
-    /* @__PURE__ */ jsxs2("ul", { className: s.list(), children: [
-      /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs("ul", { className: s.list(), children: [
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
         Item,
         {
           href: href(current - 1),
@@ -128,18 +109,18 @@ function Pagination({
           label: labels.previous,
           className: s.item({ className: s.edge() }),
           children: [
-            /* @__PURE__ */ jsx2(ChevronGlyph, { direction: "left" }),
-            /* @__PURE__ */ jsx2("span", { className: "hidden @lg:inline", children: labels.previous })
+            /* @__PURE__ */ jsx(ChevronGlyph, { direction: "left" }),
+            /* @__PURE__ */ jsx("span", { className: "hidden @lg:inline", children: labels.previous })
           ]
         }
       ) }),
-      paged && /* @__PURE__ */ jsxs2(Fragment, { children: [
-        /* @__PURE__ */ jsx2("li", { className: s.pages(), children: /* @__PURE__ */ jsx2("ul", { className: "contents", children: pageRange(current, count, siblings, boundaries).map(
-          (n, i) => n === "\u2026" ? /* @__PURE__ */ jsx2("li", { "aria-hidden": true, className: s.ellipsis(), children: "\u2026" }, `gap-${i}`) : /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(Item, { href: href(n), onClick: go(n), disabled, current: n === current, label: labels.page(n), className: s.item(), children: n }) }, n)
+      paged && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("li", { className: s.pages(), children: /* @__PURE__ */ jsx("ul", { className: "contents", children: pageRange(current, count, siblings, boundaries).map(
+          (n, i) => n === "\u2026" ? /* @__PURE__ */ jsx("li", { "aria-hidden": true, className: s.ellipsis(), children: "\u2026" }, `gap-${i}`) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Item, { href: href(n), onClick: go(n), disabled, current: n === current, label: labels.page(n), className: s.item(), children: n }) }, n)
         ) }) }),
-        /* @__PURE__ */ jsx2("li", { className: s.compact(), children: labels.compact(current, count) })
+        /* @__PURE__ */ jsx("li", { className: s.compact(), children: labels.compact(current, count) })
       ] }),
-      /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsxs2(
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
         Item,
         {
           href: href(current + 1),
@@ -148,8 +129,8 @@ function Pagination({
           label: labels.next,
           className: s.item({ className: s.edge() }),
           children: [
-            /* @__PURE__ */ jsx2("span", { className: "hidden @lg:inline", children: labels.next }),
-            /* @__PURE__ */ jsx2(ChevronGlyph, { direction: "right" })
+            /* @__PURE__ */ jsx("span", { className: "hidden @lg:inline", children: labels.next }),
+            /* @__PURE__ */ jsx(ChevronGlyph, { direction: "right" })
           ]
         }
       ) })

package/dist/pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/pagination/pagination.tsx","../src/glyphs.tsx"],"sourcesContent":["// Server-safe: no hook, no context. A `<nav>` named by `labels.nav`; the current page is `aria-current=\"page\"`.\n// Two modes: pages (`page` + `pageCount`: numbers with ellipses, which fold into \"Page 3 of 12\" in a narrow container)\n// and cursor (`hasPrevious` / `hasNext`: an API that only knows the next and previous pages). Links (`getHref`) when\n// the page lives in the address — the right default for a list a search engine or a shared link should reach — or\n// buttons (`onPageChange`).\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { ChevronGlyph } from \"../glyphs\";\n\nexport const pagination = tv({\n  slots: {\n    root: \"@container flex w-full flex-wrap items-center justify-between gap-3 text-sm\",\n    list: \"flex items-center gap-1\",\n    pages: \"hidden items-center gap-1 @md:flex\",\n    compact: \"px-2 text-xs font-semibold tabular-nums text-fg-secondary @md:hidden\",\n    item:\n      \"inline-flex h-9 min-w-9 select-none items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-semibold tabular-nums text-fg-secondary \" +\n      \"transition-colors hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"aria-[current=page]:bg-accent aria-[current=page]:text-on-accent aria-[current=page]:hover:bg-accent \" +\n      \"aria-disabled:pointer-events-none aria-disabled:opacity-40 disabled:pointer-events-none disabled:opacity-40\",\n    edge: \"border border-border-default bg-surface-1 px-3\",\n    ellipsis: \"inline-flex h-9 min-w-6 items-end justify-center pb-2 text-fg-muted\",\n    status: \"text-xs text-fg-secondary tabular-nums\",\n    size: \"flex items-center gap-2 text-xs text-fg-secondary\",\n    select:\n      \"h-9 rounded-lg border border-border-default bg-surface-2 px-2 text-sm text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n});\n\nexport type PaginationLabels = {\n  /** The accessible name of the navigation (\"Pagination\", \"Pages of results\"). */\n  nav: string;\n  /** The previous-page control. */\n  previous: string;\n  /** The next-page control. */\n  next: string;\n  /** The accessible name of a page number: `(3) => \"Page 3\"`. */\n  page: (page: number) => string;\n  /** The folded form, in a narrow container: `(3, 12) => \"Page 3 of 12\"`. */\n  compact: (page: number, pageCount: number) => string;\n  /** The label of the page-size select (\"Rows per page\"). */\n  pageSize: string;\n};\n\n/** The English words, for a quick start — pass your translations through `labels`. */\nexport const paginationLabels: PaginationLabels = {\n  nav: \"Pagination\",\n  previous: \"Previous\",\n  next: \"Next\",\n  page: (page) => `Page ${page}`,\n  compact: (page, count) => `Page ${page} of ${count}`,\n  pageSize: \"Rows per page\",\n};\n\n/**\n * The pages to show: the first and last `boundaries`, the current page and its `siblings`, and `\"…\"` where pages are\n * skipped. A gap of a single page shows that page instead of an ellipsis; few pages are all shown.\n */\nexport function pageRange(page: number, pageCount: number, siblings = 1, boundaries = 1): (number | \"…\")[] {\n  // Few enough pages to show them all in the room the folded form takes: no ellipsis.\n  if (pageCount <= 2 * boundaries + 2 * siblings + 3) return Array.from({ length: Math.max(0, pageCount) }, (_, i) => i + 1);\n  const pages = new Set<number>();\n  for (let i = 1; i <= Math.min(boundaries, pageCount); i += 1) pages.add(i);\n  for (let i = Math.max(1, pageCount - boundaries + 1); i <= pageCount; i += 1) pages.add(i);\n  for (let i = Math.max(1, page - siblings); i <= Math.min(pageCount, page + siblings); i += 1) pages.add(i);\n  const sorted = [...pages].sort((a, b) => a - b);\n  const out: (number | \"…\")[] = [];\n  sorted.forEach((n, i) => {\n    const prev = sorted[i - 1];\n    if (prev !== undefined && n - prev === 2) out.push(prev + 1);\n    else if (prev !== undefined && n - prev > 2) out.push(\"…\");\n    out.push(n);\n  });\n  return out;\n}\n\nexport type PaginationProps = Omit<React.ComponentProps<\"nav\">, \"children\"> & {\n  /** Pages mode: the current page, from 1. */\n  page?: number;\n  /** Pages mode: how many pages there are. Without it, the pagination is in cursor mode. */\n  pageCount?: number;\n  /** Called with the page asked for (buttons). Ignored for the pages `getHref` turns into links. */\n  onPageChange?: (page: number) => void;\n  /** The address of a page: the pages become links (crawlable, shareable, the state in the URL). */\n  getHref?: (page: number) => string;\n  /** Cursor mode: whether there is a previous page. */\n  hasPrevious?: boolean;\n  /** Cursor mode: whether there is a next page. */\n  hasNext?: boolean;\n  /** Cursor mode: called by the previous control. */\n  onPrevious?: () => void;\n  /** Cursor mode: called by the next control. */\n  onNext?: () => void;\n  /** Pages shown on each side of the current one. Default 1. */\n  siblings?: number;\n  /** Pages always shown at each end. Default 1. */\n  boundaries?: number;\n  /** A text beside the controls, read as is: \"41–60 of 1,284\", \"12 results\". */\n  status?: React.ReactNode;\n  /** The page size, with `pageSizeOptions` and `onPageSizeChange`: a select of rows per page. */\n  pageSize?: number;\n  /** The sizes offered (`[10, 20, 50]`). */\n  pageSizeOptions?: readonly number[];\n  /** Called with the size chosen. */\n  onPageSizeChange?: (size: number) => void;\n  /** Disables every control (a page is loading). */\n  disabled?: boolean;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<PaginationLabels>;\n};\n\ntype ItemProps = {\n  href?: string;\n  onClick?: () => void;\n  disabled?: boolean;\n  current?: boolean;\n  label: string;\n  className: string;\n  children: React.ReactNode;\n};\n\nfunction Item({ href, onClick, disabled, current, label, className, children }: ItemProps) {\n  const common = { \"aria-label\": label, \"aria-current\": current ? (\"page\" as const) : undefined, className };\n  if (href && !disabled) {\n    return (\n      <a href={href} onClick={onClick} {...common}>\n        {children}\n      </a>\n    );\n  }\n  if (href) {\n    return (\n      <a role=\"link\" aria-disabled {...common}>\n        {children}\n      </a>\n    );\n  }\n  return (\n    <button type=\"button\" onClick={onClick} disabled={disabled} {...common}>\n      {children}\n    </button>\n  );\n}\n\n/** Moves through a long list: page numbers (folded on a narrow screen) or previous / next on a cursor. */\nexport function Pagination({\n  page = 1,\n  pageCount,\n  onPageChange,\n  getHref,\n  hasPrevious,\n  hasNext,\n  onPrevious,\n  onNext,\n  siblings = 1,\n  boundaries = 1,\n  status,\n  pageSize,\n  pageSizeOptions,\n  onPageSizeChange,\n  disabled,\n  labels: given,\n  className,\n  ...props\n}: PaginationProps) {\n  const s = pagination();\n  const labels = { ...paginationLabels, ...given };\n  const paged = pageCount !== undefined;\n  const count = Math.max(1, pageCount ?? 1);\n  const current = Math.min(Math.max(1, page), count);\n  const canPrevious = paged ? current > 1 : Boolean(hasPrevious);\n  const canNext = paged ? current < count : Boolean(hasNext);\n  const go = (target: number) => () => onPageChange?.(target);\n  const href = (target: number) => (paged && getHref ? getHref(target) : undefined);\n\n  return (\n    <nav aria-label={labels.nav} className={s.root({ className })} {...props}>\n      {status !== undefined || pageSizeOptions ? (\n        <div className=\"flex flex-wrap items-center gap-4\">\n          {status !== undefined && <p className={s.status()}>{status}</p>}\n          {pageSizeOptions && pageSize !== undefined && (\n            <label className={s.size()}>\n              {labels.pageSize}\n              <select\n                className={s.select()}\n                value={pageSize}\n                disabled={disabled}\n                onChange={(event) => onPageSizeChange?.(Number(event.target.value))}\n              >\n                {pageSizeOptions.map((size) => (\n                  <option key={size} value={size}>\n                    {size}\n                  </option>\n                ))}\n              </select>\n            </label>\n          )}\n        </div>\n      ) : null}\n      <ul className={s.list()}>\n        <li>\n          <Item\n            href={href(current - 1)}\n            onClick={paged ? go(current - 1) : onPrevious}\n            disabled={disabled || !canPrevious}\n            label={labels.previous}\n            className={s.item({ className: s.edge() })}\n          >\n            <ChevronGlyph direction=\"left\" />\n            <span className=\"hidden @lg:inline\">{labels.previous}</span>\n          </Item>\n        </li>\n        {paged && (\n          <>\n            <li className={s.pages()}>\n              <ul className=\"contents\">\n                {pageRange(current, count, siblings, boundaries).map((n, i) =>\n                  n === \"…\" ? (\n                    <li key={`gap-${i}`} aria-hidden className={s.ellipsis()}>\n                      …\n                    </li>\n                  ) : (\n                    <li key={n}>\n                      <Item href={href(n)} onClick={go(n)} disabled={disabled} current={n === current} label={labels.page(n)} className={s.item()}>\n                        {n}\n                      </Item>\n                    </li>\n                  ),\n                )}\n              </ul>\n            </li>\n            <li className={s.compact()}>\n              {labels.compact(current, count)}\n            </li>\n          </>\n        )}\n        <li>\n          <Item\n            href={href(current + 1)}\n            onClick={paged ? go(current + 1) : onNext}\n            disabled={disabled || !canNext}\n            label={labels.next}\n            className={s.item({ className: s.edge() })}\n          >\n            <span className=\"hidden @lg:inline\">{labels.next}</span>\n            <ChevronGlyph direction=\"right\" />\n          </Item>\n        </li>\n      </ul>\n    </nav>\n  );\n}\n","// The small line glyphs the data and media primitives draw (play, volume, search, chevrons…): decorative, 24-unit\n// box, `currentColor`, sized by the caller's class. Shared by the entries that need them; never exported on its own —\n// a product draws its own icons with @krizaka/icons.\nimport type * as React from \"react\";\n\ntype GlyphProps = { className?: string };\n\nfunction Glyph({ className = \"h-4 w-4\", fill, children }: GlyphProps & { fill?: boolean; children: React.ReactNode }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className={className}\n      fill={fill ? \"currentColor\" : \"none\"}\n      stroke={fill ? \"none\" : \"currentColor\"}\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      focusable=\"false\"\n    >\n      {children}\n    </svg>\n  );\n}\n\nexport const PlayGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <path d=\"M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z\" />\n  </Glyph>\n);\nexport const PauseGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n  </Glyph>\n);\nexport const VolumeGlyph = ({ muted, ...p }: GlyphProps & { muted?: boolean }) => (\n  <Glyph {...p}>\n    <path d=\"M11 5 6 9H3v6h3l5 4V5Z\" />\n    {muted ? <path d=\"m22 9-6 6m0-6 6 6\" /> : <path d=\"M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13\" />}\n  </Glyph>\n);\nexport const FullscreenGlyph = ({ exit, ...p }: GlyphProps & { exit?: boolean }) => (\n  <Glyph {...p}>\n    {exit ? <path d=\"M9 4v5H4m11-5v5h5M9 20v-5H4m11 5v-5h5\" /> : <path d=\"M4 9V4h5m6 0h5v5M4 15v5h5m11-5v5h-5\" />}\n  </Glyph>\n);\nexport const CaptionsGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <path d=\"M10 10.5a2 2 0 1 0 0 3M17 10.5a2 2 0 1 0 0 3\" />\n  </Glyph>\n);\nexport const PipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <rect x=\"12\" y=\"12\" width=\"6\" height=\"4\" rx=\"1\" />\n  </Glyph>\n);\nexport const SearchGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"m20 20-3.5-3.5\" />\n  </Glyph>\n);\nexport const CloseGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </Glyph>\n);\nexport const ChevronGlyph = ({ direction = \"down\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" | \"up\" | \"down\" }) => (\n  <Glyph {...p}>\n    <path d={{ left: \"m15 6-6 6 6 6\", right: \"m9 6 6 6-6 6\", up: \"m6 15 6-6 6 6\", down: \"m6 9 6 6 6-6\" }[direction]} />\n  </Glyph>\n);\nexport const CheckGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M20 6 9 17l-5-5\" />\n  </Glyph>\n);\nexport const PlusGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 5v14M5 12h14\" />\n  </Glyph>\n);\nexport const CalendarGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" />\n    <path d=\"M3 10h18M8 3v4M16 3v4\" />\n  </Glyph>\n);\nexport const UploadGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 16V4m0 0L7 9m5-5 5 5\" />\n    <path d=\"M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\" />\n  </Glyph>\n);\nexport const FileGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z\" />\n    <path d=\"M14 3v5h5\" />\n  </Glyph>\n);\nexport const CameraGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z\" />\n    <circle cx=\"12\" cy=\"13.5\" r=\"3.5\" />\n  </Glyph>\n);\nexport const FlipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3\" />\n    <path d=\"M18 3v4h-4M6 21v-4h4\" />\n  </Glyph>\n);\nexport const RetryGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 1 0 2.3-5.7L4 8.5\" />\n    <path d=\"M4 4v4.5h4.5\" />\n  </Glyph>\n);\nexport const SortGlyph = ({ direction, ...p }: GlyphProps & { direction?: \"ascending\" | \"descending\" }) => (\n  <Glyph {...p}>\n    {direction === \"ascending\" ? <path d=\"m7 14 5-5 5 5\" /> : direction === \"descending\" ? <path d=\"m7 10 5 5 5-5\" /> : <path d=\"m8 9 4-4 4 4M8 15l4 4 4-4\" />}\n  </Glyph>\n);\n"],"mappings":"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","names":["jsx","jsxs"]}
+{"version":3,"sources":["../src/pagination/pagination.tsx"],"sourcesContent":["// Server-safe: no hook, no context. A `<nav>` named by `labels.nav`; the current page is `aria-current=\"page\"`.\n// Two modes: pages (`page` + `pageCount`: numbers with ellipses, which fold into \"Page 3 of 12\" in a narrow container)\n// and cursor (`hasPrevious` / `hasNext`: an API that only knows the next and previous pages). Links (`getHref`) when\n// the page lives in the address — the right default for a list a search engine or a shared link should reach — or\n// buttons (`onPageChange`).\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { ChevronGlyph } from \"../glyphs\";\n\nexport const pagination = tv({\n  slots: {\n    root: \"@container flex w-full flex-wrap items-center justify-between gap-3 text-sm\",\n    list: \"flex items-center gap-1\",\n    pages: \"hidden items-center gap-1 @md:flex\",\n    compact: \"px-2 text-xs font-semibold tabular-nums text-fg-secondary @md:hidden\",\n    item:\n      \"inline-flex h-9 min-w-9 select-none items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-semibold tabular-nums text-fg-secondary \" +\n      \"transition-colors hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"aria-[current=page]:bg-accent aria-[current=page]:text-on-accent aria-[current=page]:hover:bg-accent \" +\n      \"aria-disabled:pointer-events-none aria-disabled:opacity-40 disabled:pointer-events-none disabled:opacity-40\",\n    edge: \"border border-border-default bg-surface-1 px-3\",\n    ellipsis: \"inline-flex h-9 min-w-6 items-end justify-center pb-2 text-fg-muted\",\n    status: \"text-xs text-fg-secondary tabular-nums\",\n    size: \"flex items-center gap-2 text-xs text-fg-secondary\",\n    select:\n      \"h-9 rounded-lg border border-border-default bg-surface-2 px-2 text-sm text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n});\n\nexport type PaginationLabels = {\n  /** The accessible name of the navigation (\"Pagination\", \"Pages of results\"). */\n  nav: string;\n  /** The previous-page control. */\n  previous: string;\n  /** The next-page control. */\n  next: string;\n  /** The accessible name of a page number: `(3) => \"Page 3\"`. */\n  page: (page: number) => string;\n  /** The folded form, in a narrow container: `(3, 12) => \"Page 3 of 12\"`. */\n  compact: (page: number, pageCount: number) => string;\n  /** The label of the page-size select (\"Rows per page\"). */\n  pageSize: string;\n};\n\n/** The English words, for a quick start — pass your translations through `labels`. */\nexport const paginationLabels: PaginationLabels = {\n  nav: \"Pagination\",\n  previous: \"Previous\",\n  next: \"Next\",\n  page: (page) => `Page ${page}`,\n  compact: (page, count) => `Page ${page} of ${count}`,\n  pageSize: \"Rows per page\",\n};\n\n/**\n * The pages to show: the first and last `boundaries`, the current page and its `siblings`, and `\"…\"` where pages are\n * skipped. A gap of a single page shows that page instead of an ellipsis; few pages are all shown.\n */\nexport function pageRange(page: number, pageCount: number, siblings = 1, boundaries = 1): (number | \"…\")[] {\n  // Few enough pages to show them all in the room the folded form takes: no ellipsis.\n  if (pageCount <= 2 * boundaries + 2 * siblings + 3) return Array.from({ length: Math.max(0, pageCount) }, (_, i) => i + 1);\n  const pages = new Set<number>();\n  for (let i = 1; i <= Math.min(boundaries, pageCount); i += 1) pages.add(i);\n  for (let i = Math.max(1, pageCount - boundaries + 1); i <= pageCount; i += 1) pages.add(i);\n  for (let i = Math.max(1, page - siblings); i <= Math.min(pageCount, page + siblings); i += 1) pages.add(i);\n  const sorted = [...pages].sort((a, b) => a - b);\n  const out: (number | \"…\")[] = [];\n  sorted.forEach((n, i) => {\n    const prev = sorted[i - 1];\n    if (prev !== undefined && n - prev === 2) out.push(prev + 1);\n    else if (prev !== undefined && n - prev > 2) out.push(\"…\");\n    out.push(n);\n  });\n  return out;\n}\n\nexport type PaginationProps = Omit<React.ComponentProps<\"nav\">, \"children\"> & {\n  /** Pages mode: the current page, from 1. */\n  page?: number;\n  /** Pages mode: how many pages there are. Without it, the pagination is in cursor mode. */\n  pageCount?: number;\n  /** Called with the page asked for (buttons). Ignored for the pages `getHref` turns into links. */\n  onPageChange?: (page: number) => void;\n  /** The address of a page: the pages become links (crawlable, shareable, the state in the URL). */\n  getHref?: (page: number) => string;\n  /** Cursor mode: whether there is a previous page. */\n  hasPrevious?: boolean;\n  /** Cursor mode: whether there is a next page. */\n  hasNext?: boolean;\n  /** Cursor mode: called by the previous control. */\n  onPrevious?: () => void;\n  /** Cursor mode: called by the next control. */\n  onNext?: () => void;\n  /** Pages shown on each side of the current one. Default 1. */\n  siblings?: number;\n  /** Pages always shown at each end. Default 1. */\n  boundaries?: number;\n  /** A text beside the controls, read as is: \"41–60 of 1,284\", \"12 results\". */\n  status?: React.ReactNode;\n  /** The page size, with `pageSizeOptions` and `onPageSizeChange`: a select of rows per page. */\n  pageSize?: number;\n  /** The sizes offered (`[10, 20, 50]`). */\n  pageSizeOptions?: readonly number[];\n  /** Called with the size chosen. */\n  onPageSizeChange?: (size: number) => void;\n  /** Disables every control (a page is loading). */\n  disabled?: boolean;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<PaginationLabels>;\n};\n\ntype ItemProps = {\n  href?: string;\n  onClick?: () => void;\n  disabled?: boolean;\n  current?: boolean;\n  label: string;\n  className: string;\n  children: React.ReactNode;\n};\n\nfunction Item({ href, onClick, disabled, current, label, className, children }: ItemProps) {\n  const common = { \"aria-label\": label, \"aria-current\": current ? (\"page\" as const) : undefined, className };\n  if (href && !disabled) {\n    return (\n      <a href={href} onClick={onClick} {...common}>\n        {children}\n      </a>\n    );\n  }\n  if (href) {\n    return (\n      <a role=\"link\" aria-disabled {...common}>\n        {children}\n      </a>\n    );\n  }\n  return (\n    <button type=\"button\" onClick={onClick} disabled={disabled} {...common}>\n      {children}\n    </button>\n  );\n}\n\n/** Moves through a long list: page numbers (folded on a narrow screen) or previous / next on a cursor. */\nexport function Pagination({\n  page = 1,\n  pageCount,\n  onPageChange,\n  getHref,\n  hasPrevious,\n  hasNext,\n  onPrevious,\n  onNext,\n  siblings = 1,\n  boundaries = 1,\n  status,\n  pageSize,\n  pageSizeOptions,\n  onPageSizeChange,\n  disabled,\n  labels: given,\n  className,\n  ...props\n}: PaginationProps) {\n  const s = pagination();\n  const labels = { ...paginationLabels, ...given };\n  const paged = pageCount !== undefined;\n  const count = Math.max(1, pageCount ?? 1);\n  const current = Math.min(Math.max(1, page), count);\n  const canPrevious = paged ? current > 1 : Boolean(hasPrevious);\n  const canNext = paged ? current < count : Boolean(hasNext);\n  const go = (target: number) => () => onPageChange?.(target);\n  const href = (target: number) => (paged && getHref ? getHref(target) : undefined);\n\n  return (\n    <nav aria-label={labels.nav} className={s.root({ className })} {...props}>\n      {status !== undefined || pageSizeOptions ? (\n        <div className=\"flex flex-wrap items-center gap-4\">\n          {status !== undefined && <p className={s.status()}>{status}</p>}\n          {pageSizeOptions && pageSize !== undefined && (\n            <label className={s.size()}>\n              {labels.pageSize}\n              <select\n                className={s.select()}\n                value={pageSize}\n                disabled={disabled}\n                onChange={(event) => onPageSizeChange?.(Number(event.target.value))}\n              >\n                {pageSizeOptions.map((size) => (\n                  <option key={size} value={size}>\n                    {size}\n                  </option>\n                ))}\n              </select>\n            </label>\n          )}\n        </div>\n      ) : null}\n      <ul className={s.list()}>\n        <li>\n          <Item\n            href={href(current - 1)}\n            onClick={paged ? go(current - 1) : onPrevious}\n            disabled={disabled || !canPrevious}\n            label={labels.previous}\n            className={s.item({ className: s.edge() })}\n          >\n            <ChevronGlyph direction=\"left\" />\n            <span className=\"hidden @lg:inline\">{labels.previous}</span>\n          </Item>\n        </li>\n        {paged && (\n          <>\n            <li className={s.pages()}>\n              <ul className=\"contents\">\n                {pageRange(current, count, siblings, boundaries).map((n, i) =>\n                  n === \"…\" ? (\n                    <li key={`gap-${i}`} aria-hidden className={s.ellipsis()}>\n                      …\n                    </li>\n                  ) : (\n                    <li key={n}>\n                      <Item href={href(n)} onClick={go(n)} disabled={disabled} current={n === current} label={labels.page(n)} className={s.item()}>\n                        {n}\n                      </Item>\n                    </li>\n                  ),\n                )}\n              </ul>\n            </li>\n            <li className={s.compact()}>\n              {labels.compact(current, count)}\n            </li>\n          </>\n        )}\n        <li>\n          <Item\n            href={href(current + 1)}\n            onClick={paged ? go(current + 1) : onNext}\n            disabled={disabled || !canNext}\n            label={labels.next}\n            className={s.item({ className: s.edge() })}\n          >\n            <span className=\"hidden @lg:inline\">{labels.next}</span>\n            <ChevronGlyph direction=\"right\" />\n          </Item>\n        </li>\n      </ul>\n    </nav>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/pointer-light.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+/** Every card of the page blocks carries it: LinkCard, ArgumentCard. */
+declare const POINTER_LIGHT_TARGET = "[data-kz-light]";
+/** Lights the cards inside `ref` that match `target`. Returns nothing; the effect cleans itself up. */
+declare function usePointerLight(ref: React.RefObject<HTMLElement | null>, target?: string): void;
+type PointerLightProps = {
+    /**
+     * The cards to light, as a selector inside the parent element.
+     * @default "[data-kz-light]"
+     */
+    target?: string;
+};
+/**
+ * Drop it inside any group of cards (a grid, a list) — it listens on its parent element. Renders an empty, hidden span.
+ * CardGrid includes it already.
+ */
+declare function PointerLight({ target }: PointerLightProps): React.JSX.Element;
+
+export { POINTER_LIGHT_TARGET, PointerLight, type PointerLightProps, usePointerLight };

package/dist/pointer-light.js

@@ -0,0 +1,12 @@
+"use client";
+import {
+  POINTER_LIGHT_TARGET,
+  PointerLight,
+  usePointerLight
+} from "./chunk-AB5D3KBG.js";
+export {
+  POINTER_LIGHT_TARGET,
+  PointerLight,
+  usePointerLight
+};
+//# sourceMappingURL=pointer-light.js.map

package/dist/pointer-light.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/search-field.js

@@ -9,7 +9,7 @@ import {
 import {
   CloseGlyph,
   SearchGlyph
-} from "./chunk-YX6CNVJA.js";
+} from "./chunk-CPA5CF35.js";
 
 // src/search-field/search-field.tsx
 import * as React from "react";

package/dist/section-backdrop.js

@@ -1,25 +1,7 @@
-// src/section-backdrop/section-backdrop.tsx
-import { tv } from "tailwind-variants";
-import { jsx, jsxs } from "react/jsx-runtime";
-var sectionBackdropVariants = tv({
-  slots: {
-    root: "kz-backdrop",
-    drift: "kz-backdrop-drift",
-    dome: "kz-backdrop-dome",
-    grid: "kz-backdrop-grid",
-    media: "kz-backdrop-media"
-  }
-});
-function SectionBackdrop({ as: Tag = "section", direction = "down", dome = true, grid = false, media, animated = true, className, children, ...props }) {
-  const s = sectionBackdropVariants();
-  return /* @__PURE__ */ jsxs(Tag, { className: s.root({ className }), "data-direction": direction, ...props, children: [
-    animated ? /* @__PURE__ */ jsx("div", { "data-backdrop-layer": true, "aria-hidden": true, className: s.drift() }) : null,
-    dome ? /* @__PURE__ */ jsx("div", { "data-backdrop-layer": true, "aria-hidden": true, className: s.dome() }) : null,
-    grid ? /* @__PURE__ */ jsx("div", { "data-backdrop-layer": true, "aria-hidden": true, className: s.grid() }) : null,
-    media ? /* @__PURE__ */ jsx("div", { "data-backdrop-layer": true, "aria-hidden": true, className: s.media(), children: media }) : null,
-    children
-  ] });
-}
+import {
+  SectionBackdrop,
+  sectionBackdropVariants
+} from "./chunk-XVLWVTQA.js";
 export {
   SectionBackdrop,
   sectionBackdropVariants

package/dist/section-backdrop.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/section-backdrop/section-backdrop.tsx"],"sourcesContent":["// Server-safe. The backdrop of a page section in the brand's visual language (packages/tokens/BRAND.md).\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const sectionBackdropVariants = tv({\n  slots: {\n    root: \"kz-backdrop\",\n    drift: \"kz-backdrop-drift\",\n    dome: \"kz-backdrop-dome\",\n    grid: \"kz-backdrop-grid\",\n    media: \"kz-backdrop-media\",\n  },\n});\n\nexport interface SectionBackdropProps extends React.HTMLAttributes<HTMLElement> {\n  /** The element: `section` (default), `header`, `footer` or `div`. */\n  as?: \"section\" | \"header\" | \"footer\" | \"div\";\n  /** Where the brand tint sits: `down` (default) starts tinted and ends on the page surface; `up` ends tinted (a closing call to action). */\n  direction?: \"down\" | \"up\";\n  /** The light dome above the content (the halo of a hero). Default true. */\n  dome?: boolean;\n  /** A floor of perspective lines under the content. Default false. */\n  grid?: boolean;\n  /** A foreground illustration or image, blurred for depth of field, behind the content (decorative: hidden from assistive technology). */\n  media?: React.ReactNode;\n  /** The very slow drift of the light (40 s); always still under prefers-reduced-motion. Default true. */\n  animated?: boolean;\n}\n\n/**\n * A section of a page in the Krizaka visual language: the brand's section gradient (`--kz-brand-gradient-*`, so it\n * follows the brand theme and dark/light), a light dome, an optional perspective grid and a blurred foreground. Every\n * section ends on the page surface, so consecutive sections glide from one tint to the next. Text on it reads at AA\n * (tested in @krizaka/tokens).\n */\nexport function SectionBackdrop({ as: Tag = \"section\", direction = \"down\", dome = true, grid = false, media, animated = true, className, children, ...props }: SectionBackdropProps) {\n  const s = sectionBackdropVariants();\n  return (\n    <Tag className={s.root({ className })} data-direction={direction} {...props}>\n      {animated ? <div data-backdrop-layer aria-hidden className={s.drift()} /> : null}\n      {dome ? <div data-backdrop-layer aria-hidden className={s.dome()} /> : null}\n      {grid ? <div data-backdrop-layer aria-hidden className={s.grid()} /> : null}\n      {media ? (\n        <div data-backdrop-layer aria-hidden className={s.media()}>\n          {media}\n        </div>\n      ) : null}\n      {children}\n    </Tag>\n  );\n}\n"],"mappings":";AAEA,SAAS,UAAU;AAoCf,SACc,KADd;AAlCG,IAAM,0BAA0B,GAAG;AAAA,EACxC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF,CAAC;AAuBM,SAAS,gBAAgB,EAAE,IAAI,MAAM,WAAW,YAAY,QAAQ,OAAO,MAAM,OAAO,OAAO,OAAO,WAAW,MAAM,WAAW,UAAU,GAAG,MAAM,GAAyB;AACnL,QAAM,IAAI,wBAAwB;AAClC,SACE,qBAAC,OAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAG,kBAAgB,WAAY,GAAG,OACnE;AAAA,eAAW,oBAAC,SAAI,uBAAmB,MAAC,eAAW,MAAC,WAAW,EAAE,MAAM,GAAG,IAAK;AAAA,IAC3E,OAAO,oBAAC,SAAI,uBAAmB,MAAC,eAAW,MAAC,WAAW,EAAE,KAAK,GAAG,IAAK;AAAA,IACtE,OAAO,oBAAC,SAAI,uBAAmB,MAAC,eAAW,MAAC,WAAW,EAAE,KAAK,GAAG,IAAK;AAAA,IACtE,QACC,oBAAC,SAAI,uBAAmB,MAAC,eAAW,MAAC,WAAW,EAAE,MAAM,GACrD,iBACH,IACE;AAAA,IACH;AAAA,KACH;AAEJ;","names":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/tag-input.js

@@ -1,13 +1,13 @@
 "use client";
 import {
   Combobox
-} from "./chunk-XUMJA5ZI.js";
+} from "./chunk-X6TW3X6Y.js";
 import "./chunk-YH4LMWRU.js";
 import "./chunk-ZIXB33X7.js";
 import {
   useControllable
 } from "./chunk-EUPTXKH7.js";
-import "./chunk-YX6CNVJA.js";
+import "./chunk-CPA5CF35.js";
 
 // src/tag-input/tag-input.tsx
 import * as React from "react";

package/dist/terminal-replay.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+
+/** The colour of an output line — the tokens' text roles, all AA on the screen: secondary, accent, success, warning, danger. */
+type TerminalTone = "muted" | "accent" | "success" | "warning" | "danger";
+interface TerminalLine {
+    /** The line as the program printed it (no colour codes). */
+    text: string;
+    /** Its colour, when the program coloured it. */
+    tone?: TerminalTone;
+}
+interface TerminalStep {
+    /** What is typed at the prompt (`npx orazaka install`). */
+    command: string;
+    /** What it printed, line by line. */
+    output?: readonly (string | TerminalLine)[];
+}
+type TerminalReplayProps = Omit<React.ComponentProps<"figure">, "children" | "title"> & {
+    /** The session, in order. */
+    steps: readonly TerminalStep[];
+    /** The accessible name of the screen (“Terminal session: install, start, dev”) — passed translated. */
+    label: string;
+    /** The window's title, shown in its bar (`~/projects — zsh`). */
+    title?: React.ReactNode;
+    /**
+     * What the prompt shows before each command.
+     * @default "$"
+     */
+    prompt?: string;
+    /** The play button's words (the replay is waiting or paused). */
+    playLabel: string;
+    /** The pause button's words (the replay is running). */
+    pauseLabel: string;
+    /** The replay button's words (the session is shown whole). */
+    replayLabel: string;
+    /** The copy button's words: it copies the commands, one per line. Without it, no copy button. */
+    copyLabel?: string;
+    /** What the copy button says once the commands are copied (announced politely). */
+    copiedLabel?: string;
+    /**
+     * Milliseconds per typed character.
+     * @default 34
+     */
+    typingSpeed?: number;
+    /**
+     * Milliseconds between two output lines.
+     * @default 70
+     */
+    lineDelay?: number;
+    /**
+     * Milliseconds between a command's last line and the next command.
+     * @default 900
+     */
+    stepDelay?: number;
+    /**
+     * The screen's height, in lines; longer sessions scroll.
+     * @default 18
+     */
+    rows?: number;
+    /**
+     * Plays the first time it scrolls into view. `false`: the session rests whole until the reader presses play.
+     * @default true
+     */
+    autoPlay?: boolean;
+};
+/** A terminal session played back: commands typed at the prompt, their output line by line — or the whole session at rest. */
+declare function TerminalReplay({ steps, label, title, prompt, playLabel, pauseLabel, replayLabel, copyLabel, copiedLabel, typingSpeed, lineDelay, stepDelay, rows, autoPlay, className, style, ...props }: TerminalReplayProps): React.JSX.Element;
+
+export { type TerminalLine, TerminalReplay, type TerminalReplayProps, type TerminalStep, type TerminalTone };