@krizaka/ui 2.5.0 → 2.6.0

package/dist/code-block.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+type CodeBlockProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
+    /** The code, as it is copied. */
+    code: string;
+    /** Its language, shown as a tag and used by the highlighter: `xml`, `kotlin`, `ts`, `bash`, `yaml`… */
+    language?: string;
+    /** The file it belongs in (`pom.xml`, `application.yml`), or what it is (`Terminal`). */
+    file?: React.ReactNode;
+    /** The copy button's words. */
+    copyLabel: string;
+    /** What the button says once the code is copied (announced politely). */
+    copiedLabel: string;
+    /**
+     * Colours comments, strings, annotations, tags and keywords (the tokens' roles).
+     * @default true
+     */
+    highlight?: boolean;
+    /** Called after the code is copied. */
+    onCopy?: () => void;
+};
+/** A code sample: language and file name, highlighted code that scrolls sideways, a copy button. */
+declare function CodeBlock({ code, language, file, copyLabel, copiedLabel, highlight: colour, onCopy, className, ...props }: CodeBlockProps): React.JSX.Element;
+type CodeTabsProps = Omit<React.HTMLAttributes<HTMLDivElement>, "dir" | "defaultValue"> & {
+    /** What the tabs choose between (`Build tool`): the tab list's accessible name. */
+    label: string;
+    /** The ways to write it: an id, the tab's words, its sample (a `CodeBlock`). */
+    tabs: readonly {
+        id: string;
+        label: React.ReactNode;
+        content: React.ReactNode;
+    }[];
+    /** The tab open at first. Defaults to the first one. */
+    defaultValue?: string;
+};
+/** Several ways to write the same thing (Maven · Gradle · npm): segmented tabs above code samples. */
+declare function CodeTabs({ label, tabs, defaultValue, className, ...props }: CodeTabsProps): React.JSX.Element;
+
+/** Splits `code` into text and coloured spans. A `#` after a space starts a comment (shell, YAML, properties), not in CSS or code. */
+declare function highlight(code: string, language: string): React.ReactNode[];
+
+export { CodeBlock, type CodeBlockProps, CodeTabs, type CodeTabsProps, highlight };

package/dist/code-block.js

