@mitcsutt/kiln-ui 0.1.0

package/dist/components/display/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","names":["styles","Card_module_default","CardRoot","forwardRef","rest","Comp","asChild","Slot","cx","className","variant","interactive","mergeStyles","responsiveVars","padding","space","style","CardMedia","ratio","inset","CardHeader","CardTitle","Tag","headingTag","level","CardDescription","CardBody","CardFooter","CardMeta","Card"],"sources":["../../../../src/components/display/Card/Card.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { Slot } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { mergeStyles, responsiveVars, type Responsive } from '#utils/responsive'\nimport { space, type Space } from '#utils/tokens'\nimport styles from './Card.module.css'\nimport { headingTag } from '#utils/heading'\n\nexport type CardVariant = 'plain' | 'outline' | 'raised'\nexport type CardTitleLevel = 2 | 3 | 4 | 5 | 6\nexport type CardMediaRatio = '1/1' | '4/3' | '3/2' | '16/9' | '21/9'\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Edge treatment. `outline` (default) is a hairline; `plain` is a fill with no edge;\n   * `raised` stands on `--shadow-surface` (nothing extra in Monograph/Ledger, the print\n   * offset in Fiesta).\n   */\n  variant?: CardVariant\n  /** Inner padding as a space step. Responsive. Default `5`. */\n  padding?: Responsive<Space>\n  /** Hover/press affordance for cards that *are* the action. Implied by `asChild`. */\n  interactive?: boolean\n  /**\n   * Render the single child element as the card — usually a link, so the whole card is\n   * one target: `<Card asChild><a href=\"/projects/atlas\">…</a></Card>`. Don't nest other\n   * links or buttons inside a linked card.\n   */\n  asChild?: boolean\n}\n\n/**\n * A self-contained object: a project, a release, a plan summary. Use sparingly —\n * most content reads better as a List, Table or plain section (DESIGN §2).\n *\n * <Card><Card.Header><Card.Title>Atlas</Card.Title><Card.Meta>2026</Card.Meta></Card.Header>…</Card>\n */\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(function Card(\n  { variant = 'outline', padding, interactive = false, asChild = false, className, style, ...rest },\n  ref,\n) {\n  const Comp = asChild ? Slot.Root : 'div'\n  return (\n    <Comp\n      ref={ref}\n      className={cx(styles.card, className)}\n      data-kiln-component=\"\"\n      data-variant={variant}\n      data-interactive={interactive || asChild || undefined}\n      style={mergeStyles(responsiveVars('card-padding', padding, space), style)}\n      {...rest}\n    />\n  )\n})\n\nexport interface CardMediaProps extends HTMLAttributes<HTMLDivElement> {\n  /** Crop the media to a fixed ratio (the child img/video is fitted with `cover`). */\n  ratio?: CardMediaRatio\n  /**\n   * Sit inside the padding instead of bleeding to the edges. The corner radius is then\n   * the nested radius (outer − padding).\n   */\n  inset?: boolean\n}\n\n/** Image/video slot. Bleeds to the card's edges by default; put it first (or last). */\nconst CardMedia = forwardRef<HTMLDivElement, CardMediaProps>(function CardMedia(\n  { ratio, inset = false, className, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cx(styles.media, className)}\n      data-ratio={ratio}\n      data-inset={inset || undefined}\n      {...rest}\n    />\n  )\n})\n\nconst CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function CardHeader(\n  { className, ...rest },\n  ref,\n) {\n  return <div ref={ref} className={cx(styles.header, className)} {...rest} />\n})\n\nexport interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  /** Heading element, to fit the page outline. Visual size doesn't change. Default `3`. */\n  level?: CardTitleLevel\n}\n\nconst CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(function CardTitle(\n  { level = 3, className, ...rest },\n  ref,\n) {\n  const Tag = headingTag(level)\n  return <Tag ref={ref} className={cx(styles.title, className)} {...rest} />\n})\n\nconst CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\n  function CardDescription({ className, ...rest }, ref) {\n    return <p ref={ref} className={cx(styles.description, className)} {...rest} />\n  },\n)\n\nconst CardBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function CardBody(\n  { className, ...rest },\n  ref,\n) {\n  return <div ref={ref} className={cx(styles.body, className)} {...rest} />\n})\n\n/** Actions or summary pinned to the bottom of the card (pushes down in equal-height grids). */\nconst CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function CardFooter(\n  { className, ...rest },\n  ref,\n) {\n  return <div ref={ref} className={cx(styles.footer, className)} {...rest} />\n})\n\n/** Small secondary facts — year, stack, due date. Numbers are tabular. */\nconst CardMeta = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function CardMeta(\n  { className, ...rest },\n  ref,\n) {\n  return <div ref={ref} className={cx(styles.meta, className)} {...rest} />\n})\n\nexport const Card = Object.assign(CardRoot, {\n  Media: CardMedia,\n  Header: CardHeader,\n  Title: CardTitle,\n  Description: CardDescription,\n  Body: CardBody,\n  Footer: CardFooter,\n  Meta: CardMeta,\n})\n"],"mappings":";;;;;;;;;AAqCA,IAAME,IAAWC,EAAsC,SACrD,EAAE,aAAU,WAAW,YAAS,iBAAc,IAAO,aAAU,IAAO,cAAW,UAAO,GAAGC,KAC3F,GACA;CACA,IAAMC,IAAOC,IAAUC,EAAK,OAAO;CACnC,OACE,kBAACF,GAAD;EACO;EACL,WAAWG,EAAGR,EAAO,MAAMS,CAAS;EACpC,uBAAoB;EACpB,gBAAcC;EACd,oBAAkBC,KAAeL,KAAW,KAAA;EAC5C,OAAOM,EAAYC,EAAe,gBAAgBC,GAASC,CAAK,GAAGC,CAAK;EACxE,GAAIZ;CACL,CAAA;AAEL,CAAC,GAaKa,IAAYd,EAA2C,SAC3D,EAAE,UAAO,WAAQ,IAAO,cAAW,GAAGC,KACtC,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,WAAWI,EAAGR,EAAO,OAAOS,CAAS;EACrC,cAAYS;EACZ,cAAYC,KAAS,KAAA;EACrB,GAAIf;CACL,CAAA;AAEL,CAAC,GAEKgB,IAAajB,EAA2D,SAC5E,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWI,EAAGR,EAAO,QAAQS,CAAS;EAAG,GAAIL;CAAO,CAAA;AAC5E,CAAC,GAOKiB,IAAYlB,EAA+C,SAC/D,EAAE,WAAQ,GAAG,cAAW,GAAGC,KAC3B,GACA;CACA,IAAMkB,IAAMC,EAAWC,CAAK;CAC5B,OAAO,kBAACF,GAAD;EAAU;EAAK,WAAWd,EAAGR,EAAO,OAAOS,CAAS;EAAG,GAAIL;CAAO,CAAA;AAC3E,CAAC,GAEKqB,IAAkBtB,EACtB,SAAyB,EAAE,cAAW,GAAGC,KAAQ,GAAK;CACpD,OAAO,kBAAC,KAAD;EAAQ;EAAK,WAAWI,EAAGR,EAAO,aAAaS,CAAS;EAAG,GAAIL;CAAO,CAAA;AAC/E,CACF,GAEMsB,IAAWvB,EAA2D,SAC1E,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWI,EAAGR,EAAO,MAAMS,CAAS;EAAG,GAAIL;CAAO,CAAA;AAC1E,CAAC,GAGKuB,IAAaxB,EAA2D,SAC5E,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWI,EAAGR,EAAO,QAAQS,CAAS;EAAG,GAAIL;CAAO,CAAA;AAC5E,CAAC,GAGKwB,IAAWzB,EAA2D,SAC1E,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWI,EAAGR,EAAO,MAAMS,CAAS;EAAG,GAAIL;CAAO,CAAA;AAC1E,CAAC,GAEYyB,IAAO,OAAO,OAAO3B,GAAU;CAC1C,OAAOe;CACP,QAAQG;CACR,OAAOC;CACP,aAAaI;CACb,MAAMC;CACN,QAAQC;CACR,MAAMC;AACR,CAAC"}

package/dist/components/display/Card/Card.module.js

@@ -0,0 +1,15 @@
+//#region src/components/display/Card/Card.module.css
+var e = "kiln-Card__card", t = "kiln-Card__media", n = "kiln-Card__header", r = "kiln-Card__title", i = "kiln-Card__description", a = "kiln-Card__body", o = "kiln-Card__footer", s = "kiln-Card__meta", c = {
+	card: e,
+	media: t,
+	header: n,
+	title: r,
+	description: i,
+	body: a,
+	footer: o,
+	meta: s
+};
+//#endregion
+export { a as body, e as card, c as default, i as description, o as footer, n as header, t as media, s as meta, r as title };
+
+//# sourceMappingURL=Card.module.js.map

package/dist/components/display/Card/Card.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.module.js","names":["card","media","header","title","description","body","footer","meta","Card_module_default"],"sources":["../../../../src/components/display/Card/Card.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --card-radius        default var(--radius-surface)\n *   --card-bg            default var(--color-surface)\n *   --card-shadow        default var(--shadow-surface) for `raised`\n *\n * The root is `position: relative`, so absolutely placed children (a corner <Stamp>)\n * anchor to the card.\n *\n * Responsive padding: the component writes --card-padding-{bp}; the root resolves them\n * into --card-inset per breakpoint. Slots (Media) read the *resolved* --card-inset and\n * --card-inner-radius, which inherit as computed values — never set them yourself.\n */\n.card {\n  --card-inset: var(--card-padding-base, var(--space-5));\n  --card-inner-radius: calc(var(--card-radius, var(--radius-surface)) - var(--border-width));\n  --_bg: var(--card-bg, var(--color-surface));\n  --_bg-hover: var(--color-surface-raised);\n  --_border: var(--color-line);\n  --_border-hover: var(--color-line-strong);\n  --_shadow: none;\n\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  min-inline-size: 0;\n  padding: var(--card-inset);\n  border: var(--border-width) solid var(--_border);\n  border-radius: var(--card-radius, var(--radius-surface));\n  background: var(--_bg);\n  box-shadow: var(--_shadow);\n  color: var(--color-ink);\n  font-family: var(--font-text);\n  text-decoration: none;\n  transition:\n    background-color var(--dur-1) var(--ease-out),\n    border-color var(--dur-1) var(--ease-out),\n    box-shadow var(--dur-1) var(--ease-out),\n    translate var(--dur-1) var(--ease-spring);\n}\n\n@media (min-width: 40em) {\n  .card {\n    --card-inset: var(--card-padding-sm, var(--space-5));\n  }\n}\n@media (min-width: 48em) {\n  .card {\n    --card-inset: var(--card-padding-md, var(--space-5));\n  }\n}\n@media (min-width: 64em) {\n  .card {\n    --card-inset: var(--card-padding-lg, var(--space-5));\n  }\n}\n@media (min-width: 80em) {\n  .card {\n    --card-inset: var(--card-padding-xl, var(--space-5));\n  }\n}\n\n/* Variants — one edge treatment each (DESIGN §2). */\n.card[data-variant='plain'] {\n  --_bg: var(--card-bg, var(--color-surface));\n  --_bg-hover: var(--color-surface-raised);\n  --_border: transparent;\n  --_border-hover: transparent;\n}\n.card[data-variant='raised'] {\n  --_bg: var(--card-bg, var(--color-surface-raised));\n  --_bg-hover: var(--color-surface-raised);\n  --_border: var(--color-line-strong);\n  --_shadow: var(--card-shadow, var(--shadow-surface));\n}\n\n/* Interactive: an edge/fill change, never a scale. Raised cards press toward their shadow. */\n.card[data-interactive] {\n  cursor: pointer;\n}\n@media (hover: hover) {\n  .card[data-interactive]:hover {\n    background: var(--_bg-hover);\n    border-color: var(--_border-hover);\n  }\n}\n.card[data-interactive][data-variant='raised']:active {\n  translate: var(--active-shift) var(--active-shift);\n  box-shadow: var(--shadow-active);\n}\n.card:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n/* ── Slots ───────────────────────────────────────────────────────────────── */\n\n.media {\n  position: relative;\n  overflow: hidden;\n  margin-inline: calc(var(--card-inset) * -1);\n  background: var(--color-surface-sunken);\n}\n.media:first-child {\n  margin-block-start: calc(var(--card-inset) * -1);\n  border-start-start-radius: var(--card-inner-radius);\n  border-start-end-radius: var(--card-inner-radius);\n}\n.media:last-child {\n  margin-block-end: calc(var(--card-inset) * -1);\n  border-end-start-radius: var(--card-inner-radius);\n  border-end-end-radius: var(--card-inner-radius);\n}\n/* Bled media gets a rule where it meets the content, so the edge reads as structure. */\n.media:first-child:not(:last-child) {\n  border-block-end: var(--border-width) solid var(--color-line);\n}\n.media[data-inset] {\n  margin: 0;\n  border: 0;\n  border-radius: max(\n    calc(var(--card-radius, var(--radius-surface)) - var(--card-inset)),\n    calc(var(--radius-media) / 2)\n  );\n}\n.media[data-ratio] > :is(img, video, picture) {\n  position: absolute;\n  inset: 0;\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n}\n.media > :is(img, video) {\n  inline-size: 100%;\n}\n.media[data-ratio='1/1'] {\n  aspect-ratio: 1;\n}\n.media[data-ratio='4/3'] {\n  aspect-ratio: 4 / 3;\n}\n.media[data-ratio='3/2'] {\n  aspect-ratio: 3 / 2;\n}\n.media[data-ratio='16/9'] {\n  aspect-ratio: 16 / 9;\n}\n.media[data-ratio='21/9'] {\n  aspect-ratio: 21 / 9;\n}\n\n/* The media → header step is larger than the rhythm between text slots. */\n.media:first-child + * {\n  margin-block-start: var(--space-2);\n}\n\n.header {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-1) var(--space-3);\n  min-inline-size: 0;\n}\n.header > :first-child {\n  min-inline-size: 0;\n}\n\n.title {\n  margin: 0;\n  font-family: var(--heading-font);\n  font-weight: var(--heading-weight);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  font-size: var(--card-title-size, var(--text-xl));\n  line-height: var(--leading-snug);\n  color: var(--color-ink);\n}\n\n.description {\n  margin: 0;\n  max-inline-size: 60ch;\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n  line-height: var(--leading-body);\n}\n\n.body {\n  min-inline-size: 0;\n  font-size: var(--text-md);\n  line-height: var(--leading-body);\n}\n\n.footer {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-3);\n  margin-block-start: auto;\n  padding-block-start: var(--space-2);\n}\n\n.meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: var(--space-1) var(--space-3);\n  color: var(--color-ink-subtle);\n  font-size: var(--text-xs);\n  font-variant-numeric: lining-nums;\n  line-height: var(--leading-snug);\n}\n"],"mappings":""}

