@mitcsutt/kiln-ui 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","names":["Progress","styles","ProgressPrimitive","Progress_module_default","percent","value","max","Progress$1","forwardRef","ariaLabel","rest","labelId","useId","determinate","clamped","valueText","formatValue","cx","className","tone","size","label","showValue","Progress","v","m","mergeStyles"],"sources":["../../../../src/components/display/Progress/Progress.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type ReactNode,\n} from 'react'\nimport { Progress as ProgressPrimitive } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { mergeStyles } from '#utils/responsive'\nimport type { Size, Tone } from '#utils/tokens'\nimport styles from './Progress.module.css'\n\nexport interface ProgressProps extends Omit<\n  ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>,\n  'value' | 'max' | 'children'\n> {\n  /** Current value. `null` or omitted = indeterminate (working, amount unknown). */\n  value?: number | null\n  /** Default 100. */\n  max?: number\n  /** Default `accent`. */\n  tone?: Tone\n  /** Bar thickness. */\n  size?: Size\n  /** Visible label above the bar; also its accessible name. */\n  label?: ReactNode\n  /** Show the value at the end of the label row. */\n  showValue?: boolean\n  /** Formats the visible value and `aria-valuetext`. Default: whole percent. */\n  formatValue?: (value: number, max: number) => string\n}\n\nconst percent = (value: number, max: number) => `${String(Math.round((value / max) * 100))}%`\n\n/**\n * How far along a task is: an upload, an import, a sync in progress.\n * For a quantity against a limit (usage vs quota) use `Meter` instead.\n *\n * `ref` and native/ARIA props land on the `progressbar` element; `className` and `style`\n * on the outer wrapper (label row + track).\n */\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(\n  {\n    value = null,\n    max = 100,\n    tone = 'accent',\n    size = 'md',\n    label,\n    showValue = false,\n    formatValue = percent,\n    className,\n    style,\n    'aria-label': ariaLabel,\n    ...rest\n  },\n  ref,\n) {\n  const labelId = useId()\n  const determinate = value !== null && Number.isFinite(value)\n  const clamped = determinate ? Math.min(Math.max(value, 0), max) : 0\n  const valueText = determinate ? formatValue(clamped, max) : undefined\n\n  return (\n    <div className={cx(styles.progress, className)} style={style} data-tone={tone} data-size={size}>\n      {label || (showValue && determinate) ? (\n        <div className={styles.header}>\n          {label ? (\n            <span id={labelId} className={styles.label}>\n              {label}\n            </span>\n          ) : null}\n          {showValue && determinate ? (\n            <span className={styles.value} aria-hidden=\"true\">\n              {valueText}\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n      <ProgressPrimitive.Root\n        ref={ref}\n        className={styles.track}\n        value={determinate ? clamped : null}\n        max={max}\n        getValueLabel={(v, m) => formatValue(v, m)}\n        aria-label={ariaLabel}\n        aria-labelledby={label && !ariaLabel ? labelId : undefined}\n        {...rest}\n      >\n        <ProgressPrimitive.Indicator\n          className={styles.indicator}\n          style={mergeStyles(\n            determinate ? ({ '--progress-fraction': clamped / max } as CSSProperties) : undefined,\n          )}\n        />\n      </ProgressPrimitive.Root>\n    </div>\n  )\n})\n"],"mappings":";;;;;;;AAiCA,IAAMI,KAAW,GAAe,MAAgB,GAAG,OAAO,KAAK,MAAOC,IAAQC,IAAO,GAAG,CAAC,EAAE,IAS9EN,IAAWQ,EAA0C,SAChE,EACE,WAAQ,MACR,SAAM,KACN,UAAO,UACP,UAAO,MACP,UACA,eAAY,IACZ,iBAAcJ,GACd,cACA,UACA,cAAcK,GACd,GAAGC,KAEL,GACA;CACA,IAAMC,IAAUC,EAAM,GAChBC,IAAcR,MAAU,QAAQ,OAAO,SAASA,CAAK,GACrDS,IAAUD,IAAc,KAAK,IAAI,KAAK,IAAIR,GAAO,CAAC,GAAGC,CAAG,IAAI,GAC5DS,IAAYF,IAAcG,EAAYF,GAASR,CAAG,IAAI,KAAA;CAE5D,OACE,kBAAC,OAAD;EAAK,WAAWW,EAAGhB,EAAO,UAAUiB,CAAS;EAAU;EAAO,aAAWC;EAAM,aAAWC;EAA1F,UAAA,CACGC,KAAUC,KAAaT,IACtB,kBAAC,OAAD;GAAK,WAAWZ,EAAO;GAAvB,UAAA,CACGoB,IACC,kBAAC,QAAD;IAAM,IAAIV;IAAS,WAAWV,EAAO;IAClC,UAAAoB;GACG,CAAA,IACJ,MACHC,KAAaT,IACZ,kBAAC,QAAD;IAAM,WAAWZ,EAAO;IAAO,eAAY;IACxC,UAAAc;GACG,CAAA,IACJ,IACD;EACH,CAAA,IAAA,MACJ,kBAACb,EAAkB,MAAnB;GACO;GACL,WAAWD,EAAO;GAClB,OAAOY,IAAcC,IAAU;GAC1B;GACL,gBAAgB,GAAG,MAAME,EAAYQ,GAAGC,CAAC;GACzC,cAAYhB;GACZ,mBAAiBY,KAAS,CAACZ,IAAYE,IAAU,KAAA;GACjD,GAAID;GAEJ,UAAA,kBAACR,EAAkB,WAAnB;IACE,WAAWD,EAAO;IAClB,OAAOyB,EACLb,IAAe,EAAE,uBAAuBC,IAAUR,EAAI,IAAsB,KAAA,CAC9E;GACD,CAAA;EACqB,CAAA,CACrB;;AAET,CAAC"}

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

@@ -0,0 +1,14 @@
+//#region src/components/display/Progress/Progress.module.css
+var e = "kiln-Progress__progress", t = "kiln-Progress__header", n = "kiln-Progress__label", r = "kiln-Progress__value", i = "kiln-Progress__track", a = "kiln-Progress__indicator", o = "kiln-Progress__travel", s = {
+	progress: e,
+	header: t,
+	label: n,
+	value: r,
+	track: i,
+	indicator: a,
+	travel: o
+};
+//#endregion
+export { s as default, t as header, a as indicator, n as label, e as progress, i as track, o as travel, r as value };
+
+//# sourceMappingURL=Progress.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.module.js","names":["progress","header","label","value","track","indicator","travel","Progress_module_default"],"sources":["../../../../src/components/display/Progress/Progress.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --progress-radius         default var(--radius-chip)\n *   --progress-track          track fill, default var(--color-surface-sunken)\n *   --progress-track-edge     track keyline, default var(--color-line-strong)\n *\n * Written by the component: --progress-fraction (0–1) on the indicator.\n */\n.progress {\n  --_c: var(--color-accent);\n  --_h: var(--space-2);\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  min-inline-size: 0;\n  font-family: var(--font-text);\n}\n\n.progress[data-size='sm'] {\n  --_h: var(--space-1);\n}\n.progress[data-size='lg'] {\n  --_h: var(--space-3);\n}\n\n.progress[data-tone='neutral'] {\n  --_c: var(--color-ink);\n}\n.progress[data-tone='positive'] {\n  --_c: var(--tone-positive);\n}\n.progress[data-tone='caution'] {\n  --_c: var(--tone-caution);\n}\n.progress[data-tone='critical'] {\n  --_c: var(--tone-critical);\n}\n.progress[data-tone='info'] {\n  --_c: var(--tone-info);\n}\n\n.header {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  font-size: var(--text-sm);\n  line-height: var(--leading-snug);\n}\n\n.label {\n  color: var(--color-ink);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n}\n\n.value {\n  margin-inline-start: auto;\n  color: var(--color-ink-muted);\n  font-family: var(--font-numeric);\n  font-weight: var(--label-weight);\n  font-stretch: var(--numeric-stretch);\n  font-variant-numeric: tabular-nums lining-nums;\n}\n\n.track {\n  position: relative;\n  overflow: hidden;\n  block-size: calc(var(--_h) + var(--border-width) * 2);\n  border: var(--border-width) solid var(--progress-track-edge, var(--color-line-strong));\n  border-radius: var(--progress-radius, var(--radius-chip));\n  background: var(--progress-track, var(--color-surface-sunken));\n  /* keep the fill's corners inside the keyline */\n  isolation: isolate;\n}\n\n.indicator {\n  block-size: 100%;\n  inline-size: 100%;\n  background: var(--_c);\n  transform-origin: left;\n  scale: var(--progress-fraction, 0) 1;\n  transition: scale var(--dur-3) var(--ease-out);\n}\n.indicator:dir(rtl) {\n  transform-origin: right;\n}\n\n/* Indeterminate: a third-width slug that travels the track. */\n.track[data-state='indeterminate'] .indicator {\n  inline-size: 35%;\n  scale: 1;\n  border-radius: inherit;\n  animation: travel calc(var(--dur-3) * 4) var(--ease-in-out) infinite;\n}\n\n@keyframes travel {\n  from {\n    translate: -100% 0;\n  }\n  to {\n    translate: 290% 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .track[data-state='indeterminate'] .indicator {\n    animation: none;\n    inline-size: 100%;\n    opacity: 0.35;\n  }\n}\n"],"mappings":""}

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

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

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

@@ -0,0 +1,31 @@
+import { type HTMLAttributes } from 'react';
+import { type Space } from '../../../utils/tokens.js';
+/** A fraction of the container, or a step on the space scale. */
+export type SkeletonWidth = 'full' | '3/4' | '2/3' | '1/2' | '1/3' | '1/4' | Space;
+/** A text line, a heading line, a control, a block — or a step on the space scale. */
+export type SkeletonHeight = 'text' | 'heading' | 'control' | 'block' | Space;
+export type SkeletonRadius = 'field' | 'surface' | 'media' | 'chip';
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /** Default `full`. */
+    width?: SkeletonWidth;
+    /** Default `text` (one line of the surrounding text). */
+    height?: SkeletonHeight;
+    /** Default `field`. */
+    radius?: SkeletonRadius;
+    /** Render a paragraph of this many lines instead of one block (same as `Skeleton.Text`). */
+    lines?: number;
+}
+export interface SkeletonTextProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of lines. The last one is shorter, like the end of a paragraph. Default 3. */
+    lines?: number;
+    /** Space between lines. Default: the gap of real body text. */
+    gap?: Space;
+}
+export interface SkeletonCircleProps extends HTMLAttributes<HTMLDivElement> {
+    /** Matches control heights: sm 32 · md 40 · lg 48 (× density). Default `md`. */
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Text: import("react").ForwardRefExoticComponent<SkeletonTextProps & import("react").RefAttributes<HTMLDivElement>>;
+    Circle: import("react").ForwardRefExoticComponent<SkeletonCircleProps & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/components/display/Skeleton/Skeleton.js

@@ -0,0 +1,60 @@
+import { cx as e } from "../../../utils/cx.js";
+import { mergeStyles as t } from "../../../utils/responsive.js";
+import { space as n } from "../../../utils/tokens.js";
+import r from "./Skeleton.module.js";
+import { forwardRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/display/Skeleton/Skeleton.tsx
+var o = {
+	full: "100%",
+	"3/4": "75%",
+	"2/3": "66.667%",
+	"1/2": "50%",
+	"1/3": "33.333%",
+	"1/4": "25%"
+}, s = (e) => typeof e == "number" ? n(e) : o[e], c = (e) => typeof e == "number" ? n(e) : e === "text" ? "1lh" : e === "heading" ? "calc(var(--text-xl) * var(--leading-snug))" : e === "control" ? "var(--control-md)" : "var(--space-9)", l = i(function({ width: n = "full", height: i = "text", radius: o = "field", lines: l, className: d, style: f, ...p }, m) {
+	return l === void 0 ? /* @__PURE__ */ a("div", {
+		ref: m,
+		"aria-hidden": "true",
+		className: e(r.skeleton, d),
+		"data-radius": o,
+		style: t({
+			"--skeleton-width": s(n),
+			"--skeleton-height": c(i)
+		}, f),
+		...p
+	}) : /* @__PURE__ */ a(u, {
+		ref: m,
+		lines: l,
+		className: d,
+		style: f,
+		...p
+	});
+}), u = i(function({ lines: i = 3, gap: o, className: s, style: c, ...l }, u) {
+	return /* @__PURE__ */ a("div", {
+		ref: u,
+		"aria-hidden": "true",
+		className: e(r.text, s),
+		style: t(o === void 0 ? void 0 : { "--skeleton-gap": n(o) }, c),
+		...l,
+		children: Array.from({ length: Math.max(1, i) }, (t, n) => /* @__PURE__ */ a("div", {
+			className: e(r.skeleton, r.line),
+			"data-radius": "field"
+		}, n))
+	});
+}), d = i(function({ size: t = "md", className: n, ...i }, o) {
+	return /* @__PURE__ */ a("div", {
+		ref: o,
+		"aria-hidden": "true",
+		className: e(r.skeleton, r.circle, n),
+		"data-size": t,
+		...i
+	});
+}), f = Object.assign(l, {
+	Text: u,
+	Circle: d
+});
+//#endregion
+export { f as Skeleton };
+
+//# sourceMappingURL=Skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","names":["styles","Skeleton_module_default","FRACTION","widthCss","w","space","heightCss","h","SkeletonRoot","forwardRef","rest","lines","cx","className","radius","mergeStyles","width","height","style","SkeletonText","gap","i","SkeletonCircle","size","Skeleton"],"sources":["../../../../src/components/display/Skeleton/Skeleton.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles } from '#utils/responsive'\nimport { space, type Space } from '#utils/tokens'\nimport styles from './Skeleton.module.css'\n\n/** A fraction of the container, or a step on the space scale. */\nexport type SkeletonWidth = 'full' | '3/4' | '2/3' | '1/2' | '1/3' | '1/4' | Space\n/** A text line, a heading line, a control, a block — or a step on the space scale. */\nexport type SkeletonHeight = 'text' | 'heading' | 'control' | 'block' | Space\nexport type SkeletonRadius = 'field' | 'surface' | 'media' | 'chip'\n\nconst FRACTION: Record<Exclude<SkeletonWidth, Space>, string> = {\n  full: '100%',\n  '3/4': '75%',\n  '2/3': '66.667%',\n  '1/2': '50%',\n  '1/3': '33.333%',\n  '1/4': '25%',\n}\n\nconst widthCss = (w: SkeletonWidth) => (typeof w === 'number' ? space(w) : FRACTION[w])\nconst heightCss = (h: SkeletonHeight) =>\n  typeof h === 'number'\n    ? space(h)\n    : h === 'text'\n      ? '1lh'\n      : h === 'heading'\n        ? 'calc(var(--text-xl) * var(--leading-snug))'\n        : h === 'control'\n          ? 'var(--control-md)'\n          : 'var(--space-9)'\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  /** Default `full`. */\n  width?: SkeletonWidth\n  /** Default `text` (one line of the surrounding text). */\n  height?: SkeletonHeight\n  /** Default `field`. */\n  radius?: SkeletonRadius\n  /** Render a paragraph of this many lines instead of one block (same as `Skeleton.Text`). */\n  lines?: number\n}\n\n/**\n * Placeholder for content that's on its way. Every piece is `aria-hidden`: announce\n * loading once on the region that's loading (`aria-busy`, or a `Spinner` label), not per bar.\n *\n * <Skeleton width=\"1/2\" height=\"heading\" />\n * <Skeleton.Text lines={3} />\n * <Skeleton.Circle size=\"md\" />\n */\nconst SkeletonRoot = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton(\n  { width = 'full', height = 'text', radius = 'field', lines, className, style, ...rest },\n  ref,\n) {\n  if (lines !== undefined)\n    return <SkeletonText ref={ref} lines={lines} className={className} style={style} {...rest} />\n  return (\n    <div\n      ref={ref}\n      aria-hidden=\"true\"\n      className={cx(styles.skeleton, className)}\n      data-radius={radius}\n      style={mergeStyles(\n        {\n          '--skeleton-width': widthCss(width),\n          '--skeleton-height': heightCss(height),\n        } as CSSProperties,\n        style,\n      )}\n      {...rest}\n    />\n  )\n})\n\nexport interface SkeletonTextProps extends HTMLAttributes<HTMLDivElement> {\n  /** Number of lines. The last one is shorter, like the end of a paragraph. Default 3. */\n  lines?: number\n  /** Space between lines. Default: the gap of real body text. */\n  gap?: Space\n}\n\nconst SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(function SkeletonText(\n  { lines = 3, gap, className, style, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      aria-hidden=\"true\"\n      className={cx(styles.text, className)}\n      style={mergeStyles(\n        gap !== undefined ? ({ '--skeleton-gap': space(gap) } as CSSProperties) : undefined,\n        style,\n      )}\n      {...rest}\n    >\n      {Array.from({ length: Math.max(1, lines) }, (_, i) => (\n        <div key={i} className={cx(styles.skeleton, styles.line)} data-radius=\"field\" />\n      ))}\n    </div>\n  )\n})\n\nexport interface SkeletonCircleProps extends HTMLAttributes<HTMLDivElement> {\n  /** Matches control heights: sm 32 · md 40 · lg 48 (× density). Default `md`. */\n  size?: 'sm' | 'md' | 'lg'\n}\n\n/** Avatar placeholder. Follows the theme's avatar shape, so it's a rounded square in Monograph. */\nconst SkeletonCircle = forwardRef<HTMLDivElement, SkeletonCircleProps>(function SkeletonCircle(\n  { size = 'md', className, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      aria-hidden=\"true\"\n      className={cx(styles.skeleton, styles.circle, className)}\n      data-size={size}\n      {...rest}\n    />\n  )\n})\n\nexport const Skeleton = Object.assign(SkeletonRoot, { Text: SkeletonText, Circle: SkeletonCircle })\n"],"mappings":";;;;;;;AAYA,IAAME,IAA0D;CAC9D,MAAM;CACN,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;AACT,GAEMC,KAAY,MAAsB,OAAOC,KAAM,WAAWC,EAAMD,CAAC,IAAIF,EAASE,IAC9EE,KAAa,MACjB,OAAOC,KAAM,WACTF,EAAME,CAAC,IACPA,MAAM,SACJ,QACAA,MAAM,YACJ,+CACAA,MAAM,YACJ,sBACA,kBAqBNC,IAAeC,EAA0C,SAC7D,EAAE,WAAQ,QAAQ,YAAS,QAAQ,YAAS,SAAS,UAAO,cAAW,UAAO,GAAGC,KACjF,GACA;CAGA,OAFIC,MAAU,KAAA,IAGZ,kBAAC,OAAD;EACO;EACL,eAAY;EACZ,WAAWC,EAAGZ,EAAO,UAAUa,CAAS;EACxC,eAAaC;EACb,OAAOC,EACL;GACE,oBAAoBZ,EAASa,CAAK;GAClC,qBAAqBV,EAAUW,CAAM;EACvC,GACAC,CACF;EACA,GAAIR;CACL,CAAA,IAfM,kBAACS,GAAD;EAAmB;EAAY;EAAkB;EAAkB;EAAO,GAAIT;CAAO,CAAA;AAiBhG,CAAC,GASKS,IAAeV,EAA8C,SACjE,EAAE,WAAQ,GAAG,QAAK,cAAW,UAAO,GAAGC,KACvC,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,eAAY;EACZ,WAAWE,EAAGZ,EAAO,MAAMa,CAAS;EACpC,OAAOE,EACLK,MAAQ,KAAA,IAAkE,KAAA,IAArD,EAAE,kBAAkBf,EAAMe,CAAG,EAAE,GACpDF,CACF;EACA,GAAIR;EAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAGC,CAAK,EAAE,IAAI,GAAG,MAC9C,kBAAC,OAAD;GAAa,WAAWC,EAAGZ,EAAO,UAAUA,EAAO,IAAI;GAAG,eAAY;EAAS,GAArEqB,CAAqE,CAChF;CACE,CAAA;AAET,CAAC,GAQKC,IAAiBb,EAAgD,SACrE,EAAE,UAAO,MAAM,cAAW,GAAGC,KAC7B,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,eAAY;EACZ,WAAWE,EAAGZ,EAAO,UAAUA,EAAO,QAAQa,CAAS;EACvD,aAAWU;EACX,GAAIb;CACL,CAAA;AAEL,CAAC,GAEYc,IAAW,OAAO,OAAOhB,GAAc;CAAE,MAAMW;CAAc,QAAQG;AAAe,CAAC"}

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

@@ -0,0 +1,12 @@
+//#region src/components/display/Skeleton/Skeleton.module.css
+var e = "kiln-Skeleton__skeleton", t = "kiln-Skeleton__breathe", n = "kiln-Skeleton__text", r = "kiln-Skeleton__line", i = "kiln-Skeleton__circle", a = {
+	skeleton: e,
+	breathe: t,
+	text: n,
+	line: r,
+	circle: i
+};
+//#endregion
+export { t as breathe, i as circle, a as default, r as line, e as skeleton, n as text };
+
+//# sourceMappingURL=Skeleton.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.module.js","names":["skeleton","breathe","text","line","circle","Skeleton_module_default"],"sources":["../../../../src/components/display/Skeleton/Skeleton.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --skeleton-color         resting tone, default var(--color-surface-sunken)\n *   --skeleton-color-peak    tone at the top of the breath, default var(--color-line)\n *   --skeleton-circle-radius default var(--radius-avatar)\n *\n * Written by the component: --skeleton-width, --skeleton-height, --skeleton-gap.\n *\n * The \"shimmer\" is a slow breath between two neutrals — no gradient sweep. Every block\n * shares the same clock (no per-element delay), so a page of placeholders moves as one.\n */\n.skeleton {\n  --_radius: var(--radius-field);\n\n  display: block;\n  inline-size: var(--skeleton-width, 100%);\n  max-inline-size: 100%;\n  block-size: var(--skeleton-height, 1lh);\n  border-radius: var(--_radius);\n  background-color: var(--skeleton-color, var(--color-surface-sunken));\n  animation: breathe calc(var(--dur-3) * 5) var(--ease-in-out) infinite alternate;\n}\n\n.skeleton[data-radius='surface'] {\n  --_radius: var(--radius-surface);\n}\n.skeleton[data-radius='media'] {\n  --_radius: var(--radius-media);\n}\n.skeleton[data-radius='chip'] {\n  --_radius: var(--radius-chip);\n}\n\n.text {\n  display: flex;\n  flex-direction: column;\n  gap: var(--skeleton-gap, calc(1lh - 1em));\n}\n\n.line {\n  inline-size: 100%;\n  block-size: 1em;\n  /* a text bar is a line, not a field: cap its rounding */\n  border-radius: min(var(--radius-field), 0.3em);\n}\n.line:last-child:not(:first-child) {\n  inline-size: 62%;\n}\n\n.circle {\n  --_s: var(--control-md);\n  inline-size: var(--_s);\n  block-size: var(--_s);\n  flex: none;\n  border-radius: var(--skeleton-circle-radius, var(--radius-avatar));\n}\n.circle[data-size='sm'] {\n  --_s: var(--control-sm);\n}\n.circle[data-size='lg'] {\n  --_s: var(--control-lg);\n}\n\n@keyframes breathe {\n  from {\n    background-color: var(--skeleton-color, var(--color-surface-sunken));\n  }\n  to {\n    background-color: var(--skeleton-color-peak, var(--color-line));\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .skeleton {\n    animation: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Skeleton } from './Skeleton.js';
+export type { SkeletonProps, SkeletonTextProps, SkeletonCircleProps, SkeletonWidth, SkeletonHeight, SkeletonRadius, } from './Skeleton.js';

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

@@ -0,0 +1,25 @@
+import { type HTMLAttributes } from 'react';
+import type { Size, Tone } from '../../../utils/tokens.js';
+export type StampPlacement = 'inline' | 'corner';
+export interface StampProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Ink colour. Default `critical` — stamps are usually verdicts. */
+    tone?: Tone;
+    /** Tilt in degrees. Keep it small (−10 to 10); default −6. `0` for a square stamp. */
+    rotate?: number;
+    size?: Size;
+    /**
+     * `inline` (default) sits in the flow. `corner` is pinned to the top-end corner of the
+     * nearest positioned ancestor — a <Card> is positioned — so stamping an object never
+     * changes its height.
+     */
+    placement?: StampPlacement;
+}
+/**
+ * A rubber-stamp verdict: "Rejected", "Paid", "Void". A double rule in the display
+ * face, knocked slightly off square. Decorative but deliberate — use one per object,
+ * on the thing it judges.
+ *
+ * It reads as its text; pass `aria-label` when the visible word needs more context
+ * ("Invoice 1039 overdue by 12 days").
+ */
+export declare const Stamp: import("react").ForwardRefExoticComponent<StampProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/display/Stamp/Stamp.js

@@ -0,0 +1,21 @@
+import { cx as e } from "../../../utils/cx.js";
+import { mergeStyles as t } from "../../../utils/responsive.js";
+import n from "./Stamp.module.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/display/Stamp/Stamp.tsx
+var a = r(function({ tone: r = "critical", rotate: a = -6, size: o = "md", placement: s = "inline", className: c, style: l, ...u }, d) {
+	return /* @__PURE__ */ i("span", {
+		ref: d,
+		className: e(n.stamp, c),
+		"data-tone": r,
+		"data-size": o,
+		"data-placement": s === "corner" ? "corner" : void 0,
+		style: t({ "--stamp-rotate": `${String(a)}deg` }, l),
+		...u
+	});
+});
+//#endregion
+export { a as Stamp };
+
+//# sourceMappingURL=Stamp.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stamp.js","names":["styles","Stamp_module_default","Stamp","forwardRef","rest","cx","className","tone","size","placement","mergeStyles","rotate","style"],"sources":["../../../../src/components/display/Stamp/Stamp.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles } from '#utils/responsive'\nimport type { Size, Tone } from '#utils/tokens'\nimport styles from './Stamp.module.css'\n\nexport type StampPlacement = 'inline' | 'corner'\n\nexport interface StampProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Ink colour. Default `critical` — stamps are usually verdicts. */\n  tone?: Tone\n  /** Tilt in degrees. Keep it small (−10 to 10); default −6. `0` for a square stamp. */\n  rotate?: number\n  size?: Size\n  /**\n   * `inline` (default) sits in the flow. `corner` is pinned to the top-end corner of the\n   * nearest positioned ancestor — a <Card> is positioned — so stamping an object never\n   * changes its height.\n   */\n  placement?: StampPlacement\n}\n\n/**\n * A rubber-stamp verdict: \"Rejected\", \"Paid\", \"Void\". A double rule in the display\n * face, knocked slightly off square. Decorative but deliberate — use one per object,\n * on the thing it judges.\n *\n * It reads as its text; pass `aria-label` when the visible word needs more context\n * (\"Invoice 1039 overdue by 12 days\").\n */\nexport const Stamp = forwardRef<HTMLSpanElement, StampProps>(function Stamp(\n  { tone = 'critical', rotate = -6, size = 'md', placement = 'inline', className, style, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      className={cx(styles.stamp, className)}\n      data-tone={tone}\n      data-size={size}\n      data-placement={placement === 'corner' ? 'corner' : undefined}\n      style={mergeStyles({ '--stamp-rotate': `${String(rotate)}deg` } as CSSProperties, style)}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;AA8BA,IAAaE,IAAQC,EAAwC,SAC3D,EAAE,UAAO,YAAY,YAAS,IAAI,UAAO,MAAM,eAAY,UAAU,cAAW,UAAO,GAAGC,KAC1F,GACA;CACA,OACE,kBAAC,QAAD;EACO;EACL,WAAWC,EAAGL,EAAO,OAAOM,CAAS;EACrC,aAAWC;EACX,aAAWC;EACX,kBAAgBC,MAAc,WAAW,WAAW,KAAA;EACpD,OAAOC,EAAY,EAAE,kBAAkB,GAAG,OAAOC,CAAM,EAAE,KAAK,GAAoBC,CAAK;EACvF,GAAIR;CACL,CAAA;AAEL,CAAC"}

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

@@ -0,0 +1,6 @@
+//#region src/components/display/Stamp/Stamp.module.css
+var e = "kiln-Stamp__stamp", t = { stamp: e };
+//#endregion
+export { t as default, e as stamp };
+
+//# sourceMappingURL=Stamp.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stamp.module.js","names":["stamp","Stamp_module_default"],"sources":["../../../../src/components/display/Stamp/Stamp.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --stamp-font        default var(--font-display)\n *   --stamp-weight      default max(var(--display-weight), 650) — stamps are never light\n *   --stamp-transform   default var(--display-transform)\n *   --stamp-tracking    default 0.06em\n *   --stamp-radius      default var(--radius-field)\n *   --stamp-rule        width of each rule, default var(--border-width-strong)\n *   --stamp-corner-inset  offset from the corner for placement=\"corner\", default var(--space-3)\n *\n * Written by the component: --stamp-rotate.\n *\n * The double rule is a border plus an inset outline in the same ink — it scales with\n * the theme's rule weight (1px in Monograph, 3px in Fiesta).\n */\n.stamp {\n  --_ink: var(--tone-critical-text);\n  --_rule: var(--stamp-rule, var(--border-width-strong));\n  --_fs: var(--text-sm);\n  --_gap: 0.16em;\n  --_pad: 0.3em;\n\n  display: inline-block;\n  /* both rules + the gap between them sit inside the padding */\n  padding-block: calc(var(--_rule) + var(--_gap) + var(--_pad))\n    calc(var(--_rule) + var(--_gap) + var(--_pad) - 0.05em);\n  padding-inline: calc(var(--_rule) + var(--_gap) + var(--_pad) * 1.8);\n  border: var(--_rule) solid var(--_ink);\n  border-radius: var(--stamp-radius, var(--radius-field));\n  outline: var(--_rule) solid var(--_ink);\n  outline-offset: calc(var(--_rule) * -2 - var(--_gap));\n  color: var(--_ink);\n  font-family: var(--stamp-font, var(--font-display));\n  font-size: var(--_fs);\n  font-weight: var(--stamp-weight, max(var(--display-weight), 650));\n  font-stretch: var(--display-stretch);\n  font-variation-settings: 'opsz' var(--display-opsz);\n  text-transform: var(--stamp-transform, var(--display-transform));\n  letter-spacing: var(--stamp-tracking, 0.06em);\n  line-height: 1;\n  white-space: nowrap;\n  rotate: var(--stamp-rotate, -6deg);\n  user-select: none;\n}\n\n.stamp[data-size='sm'] {\n  --_fs: var(--text-xs);\n}\n.stamp[data-size='lg'] {\n  --_fs: var(--text-xl);\n}\n\n.stamp[data-tone='neutral'] {\n  --_ink: var(--color-ink-muted);\n}\n.stamp[data-tone='accent'] {\n  --_ink: var(--color-accent-text);\n}\n.stamp[data-tone='positive'] {\n  --_ink: var(--tone-positive-text);\n}\n.stamp[data-tone='caution'] {\n  --_ink: var(--tone-caution-text);\n}\n.stamp[data-tone='info'] {\n  --_ink: var(--tone-info-text);\n}\n\n/* Corner: out of flow, pinned to the top-end of the nearest positioned ancestor (Card is). */\n.stamp[data-placement='corner'] {\n  position: absolute;\n  inset-block-start: var(--stamp-corner-inset, var(--space-3));\n  inset-inline-end: var(--stamp-corner-inset, var(--space-3));\n  z-index: 1;\n  pointer-events: none;\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Stamp } from './Stamp.js';
+export type { StampProps, StampPlacement } from './Stamp.js';

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

@@ -0,0 +1,40 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type DeltaDirection, type DeltaTone } from '../Delta/index.js';
+export type StatSize = 'sm' | 'md' | 'lg' | 'hero';
+export type StatDeltaDirection = DeltaDirection;
+export type StatDeltaTone = DeltaTone;
+/** Colour of the figure. `default` is ink; use a tone only when the number itself is the news. */
+export type StatTone = 'default' | 'positive' | 'critical' | 'accent';
+export interface StatDelta {
+    /** The change, already formatted: "+$212.40", "3 places", "4.1%". */
+    value: ReactNode;
+    direction: StatDeltaDirection;
+    /**
+     * Whether the change is good. Defaults from direction (up → positive, down → critical),
+     * so override it when down is good: costs that fell are `direction="down" tone="positive"`.
+     */
+    tone?: StatDeltaTone;
+}
+export interface StatProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** What the number is. Sentence case, short: "Revenue", "Seats used", "Days left". */
+    label: ReactNode;
+    /** The figure. Usually `<Amount>`/`<Numeral>`; plain strings are set tabular too. */
+    value: ReactNode;
+    /** Change against a comparison period, shown beside the value. */
+    delta?: StatDelta;
+    /** One line of context under the value: "of $60,000 target", "after 3 sprints". */
+    hint?: ReactNode;
+    /** Default `md`. `hero` is for the one figure a page is about. */
+    size?: StatSize;
+    /** A hairline above the label — lines up a row of stats like ledger columns. */
+    rule?: boolean;
+    /** Colour of the value: an overrun in `critical`, the live total in `accent`. Default ink. */
+    tone?: StatTone;
+}
+/**
+ * A single labelled figure. Typographic, not decorative: label, number, and the change
+ * on one baseline — no tile, no icon, no gradient.
+ *
+ * <Stat label="Costs" value="$4,812.40" delta={{ value: '$212.40', direction: 'up', tone: 'critical' }} />
+ */
+export declare const Stat: import("react").ForwardRefExoticComponent<StatProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/display/Stat/Stat.js

@@ -0,0 +1,46 @@
+import { cx as e } from "../../../utils/cx.js";
+import { Delta as t } from "../Delta/Delta.js";
+import n from "./Stat.module.js";
+import { forwardRef as r, useId as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/display/Stat/Stat.tsx
+var s = r(function({ label: r, value: s, delta: c, hint: l, size: u = "md", rule: d = !1, tone: f, className: p, ...m }, h) {
+	let g = i();
+	return /* @__PURE__ */ o("div", {
+		ref: h,
+		role: "group",
+		"aria-labelledby": g,
+		className: e(n.stat, p),
+		"data-size": u,
+		"data-rule": d || void 0,
+		"data-tone": f && f !== "default" ? f : void 0,
+		...m,
+		children: [
+			/* @__PURE__ */ a("div", {
+				id: g,
+				className: n.label,
+				children: r
+			}),
+			/* @__PURE__ */ o("div", {
+				className: n.figure,
+				children: [/* @__PURE__ */ a("span", {
+					className: n.value,
+					children: s
+				}), c ? /* @__PURE__ */ a(t, {
+					className: n.delta,
+					direction: c.direction,
+					tone: c.tone,
+					children: c.value
+				}) : null]
+			}),
+			l ? /* @__PURE__ */ a("div", {
+				className: n.hint,
+				children: l
+			}) : null
+		]
+	});
+});
+//#endregion
+export { s as Stat };
+
+//# sourceMappingURL=Stat.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stat.js","names":["styles","Stat_module_default","Stat","forwardRef","rest","labelId","useId","cx","className","size","rule","tone","label","value","delta","Delta","hint"],"sources":["../../../../src/components/display/Stat/Stat.tsx"],"sourcesContent":["import { forwardRef, useId, type HTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport { Delta, type DeltaDirection, type DeltaTone } from '#components/display/Delta'\nimport styles from './Stat.module.css'\n\nexport type StatSize = 'sm' | 'md' | 'lg' | 'hero'\nexport type StatDeltaDirection = DeltaDirection\nexport type StatDeltaTone = DeltaTone\n/** Colour of the figure. `default` is ink; use a tone only when the number itself is the news. */\nexport type StatTone = 'default' | 'positive' | 'critical' | 'accent'\n\nexport interface StatDelta {\n  /** The change, already formatted: \"+$212.40\", \"3 places\", \"4.1%\". */\n  value: ReactNode\n  direction: StatDeltaDirection\n  /**\n   * Whether the change is good. Defaults from direction (up → positive, down → critical),\n   * so override it when down is good: costs that fell are `direction=\"down\" tone=\"positive\"`.\n   */\n  tone?: StatDeltaTone\n}\n\nexport interface StatProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** What the number is. Sentence case, short: \"Revenue\", \"Seats used\", \"Days left\". */\n  label: ReactNode\n  /** The figure. Usually `<Amount>`/`<Numeral>`; plain strings are set tabular too. */\n  value: ReactNode\n  /** Change against a comparison period, shown beside the value. */\n  delta?: StatDelta\n  /** One line of context under the value: \"of $60,000 target\", \"after 3 sprints\". */\n  hint?: ReactNode\n  /** Default `md`. `hero` is for the one figure a page is about. */\n  size?: StatSize\n  /** A hairline above the label — lines up a row of stats like ledger columns. */\n  rule?: boolean\n  /** Colour of the value: an overrun in `critical`, the live total in `accent`. Default ink. */\n  tone?: StatTone\n}\n\n/**\n * A single labelled figure. Typographic, not decorative: label, number, and the change\n * on one baseline — no tile, no icon, no gradient.\n *\n * <Stat label=\"Costs\" value=\"$4,812.40\" delta={{ value: '$212.40', direction: 'up', tone: 'critical' }} />\n */\nexport const Stat = forwardRef<HTMLDivElement, StatProps>(function Stat(\n  { label, value, delta, hint, size = 'md', rule = false, tone, className, ...rest },\n  ref,\n) {\n  const labelId = useId()\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-labelledby={labelId}\n      className={cx(styles.stat, className)}\n      data-size={size}\n      data-rule={rule || undefined}\n      data-tone={tone && tone !== 'default' ? tone : undefined}\n      {...rest}\n    >\n      <div id={labelId} className={styles.label}>\n        {label}\n      </div>\n      <div className={styles.figure}>\n        <span className={styles.value}>{value}</span>\n        {delta ? (\n          <Delta className={styles.delta} direction={delta.direction} tone={delta.tone}>\n            {delta.value}\n          </Delta>\n        ) : null}\n      </div>\n      {hint ? <div className={styles.hint}>{hint}</div> : null}\n    </div>\n  )\n})\n"],"mappings":";;;;;;AA6CA,IAAaE,IAAOC,EAAsC,SACxD,EAAE,UAAO,UAAO,UAAO,SAAM,UAAO,MAAM,UAAO,IAAO,SAAM,cAAW,GAAGC,KAC5E,GACA;CACA,IAAMC,IAAUC,EAAM;CACtB,OACE,kBAAC,OAAD;EACO;EACL,MAAK;EACL,mBAAiBD;EACjB,WAAWE,EAAGP,EAAO,MAAMQ,CAAS;EACpC,aAAWC;EACX,aAAWC,KAAQ,KAAA;EACnB,aAAWC,KAAQA,MAAS,YAAYA,IAAO,KAAA;EAC/C,GAAIP;EARN,UAAA;GAUE,kBAAC,OAAD;IAAK,IAAIC;IAAS,WAAWL,EAAO;IACjC,UAAAY;GACE,CAAA;GACL,kBAAC,OAAD;IAAK,WAAWZ,EAAO;IAAvB,UAAA,CACE,kBAAC,QAAD;KAAM,WAAWA,EAAO;KAAQ,UAAAa;IAAY,CAAA,GAC3CC,IACC,kBAACC,GAAD;KAAO,WAAWf,EAAO;KAAO,WAAWc,EAAM;KAAW,MAAMA,EAAM;KACrE,UAAAA,EAAM;IACF,CAAA,IACL,IACD;;GACJE,IAAO,kBAAC,OAAD;IAAK,WAAWhB,EAAO;IAAO,UAAAgB;GAAU,CAAA,IAAI;EACjD;;AAET,CAAC"}

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

@@ -0,0 +1,13 @@
+//#region src/components/display/Stat/Stat.module.css
+var e = "kiln-Stat__stat", t = "kiln-Stat__label", n = "kiln-Stat__figure", r = "kiln-Stat__value", i = "kiln-Stat__delta", a = "kiln-Stat__hint", o = {
+	stat: e,
+	label: t,
+	figure: n,
+	value: r,
+	delta: i,
+	hint: a
+};
+//#endregion
+export { o as default, i as delta, n as figure, a as hint, t as label, e as stat, r as value };
+
+//# sourceMappingURL=Stat.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stat.module.js","names":["stat","label","figure","value","delta","hint","Stat_module_default"],"sources":["../../../../src/components/display/Stat/Stat.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --stat-value-font     default var(--font-numeric)\n *   --stat-value-weight   default var(--heading-weight)\n *   --stat-fit            how many value-ems of width a figure is assumed to need, default 6.5\n *                         (Ledger 7.5: its receipt mono is wide).\n *                         The value never grows past its size step, and shrinks below it\n *                         when the Stat is narrower than --stat-fit × that size.\n *\n * Fitting: the Stat is an inline-size container, so a figure in a narrow grid cell scales\n * down (cqi) instead of running into its neighbour. Containment would make a Stat inside a\n * flex row (Inline) zero-wide, so its intrinsic width is stated instead: --stat-fit value-ems.\n * A figure longer than that may still wrap as a last resort, never overlap.\n *\n * The change is a <Delta> set at --text-sm on the value's baseline.\n *\n * The value is set in the theme's numeric face, tabular and lining, so a row of stats\n * (or the same stat updating) never jitters. Label above, change on the value's baseline.\n */\n.stat {\n  --_value-size: var(--text-2xl);\n  --_value-leading: 1;\n  --_fit: var(--stat-fit, 6.5);\n\n  container-type: inline-size;\n  contain-intrinsic-inline-size: auto calc(var(--_value-size) * var(--_fit));\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  min-inline-size: 0;\n  font-family: var(--font-text);\n  color: var(--color-ink);\n}\n\n.stat[data-size='sm'] {\n  --_value-size: var(--text-lg);\n}\n.stat[data-size='md'] {\n  --_value-size: var(--text-2xl);\n}\n.stat[data-size='lg'] {\n  --_value-size: var(--text-3xl);\n}\n.stat[data-size='hero'] {\n  --_value-size: var(--text-display-md);\n  --_value-leading: 1;\n\n  gap: var(--space-2);\n}\n\n.stat[data-rule] {\n  padding-block-start: var(--space-3);\n  border-block-start: var(--border-width) solid var(--color-line-strong);\n}\n\n.label {\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n  line-height: var(--leading-snug);\n}\n\n.figure {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: var(--space-1) var(--space-3);\n  min-inline-size: 0;\n}\n\n.value {\n  font-family: var(--stat-value-font, var(--font-numeric));\n  font-weight: var(--stat-value-weight, var(--heading-weight));\n  font-stretch: var(--numeric-stretch);\n  font-variant-numeric: tabular-nums lining-nums;\n  font-size: min(var(--_value-size), calc(100cqi / var(--_fit)));\n  line-height: var(--_value-leading);\n  letter-spacing: -0.01em;\n  max-inline-size: 100%;\n  overflow-wrap: anywhere;\n}\n.stat .value > * {\n  white-space: normal; /* last resort (see top): a Numeral wraps rather than overlaps */\n}\n.stat[data-tone='positive'] .value {\n  color: var(--tone-positive-text);\n}\n.stat[data-tone='critical'] .value {\n  color: var(--tone-critical-text);\n}\n.stat[data-tone='accent'] .value {\n  color: var(--color-accent-text);\n}\n\n.stat[data-size='hero'] .value {\n  letter-spacing: var(--display-tracking);\n}\n\n.delta {\n  font-size: var(--text-sm);\n}\n\n.hint {\n  color: var(--color-ink-subtle);\n  font-size: var(--text-xs);\n  line-height: var(--leading-snug);\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Stat } from './Stat.js';
+export type { StatProps, StatSize, StatTone, StatDelta, StatDeltaDirection, StatDeltaTone, } from './Stat.js';

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

@@ -0,0 +1,64 @@
+import { type HTMLAttributes, type TableHTMLAttributes, type TdHTMLAttributes, type ThHTMLAttributes } from 'react';
+import { type VisibilityProps } from '../../../utils/visibility.js';
+export type TableDensity = 'compact' | 'regular';
+export type TableVariant = 'rules' | 'plain';
+export type TableAlign = 'start' | 'center' | 'end';
+export type TableSort = 'asc' | 'desc' | 'none';
+/** `fill` takes the spare width (the name column); `min` shrinks to its content. */
+export type TableColumnWidth = 'fill' | 'min';
+export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    /** Row height. Default `regular`. */
+    density?: TableDensity;
+    /** `rules` (default): a hairline under every row. `plain`: only the header rule. */
+    variant?: TableVariant;
+    /** Alternate row fills. Off by default — rules usually read better. */
+    striped?: boolean;
+    /**
+     * Keep the header visible while rows scroll. The wrapper becomes the scroll container
+     * (capped by `--table-max-height`, default 70vh), since a horizontally scrolling wrapper
+     * would otherwise trap a page-sticky header.
+     */
+    stickyHeader?: boolean;
+    /**
+     * Name for the scroll container. When set, the wrapper becomes a focusable, labelled
+     * region so keyboard users can scroll a wide table.
+     */
+    label?: string;
+}
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    /** `--color-highlight` fill — "you", your project, the circled line. */
+    highlighted?: boolean;
+    /** Hover fill for rows that respond to clicks (put the real link in a cell). */
+    interactive?: boolean;
+}
+export interface TableHeaderCellProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align' | 'width'>, VisibilityProps {
+    align?: TableAlign;
+    /** Numeric column: right-aligned with tabular figures. */
+    numeric?: boolean;
+    /** Column sizing: `fill` takes the spare width, `min` shrinks to fit. Default: automatic. */
+    width?: TableColumnWidth;
+    /** Current sort of this column. With `onSort`, the label becomes a button and `aria-sort` is set. */
+    sort?: TableSort;
+    /** Called when the sort button is pressed. Decide the next direction yourself. */
+    onSort?: () => void;
+}
+/**
+ * Hide a column on small screens: put the same `hideBelow` on its HeaderCell and on
+ * every Cell in that column (cells are `display: none`, so the columns stay aligned).
+ */
+export interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'>, VisibilityProps {
+    align?: TableAlign;
+    /** Figures: right-aligned, tabular, in the theme's numeric face (mono in Ledger). */
+    numeric?: boolean;
+    /** Render as `<th scope="row">` — the cell that names the row (project, client). */
+    rowHeader?: boolean;
+}
+export declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>> & {
+    Head: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Foot: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Row: import("react").ForwardRefExoticComponent<TableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
+    HeaderCell: import("react").ForwardRefExoticComponent<TableHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+    Cell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+    Caption: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & import("react").RefAttributes<HTMLTableCaptionElement>>;
+};