@@ -0,0 +1,202 @@
+"use client";
+import {
+  cn
+} from "./chunk-5AXLA4LK.js";
+
+// src/code-block/code-block.tsx
+import * as React3 from "react";
+
+// 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 CheckGlyph = (p) => /* @__PURE__ */ jsx(Glyph, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+var CopyGlyph = (p) => /* @__PURE__ */ jsxs(Glyph, { ...p, children: [
+  /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "11", height: "11", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3" })
+] });
+
+// src/tabs/tabs.tsx
+import { Tabs as TabsPrimitive } from "radix-ui";
+import * as React2 from "react";
+import { tv } from "tailwind-variants";
+
+// src/sliding-indicator.ts
+import * as React from "react";
+var useIsoLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+function useSlidingIndicator({ item, active, follow = false }) {
+  const ref = React.useRef(null);
+  const place = React.useCallback((target) => {
+    const list = ref.current;
+    if (!list) return;
+    if (!(target instanceof HTMLElement) || !list.contains(target)) {
+      list.removeAttribute("data-indicator");
+      return;
+    }
+    const a = target.getBoundingClientRect();
+    const b = list.getBoundingClientRect();
+    list.style.setProperty("--kz-ind-x", `${a.left - b.left + list.scrollLeft}px`);
+    list.style.setProperty("--kz-ind-y", `${a.top - b.top + list.scrollTop}px`);
+    list.style.setProperty("--kz-ind-w", `${a.width}px`);
+    list.style.setProperty("--kz-ind-h", `${a.height}px`);
+    list.setAttribute("data-indicator", "on");
+  }, []);
+  const rest = React.useCallback(() => place(ref.current?.querySelector(active) ?? null), [place, active]);
+  useIsoLayoutEffect(() => {
+    const list = ref.current;
+    if (!list) return;
+    rest();
+    const resize = new ResizeObserver(rest);
+    resize.observe(list);
+    const changes = new MutationObserver(rest);
+    changes.observe(list, { subtree: true, attributes: true, attributeFilter: ["data-state", "aria-current", "data-active"] });
+    return () => {
+      resize.disconnect();
+      changes.disconnect();
+    };
+  }, [rest]);
+  const handlers = follow ? {
+    onPointerOver: (e) => place(e.target.closest(item)),
+    onPointerLeave: rest,
+    onFocus: (e) => place(e.target.closest(item)),
+    onBlur: rest
+  } : {};
+  return { ref, handlers };
+}
+
+// src/tabs/tabs.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var tabs = tv({
+  slots: {
+    root: "flex gap-4 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row",
+    // One light glides from the active tab to the next (`before:`, placed by useSlidingIndicator); until it is placed
+    // (server render), each trigger carries its own active style.
+    list: "group/tabs relative isolate flex shrink-0 data-[orientation=vertical]:flex-col before:pointer-events-none before:absolute before:-z-10 before:opacity-0 before:transition-[translate,width,height,opacity] before:duration-300 motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100",
+    trigger: "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40",
+    content: "kz-fade min-w-0 flex-1 rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
+  },
+  variants: {
+    variant: {
+      /* The section of a page: a line under the list, the active tab underlined in the accent. */
+      underline: {
+        list: "gap-1 border-border-default data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r before:rounded-full before:bg-accent data-[orientation=horizontal]:before:-bottom-px data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-0.5 data-[orientation=horizontal]:before:w-(--kz-ind-w) data-[orientation=horizontal]:before:translate-x-(--kz-ind-x) data-[orientation=vertical]:before:-right-px data-[orientation=vertical]:before:top-0 data-[orientation=vertical]:before:w-0.5 data-[orientation=vertical]:before:h-(--kz-ind-h) data-[orientation=vertical]:before:translate-y-(--kz-ind-y)",
+        trigger: "relative rounded-md px-3 py-2.5 text-sm text-fg-secondary hover:text-fg data-[state=active]:text-fg after:absolute after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent data-[orientation=horizontal]:after:inset-x-2 data-[orientation=horizontal]:after:-bottom-px data-[orientation=horizontal]:after:h-0.5 data-[orientation=vertical]:justify-start data-[orientation=vertical]:after:inset-y-1.5 data-[orientation=vertical]:after:-right-px data-[orientation=vertical]:after:w-0.5 group-data-[indicator=on]/tabs:data-[state=active]:after:bg-transparent"
+      },
+      /* A view switch: equal segments in a track, the active one filled. */
+      segmented: {
+        list: "inline-grid auto-cols-fr grid-flow-col gap-1 self-start rounded-xl border border-border-default bg-surface-1 p-1 data-[orientation=vertical]:grid-flow-row before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-lg before:bg-accent before:shadow-sm",
+        trigger: "min-h-8 rounded-lg px-3 py-1.5 text-xs text-fg-secondary hover:bg-surface-2 hover:text-fg data-[state=active]:bg-accent data-[state=active]:text-on-accent data-[state=active]:shadow-sm data-[state=active]:hover:bg-accent transition-colors group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent group-data-[indicator=on]/tabs:data-[state=active]:shadow-none"
+      },
+      /* Pills that scroll sideways on a phone: a feed's sections. */
+      pills: {
+        list: "gap-1.5 overflow-x-auto overscroll-x-contain [scrollbar-width:none] data-[orientation=horizontal]:pb-1 before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-full before:border before:border-accent before:bg-accent-soft",
+        trigger: "h-9 rounded-full border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg group-data-[indicator=on]/tabs:data-[state=active]:border-transparent group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent"
+      }
+    }
+  },
+  defaultVariants: { variant: "underline" }
+});
+var VariantContext = React2.createContext("underline");
+function TabsRoot({ variant = "underline", className, ...props }) {
+  return /* @__PURE__ */ jsx2(VariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx2(TabsPrimitive.Root, { "data-variant": variant, className: tabs({ variant }).root({ className }), ...props }) });
+}
+function TabsList({ className, ...props }) {
+  const variant = React2.useContext(VariantContext);
+  const { ref } = useSlidingIndicator({ item: "[role=tab]", active: "[role=tab][data-state=active]" });
+  return /* @__PURE__ */ jsx2(TabsPrimitive.List, { ref, "data-variant": variant, className: tabs({ variant }).list({ className }), ...props });
+}
+function TabsTrigger({ className, ...props }) {
+  const variant = React2.useContext(VariantContext);
+  return /* @__PURE__ */ jsx2(TabsPrimitive.Trigger, { className: tabs({ variant }).trigger({ className }), ...props });
+}
+function TabsContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(TabsPrimitive.Content, { className: tabs().content({ className }), ...props });
+}
+
+// src/code-block/highlight.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var CLASS = { comment: "kz-tk-comment", string: "kz-tk-string", annotation: "kz-tk-annotation", tag: "kz-tk-tag", keyword: "kz-tk-keyword" };
+var KEYWORDS = "public|private|protected|final|static|class|interface|record|extends|implements|return|new|try|catch|throw|throws|if|else|void|import|from|export|function|const|let|var|val|fun|true|false|null|this|default|async|await|type";
+var TOKEN = new RegExp(
+  [
+    String.raw`(?<comment>\/\/[^\n]*|\/\*[\s\S]*?\*\/|<!--[\s\S]*?-->|(?:^|(?<=[\s]))#[^\n]*)`,
+    String.raw`(?<string>"(?:[^"\\\n]|\\.)*"|'(?:[^'\\\n]|\\.)*'|\x60(?:[^\x60\\]|\\.)*\x60)`,
+    String.raw`(?<annotation>@[A-Za-z][\w.]*)`,
+    String.raw`(?<tag><\/?[A-Za-z][\w.:-]*|\/?>)`,
+    String.raw`(?<keyword>\b(?:${KEYWORDS})\b)`
+  ].join("|"),
+  "g"
+);
+function highlight(code, language) {
+  const out = [];
+  let last = 0;
+  for (const m of code.matchAll(TOKEN)) {
+    const kind = Object.entries(m.groups ?? {}).find(([, v]) => v !== void 0)?.[0];
+    if (!kind) continue;
+    if (kind === "tag" && !/^(xml|html|svg|jsx|tsx)$/.test(language)) continue;
+    if (kind === "comment" && m[0].startsWith("#") && /^(css|scss|tsx?|jsx?|java|kotlin|kt)$/.test(language)) continue;
+    if (kind === "string" && m[0].startsWith("'") && /^(xml|html|kotlin|kt|java)$/.test(language)) continue;
+    if (m.index > last) out.push(code.slice(last, m.index));
+    out.push(
+      /* @__PURE__ */ jsx3("span", { className: CLASS[kind], children: m[0] }, m.index)
+    );
+    last = m.index + m[0].length;
+  }
+  if (last < code.length) out.push(code.slice(last));
+  return out;
+}
+
+// src/code-block/code-block.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function CodeBlock({ code, language = "text", file, copyLabel, copiedLabel, highlight: colour = true, onCopy, className, ...props }) {
+  const [copied, setCopied] = React3.useState(false);
+  React3.useEffect(() => {
+    if (!copied) return;
+    const t = setTimeout(() => setCopied(false), 1800);
+    return () => clearTimeout(t);
+  }, [copied]);
+  const copy = () => navigator.clipboard?.writeText(code).then(() => {
+    setCopied(true);
+    onCopy?.();
+  });
+  return /* @__PURE__ */ jsxs2("figure", { className: cn("kz-code", className), ...props, children: [
+    /* @__PURE__ */ jsxs2("figcaption", { className: "kz-code-bar", children: [
+      /* @__PURE__ */ jsxs2("span", { className: "kz-code-file", children: [
+        language !== "text" && /* @__PURE__ */ jsx4("span", { className: "kz-code-lang", children: language }),
+        file
+      ] }),
+      /* @__PURE__ */ jsxs2("button", { type: "button", className: "kz-code-copy", onClick: copy, "data-copied": copied ? "" : void 0, children: [
+        copied ? /* @__PURE__ */ jsx4(CheckGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx4(CopyGlyph, { className: "h-3.5 w-3.5" }),
+        /* @__PURE__ */ jsx4("span", { "aria-live": "polite", children: copied ? copiedLabel : copyLabel })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4("pre", { tabIndex: 0, children: /* @__PURE__ */ jsx4("code", { "data-language": language, children: colour ? highlight(code, language) : code }) })
+  ] });
+}
+function CodeTabs({ label, tabs: tabs2, defaultValue, className, ...props }) {
+  return /* @__PURE__ */ jsxs2(TabsRoot, { defaultValue: defaultValue ?? tabs2[0]?.id, variant: "segmented", className: cn("kz-code-tabs", className), ...props, children: [
+    /* @__PURE__ */ jsx4(TabsList, { "aria-label": label, children: tabs2.map((t) => /* @__PURE__ */ jsx4(TabsTrigger, { value: t.id, children: t.label }, t.id)) }),
+    tabs2.map((t) => /* @__PURE__ */ jsx4(TabsContent, { value: t.id, children: t.content }, t.id))
+  ] });
+}
+export {
+  CodeBlock,
+  CodeTabs,
+  highlight
+};
+//# sourceMappingURL=code-block.js.map

package/dist/code-block.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/code-block/code-block.tsx","../src/glyphs.tsx","../src/tabs/tabs.tsx","../src/sliding-indicator.ts","../src/code-block/highlight.tsx"],"sourcesContent":["// Client (the copy button, the tabs). A sample of code (blocks.css): its language and its file name, the code\n// highlighted (it scrolls sideways, never shrinks, and takes the keyboard's focus to scroll), a copy button that says\n// it copied in a polite live region. CodeTabs puts several ways to write the same thing (Maven · Gradle · npm) under\n// the tabs of @krizaka/ui.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { CheckGlyph, CopyGlyph } from \"../glyphs\";\nimport { TabsContent, TabsList, TabsRoot, TabsTrigger } from \"../tabs/tabs\";\nimport { highlight } from \"./highlight\";\n\nexport type CodeBlockProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n  /** The code, as it is copied. */\n  code: string;\n  /** Its language, shown as a tag and used by the highlighter: `xml`, `kotlin`, `ts`, `bash`, `yaml`… */\n  language?: string;\n  /** The file it belongs in (`pom.xml`, `application.yml`), or what it is (`Terminal`). */\n  file?: React.ReactNode;\n  /** The copy button's words. */\n  copyLabel: string;\n  /** What the button says once the code is copied (announced politely). */\n  copiedLabel: string;\n  /**\n   * Colours comments, strings, annotations, tags and keywords (the tokens' roles).\n   * @default true\n   */\n  highlight?: boolean;\n  /** Called after the code is copied. */\n  onCopy?: () => void;\n};\n\n/** A code sample: language and file name, highlighted code that scrolls sideways, a copy button. */\nexport function CodeBlock({ code, language = \"text\", file, copyLabel, copiedLabel, highlight: colour = true, onCopy, className, ...props }: CodeBlockProps) {\n  const [copied, setCopied] = React.useState(false);\n  React.useEffect(() => {\n    if (!copied) return;\n    const t = setTimeout(() => setCopied(false), 1800);\n    return () => clearTimeout(t);\n  }, [copied]);\n  const copy = () =>\n    navigator.clipboard?.writeText(code).then(() => {\n      setCopied(true);\n      onCopy?.();\n    });\n  return (\n    <figure className={cn(\"kz-code\", className)} {...props}>\n      <figcaption className=\"kz-code-bar\">\n        <span className=\"kz-code-file\">\n          {language !== \"text\" && <span className=\"kz-code-lang\">{language}</span>}\n          {file}\n        </span>\n        <button type=\"button\" className=\"kz-code-copy\" onClick={copy} data-copied={copied ? \"\" : undefined}>\n          {copied ? <CheckGlyph className=\"h-3.5 w-3.5\" /> : <CopyGlyph className=\"h-3.5 w-3.5\" />}\n          <span aria-live=\"polite\">{copied ? copiedLabel : copyLabel}</span>\n        </button>\n      </figcaption>\n      <pre tabIndex={0}>\n        <code data-language={language}>{colour ? highlight(code, language) : code}</code>\n      </pre>\n    </figure>\n  );\n}\n\nexport type CodeTabsProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"dir\" | \"defaultValue\"> & {\n  /** What the tabs choose between (`Build tool`): the tab list's accessible name. */\n  label: string;\n  /** The ways to write it: an id, the tab's words, its sample (a `CodeBlock`). */\n  tabs: readonly { id: string; label: React.ReactNode; content: React.ReactNode }[];\n  /** The tab open at first. Defaults to the first one. */\n  defaultValue?: string;\n};\n\n/** Several ways to write the same thing (Maven · Gradle · npm): segmented tabs above code samples. */\nexport function CodeTabs({ label, tabs, defaultValue, className, ...props }: CodeTabsProps) {\n  return (\n    <TabsRoot defaultValue={defaultValue ?? tabs[0]?.id} variant=\"segmented\" className={cn(\"kz-code-tabs\", className)} {...props}>\n      <TabsList aria-label={label}>\n        {tabs.map((t) => (\n          <TabsTrigger key={t.id} value={t.id}>\n            {t.label}\n          </TabsTrigger>\n        ))}\n      </TabsList>\n      {tabs.map((t) => (\n        <TabsContent key={t.id} value={t.id}>\n          {t.content}\n        </TabsContent>\n      ))}\n    </TabsRoot>\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);\nexport const ArrowGlyph = ({ direction = \"right\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" }) => (\n  <Glyph {...p}>\n    <path d={direction === \"left\" ? \"M19 12H5m0 0 6-6m-6 6 6 6\" : \"M5 12h14m0 0-6-6m6 6-6 6\"} />\n  </Glyph>\n);\nexport const ExternalGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 4h6v6M20 4l-9 9\" />\n    <path d=\"M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4\" />\n  </Glyph>\n);\nexport const WarningGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 4 2.5 20h19L12 4Z\" />\n    <path d=\"M12 10v4M12 17.2v.1\" />\n  </Glyph>\n);\nexport const CopyGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" />\n    <path d=\"M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3\" />\n  </Glyph>\n);\n","// Client (a context). Radix Tabs does the roles (tablist, tab, tabpanel), the aria-selected / aria-controls wiring,\n// the roving focus (arrows, Home, End) and automatic activation: this file only holds the three looks.\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { useSlidingIndicator } from \"../sliding-indicator\";\n\nexport const tabs = tv({\n  slots: {\n    root: \"flex gap-4 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row\",\n    // One light glides from the active tab to the next (`before:`, placed by useSlidingIndicator); until it is placed\n    // (server render), each trigger carries its own active style.\n    list:\n      \"group/tabs relative isolate flex shrink-0 data-[orientation=vertical]:flex-col \" +\n      \"before:pointer-events-none before:absolute before:-z-10 before:opacity-0 before:transition-[translate,width,height,opacity] before:duration-300 \" +\n      \"motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100\",\n    trigger:\n      \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40\",\n    content: \"kz-fade min-w-0 flex-1 rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n  variants: {\n    variant: {\n      /* The section of a page: a line under the list, the active tab underlined in the accent. */\n      underline: {\n        list:\n          \"gap-1 border-border-default data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r before:rounded-full before:bg-accent \" +\n          \"data-[orientation=horizontal]:before:-bottom-px data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-0.5 \" +\n          \"data-[orientation=horizontal]:before:w-(--kz-ind-w) data-[orientation=horizontal]:before:translate-x-(--kz-ind-x) \" +\n          \"data-[orientation=vertical]:before:-right-px data-[orientation=vertical]:before:top-0 data-[orientation=vertical]:before:w-0.5 \" +\n          \"data-[orientation=vertical]:before:h-(--kz-ind-h) data-[orientation=vertical]:before:translate-y-(--kz-ind-y)\",\n        trigger:\n          \"relative rounded-md px-3 py-2.5 text-sm text-fg-secondary hover:text-fg data-[state=active]:text-fg \" +\n          \"after:absolute after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent \" +\n          \"data-[orientation=horizontal]:after:inset-x-2 data-[orientation=horizontal]:after:-bottom-px data-[orientation=horizontal]:after:h-0.5 \" +\n          \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:after:inset-y-1.5 data-[orientation=vertical]:after:-right-px data-[orientation=vertical]:after:w-0.5 \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:after:bg-transparent\",\n      },\n      /* A view switch: equal segments in a track, the active one filled. */\n      segmented: {\n        list:\n          \"inline-grid auto-cols-fr grid-flow-col gap-1 self-start rounded-xl border border-border-default bg-surface-1 p-1 data-[orientation=vertical]:grid-flow-row \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-lg before:bg-accent before:shadow-sm\",\n        trigger:\n          \"min-h-8 rounded-lg px-3 py-1.5 text-xs text-fg-secondary hover:bg-surface-2 hover:text-fg \" +\n          \"data-[state=active]:bg-accent data-[state=active]:text-on-accent data-[state=active]:shadow-sm data-[state=active]:hover:bg-accent \" +\n          \"transition-colors group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent group-data-[indicator=on]/tabs:data-[state=active]:shadow-none\",\n      },\n      /* Pills that scroll sideways on a phone: a feed's sections. */\n      pills: {\n        list:\n          \"gap-1.5 overflow-x-auto overscroll-x-contain [scrollbar-width:none] data-[orientation=horizontal]:pb-1 \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) \" +\n          \"before:rounded-full before:border before:border-accent before:bg-accent-soft\",\n        trigger:\n          \"h-9 rounded-full border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg \" +\n          \"data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:border-transparent group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"underline\" },\n});\n\nexport type TabsVariants = VariantProps<typeof tabs>;\ntype Variant = NonNullable<TabsVariants[\"variant\"]>;\n\nconst VariantContext = React.createContext<Variant>(\"underline\");\n\nexport type TabsRootProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n  /** underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections). */\n  variant?: TabsVariants[\"variant\"];\n};\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation` (horizontal by default), `variant` for the list. */\nexport function TabsRoot({ variant = \"underline\", className, ...props }: TabsRootProps) {\n  return (\n    <VariantContext.Provider value={variant}>\n      <TabsPrimitive.Root data-variant={variant} className={tabs({ variant }).root({ className })} {...props} />\n    </VariantContext.Provider>\n  );\n}\n\n/** The tabs. Name it (`aria-label`) when no heading says what it switches. One light glides to the active tab. */\nexport function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {\n  const variant = React.useContext(VariantContext);\n  const { ref } = useSlidingIndicator<HTMLDivElement>({ item: \"[role=tab]\", active: \"[role=tab][data-state=active]\" });\n  return <TabsPrimitive.List ref={ref} data-variant={variant} className={tabs({ variant }).list({ className })} {...props} />;\n}\n\nexport function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const variant = React.useContext(VariantContext);\n  return <TabsPrimitive.Trigger className={tabs({ variant }).trigger({ className })} {...props} />;\n}\n\nexport function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return <TabsPrimitive.Content className={tabs().content({ className })} {...props} />;\n}\n\n/** `Tabs.Root/List/Trigger/Content` — `variant` underline · segmented · pills on the root. */\nexport const Tabs = { Root: TabsRoot, List: TabsList, Trigger: TabsTrigger, Content: TabsContent };\n","// The shared sliding indicator (NavBar, Tabs): one element that glides from item to item instead of each item lighting\n// up on its own. It writes the target's box as CSS variables on the list (`--kz-ind-x/y/w/h`) and `data-indicator=\"on\"`\n// — no re-render, no animation frame: the glide is a CSS transition (none under reduced motion). Before hydration the\n// items keep their own active style, so nothing flashes.\nimport * as React from \"react\";\n\nconst useIsoLayoutEffect = typeof window === \"undefined\" ? React.useEffect : React.useLayoutEffect;\n\nexport function useSlidingIndicator<T extends HTMLElement>({ item, active, follow = false }: { item: string; active: string; follow?: boolean }) {\n  const ref = React.useRef<T>(null);\n  const place = React.useCallback((target: Element | null) => {\n    const list = ref.current;\n    if (!list) return;\n    if (!(target instanceof HTMLElement) || !list.contains(target)) {\n      list.removeAttribute(\"data-indicator\");\n      return;\n    }\n    const a = target.getBoundingClientRect();\n    const b = list.getBoundingClientRect();\n    list.style.setProperty(\"--kz-ind-x\", `${a.left - b.left + list.scrollLeft}px`);\n    list.style.setProperty(\"--kz-ind-y\", `${a.top - b.top + list.scrollTop}px`);\n    list.style.setProperty(\"--kz-ind-w\", `${a.width}px`);\n    list.style.setProperty(\"--kz-ind-h\", `${a.height}px`);\n    list.setAttribute(\"data-indicator\", \"on\");\n  }, []);\n  const rest = React.useCallback(() => place(ref.current?.querySelector(active) ?? null), [place, active]);\n\n  useIsoLayoutEffect(() => {\n    const list = ref.current;\n    if (!list) return;\n    rest();\n    const resize = new ResizeObserver(rest);\n    resize.observe(list);\n    const changes = new MutationObserver(rest);\n    changes.observe(list, { subtree: true, attributes: true, attributeFilter: [\"data-state\", \"aria-current\", \"data-active\"] });\n    return () => {\n      resize.disconnect();\n      changes.disconnect();\n    };\n  }, [rest]);\n\n  const handlers = follow\n    ? {\n        onPointerOver: (e: React.PointerEvent) => place((e.target as Element).closest(item)),\n        onPointerLeave: rest,\n        onFocus: (e: React.FocusEvent) => place((e.target as Element).closest(item)),\n        onBlur: rest,\n      }\n    : {};\n  return { ref, handlers };\n}\n","// A small highlighter for the samples of a page (blocks.css `.kz-tk-*`): comments, strings, annotations, XML tags and\n// keywords — no highlighter in the bundle, no colour outside the tokens (each ≥ 4.5:1 on the code surface in both\n// themes). It colours what helps reading a sample; it is not a parser.\nimport type * as React from \"react\";\n\nconst CLASS = { comment: \"kz-tk-comment\", string: \"kz-tk-string\", annotation: \"kz-tk-annotation\", tag: \"kz-tk-tag\", keyword: \"kz-tk-keyword\" } as const;\ntype Kind = keyof typeof CLASS;\n\nconst KEYWORDS =\n  \"public|private|protected|final|static|class|interface|record|extends|implements|return|new|try|catch|throw|throws|if|else|void|import|from|export|function|const|let|var|val|fun|true|false|null|this|default|async|await|type\";\n\nconst TOKEN = new RegExp(\n  [\n    String.raw`(?<comment>\\/\\/[^\\n]*|\\/\\*[\\s\\S]*?\\*\\/|<!--[\\s\\S]*?-->|(?:^|(?<=[\\s]))#[^\\n]*)`,\n    String.raw`(?<string>\"(?:[^\"\\\\\\n]|\\\\.)*\"|'(?:[^'\\\\\\n]|\\\\.)*'|\\x60(?:[^\\x60\\\\]|\\\\.)*\\x60)`,\n    String.raw`(?<annotation>@[A-Za-z][\\w.]*)`,\n    String.raw`(?<tag><\\/?[A-Za-z][\\w.:-]*|\\/?>)`,\n    String.raw`(?<keyword>\\b(?:${KEYWORDS})\\b)`,\n  ].join(\"|\"),\n  \"g\",\n);\n\n/** Splits `code` into text and coloured spans. A `#` after a space starts a comment (shell, YAML, properties), not in CSS or code. */\nexport function highlight(code: string, language: string): React.ReactNode[] {\n  const out: React.ReactNode[] = [];\n  let last = 0;\n  for (const m of code.matchAll(TOKEN)) {\n    const kind = Object.entries(m.groups ?? {}).find(([, v]) => v !== undefined)?.[0] as Kind | undefined;\n    if (!kind) continue;\n    if (kind === \"tag\" && !/^(xml|html|svg|jsx|tsx)$/.test(language)) continue;\n    if (kind === \"comment\" && m[0].startsWith(\"#\") && /^(css|scss|tsx?|jsx?|java|kotlin|kt)$/.test(language)) continue;\n    if (kind === \"string\" && m[0].startsWith(\"'\") && /^(xml|html|kotlin|kt|java)$/.test(language)) continue;\n    if (m.index > last) out.push(code.slice(last, m.index));\n    out.push(\n      <span key={m.index} className={CLASS[kind]}>\n        {m[0]}\n      </span>,\n    );\n    last = m.index + m[0].length;\n  }\n  if (last < code.length) out.push(code.slice(last));\n  return out;\n}\n"],"mappings":"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","names":["React","React","jsx","jsx","jsx","jsxs","tabs"]}

package/dist/combobox.js

@@ -3,11 +3,11 @@ import {
   Combobox,
   combobox,
   comboboxLabels
-} from "./chunk-XUMJA5ZI.js";
+} from "./chunk-X6TW3X6Y.js";
 import "./chunk-YH4LMWRU.js";
 import "./chunk-ZIXB33X7.js";
 import "./chunk-EUPTXKH7.js";
-import "./chunk-YX6CNVJA.js";
+import "./chunk-CPA5CF35.js";
 export {
   Combobox,
   combobox,

package/dist/cta-panel.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+type CtaPanelProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
+    /** The id of the title (an anchor others link to: `#discuss`). */
+    id?: string;
+    /** The invitation: `Something to say about it?`. */
+    title: React.ReactNode;
+    /** Why it matters, in one or two sentences. */
+    body?: React.ReactNode;
+    /** The ways to answer: an `ActionBar`, buttons. */
+    children?: React.ReactNode;
+    /**
+     * The title's level.
+     * @default 2
+     */
+    level?: 2 | 3;
+    /** Rises once into place (`[data-reveal]`). Never on the first screen. */
+    reveal?: boolean;
+};
+/** A call to act: title, why, the actions — the closing panel of a section or a page. */
+declare function CtaPanel({ id, title, body, children, level, reveal, className, ...props }: CtaPanelProps): React.JSX.Element;
+
+export { CtaPanel, type CtaPanelProps };

package/dist/cta-panel.js

@@ -0,0 +1,20 @@
+import {
+  cn
+} from "./chunk-FJDSLNXK.js";
+
+// src/cta-panel/cta-panel.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CtaPanel({ id, title, body, children, level = 2, reveal, className, ...props }) {
+  const H = level === 2 ? "h2" : "h3";
+  return /* @__PURE__ */ jsxs("div", { className: cn("kz-cta", className), "data-reveal": reveal ? "" : void 0, ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "kz-cta-text", children: [
+      /* @__PURE__ */ jsx(H, { id, className: "kz-cta-title", children: title }),
+      body && /* @__PURE__ */ jsx("p", { className: "kz-cta-body", children: body })
+    ] }),
+    children && /* @__PURE__ */ jsx("div", { className: "kz-cta-actions", children })
+  ] });
+}
+export {
+  CtaPanel
+};
+//# sourceMappingURL=cta-panel.js.map

package/dist/cta-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/cta-panel/cta-panel.tsx"],"sourcesContent":["// Server-safe. The invitation at the end of a section or a page (blocks.css): a title, why it matters, the ways to\n// answer — in the hue of the page.\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport type CtaPanelProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> & {\n  /** The id of the title (an anchor others link to: `#discuss`). */\n  id?: string;\n  /** The invitation: `Something to say about it?`. */\n  title: React.ReactNode;\n  /** Why it matters, in one or two sentences. */\n  body?: React.ReactNode;\n  /** The ways to answer: an `ActionBar`, buttons. */\n  children?: React.ReactNode;\n  /**\n   * The title's level.\n   * @default 2\n   */\n  level?: 2 | 3;\n  /** Rises once into place (`[data-reveal]`). Never on the first screen. */\n  reveal?: boolean;\n};\n\n/** A call to act: title, why, the actions — the closing panel of a section or a page. */\nexport function CtaPanel({ id, title, body, children, level = 2, reveal, className, ...props }: CtaPanelProps) {\n  const H = level === 2 ? \"h2\" : \"h3\";\n  return (\n    <div className={cn(\"kz-cta\", className)} data-reveal={reveal ? \"\" : undefined} {...props}>\n      <div className=\"kz-cta-text\">\n        <H id={id} className=\"kz-cta-title\">\n          {title}\n        </H>\n        {body && <p className=\"kz-cta-body\">{body}</p>}\n      </div>\n      {children && <div className=\"kz-cta-actions\">{children}</div>}\n    </div>\n  );\n}\n"],"mappings":";;;;;AA6BM,SACE,KADF;AAJC,SAAS,SAAS,EAAE,IAAI,OAAO,MAAM,UAAU,QAAQ,GAAG,QAAQ,WAAW,GAAG,MAAM,GAAkB;AAC7G,QAAM,IAAI,UAAU,IAAI,OAAO;AAC/B,SACE,qBAAC,SAAI,WAAW,GAAG,UAAU,SAAS,GAAG,eAAa,SAAS,KAAK,QAAY,GAAG,OACjF;AAAA,yBAAC,SAAI,WAAU,eACb;AAAA,0BAAC,KAAE,IAAQ,WAAU,gBAClB,iBACH;AAAA,MACC,QAAQ,oBAAC,OAAE,WAAU,eAAe,gBAAK;AAAA,OAC5C;AAAA,IACC,YAAY,oBAAC,SAAI,WAAU,kBAAkB,UAAS;AAAA,KACzD;AAEJ;","names":[]}

package/dist/data-table.js

@@ -4,7 +4,7 @@ import {
 } from "./chunk-EUPTXKH7.js";
 import {
   SortGlyph
-} from "./chunk-YX6CNVJA.js";
+} from "./chunk-CPA5CF35.js";
 
 // src/data-table/data-table.tsx
 import * as React from "react";