package/dist/components/display/Card/index.d.ts

@@ -0,0 +1,2 @@
+export { Card } from './Card.js';
+export type { CardProps, CardVariant, CardMediaProps, CardMediaRatio, CardTitleProps, CardTitleLevel, } from './Card.js';

package/dist/components/display/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface CodeBlockProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** The source, verbatim. Trailing newlines are trimmed. */
+    code: string;
+    /** Shown as a label ("TypeScript", "bash"). No syntax highlighting — the code is the design. */
+    language?: string;
+    /** Filename or caption shown in the header: `src/queries/keys.ts`. */
+    title?: ReactNode;
+    /** Number the lines in a gutter (not copied with a selection). */
+    showLineNumbers?: boolean;
+    /** 1-based line numbers to mark with the theme's highlight colour. */
+    highlightLines?: number[];
+    /** Show a copy button. Default `true`. */
+    copyable?: boolean;
+    /** Wrap long lines instead of scrolling sideways. */
+    wrap?: boolean;
+    /** Accessible name of the copy button. Default "Copy code". */
+    copyLabel?: string;
+}
+/**
+ * A block of source: a snippet in a blog post, a command in a README, a config example.
+ * A plain surface with an optional filename bar — no fake window chrome.
+ *
+ * <CodeBlock title="queries/keys.ts" language="TypeScript" code={source} highlightLines={[3, 4]} />
+ */
+export declare const CodeBlock: import("react").ForwardRefExoticComponent<CodeBlockProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/display/CodeBlock/CodeBlock.js