package/dist/components/display/Table/Table.js

@@ -0,0 +1,124 @@
+import { cx as e } from "../../../utils/cx.js";
+import { ChevronDownIcon as t, ChevronUpIcon as n } from "../../../icons/icons.js";
+import { visibilityClass as r } from "../../../utils/visibility.js";
+import i from "./Table.module.js";
+import { forwardRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/display/Table/Table.tsx
+var c = a(function({ density: t = "regular", variant: n = "rules", striped: r = !1, stickyHeader: a = !1, label: s, className: c, ...l }, u) {
+	return /* @__PURE__ */ o("div", {
+		className: i.scroll,
+		"data-kiln-component": "",
+		"data-sticky-header": a || void 0,
+		role: s ? "region" : void 0,
+		"aria-label": s,
+		tabIndex: s ? 0 : void 0,
+		children: /* @__PURE__ */ o("table", {
+			ref: u,
+			className: e(i.table, c),
+			"data-density": t,
+			"data-variant": n,
+			"data-striped": r || void 0,
+			"data-sticky-header": a || void 0,
+			...l
+		})
+	});
+}), l = a(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ o("thead", {
+		ref: r,
+		className: e(i.head, t),
+		...n
+	});
+}), u = a(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ o("tbody", {
+		ref: r,
+		className: e(i.body, t),
+		...n
+	});
+}), d = a(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ o("tfoot", {
+		ref: r,
+		className: e(i.foot, t),
+		...n
+	});
+}), f = a(function({ highlighted: t = !1, interactive: n = !1, className: r, ...a }, s) {
+	return /* @__PURE__ */ o("tr", {
+		ref: s,
+		className: e(i.row, r),
+		"data-highlighted": t || void 0,
+		"data-interactive": n || void 0,
+		...a
+	});
+}), p = {
+	asc: "ascending",
+	desc: "descending",
+	none: "none"
+}, m = a(function({ align: a, numeric: c = !1, width: l, sort: u, onSort: d, hideBelow: f, hideAbove: m, scope: h = "col", className: g, children: _, ...v }, y) {
+	let b = u !== void 0 && d !== void 0;
+	return /* @__PURE__ */ o("th", {
+		ref: y,
+		scope: h,
+		className: e(i.headerCell, r({
+			hideBelow: f,
+			hideAbove: m
+		}), g),
+		"data-align": a ?? (c ? "end" : void 0),
+		"data-numeric": c || void 0,
+		"data-width": l,
+		"data-sort": b ? u : void 0,
+		"aria-sort": u === void 0 ? void 0 : p[u],
+		...v,
+		children: b ? /* @__PURE__ */ s("button", {
+			type: "button",
+			className: i.sortButton,
+			onClick: d,
+			children: [_, /* @__PURE__ */ o("span", {
+				className: i.sortGlyph,
+				"aria-hidden": "true",
+				children: o(u === "asc" ? n : t, {})
+			})]
+		}) : _
+	});
+}), h = a(function({ align: t, numeric: n = !1, rowHeader: a = !1, hideBelow: s, hideAbove: c, className: l, ...u }, d) {
+	let f = {
+		className: e(i.cell, r({
+			hideBelow: s,
+			hideAbove: c
+		}), l),
+		"data-align": t ?? (n ? "end" : void 0),
+		"data-numeric": n || void 0,
+		"data-row-header": a || void 0
+	};
+	if (a) {
+		let { scope: e = "row", ...t } = u;
+		return /* @__PURE__ */ o("th", {
+			ref: d,
+			scope: e,
+			...f,
+			...t
+		});
+	}
+	return /* @__PURE__ */ o("td", {
+		ref: d,
+		...f,
+		...u
+	});
+}), g = a(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ o("caption", {
+		ref: r,
+		className: e(i.caption, t),
+		...n
+	});
+}), _ = Object.assign(c, {
+	Head: l,
+	Body: u,
+	Foot: d,
+	Row: f,
+	HeaderCell: m,
+	Cell: h,
+	Caption: g
+});
+//#endregion
+export { _ as Table };
+
+//# sourceMappingURL=Table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","names":["styles","Table_module_default","TableRoot","forwardRef","rest","stickyHeader","label","cx","className","density","variant","striped","TableHead","TableBody","TableFoot","TableRow","highlighted","interactive","ARIA_SORT","TableHeaderCell","sortable","sort","onSort","visibilityClass","align","numeric","width","children","jsx","ChevronUpIcon","ChevronDownIcon","TableCell","shared","rowHeader","thRest","TableCaption","Table"],"sources":["../../../../src/components/display/Table/Table.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type HTMLAttributes,\n  type TableHTMLAttributes,\n  type TdHTMLAttributes,\n  type ThHTMLAttributes,\n} from 'react'\nimport { cx } from '#utils/cx'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\nimport { ChevronDownIcon, ChevronUpIcon } from '#icons'\nimport styles from './Table.module.css'\n\nexport type TableDensity = 'compact' | 'regular'\nexport type TableVariant = 'rules' | 'plain'\nexport type TableAlign = 'start' | 'center' | 'end'\nexport type TableSort = 'asc' | 'desc' | 'none'\n/** `fill` takes the spare width (the name column); `min` shrinks to its content. */\nexport type TableColumnWidth = 'fill' | 'min'\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n  /** Row height. Default `regular`. */\n  density?: TableDensity\n  /** `rules` (default): a hairline under every row. `plain`: only the header rule. */\n  variant?: TableVariant\n  /** Alternate row fills. Off by default — rules usually read better. */\n  striped?: boolean\n  /**\n   * Keep the header visible while rows scroll. The wrapper becomes the scroll container\n   * (capped by `--table-max-height`, default 70vh), since a horizontally scrolling wrapper\n   * would otherwise trap a page-sticky header.\n   */\n  stickyHeader?: boolean\n  /**\n   * Name for the scroll container. When set, the wrapper becomes a focusable, labelled\n   * region so keyboard users can scroll a wide table.\n   */\n  label?: string\n}\n\n/**\n * A semantic, styled data table: project boards, ledgers, audit logs. The wrapper scrolls\n * horizontally on narrow screens; `ref` and native props go to the `<table>`.\n *\n * <Table><Table.Head><Table.Row><Table.HeaderCell>Project</Table.HeaderCell>…</Table.Row></Table.Head>…</Table>\n */\nconst TableRoot = forwardRef<HTMLTableElement, TableProps>(function Table(\n  {\n    density = 'regular',\n    variant = 'rules',\n    striped = false,\n    stickyHeader = false,\n    label,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <div\n      className={styles.scroll}\n      data-kiln-component=\"\"\n      data-sticky-header={stickyHeader || undefined}\n      role={label ? 'region' : undefined}\n      aria-label={label}\n      tabIndex={label ? 0 : undefined}\n    >\n      <table\n        ref={ref}\n        className={cx(styles.table, className)}\n        data-density={density}\n        data-variant={variant}\n        data-striped={striped || undefined}\n        data-sticky-header={stickyHeader || undefined}\n        {...rest}\n      />\n    </div>\n  )\n})\n\nconst TableHead = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  function TableHead({ className, ...rest }, ref) {\n    return <thead ref={ref} className={cx(styles.head, className)} {...rest} />\n  },\n)\n\nconst TableBody = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  function TableBody({ className, ...rest }, ref) {\n    return <tbody ref={ref} className={cx(styles.body, className)} {...rest} />\n  },\n)\n\n/** Totals row(s). Set above a strong rule. */\nconst TableFoot = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  function TableFoot({ className, ...rest }, ref) {\n    return <tfoot ref={ref} className={cx(styles.foot, className)} {...rest} />\n  },\n)\n\nexport interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n  /** `--color-highlight` fill — \"you\", your project, the circled line. */\n  highlighted?: boolean\n  /** Hover fill for rows that respond to clicks (put the real link in a cell). */\n  interactive?: boolean\n}\n\nconst TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(\n  { highlighted = false, interactive = false, className, ...rest },\n  ref,\n) {\n  return (\n    <tr\n      ref={ref}\n      className={cx(styles.row, className)}\n      data-highlighted={highlighted || undefined}\n      data-interactive={interactive || undefined}\n      {...rest}\n    />\n  )\n})\n\nexport interface TableHeaderCellProps\n  extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align' | 'width'>, VisibilityProps {\n  align?: TableAlign\n  /** Numeric column: right-aligned with tabular figures. */\n  numeric?: boolean\n  /** Column sizing: `fill` takes the spare width, `min` shrinks to fit. Default: automatic. */\n  width?: TableColumnWidth\n  /** Current sort of this column. With `onSort`, the label becomes a button and `aria-sort` is set. */\n  sort?: TableSort\n  /** Called when the sort button is pressed. Decide the next direction yourself. */\n  onSort?: () => void\n}\n\nconst ARIA_SORT = { asc: 'ascending', desc: 'descending', none: 'none' } as const\n\nconst TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellProps>(\n  function TableHeaderCell(\n    {\n      align,\n      numeric = false,\n      width,\n      sort,\n      onSort,\n      hideBelow,\n      hideAbove,\n      scope = 'col',\n      className,\n      children,\n      ...rest\n    },\n    ref,\n  ) {\n    const sortable = sort !== undefined && onSort !== undefined\n    return (\n      <th\n        ref={ref}\n        scope={scope}\n        className={cx(styles.headerCell, visibilityClass({ hideBelow, hideAbove }), className)}\n        data-align={align ?? (numeric ? 'end' : undefined)}\n        data-numeric={numeric || undefined}\n        data-width={width}\n        data-sort={sortable ? sort : undefined}\n        aria-sort={sort !== undefined ? ARIA_SORT[sort] : undefined}\n        {...rest}\n      >\n        {sortable ? (\n          <button type=\"button\" className={styles.sortButton} onClick={onSort}>\n            {children}\n            <span className={styles.sortGlyph} aria-hidden=\"true\">\n              {sort === 'asc' ? <ChevronUpIcon /> : <ChevronDownIcon />}\n            </span>\n          </button>\n        ) : (\n          children\n        )}\n      </th>\n    )\n  },\n)\n\n/**\n * Hide a column on small screens: put the same `hideBelow` on its HeaderCell and on\n * every Cell in that column (cells are `display: none`, so the columns stay aligned).\n */\nexport interface TableCellProps\n  extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'>, VisibilityProps {\n  align?: TableAlign\n  /** Figures: right-aligned, tabular, in the theme's numeric face (mono in Ledger). */\n  numeric?: boolean\n  /** Render as `<th scope=\"row\">` — the cell that names the row (project, client). */\n  rowHeader?: boolean\n}\n\nconst TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(\n  { align, numeric = false, rowHeader = false, hideBelow, hideAbove, className, ...rest },\n  ref,\n) {\n  const shared = {\n    className: cx(styles.cell, visibilityClass({ hideBelow, hideAbove }), className),\n    'data-align': align ?? (numeric ? 'end' : undefined),\n    'data-numeric': numeric || undefined,\n    'data-row-header': rowHeader || undefined,\n  }\n  if (rowHeader) {\n    const { scope = 'row', ...thRest } = rest as ThHTMLAttributes<HTMLTableCellElement>\n    return <th ref={ref} scope={scope} {...shared} {...thRest} />\n  }\n  return <td ref={ref} {...shared} {...rest} />\n})\n\nconst TableCaption = forwardRef<HTMLTableCaptionElement, HTMLAttributes<HTMLTableCaptionElement>>(\n  function TableCaption({ className, ...rest }, ref) {\n    return <caption ref={ref} className={cx(styles.caption, className)} {...rest} />\n  },\n)\n\nexport const Table = Object.assign(TableRoot, {\n  Head: TableHead,\n  Body: TableBody,\n  Foot: TableFoot,\n  Row: TableRow,\n  HeaderCell: TableHeaderCell,\n  Cell: TableCell,\n  Caption: TableCaption,\n})\n"],"mappings":";;;;;;;AA6CA,IAAME,IAAYC,EAAyC,SACzD,EACE,aAAU,WACV,aAAU,SACV,aAAU,IACV,kBAAe,IACf,UACA,cACA,GAAGC,KAEL,GACA;CACA,OACE,kBAAC,OAAD;EACE,WAAWJ,EAAO;EAClB,uBAAoB;EACpB,sBAAoBK,KAAgB,KAAA;EACpC,MAAMC,IAAQ,WAAW,KAAA;EACzB,cAAYA;EACZ,UAAUA,IAAQ,IAAI,KAAA;EAEtB,UAAA,kBAAC,SAAD;GACO;GACL,WAAWC,EAAGP,EAAO,OAAOQ,CAAS;GACrC,gBAAcC;GACd,gBAAcC;GACd,gBAAcC,KAAW,KAAA;GACzB,sBAAoBN,KAAgB,KAAA;GACpC,GAAID;EACL,CAAA;CACE,CAAA;AAET,CAAC,GAEKQ,IAAYT,EAChB,SAAmB,EAAE,cAAW,GAAGC,KAAQ,GAAK;CAC9C,OAAO,kBAAC,SAAD;EAAY;EAAK,WAAWG,EAAGP,EAAO,MAAMQ,CAAS;EAAG,GAAIJ;CAAO,CAAA;AAC5E,CACF,GAEMS,IAAYV,EAChB,SAAmB,EAAE,cAAW,GAAGC,KAAQ,GAAK;CAC9C,OAAO,kBAAC,SAAD;EAAY;EAAK,WAAWG,EAAGP,EAAO,MAAMQ,CAAS;EAAG,GAAIJ;CAAO,CAAA;AAC5E,CACF,GAGMU,IAAYX,EAChB,SAAmB,EAAE,cAAW,GAAGC,KAAQ,GAAK;CAC9C,OAAO,kBAAC,SAAD;EAAY;EAAK,WAAWG,EAAGP,EAAO,MAAMQ,CAAS;EAAG,GAAIJ;CAAO,CAAA;AAC5E,CACF,GASMW,IAAWZ,EAA+C,SAC9D,EAAE,iBAAc,IAAO,iBAAc,IAAO,cAAW,GAAGC,KAC1D,GACA;CACA,OACE,kBAAC,MAAD;EACO;EACL,WAAWG,EAAGP,EAAO,KAAKQ,CAAS;EACnC,oBAAkBQ,KAAe,KAAA;EACjC,oBAAkBC,KAAe,KAAA;EACjC,GAAIb;CACL,CAAA;AAEL,CAAC,GAeKc,IAAY;CAAE,KAAK;CAAa,MAAM;CAAc,MAAM;AAAO,GAEjEC,IAAkBhB,EACtB,SACE,EACE,UACA,aAAU,IACV,UACA,SACA,WACA,cACA,cACA,WAAQ,OACR,cACA,aACA,GAAGC,KAEL,GACA;CACA,IAAMgB,IAAWC,MAAS,KAAA,KAAaC,MAAW,KAAA;CAClD,OACE,kBAAC,MAAD;EACO;EACE;EACP,WAAWf,EAAGP,EAAO,YAAYuB,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGf,CAAS;EACrF,cAAYgB,MAAUC,IAAU,QAAQ,KAAA;EACxC,gBAAcA,KAAW,KAAA;EACzB,cAAYC;EACZ,aAAWN,IAAWC,IAAO,KAAA;EAC7B,aAAWA,MAAS,KAAA,IAA8B,KAAA,IAAlBH,EAAUG;EAC1C,GAAIjB;EAEH,UAAAgB,IACC,kBAAC,UAAD;GAAQ,MAAK;GAAS,WAAWpB,EAAO;GAAY,SAASsB;GAA7D,UAAA,CACGK,GACD,kBAAC,QAAD;IAAM,WAAW3B,EAAO;IAAW,eAAY;IAC5C,UAAiB4B,EAAjBP,MAAS,QAASQ,IAAoBC,GAArB,CAAgB,CAAsB;GACpD,CAAA,CACA;EAER,CAAA,IAAAH;CAEA,CAAA;AAER,CACF,GAeMI,IAAY5B,EAAiD,SACjE,EAAE,UAAO,aAAU,IAAO,eAAY,IAAO,cAAW,cAAW,cAAW,GAAGC,KACjF,GACA;CACA,IAAM4B,IAAS;EACb,WAAWzB,EAAGP,EAAO,MAAMuB,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGf,CAAS;EAC/E,cAAcgB,MAAUC,IAAU,QAAQ,KAAA;EAC1C,gBAAgBA,KAAW,KAAA;EAC3B,mBAAmBQ,KAAa,KAAA;CAClC;CACA,IAAIA,GAAW;EACb,IAAM,EAAE,WAAQ,OAAO,GAAGC,MAAW9B;EACrC,OAAO,kBAAC,MAAD;GAAS;GAAY;GAAO,GAAI4B;GAAQ,GAAIE;EAAS,CAAA;CAC9D;CACA,OAAO,kBAAC,MAAD;EAAS;EAAK,GAAIF;EAAQ,GAAI5B;CAAO,CAAA;AAC9C,CAAC,GAEK+B,IAAehC,EACnB,SAAsB,EAAE,cAAW,GAAGC,KAAQ,GAAK;CACjD,OAAO,kBAAC,WAAD;EAAc;EAAK,WAAWG,EAAGP,EAAO,SAASQ,CAAS;EAAG,GAAIJ;CAAO,CAAA;AACjF,CACF,GAEagC,IAAQ,OAAO,OAAOlC,GAAW;CAC5C,MAAMU;CACN,MAAMC;CACN,MAAMC;CACN,KAAKC;CACL,YAAYI;CACZ,MAAMY;CACN,SAASI;AACX,CAAC"}

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

@@ -0,0 +1,18 @@
+//#region src/components/display/Table/Table.module.css
+var e = "kiln-Table__scroll", t = "kiln-Table__table", n = "kiln-Table__caption", r = "kiln-Table__headerCell", i = "kiln-Table__cell", a = "kiln-Table__body", o = "kiln-Table__row", s = "kiln-Table__foot", c = "kiln-Table__head", l = "kiln-Table__sortButton", u = "kiln-Table__sortGlyph", d = {
+	scroll: e,
+	table: t,
+	caption: n,
+	headerCell: r,
+	cell: i,
+	body: a,
+	row: o,
+	foot: s,
+	head: c,
+	sortButton: l,
+	sortGlyph: u
+};
+//#endregion
+export { a as body, n as caption, i as cell, d as default, s as foot, c as head, r as headerCell, o as row, e as scroll, l as sortButton, u as sortGlyph, t as table };
+
+//# sourceMappingURL=Table.module.js.map