package/dist/date-picker.js

@@ -10,7 +10,7 @@ import {
   CalendarGlyph,
   ChevronGlyph,
   CloseGlyph
-} from "./chunk-YX6CNVJA.js";
+} from "./chunk-CPA5CF35.js";
 
 // src/date-picker/calendar.tsx
 import { formatDate, getDateTimeFormat } from "@krizaka/intl";

package/dist/decision-list.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+interface Decision {
+    /** A stable key (the decision's id); the `chose` text otherwise. */
+    id?: string;
+    /** What was chosen. */
+    chose: React.ReactNode;
+    /** What was refused. */
+    refused: React.ReactNode;
+    /** Why. */
+    because: React.ReactNode;
+    /** What it costs the reader — said honestly. */
+    cost: React.ReactNode;
+}
+type DecisionListProps = React.HTMLAttributes<HTMLOListElement> & {
+    /** The decisions, in order. */
+    decisions: readonly Decision[];
+    /** The four labels: `{ chose: "We chose", refused: "We refused", because: "Because", cost: "What it costs you" }`. */
+    labels: {
+        chose: React.ReactNode;
+        refused: React.ReactNode;
+        because: React.ReactNode;
+        cost: React.ReactNode;
+    };
+    /**
+     * Each decision rises once into place, staggered (`[data-reveal]`).
+     * @default true
+     */
+    reveal?: boolean;
+};
+/** Numbered decisions: chose, then refused · because · what it costs, side by side. */
+declare function DecisionList({ decisions, labels, reveal, className, ...props }: DecisionListProps): React.JSX.Element;
+
+export { type Decision, DecisionList, type DecisionListProps };