@@ -0,0 +1,85 @@
+import { cx as e } from "../../../utils/cx.js";
+import { CheckIcon as t, CopyIcon as n } from "../../../icons/icons.js";
+import { Button as r } from "../../actions/Button/Button.js";
+import i from "./CodeBlock.module.js";
+import { forwardRef as a, useEffect as o, useId as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/display/CodeBlock/CodeBlock.tsx
+var f = a(function({ code: a, language: f, title: p, showLineNumbers: m = !1, highlightLines: h, copyable: g = !0, wrap: _ = !1, copyLabel: v = "Copy code", className: y, ...b }, x) {
+	let [S, C] = l("idle"), w = c(void 0), T = s(), E = a.replace(/\n+$/, ""), D = E.split("\n"), O = new Set(h), k = !!p || !!f || g;
+	o(() => () => {
+		clearTimeout(w.current);
+	}, []);
+	let A = async () => {
+		clearTimeout(w.current);
+		try {
+			await navigator.clipboard.writeText(E), C("copied");
+		} catch {
+			C("failed");
+		}
+		w.current = setTimeout(() => {
+			C("idle");
+		}, 2e3);
+	};
+	return /* @__PURE__ */ d("figure", {
+		ref: x,
+		className: e(i.codeBlock, y),
+		"data-kiln-component": "",
+		"data-wrap": _ || void 0,
+		"data-line-numbers": m || void 0,
+		"aria-labelledby": p ? T : void 0,
+		...b,
+		children: [
+			k ? /* @__PURE__ */ d("figcaption", {
+				className: i.header,
+				children: [
+					p ? /* @__PURE__ */ u("span", {
+						id: T,
+						className: i.title,
+						children: p
+					}) : null,
+					f ? /* @__PURE__ */ u("span", {
+						className: i.language,
+						children: f
+					}) : null,
+					g ? /* @__PURE__ */ u(r, {
+						variant: "ghost",
+						tone: "neutral",
+						size: "sm",
+						className: i.copy,
+						leadingIcon: u(S === "copied" ? t : n, {}),
+						"aria-label": v,
+						onClick: () => {
+							A();
+						},
+						"data-state": S,
+						children: S === "copied" ? "Copied" : S === "failed" ? "Copy failed" : "Copy"
+					}) : null
+				]
+			}) : null,
+			/* @__PURE__ */ u("pre", {
+				className: i.pre,
+				tabIndex: 0,
+				children: /* @__PURE__ */ u("code", {
+					className: i.code,
+					children: D.map((e, t) => /* @__PURE__ */ d("span", {
+						className: i.line,
+						"data-line": m ? t + 1 : void 0,
+						"data-highlighted": O.has(t + 1) || void 0,
+						children: [e, t < D.length - 1 ? "\n" : null]
+					}, t))
+				})
+			}),
+			g ? /* @__PURE__ */ u("span", {
+				className: i.visuallyHidden,
+				role: "status",
+				"aria-live": "polite",
+				children: S === "copied" ? "Copied to clipboard" : S === "failed" ? "Copy failed" : ""
+			}) : null
+		]
+	});
+});
+//#endregion
+export { f as CodeBlock };
+
+//# sourceMappingURL=CodeBlock.js.map

package/dist/components/display/CodeBlock/CodeBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.js","names":["styles","CodeBlock_module_default","CodeBlock","forwardRef","rest","copy","setCopy","useState","timer","useRef","captionId","useId","source","code","lines","highlighted","highlightLines","hasHeader","title","language","copyable","onCopy","cx","className","wrap","showLineNumbers","Button","jsx","CheckIcon","CopyIcon","copyLabel","i","line"],"sources":["../../../../src/components/display/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { CheckIcon, CopyIcon } from '#icons'\nimport { Button } from '#components/actions/Button'\nimport { cx } from '#utils/cx'\nimport styles from './CodeBlock.module.css'\n\nexport interface CodeBlockProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  /** The source, verbatim. Trailing newlines are trimmed. */\n  code: string\n  /** Shown as a label (\"TypeScript\", \"bash\"). No syntax highlighting — the code is the design. */\n  language?: string\n  /** Filename or caption shown in the header: `src/queries/keys.ts`. */\n  title?: ReactNode\n  /** Number the lines in a gutter (not copied with a selection). */\n  showLineNumbers?: boolean\n  /** 1-based line numbers to mark with the theme's highlight colour. */\n  highlightLines?: number[]\n  /** Show a copy button. Default `true`. */\n  copyable?: boolean\n  /** Wrap long lines instead of scrolling sideways. */\n  wrap?: boolean\n  /** Accessible name of the copy button. Default \"Copy code\". */\n  copyLabel?: string\n}\n\ntype CopyState = 'idle' | 'copied' | 'failed'\n\n/**\n * A block of source: a snippet in a blog post, a command in a README, a config example.\n * A plain surface with an optional filename bar — no fake window chrome.\n *\n * <CodeBlock title=\"queries/keys.ts\" language=\"TypeScript\" code={source} highlightLines={[3, 4]} />\n */\nexport const CodeBlock = forwardRef<HTMLElement, CodeBlockProps>(function CodeBlock(\n  {\n    code,\n    language,\n    title,\n    showLineNumbers = false,\n    highlightLines,\n    copyable = true,\n    wrap = false,\n    copyLabel = 'Copy code',\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [copy, setCopy] = useState<CopyState>('idle')\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n  const captionId = useId()\n  const source = code.replace(/\\n+$/, '')\n  const lines = source.split('\\n')\n  const highlighted = new Set(highlightLines)\n  const hasHeader = Boolean(title) || Boolean(language) || copyable\n\n  useEffect(\n    () => () => {\n      clearTimeout(timer.current)\n    },\n    [],\n  )\n\n  const onCopy = async () => {\n    clearTimeout(timer.current)\n    try {\n      await navigator.clipboard.writeText(source)\n      setCopy('copied')\n    } catch {\n      setCopy('failed')\n    }\n    timer.current = setTimeout(() => {\n      setCopy('idle')\n    }, 2000)\n  }\n\n  return (\n    <figure\n      ref={ref}\n      className={cx(styles.codeBlock, className)}\n      data-kiln-component=\"\"\n      data-wrap={wrap || undefined}\n      data-line-numbers={showLineNumbers || undefined}\n      aria-labelledby={title ? captionId : undefined}\n      {...rest}\n    >\n      {hasHeader ? (\n        <figcaption className={styles.header}>\n          {title ? (\n            <span id={captionId} className={styles.title}>\n              {title}\n            </span>\n          ) : null}\n          {language ? <span className={styles.language}>{language}</span> : null}\n          {copyable ? (\n            <Button\n              variant=\"ghost\"\n              tone=\"neutral\"\n              size=\"sm\"\n              className={styles.copy}\n              leadingIcon={copy === 'copied' ? <CheckIcon /> : <CopyIcon />}\n              aria-label={copyLabel}\n              onClick={() => {\n                void onCopy()\n              }}\n              data-state={copy}\n            >\n              {copy === 'copied' ? 'Copied' : copy === 'failed' ? 'Copy failed' : 'Copy'}\n            </Button>\n          ) : null}\n        </figcaption>\n      ) : null}\n      {/* A scrollable region must be reachable by keyboard. */}\n      <pre className={styles.pre} tabIndex={0}>\n        <code className={styles.code}>\n          {lines.map((line, i) => (\n            <span\n              key={i}\n              className={styles.line}\n              data-line={showLineNumbers ? i + 1 : undefined}\n              data-highlighted={highlighted.has(i + 1) || undefined}\n            >\n              {line}\n              {i < lines.length - 1 ? '\\n' : null}\n            </span>\n          ))}\n        </code>\n      </pre>\n      {copyable ? (\n        <span className={styles.visuallyHidden} role=\"status\" aria-live=\"polite\">\n          {copy === 'copied' ? 'Copied to clipboard' : copy === 'failed' ? 'Copy failed' : ''}\n        </span>\n      ) : null}\n    </figure>\n  )\n})\n"],"mappings":";;;;;;;AAyCA,IAAaE,IAAYC,EAAwC,SAC/D,EACE,SACA,aACA,UACA,qBAAkB,IAClB,mBACA,cAAW,IACX,UAAO,IACP,eAAY,aACZ,cACA,GAAGC,KAEL,GACA;CACA,IAAM,CAACC,GAAMC,KAAWC,EAAoB,MAAM,GAC5CC,IAAQC,EAAkD,KAAA,CAAS,GACnEC,IAAYC,EAAM,GAClBC,IAASC,EAAK,QAAQ,QAAQ,EAAE,GAChCC,IAAQF,EAAO,MAAM,IAAI,GACzBG,IAAc,IAAI,IAAIC,CAAc,GACpCC,IAAY,EAAQC,KAAU,EAAQC,KAAaC;CAEzD,cACc;EACV,aAAaZ,EAAM,OAAO;CAC5B,GACA,CAAC,CACH;CAEA,IAAMa,IAAS,YAAY;EACzB,aAAab,EAAM,OAAO;EAC1B,IAAI;GAEF,AADA,MAAM,UAAU,UAAU,UAAUI,CAAM,GAC1CN,EAAQ,QAAQ;EAClB,QAAQ;GACN,EAAQ,QAAQ;EAClB;EACA,EAAM,UAAU,iBAAiB;GAC/B,EAAQ,MAAM;EAChB,GAAG,GAAI;CACT;CAEA,OACE,kBAAC,UAAD;EACO;EACL,WAAWgB,EAAGtB,EAAO,WAAWuB,CAAS;EACzC,uBAAoB;EACpB,aAAWC,KAAQ,KAAA;EACnB,qBAAmBC,KAAmB,KAAA;EACtC,mBAAiBP,IAAQR,IAAY,KAAA;EACrC,GAAIN;EAPN,UAAA;GASGa,IACC,kBAAC,cAAD;IAAY,WAAWjB,EAAO;IAA9B,UAAA;KACGkB,IACC,kBAAC,QAAD;MAAM,IAAIR;MAAW,WAAWV,EAAO;MACpC,UAAAkB;KACG,CAAA,IACJ;KACHC,IAAW,kBAAC,QAAD;MAAM,WAAWnB,EAAO;MAAW,UAAAmB;KAAe,CAAA,IAAI;KACjEC,IACC,kBAACM,GAAD;MACE,SAAQ;MACR,MAAK;MACL,MAAK;MACL,WAAW1B,EAAO;MAClB,aAAiC2B,EAApBtB,MAAS,WAAYuB,IAAgBC,GAAjB,CAAY,CAAe;MAC5D,cAAYC;MACZ,eAAe;OACb,EAAY;MACd;MACA,cAAYzB;MAEX,UAAAA,MAAS,WAAW,WAAWA,MAAS,WAAW,gBAAgB;KAC9D,CAAA,IACN;IACM;GACV,CAAA,IAAA;GAEJ,kBAAC,OAAD;IAAK,WAAWL,EAAO;IAAK,UAAU;IACpC,UAAA,kBAAC,QAAD;KAAM,WAAWA,EAAO;KACrB,UAAAc,EAAM,KAAK,GAAM,MAChB,kBAAC,QAAD;MAEE,WAAWd,EAAO;MAClB,aAAWyB,IAAkBM,IAAI,IAAI,KAAA;MACrC,oBAAkBhB,EAAY,IAAIgB,IAAI,CAAC,KAAK,KAAA;MAJ9C,UAAA,CAMGC,GACAD,IAAIjB,EAAM,SAAS,IAAI,OAAO,IAC3B;KAPC,GAAAiB,CAOD,CACP;IACG,CAAA;GACH,CAAA;GACJX,IACC,kBAAC,QAAD;IAAM,WAAWpB,EAAO;IAAgB,MAAK;IAAS,aAAU;IAC7D,UAAAK,MAAS,WAAW,wBAAwBA,MAAS,WAAW,gBAAgB;GAC7E,CAAA,IACJ;EACE;;AAEZ,CAAC"}

package/dist/components/display/CodeBlock/CodeBlock.module.js

@@ -0,0 +1,16 @@
+//#region src/components/display/CodeBlock/CodeBlock.module.css
+var e = "kiln-CodeBlock__codeBlock", t = "kiln-CodeBlock__header", n = "kiln-CodeBlock__title", r = "kiln-CodeBlock__language", i = "kiln-CodeBlock__copy", a = "kiln-CodeBlock__pre", o = "kiln-CodeBlock__code", s = "kiln-CodeBlock__line", c = "kiln-CodeBlock__visuallyHidden", l = {
+	codeBlock: e,
+	header: t,
+	title: n,
+	language: r,
+	copy: i,
+	pre: a,
+	code: o,
+	line: s,
+	visuallyHidden: c
+};
+//#endregion
+export { o as code, e as codeBlock, i as copy, l as default, t as header, r as language, s as line, a as pre, n as title, c as visuallyHidden };
+
+//# sourceMappingURL=CodeBlock.module.js.map

package/dist/components/display/CodeBlock/CodeBlock.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.module.js","names":["codeBlock","header","title","language","copy","pre","code","line","visuallyHidden","CodeBlock_module_default"],"sources":["../../../../src/components/display/CodeBlock/CodeBlock.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --codeblock-bg          default var(--color-surface-sunken)\n *   --codeblock-radius      default var(--radius-surface)\n *   --codeblock-size        default var(--text-xs)\n *   --codeblock-highlight   highlighted line fill, default var(--color-highlight)\n *\n * One edge: a hairline. The header is separated by the same rule, not a fill.\n */\n/* Zero-specificity reset, so a surrounding flow (Prose, Stack) or a className can space it. */\n:where(.codeBlock) {\n  margin: 0;\n}\n.codeBlock {\n  --_pad: var(--space-4);\n\n  display: flex;\n  flex-direction: column;\n  min-inline-size: 0;\n  overflow: hidden;\n  border: var(--border-width) solid var(--color-line);\n  border-radius: var(--codeblock-radius, var(--radius-surface));\n  background: var(--codeblock-bg, var(--color-surface-sunken));\n  color: var(--color-ink);\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-block-size: calc(var(--control-sm) + var(--space-2));\n  padding-inline: var(--_pad) var(--space-2);\n  border-block-end: var(--border-width) solid var(--color-line);\n  font-family: var(--font-text);\n  font-size: var(--text-xs);\n  line-height: var(--leading-snug);\n}\n\n.title {\n  min-inline-size: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--color-ink);\n  font-weight: var(--label-weight);\n}\n\n.language {\n  color: var(--color-ink-subtle);\n}\n.title + .language::before {\n  content: '·';\n  margin-inline-end: var(--space-3);\n}\n\n.copy {\n  margin-inline-start: auto;\n  color: var(--color-ink-muted);\n}\n.copy[data-state='copied'] {\n  color: var(--tone-positive-text);\n}\n.copy[data-state='failed'] {\n  color: var(--tone-critical-text);\n}\n\n.pre {\n  margin: 0;\n  padding-block: var(--space-3);\n  overflow-x: auto;\n  font-family: var(--font-mono);\n  font-stretch: var(--mono-stretch);\n  font-size: var(--codeblock-size, var(--text-xs));\n  font-variant-ligatures: none;\n  line-height: 1.7;\n  tab-size: 2;\n  white-space: pre;\n  scrollbar-width: thin;\n}\n.pre:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: -2px;\n}\n\n.code {\n  display: inline-block;\n  min-inline-size: 100%;\n  font: inherit;\n}\n\n.line {\n  display: block;\n  position: relative;\n  padding-inline: var(--_pad);\n}\n\n.codeBlock[data-line-numbers] .line {\n  padding-inline-start: calc(var(--_pad) + 4ch);\n}\n.codeBlock[data-line-numbers] .line::before {\n  content: attr(data-line);\n  position: absolute;\n  inset-inline-start: 0;\n  inline-size: calc(var(--_pad) + 2.5ch);\n  padding-inline-end: 1ch;\n  text-align: end;\n  color: var(--color-ink-subtle);\n  font-variant-numeric: tabular-nums;\n  user-select: none;\n}\n\n.line[data-highlighted] {\n  background: var(--codeblock-highlight, var(--color-highlight));\n  color: var(--color-highlight-ink);\n}\n.line[data-highlighted]::before {\n  color: inherit;\n}\n\n.codeBlock[data-wrap] .pre {\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n.codeBlock[data-wrap] .code {\n  display: block;\n}\n\n.visuallyHidden {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"],"mappings":""}

package/dist/components/display/CodeBlock/index.d.ts

@@ -0,0 +1,2 @@
+export { CodeBlock } from './CodeBlock.js';
+export type { CodeBlockProps } from './CodeBlock.js';

package/dist/components/display/DataList/DataList.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type DataListOrientation = 'horizontal' | 'vertical';
+export interface DataListProps extends HTMLAttributes<HTMLDListElement> {
+    /**
+     * `horizontal` (default): labels in a hang column, values aligned beside them.
+     * `vertical`: each label sits above its value — for narrow columns and inline meta strips.
+     */
+    orientation?: DataListOrientation;
+    /** Hairline rules between items. */
+    divided?: boolean;
+}
+export interface DataListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    label: ReactNode;
+    /** The value. Numbers are tabular. */
+    children?: ReactNode;
+}
+export declare const DataList: import("react").ForwardRefExoticComponent<DataListProps & import("react").RefAttributes<HTMLDListElement>> & {
+    Item: import("react").ForwardRefExoticComponent<DataListItemProps & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/components/display/DataList/DataList.js

@@ -0,0 +1,31 @@
+import { cx as e } from "../../../utils/cx.js";
+import t from "./DataList.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/display/DataList/DataList.tsx
+var a = n(function({ orientation: n = "horizontal", divided: i = !1, className: a, ...o }, s) {
+	return /* @__PURE__ */ r("dl", {
+		ref: s,
+		className: e(t.list, a),
+		"data-orientation": n,
+		"data-divided": i || void 0,
+		...o
+	});
+}), o = n(function({ label: n, children: a, className: o, ...s }, c) {
+	return /* @__PURE__ */ i("div", {
+		ref: c,
+		className: e(t.item, o),
+		...s,
+		children: [/* @__PURE__ */ r("dt", {
+			className: t.label,
+			children: n
+		}), /* @__PURE__ */ r("dd", {
+			className: t.value,
+			children: a
+		})]
+	});
+}), s = Object.assign(a, { Item: o });
+//#endregion
+export { s as DataList };
+
+//# sourceMappingURL=DataList.js.map

package/dist/components/display/DataList/DataList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataList.js","names":["styles","DataList_module_default","DataListRoot","forwardRef","rest","cx","className","orientation","divided","DataListItem","label","DataList"],"sources":["../../../../src/components/display/DataList/DataList.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport styles from './DataList.module.css'\n\nexport type DataListOrientation = 'horizontal' | 'vertical'\n\nexport interface DataListProps extends HTMLAttributes<HTMLDListElement> {\n  /**\n   * `horizontal` (default): labels in a hang column, values aligned beside them.\n   * `vertical`: each label sits above its value — for narrow columns and inline meta strips.\n   */\n  orientation?: DataListOrientation\n  /** Hairline rules between items. */\n  divided?: boolean\n}\n\n/**\n * Label/value pairs as a real `<dl>`: a project's facts, a release's region and start time,\n * an account's details.\n *\n * <DataList><DataList.Item label=\"Region\">Sydney</DataList.Item></DataList>\n */\nconst DataListRoot = forwardRef<HTMLDListElement, DataListProps>(function DataList(\n  { orientation = 'horizontal', divided = false, className, ...rest },\n  ref,\n) {\n  return (\n    <dl\n      ref={ref}\n      className={cx(styles.list, className)}\n      data-orientation={orientation}\n      data-divided={divided || undefined}\n      {...rest}\n    />\n  )\n})\n\nexport interface DataListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  label: ReactNode\n  /** The value. Numbers are tabular. */\n  children?: ReactNode\n}\n\nconst DataListItem = forwardRef<HTMLDivElement, DataListItemProps>(function DataListItem(\n  { label, children, className, ...rest },\n  ref,\n) {\n  return (\n    <div ref={ref} className={cx(styles.item, className)} {...rest}>\n      <dt className={styles.label}>{label}</dt>\n      <dd className={styles.value}>{children}</dd>\n    </div>\n  )\n})\n\nexport const DataList = Object.assign(DataListRoot, { Item: DataListItem })\n"],"mappings":";;;;;AAsBA,IAAME,IAAeC,EAA4C,SAC/D,EAAE,iBAAc,cAAc,aAAU,IAAO,cAAW,GAAGC,KAC7D,GACA;CACA,OACE,kBAAC,MAAD;EACO;EACL,WAAWC,EAAGL,EAAO,MAAMM,CAAS;EACpC,oBAAkBC;EAClB,gBAAcC,KAAW,KAAA;EACzB,GAAIJ;CACL,CAAA;AAEL,CAAC,GAQKK,IAAeN,EAA8C,SACjE,EAAE,UAAO,aAAU,cAAW,GAAGC,KACjC,GACA;CACA,OACE,kBAAC,OAAD;EAAU;EAAK,WAAWC,EAAGL,EAAO,MAAMM,CAAS;EAAG,GAAIF;EAA1D,UAAA,CACE,kBAAC,MAAD;GAAI,WAAWJ,EAAO;GAAQ,UAAAU;EAAU,CAAA,GACxC,kBAAC,MAAD;GAAI,WAAWV,EAAO;GAAQ;EAAa,CAAA,CACxC;;AAET,CAAC,GAEYW,IAAW,OAAO,OAAOT,GAAc,EAAE,MAAMO,EAAa,CAAC"}

package/dist/components/display/DataList/DataList.module.js

@@ -0,0 +1,11 @@
+//#region src/components/display/DataList/DataList.module.css
+var e = "kiln-DataList__list", t = "kiln-DataList__item", n = "kiln-DataList__label", r = "kiln-DataList__value", i = {
+	list: e,
+	item: t,
+	label: n,
+	value: r
+};
+//#endregion
+export { i as default, t as item, n as label, e as list, r as value };
+
+//# sourceMappingURL=DataList.module.js.map

package/dist/components/display/DataList/DataList.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataList.module.js","names":["list","item","label","value","DataList_module_default"],"sources":["../../../../src/components/display/DataList/DataList.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --datalist-label-width   default max-content, capped at 40% — the hang column\n *\n * Horizontal lists are one grid; each item is a subgrid row, so every value lines up\n * on the same column no matter how long its label is.\n */\n.list {\n  --_row-gap: var(--space-2);\n\n  display: grid;\n  grid-template-columns: var(--datalist-label-width, fit-content(40%)) minmax(0, 1fr);\n  column-gap: var(--space-5);\n  row-gap: var(--_row-gap);\n  margin: 0;\n  font-family: var(--font-text);\n  font-size: var(--text-sm);\n  line-height: var(--leading-snug);\n}\n\n.item {\n  display: grid;\n  grid-column: 1 / -1;\n  grid-template-columns: subgrid;\n  align-items: baseline;\n  min-inline-size: 0;\n}\n\n.label {\n  color: var(--color-ink-muted);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n}\n\n.value {\n  margin: 0;\n  min-inline-size: 0;\n  color: var(--color-ink);\n  font-variant-numeric: lining-nums;\n  overflow-wrap: anywhere;\n}\n\n/* Vertical: label over value; items flow left-to-right and wrap (a meta strip). */\n.list[data-orientation='vertical'] {\n  --_row-gap: var(--space-4);\n\n  display: flex;\n  flex-wrap: wrap;\n  column-gap: var(--space-6);\n}\n.list[data-orientation='vertical'] .item {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n}\n.list[data-orientation='vertical'] .label {\n  font-size: var(--text-xs);\n}\n.list[data-orientation='vertical'] .value {\n  font-size: var(--text-md);\n}\n\n/* Divided: rules between rows (horizontal) or between columns (vertical). */\n.list[data-divided][data-orientation='horizontal'] {\n  row-gap: 0;\n}\n.list[data-divided][data-orientation='horizontal'] .item {\n  padding-block: var(--space-2);\n}\n.list[data-divided][data-orientation='horizontal'] .item + .item {\n  border-block-start: var(--border-width) solid var(--color-line);\n}\n/* Every item carries a leading rule; the list is pulled left by one gutter and the\n   first rule of each wrapped line is clipped away, so rules only ever sit *between* items. */\n.list[data-divided][data-orientation='vertical'] {\n  column-gap: 0;\n  margin-inline-start: calc((var(--space-5) + var(--border-width)) * -1);\n  clip-path: inset(0 0 0 var(--border-width));\n}\n.list[data-divided][data-orientation='vertical'] .item {\n  padding-inline: var(--space-5);\n  border-inline-start: var(--border-width) solid var(--color-line);\n}\n"],"mappings":""}

package/dist/components/display/DataList/index.d.ts

@@ -0,0 +1,2 @@
+export { DataList } from './DataList.js';
+export type { DataListProps, DataListItemProps, DataListOrientation } from './DataList.js';

package/dist/components/display/Delta/Delta.d.ts

@@ -0,0 +1,23 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type DeltaDirection = 'up' | 'down' | 'flat';
+export type DeltaTone = 'positive' | 'critical' | 'neutral';
+export interface DeltaProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Which way the figure moved. Drives the glyph and the spoken word ("Up", "Down"). */
+    direction: DeltaDirection;
+    /**
+     * Whether the change is good. Defaults from direction (up → positive, down → critical,
+     * flat → neutral); override it when down is good — costs that fell are
+     * `direction="down" tone="positive"`.
+     */
+    tone?: DeltaTone;
+    /** The change, already formatted: "1", "3 places", "$212.40". Omit for a bare glyph. */
+    children?: ReactNode;
+}
+/**
+ * A change marker: a small triangle (or a dot for no change) and the amount, coloured by
+ * whether the change is good. The direction is spoken in words, so it never relies on
+ * colour or the glyph: screen readers hear "Up 1".
+ *
+ * <Delta direction="up">1</Delta>  ·  <Delta direction="down" tone="positive">$84.20</Delta>
+ */
+export declare const Delta: import("react").ForwardRefExoticComponent<DeltaProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/display/Delta/Delta.js