package/dist/decision-list.js

@@ -0,0 +1,67 @@
+import {
+  ArrowGlyph,
+  CheckGlyph,
+  CloseGlyph,
+  WarningGlyph
+} from "./chunk-XCBVFMNV.js";
+import {
+  cn
+} from "./chunk-FJDSLNXK.js";
+
+// src/decision-list/decision-list.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ICON = "h-3.5 w-3.5";
+function DecisionList({ decisions, labels, reveal = true, className, ...props }) {
+  return /* @__PURE__ */ jsx("ol", { className: cn("kz-decisions", className), ...props, children: decisions.map((d, i) => /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "kz-decision",
+      "data-reveal": reveal ? "soft" : void 0,
+      style: reveal && i ? { "--kz-delay": `${Math.min(i, 5) * 70}ms` } : void 0,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "kz-decision-n", "aria-hidden": true, children: String(i + 1).padStart(2, "0") }),
+        /* @__PURE__ */ jsxs("div", { className: "kz-decision-body", children: [
+          /* @__PURE__ */ jsxs("div", { className: "kz-decision-part", "data-part": "chose", children: [
+            /* @__PURE__ */ jsxs("p", { className: "kz-label", children: [
+              /* @__PURE__ */ jsx(CheckGlyph, { className: ICON }),
+              " ",
+              labels.chose
+            ] }),
+            /* @__PURE__ */ jsx("p", { children: d.chose })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "kz-decision-grid", children: [
+            /* @__PURE__ */ jsxs("div", { className: "kz-decision-part", "data-part": "refused", children: [
+              /* @__PURE__ */ jsxs("p", { className: "kz-label", children: [
+                /* @__PURE__ */ jsx(CloseGlyph, { className: ICON }),
+                " ",
+                labels.refused
+              ] }),
+              /* @__PURE__ */ jsx("p", { children: d.refused })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "kz-decision-part", "data-part": "because", children: [
+              /* @__PURE__ */ jsxs("p", { className: "kz-label", children: [
+                /* @__PURE__ */ jsx(ArrowGlyph, { className: ICON }),
+                " ",
+                labels.because
+              ] }),
+              /* @__PURE__ */ jsx("p", { children: d.because })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "kz-decision-part", "data-part": "cost", children: [
+              /* @__PURE__ */ jsxs("p", { className: "kz-label", children: [
+                /* @__PURE__ */ jsx(WarningGlyph, { className: ICON }),
+                " ",
+                labels.cost
+              ] }),
+              /* @__PURE__ */ jsx("p", { children: d.cost })
+            ] })
+          ] })
+        ] })
+      ]
+    },
+    d.id ?? (typeof d.chose === "string" ? d.chose : i)
+  )) });
+}
+export {
+  DecisionList
+};
+//# sourceMappingURL=decision-list.js.map