@@ -0,0 +1,42 @@
+import { cx as e } from "../../../utils/cx.js";
+import { VisuallyHidden as t } from "../../layout/VisuallyHidden/VisuallyHidden.js";
+import n from "./Delta.module.js";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/display/Delta/Delta.tsx
+var o = {
+	up: "Up",
+	down: "Down",
+	flat: "No change"
+}, s = {
+	up: "positive",
+	down: "critical",
+	flat: "neutral"
+}, c = r(function({ direction: r, tone: c, className: l, children: u, ...d }, f) {
+	return /* @__PURE__ */ a("span", {
+		ref: f,
+		className: e(n.delta, l),
+		"data-direction": r,
+		"data-tone": c ?? s[r],
+		...d,
+		children: [
+			/* @__PURE__ */ i("svg", {
+				className: n.glyph,
+				viewBox: "0 0 10 10",
+				"aria-hidden": "true",
+				focusable: "false",
+				children: r === "flat" ? /* @__PURE__ */ i("circle", {
+					cx: "5",
+					cy: "5",
+					r: "2.5"
+				}) : /* @__PURE__ */ i("path", { d: "M5 1.5 9 8.5H1z" })
+			}),
+			/* @__PURE__ */ a(t, { children: [o[r], u == null ? "" : " "] }),
+			u
+		]
+	});
+});
+//#endregion
+export { c as Delta };
+
+//# sourceMappingURL=Delta.js.map