package/dist/decision-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/decision-list/decision-list.tsx"],"sourcesContent":["// Server-safe. The decisions behind a product, numbered (blocks.css): what was chosen, large, first; then side by side\n// what was refused, why, and what it costs the reader — each with its mark (✓ ✕ → !) and its colour, so the eye\n// compares decisions at a glance. Every word arrives as a prop.\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { ArrowGlyph, CheckGlyph, CloseGlyph, WarningGlyph } from \"../glyphs\";\n\nexport interface Decision {\n  /** A stable key (the decision's id); the `chose` text otherwise. */\n  id?: string;\n  /** What was chosen. */\n  chose: React.ReactNode;\n  /** What was refused. */\n  refused: React.ReactNode;\n  /** Why. */\n  because: React.ReactNode;\n  /** What it costs the reader — said honestly. */\n  cost: React.ReactNode;\n}\n\nexport type DecisionListProps = React.HTMLAttributes<HTMLOListElement> & {\n  /** The decisions, in order. */\n  decisions: readonly Decision[];\n  /** The four labels: `{ chose: \"We chose\", refused: \"We refused\", because: \"Because\", cost: \"What it costs you\" }`. */\n  labels: { chose: React.ReactNode; refused: React.ReactNode; because: React.ReactNode; cost: React.ReactNode };\n  /**\n   * Each decision rises once into place, staggered (`[data-reveal]`).\n   * @default true\n   */\n  reveal?: boolean;\n};\n\nconst ICON = \"h-3.5 w-3.5\";\n\n/** Numbered decisions: chose, then refused · because · what it costs, side by side. */\nexport function DecisionList({ decisions, labels, reveal = true, className, ...props }: DecisionListProps) {\n  return (\n    <ol className={cn(\"kz-decisions\", className)} {...props}>\n      {decisions.map((d, i) => (\n        <li\n          key={d.id ?? (typeof d.chose === \"string\" ? d.chose : i)}\n          className=\"kz-decision\"\n          data-reveal={reveal ? \"soft\" : undefined}\n          style={reveal && i ? ({ \"--kz-delay\": `${Math.min(i, 5) * 70}ms` } as React.CSSProperties) : undefined}\n        >\n          <span className=\"kz-decision-n\" aria-hidden>\n            {String(i + 1).padStart(2, \"0\")}\n          </span>\n          <div className=\"kz-decision-body\">\n            <div className=\"kz-decision-part\" data-part=\"chose\">\n              <p className=\"kz-label\">\n                <CheckGlyph className={ICON} /> {labels.chose}\n              </p>\n              <p>{d.chose}</p>\n            </div>\n            <div className=\"kz-decision-grid\">\n              <div className=\"kz-decision-part\" data-part=\"refused\">\n                <p className=\"kz-label\">\n                  <CloseGlyph className={ICON} /> {labels.refused}\n                </p>\n                <p>{d.refused}</p>\n              </div>\n              <div className=\"kz-decision-part\" data-part=\"because\">\n                <p className=\"kz-label\">\n                  <ArrowGlyph className={ICON} /> {labels.because}\n                </p>\n                <p>{d.because}</p>\n              </div>\n              <div className=\"kz-decision-part\" data-part=\"cost\">\n                <p className=\"kz-label\">\n                  <WarningGlyph className={ICON} /> {labels.cost}\n                </p>\n                <p>{d.cost}</p>\n              </div>\n            </div>\n          </div>\n        </li>\n      ))}\n    </ol>\n  );\n}\n"],"mappings":";;;;;;;;;;;AA8CU,cAKI,YALJ;AAbV,IAAM,OAAO;AAGN,SAAS,aAAa,EAAE,WAAW,QAAQ,SAAS,MAAM,WAAW,GAAG,MAAM,GAAsB;AACzG,SACE,oBAAC,QAAG,WAAW,GAAG,gBAAgB,SAAS,GAAI,GAAG,OAC/C,oBAAU,IAAI,CAAC,GAAG,MACjB;AAAA,IAAC;AAAA;AAAA,MAEC,WAAU;AAAA,MACV,eAAa,SAAS,SAAS;AAAA,MAC/B,OAAO,UAAU,IAAK,EAAE,cAAc,GAAG,KAAK,IAAI,GAAG,CAAC,IAAI,EAAE,KAAK,IAA4B;AAAA,MAE7F;AAAA,4BAAC,UAAK,WAAU,iBAAgB,eAAW,MACxC,iBAAO,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG,GAChC;AAAA,QACA,qBAAC,SAAI,WAAU,oBACb;AAAA,+BAAC,SAAI,WAAU,oBAAmB,aAAU,SAC1C;AAAA,iCAAC,OAAE,WAAU,YACX;AAAA,kCAAC,cAAW,WAAW,MAAM;AAAA,cAAE;AAAA,cAAE,OAAO;AAAA,eAC1C;AAAA,YACA,oBAAC,OAAG,YAAE,OAAM;AAAA,aACd;AAAA,UACA,qBAAC,SAAI,WAAU,oBACb;AAAA,iCAAC,SAAI,WAAU,oBAAmB,aAAU,WAC1C;AAAA,mCAAC,OAAE,WAAU,YACX;AAAA,oCAAC,cAAW,WAAW,MAAM;AAAA,gBAAE;AAAA,gBAAE,OAAO;AAAA,iBAC1C;AAAA,cACA,oBAAC,OAAG,YAAE,SAAQ;AAAA,eAChB;AAAA,YACA,qBAAC,SAAI,WAAU,oBAAmB,aAAU,WAC1C;AAAA,mCAAC,OAAE,WAAU,YACX;AAAA,oCAAC,cAAW,WAAW,MAAM;AAAA,gBAAE;AAAA,gBAAE,OAAO;AAAA,iBAC1C;AAAA,cACA,oBAAC,OAAG,YAAE,SAAQ;AAAA,eAChB;AAAA,YACA,qBAAC,SAAI,WAAU,oBAAmB,aAAU,QAC1C;AAAA,mCAAC,OAAE,WAAU,YACX;AAAA,oCAAC,gBAAa,WAAW,MAAM;AAAA,gBAAE;AAAA,gBAAE,OAAO;AAAA,iBAC5C;AAAA,cACA,oBAAC,OAAG,YAAE,MAAK;AAAA,eACb;AAAA,aACF;AAAA,WACF;AAAA;AAAA;AAAA,IAnCK,EAAE,OAAO,OAAO,EAAE,UAAU,WAAW,EAAE,QAAQ;AAAA,EAoCxD,CACD,GACH;AAEJ;","names":[]}