package/dist/components/display/Delta/Delta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Delta.js","names":["styles","Delta_module_default","DIRECTION_LABEL","DEFAULT_TONE","Delta","forwardRef","rest","cx","className","direction","tone","VisuallyHidden","children"],"sources":["../../../../src/components/display/Delta/Delta.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport { VisuallyHidden } from '#components/layout/VisuallyHidden'\nimport styles from './Delta.module.css'\n\nexport type DeltaDirection = 'up' | 'down' | 'flat'\nexport type DeltaTone = 'positive' | 'critical' | 'neutral'\n\nexport interface DeltaProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Which way the figure moved. Drives the glyph and the spoken word (\"Up\", \"Down\"). */\n  direction: DeltaDirection\n  /**\n   * Whether the change is good. Defaults from direction (up → positive, down → critical,\n   * flat → neutral); override it when down is good — costs that fell are\n   * `direction=\"down\" tone=\"positive\"`.\n   */\n  tone?: DeltaTone\n  /** The change, already formatted: \"1\", \"3 places\", \"$212.40\". Omit for a bare glyph. */\n  children?: ReactNode\n}\n\nconst DIRECTION_LABEL: Record<DeltaDirection, string> = {\n  up: 'Up',\n  down: 'Down',\n  flat: 'No change',\n}\nconst DEFAULT_TONE: Record<DeltaDirection, DeltaTone> = {\n  up: 'positive',\n  down: 'critical',\n  flat: 'neutral',\n}\n\n/**\n * A change marker: a small triangle (or a dot for no change) and the amount, coloured by\n * whether the change is good. The direction is spoken in words, so it never relies on\n * colour or the glyph: screen readers hear \"Up 1\".\n *\n * <Delta direction=\"up\">1</Delta>  ·  <Delta direction=\"down\" tone=\"positive\">$84.20</Delta>\n */\nexport const Delta = forwardRef<HTMLSpanElement, DeltaProps>(function Delta(\n  { direction, tone, className, children, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      className={cx(styles.delta, className)}\n      data-direction={direction}\n      data-tone={tone ?? DEFAULT_TONE[direction]}\n      {...rest}\n    >\n      <svg className={styles.glyph} viewBox=\"0 0 10 10\" aria-hidden=\"true\" focusable=\"false\">\n        {direction === 'flat' ? <circle cx=\"5\" cy=\"5\" r=\"2.5\" /> : <path d=\"M5 1.5 9 8.5H1z\" />}\n      </svg>\n      <VisuallyHidden>\n        {DIRECTION_LABEL[direction]}\n        {children != null ? ' ' : ''}\n      </VisuallyHidden>\n      {children}\n    </span>\n  )\n})\n"],"mappings":";;;;;;AAqBA,IAAME,IAAkD;CACtD,IAAI;CACJ,MAAM;CACN,MAAM;AACR,GACMC,IAAkD;CACtD,IAAI;CACJ,MAAM;CACN,MAAM;AACR,GASaC,IAAQC,EAAwC,SAC3D,EAAE,cAAW,SAAM,cAAW,aAAU,GAAGC,KAC3C,GACA;CACA,OACE,kBAAC,QAAD;EACO;EACL,WAAWC,EAAGP,EAAO,OAAOQ,CAAS;EACrC,kBAAgBC;EAChB,aAAWC,KAAQP,EAAaM;EAChC,GAAIH;EALN,UAAA;GAOE,kBAAC,OAAD;IAAK,WAAWN,EAAO;IAAO,SAAQ;IAAY,eAAY;IAAO,WAAU;IAC5E,UAAAS,MAAc,SAAS,kBAAC,UAAD;KAAQ,IAAG;KAAI,IAAG;KAAI,GAAE;IAAO,CAAA,IAAI,kBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;GACnF,CAAA;GACL,kBAACE,GAAD,EAAA,UAAA,CACGT,EAAgBO,IAChBG,KAAY,OAAa,KAAN,GACN,EAAA,CAAA;GACfA;EACG;;AAEV,CAAC"}

package/dist/components/display/Delta/Delta.module.js

@@ -0,0 +1,9 @@
+//#region src/components/display/Delta/Delta.module.css
+var e = "kiln-Delta__delta", t = "kiln-Delta__glyph", n = {
+	delta: e,
+	glyph: t
+};
+//#endregion
+export { n as default, e as delta, t as glyph };
+
+//# sourceMappingURL=Delta.module.js.map

package/dist/components/display/Delta/Delta.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Delta.module.js","names":["delta","glyph","Delta_module_default"],"sources":["../../../../src/components/display/Delta/Delta.module.css"],"sourcesContent":["/*\n * Figures follow the surrounding size (1em) in the numeric face, tabular. Tone sets the\n * text colour: positive/critical use the tone texts (AA on canvas), neutral is muted.\n *\n * Component tokens: none.\n */\n.delta {\n  --_ink: var(--color-ink-muted);\n\n  display: inline-flex;\n  align-items: baseline;\n  gap: 0.3em;\n  color: var(--_ink);\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n  font-variant-numeric: tabular-nums lining-nums;\n  font-weight: var(--label-weight);\n  white-space: nowrap;\n}\n.delta[data-tone='positive'] {\n  --_ink: var(--tone-positive-text);\n}\n.delta[data-tone='critical'] {\n  --_ink: var(--tone-critical-text);\n}\n\n.glyph {\n  flex: none;\n  align-self: center;\n  inline-size: 0.62em;\n  block-size: 0.62em;\n  fill: currentColor;\n}\n.delta[data-direction='down'] .glyph {\n  rotate: 180deg;\n}\n"],"mappings":""}