package/dist/file-upload.js

@@ -6,7 +6,7 @@ import {
   PlayGlyph,
   RetryGlyph,
   UploadGlyph
-} from "./chunk-YX6CNVJA.js";
+} from "./chunk-CPA5CF35.js";
 
 // src/file-upload/file-upload.tsx
 import { getNumberFormat } from "@krizaka/intl";

package/dist/filter-bar.js

@@ -8,7 +8,7 @@ import {
 } from "./chunk-2USC2YT6.js";
 import {
   ChevronGlyph
-} from "./chunk-YX6CNVJA.js";
+} from "./chunk-CPA5CF35.js";
 
 // src/filter-bar/filter-bar.tsx
 import { DropdownMenu as MenuPrimitive2 } from "radix-ui";

package/dist/link-card.d.ts

@@ -0,0 +1,35 @@
+import { L as LinkComponent } from './block-link-BAg4eoZk.js';
+import * as React from 'react';
+
+type LinkCardProps = Omit<React.ComponentProps<"a">, "title" | "href"> & {
+    /** Where the card leads. An absolute URL opens in a new tab, with the external mark. */
+    href: string;
+    /** The title: the name of the destination. */
+    title: React.ReactNode;
+    /** One sentence: what the reader finds there. */
+    description?: React.ReactNode;
+    /** The icon tile on the left (a product mark, a signature icon): decorative, the title names the link. */
+    icon?: React.ReactNode;
+    /** A short mono line above the title (a category, a version). */
+    meta?: React.ReactNode;
+    /** The way in, under the text, with an arrow: `Open`, `Read the guide`. */
+    cta?: React.ReactNode;
+    /** Under the text, before the way in: facts (`Facts`), badges. Never another link — the card is one. */
+    extra?: React.ReactNode;
+    /**
+     * The title's element: a heading when the cards are the content of a section (a hub), `span` inside a list of links.
+     * @default "h3"
+     */
+    titleAs?: "h2" | "h3" | "h4" | "span";
+    /**
+     * `row`: the icon beside the text (compact, the default); `stack`: the icon above it.
+     * @default "row"
+     */
+    layout?: "row" | "stack";
+    /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */
+    linkAs?: LinkComponent;
+};
+/** An entry point: the whole card is one link — icon, title, sentence, the way in. Lifts and lights under the pointer. */
+declare function LinkCard({ href, title, description, icon, meta, cta, extra, titleAs: Title, layout, linkAs, className, ...props }: LinkCardProps): React.JSX.Element;
+
+export { LinkCard, type LinkCardProps, LinkComponent };