package/dist/components/display/Delta/index.d.ts

@@ -0,0 +1,2 @@
+export { Delta } from './Delta.js';
+export type { DeltaProps, DeltaDirection, DeltaTone } from './Delta.js';

package/dist/components/display/EmptyState/EmptyState.d.ts

@@ -0,0 +1,28 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type EmptyStateTitleElement = 'h1' | 'h2' | 'h3' | 'h4' | 'p';
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** What's empty, said plainly: "No invoices yet". */
+    title: ReactNode;
+    /** What happens next, or why it's empty. One or two sentences. */
+    description?: ReactNode;
+    /** The one thing to do about it — usually a single Button. */
+    action?: ReactNode;
+    /** An illustration, photo or figure. Not a stock icon in a circle. */
+    media?: ReactNode;
+    /** Default `start`. `center` is fine when the empty state is the whole view. */
+    align?: 'start' | 'center';
+    /**
+     * Mark out the space with printer's crop marks at the four corners — reads as "this is
+     * where things will go" without boxing it in.
+     */
+    framed?: boolean;
+    /** Heading element for the title. Default `h3`. */
+    titleAs?: EmptyStateTitleElement;
+}
+/**
+ * The view when there's nothing to show yet. Typographic: a plain title, a line of
+ * direction, one action.
+ *
+ * <EmptyState title="No invoices yet" description="…" action={<Button>New invoice</Button>} />
+ */
+export declare const EmptyState: import("react").ForwardRefExoticComponent<EmptyStateProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/display/EmptyState/EmptyState.js

@@ -0,0 +1,42 @@
+import { cx as e } from "../../../utils/cx.js";
+import t from "./EmptyState.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/display/EmptyState/EmptyState.tsx
+var a = n(function({ title: n, description: a, action: o, media: s, align: c = "start", framed: l = !1, titleAs: u = "h3", className: d, ...f }, p) {
+	return /* @__PURE__ */ i("div", {
+		ref: p,
+		className: e(t.empty, d),
+		"data-align": c,
+		"data-framed": l || void 0,
+		...f,
+		children: [
+			l ? /* @__PURE__ */ r("span", {
+				className: t.marks,
+				"aria-hidden": "true"
+			}) : null,
+			s ? /* @__PURE__ */ r("div", {
+				className: t.media,
+				children: s
+			}) : null,
+			/* @__PURE__ */ i("div", {
+				className: t.copy,
+				children: [/* @__PURE__ */ r(u, {
+					className: t.title,
+					children: n
+				}), a ? /* @__PURE__ */ r("p", {
+					className: t.description,
+					children: a
+				}) : null]
+			}),
+			o ? /* @__PURE__ */ r("div", {
+				className: t.action,
+				children: o
+			}) : null
+		]
+	});
+});
+//#endregion
+export { a as EmptyState };
+
+//# sourceMappingURL=EmptyState.js.map

package/dist/components/display/EmptyState/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","names":["styles","EmptyState_module_default","EmptyState","forwardRef","Title","rest","cx","className","align","framed","media","title","description","action"],"sources":["../../../../src/components/display/EmptyState/EmptyState.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport styles from './EmptyState.module.css'\n\nexport type EmptyStateTitleElement = 'h1' | 'h2' | 'h3' | 'h4' | 'p'\n\nexport interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** What's empty, said plainly: \"No invoices yet\". */\n  title: ReactNode\n  /** What happens next, or why it's empty. One or two sentences. */\n  description?: ReactNode\n  /** The one thing to do about it — usually a single Button. */\n  action?: ReactNode\n  /** An illustration, photo or figure. Not a stock icon in a circle. */\n  media?: ReactNode\n  /** Default `start`. `center` is fine when the empty state is the whole view. */\n  align?: 'start' | 'center'\n  /**\n   * Mark out the space with printer's crop marks at the four corners — reads as \"this is\n   * where things will go\" without boxing it in.\n   */\n  framed?: boolean\n  /** Heading element for the title. Default `h3`. */\n  titleAs?: EmptyStateTitleElement\n}\n\n/**\n * The view when there's nothing to show yet. Typographic: a plain title, a line of\n * direction, one action.\n *\n * <EmptyState title=\"No invoices yet\" description=\"…\" action={<Button>New invoice</Button>} />\n */\nexport const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(\n  {\n    title,\n    description,\n    action,\n    media,\n    align = 'start',\n    framed = false,\n    titleAs: Title = 'h3',\n    className,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cx(styles.empty, className)}\n      data-align={align}\n      data-framed={framed || undefined}\n      {...rest}\n    >\n      {framed ? <span className={styles.marks} aria-hidden=\"true\" /> : null}\n      {media ? <div className={styles.media}>{media}</div> : null}\n      <div className={styles.copy}>\n        <Title className={styles.title}>{title}</Title>\n        {description ? <p className={styles.description}>{description}</p> : null}\n      </div>\n      {action ? <div className={styles.action}>{action}</div> : null}\n    </div>\n  )\n})\n"],"mappings":";;;;;AAgCA,IAAaE,IAAaC,EAA4C,SACpE,EACE,UACA,gBACA,WACA,UACA,WAAQ,SACR,YAAS,IACT,SAASC,IAAQ,MACjB,cACA,GAAGC,KAEL,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,WAAWC,EAAGN,EAAO,OAAOO,CAAS;EACrC,cAAYC;EACZ,eAAaC,KAAU,KAAA;EACvB,GAAIJ;EALN,UAAA;GAOGI,IAAS,kBAAC,QAAD;IAAM,WAAWT,EAAO;IAAO,eAAY;GAAQ,CAAA,IAAI;GAChEU,IAAQ,kBAAC,OAAD;IAAK,WAAWV,EAAO;IAAQ,UAAAU;GAAW,CAAA,IAAI;GACvD,kBAAC,OAAD;IAAK,WAAWV,EAAO;IAAvB,UAAA,CACE,kBAACI,GAAD;KAAO,WAAWJ,EAAO;KAAQ,UAAAW;IAAa,CAAA,GAC7CC,IAAc,kBAAC,KAAD;KAAG,WAAWZ,EAAO;KAAc,UAAAY;IAAe,CAAA,IAAI,IAClE;;GACJC,IAAS,kBAAC,OAAD;IAAK,WAAWb,EAAO;IAAS,UAAAa;GAAY,CAAA,IAAI;EACvD;;AAET,CAAC"}