package/dist/link-card.js

@@ -0,0 +1,46 @@
+import {
+  BlockLink,
+  isExternal
+} from "./chunk-2AGSO3WH.js";
+import {
+  ArrowGlyph,
+  ExternalGlyph
+} from "./chunk-XCBVFMNV.js";
+import {
+  cn
+} from "./chunk-FJDSLNXK.js";
+
+// src/link-card/link-card.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function LinkCard({ href, title, description, icon, meta, cta, extra, titleAs: Title = "h3", layout = "row", linkAs, className, ...props }) {
+  const external = isExternal(href);
+  return /* @__PURE__ */ jsxs(
+    BlockLink,
+    {
+      href,
+      linkAs,
+      external,
+      className: cn("kz-block-card kz-link-card", className),
+      "data-kz-light": "",
+      "data-layout": layout === "row" ? void 0 : layout,
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "kz-block-icon", "aria-hidden": true, children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "kz-link-card-body", children: [
+          meta && /* @__PURE__ */ jsx("p", { className: "kz-link-card-meta", children: meta }),
+          /* @__PURE__ */ jsx(Title, { className: "kz-link-card-title", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "kz-link-card-text", children: description }),
+          extra && /* @__PURE__ */ jsx("div", { className: "kz-link-card-extra", children: extra }),
+          (cta || external) && /* @__PURE__ */ jsxs("span", { className: "kz-link-card-cta", children: [
+            cta,
+            external ? /* @__PURE__ */ jsx(ExternalGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ArrowGlyph, { className: "h-3.5 w-3.5" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  LinkCard
+};
+//# sourceMappingURL=link-card.js.map

package/dist/link-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/link-card/link-card.tsx"],"sourcesContent":["// Server-safe. A card that leads somewhere (blocks.css): the whole card is the link — an icon, a title, one sentence,\n// the way in. Compact, one look for every entry point of a page (a documentation hub, the products, the next step).\nimport type * as React from \"react\";\n\nimport { BlockLink, isExternal, type LinkComponent } from \"../block-link\";\nimport { cn } from \"../cn\";\nimport { ArrowGlyph, ExternalGlyph } from \"../glyphs\";\n\nexport type LinkCardProps = Omit<React.ComponentProps<\"a\">, \"title\" | \"href\"> & {\n  /** Where the card leads. An absolute URL opens in a new tab, with the external mark. */\n  href: string;\n  /** The title: the name of the destination. */\n  title: React.ReactNode;\n  /** One sentence: what the reader finds there. */\n  description?: React.ReactNode;\n  /** The icon tile on the left (a product mark, a signature icon): decorative, the title names the link. */\n  icon?: React.ReactNode;\n  /** A short mono line above the title (a category, a version). */\n  meta?: React.ReactNode;\n  /** The way in, under the text, with an arrow: `Open`, `Read the guide`. */\n  cta?: React.ReactNode;\n  /** Under the text, before the way in: facts (`Facts`), badges. Never another link — the card is one. */\n  extra?: React.ReactNode;\n  /**\n   * The title's element: a heading when the cards are the content of a section (a hub), `span` inside a list of links.\n   * @default \"h3\"\n   */\n  titleAs?: \"h2\" | \"h3\" | \"h4\" | \"span\";\n  /**\n   * `row`: the icon beside the text (compact, the default); `stack`: the icon above it.\n   * @default \"row\"\n   */\n  layout?: \"row\" | \"stack\";\n  /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: LinkComponent;\n};\n\n/** An entry point: the whole card is one link — icon, title, sentence, the way in. Lifts and lights under the pointer. */\nexport function LinkCard({ href, title, description, icon, meta, cta, extra, titleAs: Title = \"h3\", layout = \"row\", linkAs, className, ...props }: LinkCardProps) {\n  const external = isExternal(href);\n  return (\n    <BlockLink\n      href={href}\n      linkAs={linkAs}\n      external={external}\n      className={cn(\"kz-block-card kz-link-card\", className)}\n      data-kz-light=\"\"\n      data-layout={layout === \"row\" ? undefined : layout}\n      {...props}\n    >\n      {icon && (\n        <span className=\"kz-block-icon\" aria-hidden>\n          {icon}\n        </span>\n      )}\n      <div className=\"kz-link-card-body\">\n        {meta && <p className=\"kz-link-card-meta\">{meta}</p>}\n        <Title className=\"kz-link-card-title\">{title}</Title>\n        {description && <p className=\"kz-link-card-text\">{description}</p>}\n        {extra && <div className=\"kz-link-card-extra\">{extra}</div>}\n        {(cta || external) && (\n          <span className=\"kz-link-card-cta\">\n            {cta}\n            {external ? <ExternalGlyph className=\"h-3.5 w-3.5\" /> : <ArrowGlyph className=\"h-3.5 w-3.5\" />}\n          </span>\n        )}\n      </div>\n    </BlockLink>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAmDQ,cAUE,YAVF;AAbD,SAAS,SAAS,EAAE,MAAM,OAAO,aAAa,MAAM,MAAM,KAAK,OAAO,SAAS,QAAQ,MAAM,SAAS,OAAO,QAAQ,WAAW,GAAG,MAAM,GAAkB;AAChK,QAAM,WAAW,WAAW,IAAI;AAChC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,8BAA8B,SAAS;AAAA,MACrD,iBAAc;AAAA,MACd,eAAa,WAAW,QAAQ,SAAY;AAAA,MAC3C,GAAG;AAAA,MAEH;AAAA,gBACC,oBAAC,UAAK,WAAU,iBAAgB,eAAW,MACxC,gBACH;AAAA,QAEF,qBAAC,SAAI,WAAU,qBACZ;AAAA,kBAAQ,oBAAC,OAAE,WAAU,qBAAqB,gBAAK;AAAA,UAChD,oBAAC,SAAM,WAAU,sBAAsB,iBAAM;AAAA,UAC5C,eAAe,oBAAC,OAAE,WAAU,qBAAqB,uBAAY;AAAA,UAC7D,SAAS,oBAAC,SAAI,WAAU,sBAAsB,iBAAM;AAAA,WACnD,OAAO,aACP,qBAAC,UAAK,WAAU,oBACb;AAAA;AAAA,YACA,WAAW,oBAAC,iBAAc,WAAU,eAAc,IAAK,oBAAC,cAAW,WAAU,eAAc;AAAA,aAC9F;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}