package/dist/components/display/EmptyState/EmptyState.module.js

@@ -0,0 +1,14 @@
+//#region src/components/display/EmptyState/EmptyState.module.css
+var e = "kiln-EmptyState__empty", t = "kiln-EmptyState__marks", n = "kiln-EmptyState__media", r = "kiln-EmptyState__copy", i = "kiln-EmptyState__title", a = "kiln-EmptyState__description", o = "kiln-EmptyState__action", s = {
+	empty: e,
+	marks: t,
+	media: n,
+	copy: r,
+	title: i,
+	description: a,
+	action: o
+};
+//#endregion
+export { o as action, r as copy, s as default, a as description, e as empty, t as marks, n as media, i as title };
+
+//# sourceMappingURL=EmptyState.module.js.map

package/dist/components/display/EmptyState/EmptyState.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.module.js","names":["empty","marks","media","copy","title","description","action","EmptyState_module_default"],"sources":["../../../../src/components/display/EmptyState/EmptyState.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --empty-title-size    default var(--text-xl)\n *   --empty-mark-size     framed: length of each crop mark, default var(--space-4)\n *   --empty-mark-color    framed: default var(--color-line-strong)\n *   --empty-measure       max width of the copy, default 38ch\n */\n.empty {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--space-4);\n  padding-block: var(--space-6);\n  text-align: start;\n  font-family: var(--font-text);\n}\n\n.empty[data-align='center'] {\n  align-items: center;\n  text-align: center;\n}\n\n/*\n * Framed: printer's crop marks at the four corners instead of a dashed box — the space is\n * marked out for what will be placed there, not fenced in. The root draws the top pair,\n * the .marks overlay the bottom pair.\n */\n.empty[data-framed] {\n  position: relative;\n  padding: var(--space-6) var(--space-5);\n}\n.empty[data-framed]::before,\n.empty[data-framed]::after,\n.marks::before,\n.marks::after {\n  content: '';\n  position: absolute;\n  inline-size: var(--empty-mark-size, var(--space-4));\n  block-size: var(--empty-mark-size, var(--space-4));\n  border: 0 solid var(--empty-mark-color, var(--color-line-strong));\n  pointer-events: none;\n}\n.empty[data-framed]::before {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  border-block-start-width: var(--border-width-strong);\n  border-inline-start-width: var(--border-width-strong);\n}\n.empty[data-framed]::after {\n  inset-block-start: 0;\n  inset-inline-end: 0;\n  border-block-start-width: var(--border-width-strong);\n  border-inline-end-width: var(--border-width-strong);\n}\n.marks {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n.marks::before {\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  border-block-end-width: var(--border-width-strong);\n  border-inline-start-width: var(--border-width-strong);\n}\n.marks::after {\n  inset-block-end: 0;\n  inset-inline-end: 0;\n  border-block-end-width: var(--border-width-strong);\n  border-inline-end-width: var(--border-width-strong);\n}\n\n.media {\n  display: flex;\n  color: var(--color-ink-subtle);\n}\n\n.copy {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  max-inline-size: var(--empty-measure, 38ch);\n}\n\n.title {\n  margin: 0;\n  font-family: var(--heading-font);\n  font-size: var(--empty-title-size, var(--text-xl));\n  font-weight: var(--heading-weight);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  line-height: var(--leading-snug);\n  color: var(--color-ink);\n  text-wrap: balance;\n}\n\n.description {\n  margin: 0;\n  font-size: var(--text-md);\n  line-height: var(--leading-body);\n  color: var(--color-ink-muted);\n  text-wrap: pretty;\n}\n\n.action {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  margin-block-start: var(--space-1);\n}\n.empty[data-align='center'] .action {\n  justify-content: center;\n}\n"],"mappings":""}

package/dist/components/display/EmptyState/index.d.ts

@@ -0,0 +1,2 @@
+export { EmptyState } from './EmptyState.js';
+export type { EmptyStateProps, EmptyStateTitleElement } from './EmptyState.js';

package/dist/components/display/List/List.d.ts

@@ -0,0 +1,33 @@
+import { type HTMLAttributes, type LiHTMLAttributes, type ReactNode } from 'react';
+export type ListDensity = 'compact' | 'regular';
+export type ListElement = 'ul' | 'ol';
+export interface ListProps extends HTMLAttributes<HTMLUListElement> {
+    /** Hairline rules between rows. Default `true`. */
+    divided?: boolean;
+    /** Row height. Default `regular`. */
+    density?: ListDensity;
+    /** `ol` when order is the content (a leaderboard). Default `ul`. */
+    as?: ListElement;
+}
+export interface ListItemProps extends LiHTMLAttributes<HTMLLIElement> {
+    /** Hover affordance. Implied by `asChild`. */
+    interactive?: boolean;
+    /**
+     * Make the whole row one link or button: the single child becomes the row, so there
+     * is exactly one interactive element and no nested anchors.
+     * `<List.Item asChild><a href="/projects/atlas">…slots…</a></List.Item>`
+     */
+    asChild?: boolean;
+    /** The current item (accent-soft fill) — e.g. the open page in a list of links. */
+    selected?: boolean;
+    /** Draw attention to a row with `--color-highlight` — typically "you". */
+    highlighted?: boolean;
+    children?: ReactNode;
+}
+export declare const List: import("react").ForwardRefExoticComponent<ListProps & import("react").RefAttributes<HTMLUListElement>> & {
+    Item: import("react").ForwardRefExoticComponent<ListItemProps & import("react").RefAttributes<HTMLLIElement>>;
+    Leading: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+    Content: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+    Description: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+    Trailing: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+};

package/dist/components/display/List/List.js

@@ -0,0 +1,64 @@
+import { cx as e } from "../../../utils/cx.js";
+import t from "./List.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { Slot as i } from "radix-ui";
+//#region src/components/display/List/List.tsx
+var a = n(function({ divided: n = !0, density: i = "regular", as: a = "ul", className: o, ...s }, c) {
+	return /* @__PURE__ */ r(a, {
+		ref: c,
+		role: "list",
+		className: e(t.list, o),
+		"data-divided": n || void 0,
+		"data-density": i,
+		...s
+	});
+}), o = n(function({ interactive: n = !1, asChild: a = !1, selected: o = !1, highlighted: s = !1, className: c, children: l, ...u }, d) {
+	let f = a ? i.Root : "div";
+	return /* @__PURE__ */ r("li", {
+		ref: d,
+		className: e(t.item, c),
+		"data-interactive": n || a || void 0,
+		"data-selected": o || void 0,
+		"data-highlighted": s || void 0,
+		...u,
+		children: /* @__PURE__ */ r(f, {
+			className: t.row,
+			children: l
+		})
+	});
+}), s = n(function({ className: n, ...i }, a) {
+	return /* @__PURE__ */ r("span", {
+		ref: a,
+		className: e(t.leading, n),
+		...i
+	});
+}), c = n(function({ className: n, ...i }, a) {
+	return /* @__PURE__ */ r("span", {
+		ref: a,
+		className: e(t.content, n),
+		...i
+	});
+}), l = n(function({ className: n, ...i }, a) {
+	return /* @__PURE__ */ r("span", {
+		ref: a,
+		className: e(t.description, n),
+		...i
+	});
+}), u = n(function({ className: n, ...i }, a) {
+	return /* @__PURE__ */ r("span", {
+		ref: a,
+		className: e(t.trailing, n),
+		...i
+	});
+}), d = Object.assign(a, {
+	Item: o,
+	Leading: s,
+	Content: c,
+	Description: l,
+	Trailing: u
+});
+//#endregion
+export { d as List };
+
+//# sourceMappingURL=List.js.map