@mitcsutt/kiln-ui 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.module.js","names":["scroll","table","caption","headerCell","cell","body","row","foot","head","sortButton","sortGlyph","Table_module_default"],"sources":["../../../../src/components/display/Table/Table.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --table-head-font          default var(--font-text) — Fiesta sets its display caps\n *   --table-head-numeric-font  numeric header cells, default var(--table-head-font, var(--font-text))\n *   --table-head-size          default var(--text-sm)\n *   --table-head-weight        default var(--label-weight)\n *   --table-head-transform     default var(--heading-transform)\n *   --table-head-bg            default var(--color-canvas) — only painted when stickyHeader\n *   --table-max-height         default 70vh — scroll height when stickyHeader\n *   --table-foot-rule          the rule over totals, default var(--border-width-strong) solid\n *                              var(--color-line-strong) — Ledger draws the accountant's double rule\n *   --highlight-tone-{positive,caution,critical,info}-text, --highlight-accent-text\n *                              tone text inside a highlighted row (shared with List). Default:\n *                              the tone text mixed 25% toward --color-highlight-ink.\n *\n * Headers are labels, so they're set in the text face (monospace as decoration for small\n * labels is banned in DESIGN §2); figures below them carry the numeric face.\n */\n.scroll {\n  inline-size: 100%;\n  min-inline-size: 0;\n  overflow-x: auto;\n  overscroll-behavior-x: contain;\n}\n.scroll[data-sticky-header] {\n  overflow: auto;\n  max-block-size: var(--table-max-height, 70vh);\n}\n.scroll:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.table {\n  --_py: var(--space-2);\n  --_px: var(--space-3);\n\n  inline-size: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  font-family: var(--font-text);\n  font-size: var(--text-sm);\n  line-height: var(--leading-snug);\n  color: var(--color-ink);\n}\n.table[data-density='compact'] {\n  --_py: var(--space-1);\n  --_px: var(--space-2);\n}\n\n.caption {\n  caption-side: top;\n  padding-block-end: var(--space-3);\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n  text-align: start;\n}\n\n/* ── Cells ─────────────────────────────────────────────────────────────── */\n\n.headerCell,\n.cell {\n  padding: var(--_py) var(--_px);\n  text-align: start;\n  vertical-align: baseline;\n}\n.headerCell:first-child,\n.cell:first-child {\n  padding-inline-start: var(--space-2);\n}\n.headerCell:last-child,\n.cell:last-child {\n  padding-inline-end: var(--space-2);\n}\n/* Figure columns are narrow; tighter gutters keep a 10-column figures table on a phone. */\n:is(.headerCell, .cell)[data-numeric] {\n  padding-inline: var(--space-2);\n}\n.headerCell abbr {\n  text-decoration: none;\n  cursor: help;\n}\n:is(.headerCell, .cell)[data-align='center'] {\n  text-align: center;\n}\n:is(.headerCell, .cell)[data-align='end'] {\n  text-align: end;\n}\n\n.headerCell {\n  padding-block: var(--_py);\n  color: var(--color-ink-muted);\n  font-family: var(--table-head-font, var(--font-text));\n  font-size: var(--table-head-size, var(--text-sm));\n  font-weight: var(--table-head-weight, var(--label-weight));\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--table-head-transform, var(--heading-transform));\n  white-space: nowrap;\n  vertical-align: bottom;\n  border-block-end: var(--border-width-strong) solid var(--color-line-strong);\n}\n\n.headerCell[data-numeric] {\n  font-family: var(--table-head-numeric-font, var(--table-head-font, var(--font-text)));\n  font-variant-numeric: tabular-nums lining-nums;\n}\n.headerCell[data-width='fill'] {\n  inline-size: 100%;\n}\n.headerCell[data-width='min'] {\n  inline-size: 1%;\n}\n\n.cell[data-numeric] {\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n  font-variant-numeric: tabular-nums lining-nums;\n  white-space: nowrap;\n}\n.cell[data-row-header] {\n  font-weight: var(--label-weight);\n}\n\n/* ── Rows ──────────────────────────────────────────────────────────────── */\n\n.table[data-variant='rules'] .body .cell {\n  border-block-end: var(--border-width) solid var(--color-line);\n}\n.table[data-variant='rules'] .body > .row:last-child > .cell {\n  border-block-end-color: var(--color-line-strong);\n}\n\n.table[data-striped] .body > .row:nth-child(even) > .cell {\n  background: var(--color-surface-sunken);\n}\n\n/*\n * A highlighted row re-points the colour roles for its cells' content, so a muted date,\n * a tone-coloured Numeral or a LiveIndicator stays legible on the highlight fill (gold in\n * Fiesta night, where the ordinary tone texts are pale). Same approach as Section's\n * inverse band: the row publishes its fill/ink and tone texts under private names, and\n * the cells swap the roles — setting e.g. --tone-positive-text from itself on one element\n * would be a var() cycle.\n */\n.row[data-highlighted] {\n  --_band-fill: var(--color-highlight);\n  --_band-ink: var(--color-highlight-ink);\n  --_band-positive: var(\n    --highlight-tone-positive-text,\n    color-mix(in oklab, var(--tone-positive-text) 75%, var(--color-highlight-ink))\n  );\n  --_band-caution: var(\n    --highlight-tone-caution-text,\n    color-mix(in oklab, var(--tone-caution-text) 75%, var(--color-highlight-ink))\n  );\n  --_band-critical: var(\n    --highlight-tone-critical-text,\n    color-mix(in oklab, var(--tone-critical-text) 75%, var(--color-highlight-ink))\n  );\n  --_band-info: var(\n    --highlight-tone-info-text,\n    color-mix(in oklab, var(--tone-info-text) 75%, var(--color-highlight-ink))\n  );\n  --_band-accent: var(\n    --highlight-accent-text,\n    color-mix(in oklab, var(--color-accent-text) 75%, var(--color-highlight-ink))\n  );\n}\n.row[data-highlighted] > .cell {\n  --color-ink: var(--_band-ink);\n  --color-ink-muted: color-mix(in oklab, var(--_band-ink), var(--_band-fill) 25%);\n  --color-ink-subtle: color-mix(in oklab, var(--_band-ink), var(--_band-fill) 35%);\n  --tone-positive-text: var(--_band-positive);\n  --tone-caution-text: var(--_band-caution);\n  --tone-critical-text: var(--_band-critical);\n  --tone-info-text: var(--_band-info);\n  --color-accent-text: var(--_band-accent);\n\n  background: var(--_band-fill);\n  color: var(--_band-ink);\n}\n/* Round the ends of a highlighted row so the fill reads as a marker, not a stripe. */\n.row[data-highlighted] > .cell:first-child {\n  border-start-start-radius: var(--radius-field);\n  border-end-start-radius: var(--radius-field);\n}\n.row[data-highlighted] > .cell:last-child {\n  border-start-end-radius: var(--radius-field);\n  border-end-end-radius: var(--radius-field);\n}\n\n.row[data-interactive] {\n  cursor: pointer;\n}\n.row > .cell {\n  transition: background-color var(--dur-1) var(--ease-out);\n}\n@media (hover: hover) {\n  .row[data-interactive]:not([data-highlighted]):hover > .cell {\n    background: var(--color-surface-sunken);\n  }\n}\n\n.foot > :first-child > .cell {\n  border-block-start: var(\n    --table-foot-rule,\n    var(--border-width-strong) solid var(--color-line-strong)\n  );\n}\n.foot .cell {\n  font-weight: var(--label-weight);\n}\n/* The totals rule replaces the last row's hairline rather than stacking under it. */\n.table[data-variant='rules'] .body:has(+ .foot) > .row:last-child > .cell {\n  border-block-end-width: 0;\n}\n\n/* ── Sticky header ─────────────────────────────────────────────────────── */\n\n.table[data-sticky-header] .head .headerCell {\n  position: sticky;\n  inset-block-start: 0;\n  z-index: 1;\n  background: var(--table-head-bg, var(--color-canvas));\n}\n\n/* ── Sort button ───────────────────────────────────────────────────────── */\n\n.sortButton {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25em;\n  margin: calc(var(--space-1) * -1);\n  padding: var(--space-1);\n  border: 0;\n  border-radius: var(--radius-field);\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  letter-spacing: inherit;\n  text-transform: inherit;\n  cursor: pointer;\n  transition: color var(--dur-1) var(--ease-out);\n}\n.headerCell[data-align='end'] .sortButton {\n  flex-direction: row-reverse;\n}\n@media (hover: hover) {\n  .sortButton:hover {\n    color: var(--color-ink);\n  }\n}\n.sortButton:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 0;\n}\n.sortGlyph {\n  display: inline-flex;\n  font-size: 1.1em;\n  opacity: 0;\n  transition: opacity var(--dur-1) var(--ease-out);\n}\n.headerCell:is([data-sort='asc'], [data-sort='desc']) {\n  color: var(--color-ink);\n}\n.headerCell:is([data-sort='asc'], [data-sort='desc']) .sortGlyph,\n.sortButton:hover .sortGlyph,\n.sortButton:focus-visible .sortGlyph {\n  opacity: 1;\n}\n.headerCell[data-sort='none'] .sortButton:is(:hover, :focus-visible) .sortGlyph {\n  opacity: 0.45;\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Table } from './Table.js';
+export type { TableProps, TableDensity, TableVariant, TableAlign, TableSort, TableColumnWidth, TableRowProps, TableHeaderCellProps, TableCellProps, } from './Table.js';

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

@@ -0,0 +1,21 @@
+import { type HTMLAttributes, type MouseEvent } from 'react';
+/** Categorical colour slot → `--color-cat-N`. */
+export type TagColor = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export interface TagProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+    /** A categorical colour (category, person, topic). Omit for a neutral tag. */
+    color?: TagColor;
+    /** Renders a remove button after the label. Not rendered when `asChild`. */
+    onRemove?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Accessible name for the remove button. Default `Remove <label>` for text labels. */
+    removeLabel?: string;
+    /** Render the single child (e.g. a filter link) as the tag. Incompatible with `onRemove`. */
+    asChild?: boolean;
+}
+/**
+ * Quiet metadata: a category, a stack item, a group. Quieter than `Badge`, which is
+ * for status. Group several in a `TagList`.
+ */
+export declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLSpanElement>>;
+export type TagListProps = HTMLAttributes<HTMLUListElement>;
+/** A wrapping list of tags. Each child is wrapped in an `<li>`. */
+export declare const TagList: import("react").ForwardRefExoticComponent<TagListProps & import("react").RefAttributes<HTMLUListElement>>;

package/dist/components/display/Tag/Tag.js

@@ -0,0 +1,36 @@
+import { cx as e } from "../../../utils/cx.js";
+import { CloseIcon as t } from "../../../icons/icons.js";
+import n from "./Tag.module.js";
+import { Children as r, forwardRef as i, isValidElement as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Slot as c } from "radix-ui";
+//#region src/components/display/Tag/Tag.tsx
+var l = i(function({ color: r, onRemove: i, removeLabel: a, asChild: l = !1, className: u, children: d, ...f }, p) {
+	let m = l ? c.Root : "span", h = !!i && !l, g = a ?? (typeof d == "string" ? `Remove ${d}` : "Remove");
+	return /* @__PURE__ */ s(m, {
+		ref: p,
+		className: e(n.tag, u),
+		"data-color": r,
+		"data-removable": h || void 0,
+		...f,
+		children: [/* @__PURE__ */ o(c.Slottable, { children: d }), h ? /* @__PURE__ */ o("button", {
+			type: "button",
+			className: n.remove,
+			"aria-label": g,
+			onClick: i,
+			children: /* @__PURE__ */ o(t, {})
+		}) : null]
+	});
+}), u = i(function({ className: t, children: i, ...s }, c) {
+	return /* @__PURE__ */ o("ul", {
+		ref: c,
+		role: "list",
+		className: e(n.list, t),
+		...s,
+		children: r.map(i, (e) => a(e) || typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ o("li", { children: e }, a(e) ? e.key : void 0) : null)
+	});
+});
+//#endregion
+export { l as Tag, u as TagList };
+
+//# sourceMappingURL=Tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","names":["styles","Tag_module_default","Tag","forwardRef","rest","Comp","asChild","Slot","canRemove","onRemove","label","removeLabel","children","cx","className","color","CloseIcon","TagList","Children","isValidElement","child"],"sources":["../../../../src/components/display/Tag/Tag.tsx"],"sourcesContent":["import { Children, forwardRef, isValidElement, type HTMLAttributes, type MouseEvent } from 'react'\nimport { Slot } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { CloseIcon } from '#icons'\nimport styles from './Tag.module.css'\n\n/** Categorical colour slot → `--color-cat-N`. */\nexport type TagColor = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8\n\nexport interface TagProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {\n  /** A categorical colour (category, person, topic). Omit for a neutral tag. */\n  color?: TagColor\n  /** Renders a remove button after the label. Not rendered when `asChild`. */\n  onRemove?: (event: MouseEvent<HTMLButtonElement>) => void\n  /** Accessible name for the remove button. Default `Remove <label>` for text labels. */\n  removeLabel?: string\n  /** Render the single child (e.g. a filter link) as the tag. Incompatible with `onRemove`. */\n  asChild?: boolean\n}\n\n/**\n * Quiet metadata: a category, a stack item, a group. Quieter than `Badge`, which is\n * for status. Group several in a `TagList`.\n */\nexport const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(\n  { color, onRemove, removeLabel, asChild = false, className, children, ...rest },\n  ref,\n) {\n  const Comp = asChild ? Slot.Root : 'span'\n  const canRemove = Boolean(onRemove) && !asChild\n  const label = removeLabel ?? (typeof children === 'string' ? `Remove ${children}` : 'Remove')\n  return (\n    <Comp\n      ref={ref}\n      className={cx(styles.tag, className)}\n      data-color={color}\n      data-removable={canRemove || undefined}\n      {...rest}\n    >\n      <Slot.Slottable>{children}</Slot.Slottable>\n      {canRemove ? (\n        <button type=\"button\" className={styles.remove} aria-label={label} onClick={onRemove}>\n          <CloseIcon />\n        </button>\n      ) : null}\n    </Comp>\n  )\n})\n\nexport type TagListProps = HTMLAttributes<HTMLUListElement>\n\n/** A wrapping list of tags. Each child is wrapped in an `<li>`. */\nexport const TagList = forwardRef<HTMLUListElement, TagListProps>(function TagList(\n  { className, children, ...rest },\n  ref,\n) {\n  return (\n    <ul ref={ref} role=\"list\" className={cx(styles.list, className)} {...rest}>\n      {Children.map(children, (child) =>\n        isValidElement(child) || typeof child === 'string' || typeof child === 'number' ? (\n          <li key={isValidElement(child) ? child.key : undefined}>{child}</li>\n        ) : null,\n      )}\n    </ul>\n  )\n})\n"],"mappings":";;;;;;;AAwBA,IAAaE,IAAMC,EAAsC,SACvD,EAAE,UAAO,aAAU,gBAAa,aAAU,IAAO,cAAW,aAAU,GAAGC,KACzE,GACA;CACA,IAAMC,IAAOC,IAAUC,EAAK,OAAO,QAC7BC,IAAY,EAAQC,KAAa,CAACH,GAClCI,IAAQC,MAAgB,OAAOC,KAAa,WAAW,UAAUA,MAAa;CACpF,OACE,kBAACP,GAAD;EACO;EACL,WAAWQ,EAAGb,EAAO,KAAKc,CAAS;EACnC,cAAYC;EACZ,kBAAgBP,KAAa,KAAA;EAC7B,GAAIJ;EALN,UAAA,CAOE,kBAACG,EAAK,WAAN,EAAiB,YAAyB,CAAA,GACzCC,IACC,kBAAC,UAAD;GAAQ,MAAK;GAAS,WAAWR,EAAO;GAAQ,cAAYU;GAAO,SAASD;GAC1E,UAAA,kBAACO,GAAD,CAAY,CAAA;EACN,CAAA,IACN,IACA;;AAEV,CAAC,GAKYC,IAAUd,EAA2C,SAChE,EAAE,cAAW,aAAU,GAAGC,KAC1B,GACA;CACA,OACE,kBAAC,MAAD;EAAS;EAAK,MAAK;EAAO,WAAWS,EAAGb,EAAO,MAAMc,CAAS;EAAG,GAAIV;EAClE,UAAAc,EAAS,IAAIN,IAAW,MACvBO,EAAeC,CAAK,KAAK,OAAOA,KAAU,YAAY,OAAOA,KAAU,WACrE,kBAAC,MAAD,EAAA,UAAyDA,EAAU,GAA1DD,EAAeC,CAAK,IAAIA,EAAM,MAAM,KAAA,CAAsB,IACjE,IACN;CACE,CAAA;AAER,CAAC"}

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

@@ -0,0 +1,10 @@
+//#region src/components/display/Tag/Tag.module.css
+var e = "kiln-Tag__tag", t = "kiln-Tag__remove", n = "kiln-Tag__list", r = {
+	tag: e,
+	remove: t,
+	list: n
+};
+//#endregion
+export { r as default, n as list, t as remove, e as tag };
+
+//# sourceMappingURL=Tag.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.module.js","names":["tag","remove","list","Tag_module_default"],"sources":["../../../../src/components/display/Tag/Tag.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --tag-radius   default var(--radius-chip)\n *\n * Quieter than Badge: text weight, no status colour. Neutral tags are a hairline;\n * categorical tags are a flat fill of --color-cat-N with --color-cat-ink (AA on all 8).\n */\n.tag {\n  --_bg: transparent;\n  --_ink: var(--color-ink-muted);\n  --_border: var(--color-line);\n\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-1);\n  min-block-size: calc(var(--space-5) * 0.9);\n  padding-inline: var(--space-2);\n  border: var(--border-width) solid var(--_border);\n  border-radius: var(--tag-radius, var(--radius-chip));\n  background: var(--_bg);\n  color: var(--_ink);\n  font-family: var(--font-text);\n  font-size: var(--text-xs);\n  font-weight: 450;\n  line-height: 1;\n  white-space: nowrap;\n  text-decoration: none;\n  vertical-align: middle;\n  transition:\n    background-color var(--dur-1) var(--ease-out),\n    border-color var(--dur-1) var(--ease-out),\n    color var(--dur-1) var(--ease-out);\n}\n\n.tag[data-removable] {\n  padding-inline-end: calc(var(--space-1) / 2);\n}\n\n.tag[data-color] {\n  --_ink: var(--color-cat-ink);\n  --_border: var(--_bg);\n}\n.tag[data-color='1'] {\n  --_bg: var(--color-cat-1);\n}\n.tag[data-color='2'] {\n  --_bg: var(--color-cat-2);\n}\n.tag[data-color='3'] {\n  --_bg: var(--color-cat-3);\n}\n.tag[data-color='4'] {\n  --_bg: var(--color-cat-4);\n}\n.tag[data-color='5'] {\n  --_bg: var(--color-cat-5);\n}\n.tag[data-color='6'] {\n  --_bg: var(--color-cat-6);\n}\n.tag[data-color='7'] {\n  --_bg: var(--color-cat-7);\n}\n.tag[data-color='8'] {\n  --_bg: var(--color-cat-8);\n}\n\n/* As a link (asChild): the edge firms up on hover. */\n@media (hover: hover) {\n  a.tag:hover {\n    --_border: var(--color-line-strong);\n    --_ink: var(--color-ink);\n  }\n  a.tag[data-color]:hover {\n    --_border: var(--color-cat-ink);\n    --_ink: var(--color-cat-ink);\n  }\n}\n.tag:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.remove {\n  position: relative;\n  display: inline-grid;\n  place-items: center;\n  flex: none;\n  inline-size: 1.5em;\n  block-size: 1.5em;\n  padding: 0;\n  border: 0;\n  border-radius: var(--tag-radius, var(--radius-chip));\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  opacity: 0.7;\n  cursor: pointer;\n  transition:\n    opacity var(--dur-1) var(--ease-out),\n    background-color var(--dur-1) var(--ease-out);\n}\n/* Larger hit target than the glyph, without growing the tag. */\n.remove::after {\n  content: '';\n  position: absolute;\n  inset: -0.35em;\n}\n.remove > svg {\n  inline-size: 1.1em;\n  block-size: 1.1em;\n}\n@media (hover: hover) {\n  .remove:hover {\n    opacity: 1;\n    background: color-mix(in oklch, currentColor 14%, transparent);\n  }\n}\n.remove:focus-visible {\n  opacity: 1;\n  outline: 2px solid var(--color-focus);\n  outline-offset: 1px;\n}\n\n.list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.list > li {\n  display: flex;\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Tag, TagList } from './Tag.js';
+export type { TagProps, TagColor, TagListProps } from './Tag.js';

package/dist/components/feedback/Alert/Alert.d.ts

@@ -0,0 +1,33 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type AlertTone = 'info' | 'positive' | 'caution' | 'critical' | 'neutral';
+export type AlertVariant = 'soft' | 'outline';
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Meaning. `critical` and `caution` interrupt (role="alert"); the rest are polite (role="status"). */
+    tone?: AlertTone;
+    /**
+     * `outline` (default): a neutral hairline frame on the surface — the tone shows only in
+     * the glyph and a short tab on the top edge. `soft`: the louder form, a tinted fill with a
+     * tone keyline, for notices that must not be missed.
+     */
+    variant?: AlertVariant;
+    /** Short summary, read first. */
+    title?: ReactNode;
+    /** Replaces the tone glyph. Pass `null` to drop it. */
+    icon?: ReactNode;
+    /** A follow-up action, e.g. `<Button size="sm" variant="outline">Retry</Button>`. */
+    action?: ReactNode;
+    /** Shows a dismiss button that calls this. */
+    onDismiss?: () => void;
+    /** Accessible name of the dismiss button. Default "Dismiss". */
+    dismissLabel?: string;
+}
+/**
+ * An inline message about the thing next to it. A full hairline frame, the tone in the
+ * glyph and a short tab on the top edge, the title in the heading face — never a tinted
+ * box by default, never a coloured stripe down the left edge.
+ *
+ * <Alert tone="critical" title="Couldn't load invoices" action={<Button …>Retry</Button>}>
+ *   The billing service didn't answer. We'll try again in 30 seconds.
+ * </Alert>
+ */
+export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/feedback/Alert/Alert.js

@@ -0,0 +1,62 @@
+import { cx as e } from "../../../utils/cx.js";
+import { CircleCheckIcon as t, CloseIcon as n, ErrorIcon as r, InfoIcon as i, WarningIcon as a } from "../../../icons/icons.js";
+import o from "./Alert.module.js";
+import { forwardRef as s, useId as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/feedback/Alert/Alert.tsx
+var d = {
+	info: /* @__PURE__ */ l(i, {}),
+	neutral: /* @__PURE__ */ l(i, {}),
+	positive: /* @__PURE__ */ l(t, {}),
+	caution: /* @__PURE__ */ l(a, {}),
+	critical: /* @__PURE__ */ l(r, {})
+}, f = s(function({ tone: t = "info", variant: r = "outline", title: i, icon: a, action: s, onDismiss: f, dismissLabel: p = "Dismiss", role: m, className: h, children: g, ..._ }, v) {
+	let y = c(), b = a === void 0 ? d[t] : a;
+	return /* @__PURE__ */ u("div", {
+		ref: v,
+		role: m ?? (t === "critical" || t === "caution" ? "alert" : "status"),
+		"aria-labelledby": i ? y : void 0,
+		className: e(o.alert, h),
+		"data-kiln-component": "",
+		"data-tone": t,
+		"data-variant": r,
+		"data-dismissible": f ? "" : void 0,
+		..._,
+		children: [
+			b ? /* @__PURE__ */ l("span", {
+				className: o.glyph,
+				"aria-hidden": "true",
+				children: b
+			}) : null,
+			/* @__PURE__ */ u("div", {
+				className: o.body,
+				children: [
+					i ? /* @__PURE__ */ l("p", {
+						id: y,
+						className: o.title,
+						children: i
+					}) : null,
+					g ? /* @__PURE__ */ l("div", {
+						className: o.description,
+						children: g
+					}) : null,
+					s ? /* @__PURE__ */ l("div", {
+						className: o.action,
+						children: s
+					}) : null
+				]
+			}),
+			f ? /* @__PURE__ */ l("button", {
+				type: "button",
+				className: o.dismiss,
+				"aria-label": p,
+				onClick: f,
+				children: /* @__PURE__ */ l(n, {})
+			}) : null
+		]
+	});
+});
+//#endregion
+export { f as Alert };
+
+//# sourceMappingURL=Alert.js.map

package/dist/components/feedback/Alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","names":["styles","Alert_module_default","GLYPH","InfoIcon","CircleCheckIcon","WarningIcon","ErrorIcon","Alert","forwardRef","rest","titleId","useId","glyph","icon","tone","role","title","cx","className","variant","onDismiss","children","action","dismissLabel","CloseIcon"],"sources":["../../../../src/components/feedback/Alert/Alert.tsx"],"sourcesContent":["import { forwardRef, useId, type HTMLAttributes, type ReactNode } from 'react'\nimport { CircleCheckIcon, CloseIcon, ErrorIcon, InfoIcon, WarningIcon } from '#icons'\nimport { cx } from '#utils/cx'\nimport styles from './Alert.module.css'\n\nexport type AlertTone = 'info' | 'positive' | 'caution' | 'critical' | 'neutral'\nexport type AlertVariant = 'soft' | 'outline'\n\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Meaning. `critical` and `caution` interrupt (role=\"alert\"); the rest are polite (role=\"status\"). */\n  tone?: AlertTone\n  /**\n   * `outline` (default): a neutral hairline frame on the surface — the tone shows only in\n   * the glyph and a short tab on the top edge. `soft`: the louder form, a tinted fill with a\n   * tone keyline, for notices that must not be missed.\n   */\n  variant?: AlertVariant\n  /** Short summary, read first. */\n  title?: ReactNode\n  /** Replaces the tone glyph. Pass `null` to drop it. */\n  icon?: ReactNode\n  /** A follow-up action, e.g. `<Button size=\"sm\" variant=\"outline\">Retry</Button>`. */\n  action?: ReactNode\n  /** Shows a dismiss button that calls this. */\n  onDismiss?: () => void\n  /** Accessible name of the dismiss button. Default \"Dismiss\". */\n  dismissLabel?: string\n}\n\nconst GLYPH: Record<AlertTone, ReactNode> = {\n  info: <InfoIcon />,\n  neutral: <InfoIcon />,\n  positive: <CircleCheckIcon />,\n  caution: <WarningIcon />,\n  critical: <ErrorIcon />,\n}\n\n/**\n * An inline message about the thing next to it. A full hairline frame, the tone in the\n * glyph and a short tab on the top edge, the title in the heading face — never a tinted\n * box by default, never a coloured stripe down the left edge.\n *\n * <Alert tone=\"critical\" title=\"Couldn't load invoices\" action={<Button …>Retry</Button>}>\n *   The billing service didn't answer. We'll try again in 30 seconds.\n * </Alert>\n */\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(\n  {\n    tone = 'info',\n    variant = 'outline',\n    title,\n    icon,\n    action,\n    onDismiss,\n    dismissLabel = 'Dismiss',\n    role,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const titleId = useId()\n  const glyph = icon === undefined ? GLYPH[tone] : icon\n  return (\n    <div\n      ref={ref}\n      role={role ?? (tone === 'critical' || tone === 'caution' ? 'alert' : 'status')}\n      aria-labelledby={title ? titleId : undefined}\n      className={cx(styles.alert, className)}\n      data-kiln-component=\"\"\n      data-tone={tone}\n      data-variant={variant}\n      data-dismissible={onDismiss ? '' : undefined}\n      {...rest}\n    >\n      {glyph ? (\n        <span className={styles.glyph} aria-hidden=\"true\">\n          {glyph}\n        </span>\n      ) : null}\n      <div className={styles.body}>\n        {title ? (\n          <p id={titleId} className={styles.title}>\n            {title}\n          </p>\n        ) : null}\n        {children ? <div className={styles.description}>{children}</div> : null}\n        {action ? <div className={styles.action}>{action}</div> : null}\n      </div>\n      {onDismiss ? (\n        <button\n          type=\"button\"\n          className={styles.dismiss}\n          aria-label={dismissLabel}\n          onClick={onDismiss}\n        >\n          <CloseIcon />\n        </button>\n      ) : null}\n    </div>\n  )\n})\n"],"mappings":";;;;;;AA6BA,IAAME,IAAsC;CAC1C,MAAM,kBAACC,GAAD,CAAW,CAAA;CACjB,SAAS,kBAACA,GAAD,CAAW,CAAA;CACpB,UAAU,kBAACC,GAAD,CAAkB,CAAA;CAC5B,SAAS,kBAACC,GAAD,CAAc,CAAA;CACvB,UAAU,kBAACC,GAAD,CAAY,CAAA;AACxB,GAWaC,IAAQC,EAAuC,SAC1D,EACE,UAAO,QACP,aAAU,WACV,UACA,SACA,WACA,cACA,kBAAe,WACf,SACA,cACA,aACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAUC,EAAM,GAChBC,IAAQC,MAAS,KAAA,IAAYX,EAAMY,KAAQD;CACjD,OACE,kBAAC,OAAD;EACO;EACL,MAAME,MAASD,MAAS,cAAcA,MAAS,YAAY,UAAU;EACrE,mBAAiBE,IAAQN,IAAU,KAAA;EACnC,WAAWO,EAAGjB,EAAO,OAAOkB,CAAS;EACrC,uBAAoB;EACpB,aAAWJ;EACX,gBAAcK;EACd,oBAAkBC,IAAY,KAAK,KAAA;EACnC,GAAIX;EATN,UAAA;GAWGG,IACC,kBAAC,QAAD;IAAM,WAAWZ,EAAO;IAAO,eAAY;IACxC,UAAAY;GACG,CAAA,IACJ;GACJ,kBAAC,OAAD;IAAK,WAAWZ,EAAO;IAAvB,UAAA;KACGgB,IACC,kBAAC,KAAD;MAAG,IAAIN;MAAS,WAAWV,EAAO;MAC/B,UAAAgB;KACA,CAAA,IACD;KACHK,IAAW,kBAAC,OAAD;MAAK,WAAWrB,EAAO;MAAc;KAAc,CAAA,IAAI;KAClEsB,IAAS,kBAAC,OAAD;MAAK,WAAWtB,EAAO;MAAS,UAAAsB;KAAY,CAAA,IAAI;IACvD;;GACJF,IACC,kBAAC,UAAD;IACE,MAAK;IACL,WAAWpB,EAAO;IAClB,cAAYuB;IACZ,SAASH;IAET,UAAA,kBAACI,GAAD,CAAY,CAAA;GACN,CAAA,IACN;EACD;;AAET,CAAC"}

package/dist/components/feedback/Alert/Alert.module.js

@@ -0,0 +1,14 @@
+//#region src/components/feedback/Alert/Alert.module.css
+var e = "kiln-Alert__alert", t = "kiln-Alert__glyph", n = "kiln-Alert__body", r = "kiln-Alert__title", i = "kiln-Alert__description", a = "kiln-Alert__action", o = "kiln-Alert__dismiss", s = {
+	alert: e,
+	glyph: t,
+	body: n,
+	title: r,
+	description: i,
+	action: a,
+	dismiss: o
+};
+//#endregion
+export { a as action, e as alert, n as body, s as default, i as description, o as dismiss, t as glyph, r as title };
+
+//# sourceMappingURL=Alert.module.js.map

package/dist/components/feedback/Alert/Alert.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.module.js","names":["alert","glyph","body","title","description","action","dismiss","Alert_module_default"],"sources":["../../../../src/components/feedback/Alert/Alert.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --alert-radius         default var(--radius-field)\n *   --alert-edge           keyline of the default (outline) alert, default var(--color-line-strong)\n *   --alert-rule-length    the tone tab on the top edge, default var(--space-6)\n *   --alert-rule-width     its thickness, default calc(var(--border-width) + 2px)\n *   --alert-border-mix     soft variant: how much tone goes into the keyline, default 55%\n *                          (the rest is --color-line-strong, so Fiesta's keyline stays inky)\n *\n * Default (`outline`): a neutral hairline frame on the surface. The tone shows in two small\n * places only — the glyph, and a short tab of tone ink set into the top edge above it, like\n * an index tab on a file card. Title in the theme's heading role. No tinted box, no left\n * stripe, no shadow. `soft` keeps the tinted fill with a tone keyline for louder notices.\n */\n.alert {\n  --_c: var(--tone-info);\n  --_soft: var(--tone-info-soft);\n  --_text: var(--tone-info-text);\n  --_bg: var(--color-surface);\n  --_edge: var(--alert-edge, var(--color-line-strong));\n\n  position: relative;\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) auto;\n  align-items: start;\n  column-gap: var(--space-3);\n  padding-block: var(--space-3);\n  padding-inline: var(--space-4);\n  border: var(--border-width) solid var(--_edge);\n  border-radius: var(--alert-radius, var(--radius-field));\n  background: var(--_bg);\n  color: var(--color-ink);\n  font-family: var(--font-text);\n  font-size: var(--text-sm);\n  line-height: var(--leading-body);\n}\n\n/* The tone tab: set into the top edge, starting over the glyph column. */\n.alert[data-variant='outline']::before {\n  content: '';\n  position: absolute;\n  inset-block-start: calc(var(--border-width) * -1);\n  inset-inline-start: var(--space-4);\n  inline-size: var(--alert-rule-length, var(--space-6));\n  block-size: var(--alert-rule-width, calc(var(--border-width) + 2px));\n  background: var(--_c);\n}\n\n.alert[data-tone='positive'] {\n  --_c: var(--tone-positive);\n  --_soft: var(--tone-positive-soft);\n  --_text: var(--tone-positive-text);\n}\n.alert[data-tone='caution'] {\n  --_c: var(--tone-caution);\n  --_soft: var(--tone-caution-soft);\n  --_text: var(--tone-caution-text);\n}\n.alert[data-tone='critical'] {\n  --_c: var(--tone-critical);\n  --_soft: var(--tone-critical-soft);\n  --_text: var(--tone-critical-text);\n}\n.alert[data-tone='neutral'] {\n  --_c: var(--color-ink-subtle);\n  --_soft: var(--color-surface-sunken);\n  --_text: var(--color-ink-muted);\n}\n\n.alert[data-variant='soft'] {\n  --_bg: var(--_soft);\n  --_edge: color-mix(in oklab, var(--_c) var(--alert-border-mix, 55%), var(--color-line-strong));\n}\n.alert[data-variant='soft'][data-tone='neutral'] {\n  --_edge: var(--color-line-strong);\n}\n\n/* No glyph: body starts in the first column. */\n.alert:not(:has(> .glyph)) {\n  grid-template-columns: minmax(0, 1fr) auto;\n}\n\n.glyph {\n  /* Centred on the first line's box: the title's when there is one, else the body's. */\n  --_line: calc(var(--text-sm) * var(--leading-body));\n\n  display: inline-flex;\n  block-size: var(--_line);\n  align-items: center;\n  color: var(--_text);\n  font-size: var(--text-lg);\n}\n.alert:has(> .body > .title:first-child) > .glyph {\n  --_line: calc(var(--text-md) * var(--leading-snug));\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  min-inline-size: 0;\n}\n\n.title {\n  margin: 0;\n  color: var(--color-ink);\n  font-family: var(--heading-font);\n  font-size: var(--text-md);\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  text-wrap: balance;\n}\n\n.description {\n  color: var(--color-ink-muted);\n  text-wrap: pretty;\n}\n.body > .description:first-child {\n  color: var(--color-ink);\n}\n\n.action {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  margin-block-start: var(--space-2);\n}\n\n.dismiss {\n  display: grid;\n  place-items: center;\n  inline-size: var(--control-sm);\n  block-size: var(--control-sm);\n  margin-block: calc(var(--space-2) * -1);\n  margin-inline-end: calc(var(--space-2) * -1);\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-action);\n  background: transparent;\n  color: var(--color-ink-muted);\n  font-size: var(--text-md);\n  cursor: pointer;\n  transition:\n    background-color var(--dur-1) var(--ease-out),\n    color var(--dur-1) var(--ease-out);\n}\n@media (hover: hover) {\n  .dismiss:hover {\n    background: color-mix(in oklch, var(--_c) 18%, var(--_bg));\n    color: var(--color-ink);\n  }\n}\n.dismiss:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n"],"mappings":""}

package/dist/components/feedback/Alert/index.d.ts

@@ -0,0 +1,2 @@
+export { Alert } from './Alert.js';
+export type { AlertProps, AlertTone, AlertVariant } from './Alert.js';

package/dist/components/feedback/LiveIndicator/LiveIndicator.d.ts

@@ -0,0 +1,22 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { Size, Tone } from '../../../utils/tokens.js';
+export type LiveIndicatorVariant = 'inline' | 'pill';
+export interface LiveIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
+    /** What's live, or how far in: "Live", "72'", "Recording". Default "Live". */
+    label?: ReactNode;
+    /** Colour of the dot (and the label in `inline`). Default `accent` — live *is* the accent's job. */
+    tone?: Tone;
+    /** A ring that swells out of the dot. Stills under reduced motion. Default `true`. */
+    pulse?: boolean;
+    /** `inline` sits in running text; `pill` is a keylined chip for cards and list rows. */
+    variant?: LiveIndicatorVariant;
+    size?: Exclude<Size, 'lg'>;
+}
+/**
+ * "This is happening now." A dot with a slow ring and a short label — for a live call,
+ * an in-progress sync, a recording.
+ *
+ * Deliberately not a live region: a minute counter that announces itself every minute is
+ * noise. If the change matters, announce it where it happens.
+ */
+export declare const LiveIndicator: import("react").ForwardRefExoticComponent<LiveIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/feedback/LiveIndicator/LiveIndicator.js

@@ -0,0 +1,27 @@
+import { cx as e } from "../../../utils/cx.js";
+import t from "./LiveIndicator.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/feedback/LiveIndicator/LiveIndicator.tsx
+var a = n(function({ label: n = "Live", tone: a = "accent", pulse: o = !0, variant: s = "inline", size: c = "md", className: l, ...u }, d) {
+	return /* @__PURE__ */ i("span", {
+		ref: d,
+		className: e(t.live, l),
+		"data-tone": a,
+		"data-variant": s,
+		"data-size": c,
+		"data-pulse": o || void 0,
+		...u,
+		children: [/* @__PURE__ */ r("span", {
+			className: t.dot,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ r("span", {
+			className: t.label,
+			children: n
+		})]
+	});
+});
+//#endregion
+export { a as LiveIndicator };
+
+//# sourceMappingURL=LiveIndicator.js.map

package/dist/components/feedback/LiveIndicator/LiveIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveIndicator.js","names":["styles","LiveIndicator_module_default","LiveIndicator","forwardRef","rest","cx","className","tone","variant","size","pulse","label"],"sources":["../../../../src/components/feedback/LiveIndicator/LiveIndicator.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport type { Size, Tone } from '#utils/tokens'\nimport styles from './LiveIndicator.module.css'\n\nexport type LiveIndicatorVariant = 'inline' | 'pill'\n\nexport interface LiveIndicatorProps extends HTMLAttributes<HTMLSpanElement> {\n  /** What's live, or how far in: \"Live\", \"72'\", \"Recording\". Default \"Live\". */\n  label?: ReactNode\n  /** Colour of the dot (and the label in `inline`). Default `accent` — live *is* the accent's job. */\n  tone?: Tone\n  /** A ring that swells out of the dot. Stills under reduced motion. Default `true`. */\n  pulse?: boolean\n  /** `inline` sits in running text; `pill` is a keylined chip for cards and list rows. */\n  variant?: LiveIndicatorVariant\n  size?: Exclude<Size, 'lg'>\n}\n\n/**\n * \"This is happening now.\" A dot with a slow ring and a short label — for a live call,\n * an in-progress sync, a recording.\n *\n * Deliberately not a live region: a minute counter that announces itself every minute is\n * noise. If the change matters, announce it where it happens.\n */\nexport const LiveIndicator = forwardRef<HTMLSpanElement, LiveIndicatorProps>(function LiveIndicator(\n  {\n    label = 'Live',\n    tone = 'accent',\n    pulse = true,\n    variant = 'inline',\n    size = 'md',\n    className,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      className={cx(styles.live, className)}\n      data-tone={tone}\n      data-variant={variant}\n      data-size={size}\n      data-pulse={pulse || undefined}\n      {...rest}\n    >\n      <span className={styles.dot} aria-hidden=\"true\" />\n      <span className={styles.label}>{label}</span>\n    </span>\n  )\n})\n"],"mappings":";;;;;AA0BA,IAAaE,IAAgBC,EAAgD,SAC3E,EACE,WAAQ,QACR,UAAO,UACP,WAAQ,IACR,aAAU,UACV,UAAO,MACP,cACA,GAAGC,KAEL,GACA;CACA,OACE,kBAAC,QAAD;EACO;EACL,WAAWC,EAAGL,EAAO,MAAMM,CAAS;EACpC,aAAWC;EACX,gBAAcC;EACd,aAAWC;EACX,cAAYC,KAAS,KAAA;EACrB,GAAIN;EAPN,UAAA,CASE,kBAAC,QAAD;GAAM,WAAWJ,EAAO;GAAK,eAAY;EAAQ,CAAA,GACjD,kBAAC,QAAD;GAAM,WAAWA,EAAO;GAAQ,UAAAW;EAAY,CAAA,CACxC;;AAEV,CAAC"}

package/dist/components/feedback/LiveIndicator/LiveIndicator.module.js

@@ -0,0 +1,10 @@
+//#region src/components/feedback/LiveIndicator/LiveIndicator.module.css
+var e = "kiln-LiveIndicator__live", t = "kiln-LiveIndicator__dot", n = "kiln-LiveIndicator__ring", r = {
+	live: e,
+	dot: t,
+	ring: n
+};
+//#endregion
+export { r as default, t as dot, e as live, n as ring };
+
+//# sourceMappingURL=LiveIndicator.module.js.map

package/dist/components/feedback/LiveIndicator/LiveIndicator.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveIndicator.module.js","names":["live","dot","ring","LiveIndicator_module_default"],"sources":["../../../../src/components/feedback/LiveIndicator/LiveIndicator.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --live-dot-size      default 0.5em\n *   --live-dot-radius    default 50%\n *   --live-pulse-scale   how far the ring swells, default 2.6\n *   --live-pill-radius   default var(--radius-chip)\n *\n *   --live-label-color   default var(--_t): the tone's text colour. Set to currentColor\n *                        to let the label follow its container (e.g. on a filled band).\n *\n * Tones map to a dot colour (--_c) and a text colour (--_t).\n *   --live-dot-ring     keyline around the dot, default calc(var(--border-width) - 1px)\n */\n.live {\n  --_c: var(--color-accent);\n  --_t: var(--color-accent-text);\n\n  display: inline-flex;\n  align-items: center;\n  gap: 0.45em;\n  font-family: var(--font-text);\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: 1;\n  font-variant-numeric: tabular-nums lining-nums;\n  white-space: nowrap;\n  color: var(--live-label-color, var(--_t));\n  vertical-align: middle;\n}\n\n.live[data-size='sm'] {\n  font-size: var(--text-xs);\n}\n\n.live[data-tone='neutral'] {\n  --_c: var(--color-ink-muted);\n  --_t: var(--color-ink-muted);\n}\n.live[data-tone='positive'] {\n  --_c: var(--tone-positive);\n  --_t: var(--tone-positive-text);\n}\n.live[data-tone='caution'] {\n  --_c: var(--tone-caution);\n  --_t: var(--tone-caution-text);\n}\n.live[data-tone='critical'] {\n  --_c: var(--tone-critical);\n  --_t: var(--tone-critical-text);\n}\n.live[data-tone='info'] {\n  --_c: var(--tone-info);\n  --_t: var(--tone-info-text);\n}\n\n/* Pill: a keylined chip. The label goes to ink so the dot carries the colour. */\n.live[data-variant='pill'] {\n  padding-block: 0.4em;\n  padding-inline: 0.6em 0.75em;\n  border: var(--border-width) solid var(--color-line-strong);\n  border-radius: var(--live-pill-radius, var(--radius-chip));\n  background: var(--color-surface);\n  color: var(--color-ink);\n}\n\n.dot {\n  /* Keyline ring: 0 in hairline themes, 1px of ink where the theme draws 2px rules. */\n  box-shadow: 0 0 0 var(--live-dot-ring, calc(var(--border-width) - 1px)) var(--color-line-strong);\n  position: relative;\n  flex: none;\n  inline-size: var(--live-dot-size, 0.5em);\n  block-size: var(--live-dot-size, 0.5em);\n  border-radius: var(--live-dot-radius, 50%);\n  background: var(--_c);\n}\n\n.live[data-pulse] .dot::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: var(--_c);\n  animation: ring calc(var(--dur-3) * 5) var(--ease-out) infinite;\n}\n\n@keyframes ring {\n  0% {\n    scale: 1;\n    opacity: 0.55;\n  }\n  70%,\n  100% {\n    scale: var(--live-pulse-scale, 2.6);\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .live[data-pulse] .dot::after {\n    animation: none;\n    opacity: 0;\n  }\n}\n"],"mappings":""}

package/dist/components/feedback/LiveIndicator/index.d.ts

@@ -0,0 +1,2 @@
+export { LiveIndicator } from './LiveIndicator.js';
+export type { LiveIndicatorProps, LiveIndicatorVariant } from './LiveIndicator.js';

package/dist/components/feedback/RelativeTime/RelativeTime.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode, type TimeHTMLAttributes } from 'react';
+import { type RelativeTimeStyle } from './format.js';
+export interface RelativeTimeProps extends Omit<TimeHTMLAttributes<HTMLTimeElement>, 'dateTime' | 'children' | 'prefix'> {
+    /** The moment to describe. Anything `new Date()` accepts. */
+    date: Date | string | number;
+    /** BCP 47 locale. Default `en-AU`. */
+    locale?: string;
+    /** Wording length: "3 minutes ago" (`long`), "3 mins ago" (`short`, default), `narrow`. */
+    format?: RelativeTimeStyle;
+    /** Re-render every N ms so the text stays true. `0` disables. Default 30 000. */
+    updateInterval?: number;
+    /** Text before the time, e.g. "Updated". A space is added for you. */
+    prefix?: ReactNode;
+}
+/**
+ * A `<time>` that says how long ago (or until) something happened, and keeps itself current.
+ *
+ * SSR: the server and the first client render show the absolute date (no clock is read
+ * during render, so hydration can't disagree about "now"); the relative wording appears
+ * once mounted. The absolute date stays available as the `title`.
+ *
+ * <RelativeTime date={fetchedAt} prefix="Updated" />
+ */
+export declare const RelativeTime: import("react").ForwardRefExoticComponent<RelativeTimeProps & import("react").RefAttributes<HTMLTimeElement>>;

package/dist/components/feedback/RelativeTime/RelativeTime.js

@@ -0,0 +1,38 @@
+import { formatAbsoluteTime as e, formatRelativeTime as t, toDate as n } from "./format.js";
+import r from "./RelativeTime.module.js";
+import { forwardRef as i, useEffect as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/feedback/RelativeTime/RelativeTime.tsx
+var l = i(function({ date: i, locale: l = "en-AU", format: u = "short", updateInterval: d = 3e4, prefix: f, title: p, className: m, ...h }, g) {
+	let [_, v] = o(null);
+	a(() => {
+		if (v(Date.now()), !d) return;
+		let e = setInterval(() => {
+			v(Date.now());
+		}, d);
+		return () => {
+			clearInterval(e);
+		};
+	}, [d]);
+	let y = n(i), b = !Number.isNaN(y.getTime()), x = b ? e(y, l) : "", S = b ? _ === null ? x : t(y, _, l, u) : "";
+	return /* @__PURE__ */ c("time", {
+		ref: g,
+		dateTime: b ? y.toISOString() : void 0,
+		title: p ?? x,
+		className: m,
+		suppressHydrationWarning: !0,
+		...h,
+		children: [f ? /* @__PURE__ */ c("span", {
+			className: r.prefix,
+			children: [f, " "]
+		}) : null, /* @__PURE__ */ s("span", {
+			className: r.value,
+			suppressHydrationWarning: !0,
+			children: S
+		})]
+	});
+});
+//#endregion
+export { l as RelativeTime };
+
+//# sourceMappingURL=RelativeTime.js.map

package/dist/components/feedback/RelativeTime/RelativeTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTime.js","names":["styles","RelativeTime_module_default","RelativeTime","forwardRef","rest","now","setNow","useState","updateInterval","id","d","toDate","date","valid","absolute","formatAbsoluteTime","locale","text","formatRelativeTime","format","title","prefix"],"sources":["../../../../src/components/feedback/RelativeTime/RelativeTime.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState, type ReactNode, type TimeHTMLAttributes } from 'react'\nimport { formatAbsoluteTime, formatRelativeTime, toDate, type RelativeTimeStyle } from './format'\nimport styles from './RelativeTime.module.css'\n\nexport interface RelativeTimeProps extends Omit<\n  TimeHTMLAttributes<HTMLTimeElement>,\n  'dateTime' | 'children' | 'prefix'\n> {\n  /** The moment to describe. Anything `new Date()` accepts. */\n  date: Date | string | number\n  /** BCP 47 locale. Default `en-AU`. */\n  locale?: string\n  /** Wording length: \"3 minutes ago\" (`long`), \"3 mins ago\" (`short`, default), `narrow`. */\n  format?: RelativeTimeStyle\n  /** Re-render every N ms so the text stays true. `0` disables. Default 30 000. */\n  updateInterval?: number\n  /** Text before the time, e.g. \"Updated\". A space is added for you. */\n  prefix?: ReactNode\n}\n\n/**\n * A `<time>` that says how long ago (or until) something happened, and keeps itself current.\n *\n * SSR: the server and the first client render show the absolute date (no clock is read\n * during render, so hydration can't disagree about \"now\"); the relative wording appears\n * once mounted. The absolute date stays available as the `title`.\n *\n * <RelativeTime date={fetchedAt} prefix=\"Updated\" />\n */\nexport const RelativeTime = forwardRef<HTMLTimeElement, RelativeTimeProps>(function RelativeTime(\n  {\n    date,\n    locale = 'en-AU',\n    format = 'short',\n    updateInterval = 30_000,\n    prefix,\n    title,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [now, setNow] = useState<number | null>(null)\n\n  useEffect(() => {\n    setNow(Date.now())\n    if (!updateInterval) return\n    const id = setInterval(() => {\n      setNow(Date.now())\n    }, updateInterval)\n    return () => {\n      clearInterval(id)\n    }\n  }, [updateInterval])\n\n  const d = toDate(date)\n  const valid = !Number.isNaN(d.getTime())\n  const absolute = valid ? formatAbsoluteTime(d, locale) : ''\n  const text = !valid ? '' : now === null ? absolute : formatRelativeTime(d, now, locale, format)\n\n  return (\n    <time\n      ref={ref}\n      dateTime={valid ? d.toISOString() : undefined}\n      title={title ?? absolute}\n      className={className}\n      suppressHydrationWarning\n      {...rest}\n    >\n      {prefix ? <span className={styles.prefix}>{prefix} </span> : null}\n      {/* Server renders the absolute date in its timezone; the client re-renders relative text on mount. */}\n      <span className={styles.value} suppressHydrationWarning>\n        {text}\n      </span>\n    </time>\n  )\n})\n"],"mappings":";;;;;AA6BA,IAAaE,IAAeC,EAA+C,SACzE,EACE,SACA,YAAS,SACT,YAAS,SACT,oBAAiB,KACjB,WACA,UACA,cACA,GAAGC,KAEL,GACA;CACA,IAAM,CAACC,GAAKC,KAAUC,EAAwB,IAAI;CAElD,QAAgB;EAEd,IADAD,EAAO,KAAK,IAAI,CAAC,GACb,CAACE,GAAgB;EACrB,IAAMC,IAAK,kBAAkB;GAC3B,EAAO,KAAK,IAAI,CAAC;EACnB,GAAGD,CAAc;EACjB,aAAa;GACX,cAAcC,CAAE;EAClB;CACF,GAAG,CAACD,CAAc,CAAC;CAEnB,IAAME,IAAIC,EAAOC,CAAI,GACfC,IAAQ,CAAC,OAAO,MAAMH,EAAE,QAAQ,CAAC,GACjCI,IAAWD,IAAQE,EAAmBL,GAAGM,CAAM,IAAI,IACnDC,IAAQJ,IAAaR,MAAQ,OAAOS,IAAWI,EAAmBR,GAAGL,GAAKW,GAAQG,CAAM,IAAxE;CAEtB,OACE,kBAAC,QAAD;EACO;EACL,UAAUN,IAAQH,EAAE,YAAY,IAAI,KAAA;EACpC,OAAOU,KAASN;EACL;EACX,0BAAA;EACA,GAAIV;EANN,UAAA,CAQGiB,IAAS,kBAAC,QAAD;GAAM,WAAWrB,EAAO;GAAxB,UAAA,CAAiCqB,GAAO,GAAO;EAAI,CAAA,IAAA,MAE7D,kBAAC,QAAD;GAAM,WAAWrB,EAAO;GAAO,0BAAA;GAC5B,UAAAiB;EACG,CAAA,CACF;;AAEV,CAAC"}

package/dist/components/feedback/RelativeTime/RelativeTime.module.js

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

package/dist/components/feedback/RelativeTime/RelativeTime.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTime.module.js","names":["value","RelativeTime_module_default"],"sources":["../../../../src/components/feedback/RelativeTime/RelativeTime.module.css"],"sourcesContent":["/*\n * The time text updates in place, so its figures are tabular and don't shift the line.\n * The prefix (\"Updated\") is ordinary text: proportional figures, the surrounding face.\n */\n.value {\n  font-variant-numeric: tabular-nums lining-nums;\n}\n"],"mappings":""}

package/dist/components/feedback/RelativeTime/format.d.ts

@@ -0,0 +1,10 @@
+export type RelativeTimeStyle = 'long' | 'short' | 'narrow';
+export declare function toDate(date: Date | string | number): Date;
+/**
+ * "3 mins ago", "in 2 hours", "yesterday". Pure; exported for places that need the
+ * string without the element (a tooltip, a toast).
+ * Anything under 45 seconds reads as "now".
+ */
+export declare function formatRelativeTime(date: Date | string | number, now?: number, locale?: string, format?: RelativeTimeStyle): string;
+/** "Monday 28 September 2026 at 2:05 pm" — used for the tooltip and the first render. */
+export declare function formatAbsoluteTime(date: Date | string | number, locale?: string): string;

package/dist/components/feedback/RelativeTime/format.js

@@ -0,0 +1,57 @@
+//#region src/components/feedback/RelativeTime/format.ts
+var e = [
+	[
+		45,
+		"second",
+		1
+	],
+	[
+		2700,
+		"minute",
+		60
+	],
+	[
+		79200,
+		"hour",
+		3600
+	],
+	[
+		2246400,
+		"day",
+		86400
+	],
+	[
+		27648e3,
+		"month",
+		2630016
+	],
+	[
+		Infinity,
+		"year",
+		31557600
+	]
+];
+function t(e) {
+	return e instanceof Date ? e : new Date(e);
+}
+function n(n, r = Date.now(), i = "en-AU", a = "short") {
+	let o = (t(n).getTime() - r) / 1e3, s = Math.abs(o), c = new Intl.RelativeTimeFormat(i, {
+		numeric: "auto",
+		style: a
+	});
+	for (let [t, n, r] of e) if (s < t) {
+		let e = n === "second" ? 0 : Math.round(o / r);
+		return c.format(e, n);
+	}
+	return c.format(0, "second");
+}
+function r(e, n = "en-AU") {
+	return new Intl.DateTimeFormat(n, {
+		dateStyle: "full",
+		timeStyle: "short"
+	}).format(t(e));
+}
+//#endregion
+export { r as formatAbsoluteTime, n as formatRelativeTime, t as toDate };
+
+//# sourceMappingURL=format.js.map

package/dist/components/feedback/RelativeTime/format.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.js","names":["STEPS","toDate","date","formatRelativeTime","seconds","now","abs","rtf","locale","format","limit","unit","size","value","formatAbsoluteTime"],"sources":["../../../../src/components/feedback/RelativeTime/format.ts"],"sourcesContent":["export type RelativeTimeStyle = 'long' | 'short' | 'narrow'\n\ntype Unit = Intl.RelativeTimeFormatUnit\n\nconst STEPS: [limit: number, unit: Unit, size: number][] = [\n  [45, 'second', 1],\n  [45 * 60, 'minute', 60],\n  [22 * 3600, 'hour', 3600],\n  [26 * 86400, 'day', 86400],\n  [320 * 86400, 'month', 30.44 * 86400],\n  [Infinity, 'year', 365.25 * 86400],\n]\n\nexport function toDate(date: Date | string | number): Date {\n  return date instanceof Date ? date : new Date(date)\n}\n\n/**\n * \"3 mins ago\", \"in 2 hours\", \"yesterday\". Pure; exported for places that need the\n * string without the element (a tooltip, a toast).\n * Anything under 45 seconds reads as \"now\".\n */\nexport function formatRelativeTime(\n  date: Date | string | number,\n  now: number = Date.now(),\n  locale = 'en-AU',\n  format: RelativeTimeStyle = 'short',\n): string {\n  const seconds = (toDate(date).getTime() - now) / 1000\n  const abs = Math.abs(seconds)\n  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto', style: format })\n  for (const [limit, unit, size] of STEPS) {\n    if (abs < limit) {\n      const value = unit === 'second' ? 0 : Math.round(seconds / size)\n      return rtf.format(value, unit)\n    }\n  }\n  return rtf.format(0, 'second')\n}\n\n/** \"Monday 28 September 2026 at 2:05 pm\" — used for the tooltip and the first render. */\nexport function formatAbsoluteTime(date: Date | string | number, locale = 'en-AU'): string {\n  return new Intl.DateTimeFormat(locale, { dateStyle: 'full', timeStyle: 'short' }).format(\n    toDate(date),\n  )\n}\n"],"mappings":";AAIA,IAAMA,IAAqD;CACzD;EAAC;EAAI;EAAU;CAAC;CAChB;EAAC;EAAS;EAAU;CAAE;CACtB;EAAC;EAAW;EAAQ;CAAI;CACxB;EAAC;EAAY;EAAO;CAAK;CACzB;EAAC;EAAa;EAAS;CAAa;CACpC;EAAC;EAAU;EAAQ;CAAc;AACnC;AAEA,SAAgBC,EAAO,GAAoC;CACzD,OAAOC,aAAgB,OAAOA,IAAO,IAAI,KAAKA,CAAI;AACpD;AAOA,SAAgBC,EACd,GACA,IAAc,KAAK,IAAI,GACvB,IAAS,SACT,IAA4B,SACpB;CACR,IAAMC,KAAWH,EAAOC,CAAI,CAAC,CAAC,QAAQ,IAAIG,KAAO,KAC3CC,IAAM,KAAK,IAAIF,CAAO,GACtBG,IAAM,IAAI,KAAK,mBAAmBC,GAAQ;EAAE,SAAS;EAAQ,OAAOC;CAAO,CAAC;CAClF,KAAK,IAAM,CAACC,GAAOC,GAAMC,MAASZ,GAChC,IAAIM,IAAMI,GAAO;EACf,IAAMG,IAAQF,MAAS,WAAW,IAAI,KAAK,MAAMP,IAAUQ,CAAI;EAC/D,OAAOL,EAAI,OAAOM,GAAOF,CAAI;CAC/B;CAEF,OAAOJ,EAAI,OAAO,GAAG,QAAQ;AAC/B;AAGA,SAAgBO,EAAmB,GAA8B,IAAS,SAAiB;CACzF,OAAO,IAAI,KAAK,eAAeN,GAAQ;EAAE,WAAW;EAAQ,WAAW;CAAQ,CAAC,CAAC,CAAC,OAChFP,EAAOC,CAAI,CACb;AACF"}

package/dist/components/feedback/RelativeTime/index.d.ts

@@ -0,0 +1,4 @@
+export { RelativeTime } from './RelativeTime.js';
+export { formatRelativeTime, formatAbsoluteTime } from './format.js';
+export type { RelativeTimeProps } from './RelativeTime.js';
+export type { RelativeTimeStyle } from './format.js';

package/dist/components/feedback/Spinner/Spinner.d.ts

@@ -0,0 +1,8 @@
+import { type HTMLAttributes } from 'react';
+export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: 'sm' | 'md' | 'lg' | 'inherit';
+    /** Accessible label. Defaults to "Loading". Pass `null` when a parent already announces busy state. */
+    label?: string | null;
+}
+/** Indeterminate progress. Three bars that fill in turn — not the stock rotating ring. */
+export declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/feedback/Spinner/Spinner.js

@@ -0,0 +1,25 @@
+import { cx as e } from "../../../utils/cx.js";
+import t from "./Spinner.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/feedback/Spinner/Spinner.tsx
+var a = n(function({ size: n = "inherit", label: a = "Loading", className: o, ...s }, c) {
+	return /* @__PURE__ */ i("span", {
+		ref: c,
+		className: e(t.root, o),
+		"data-size": n,
+		role: a ? "status" : void 0,
+		"aria-label": a ?? void 0,
+		"aria-hidden": !a || void 0,
+		...s,
+		children: [
+			/* @__PURE__ */ r("span", { className: t.bar }),
+			/* @__PURE__ */ r("span", { className: t.bar }),
+			/* @__PURE__ */ r("span", { className: t.bar })
+		]
+	});
+});
+//#endregion
+export { a as Spinner };
+
+//# sourceMappingURL=Spinner.js.map

package/dist/components/feedback/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","names":["styles","Spinner_module_default","Spinner","forwardRef","rest","cx","className","size","label"],"sources":["../../../../src/components/feedback/Spinner/Spinner.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport styles from './Spinner.module.css'\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {\n  size?: 'sm' | 'md' | 'lg' | 'inherit'\n  /** Accessible label. Defaults to \"Loading\". Pass `null` when a parent already announces busy state. */\n  label?: string | null\n}\n\n/** Indeterminate progress. Three bars that fill in turn — not the stock rotating ring. */\nexport const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(function Spinner(\n  { size = 'inherit', label = 'Loading', className, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-size={size}\n      role={label ? 'status' : undefined}\n      aria-label={label ?? undefined}\n      aria-hidden={label ? undefined : true}\n      {...rest}\n    >\n      <span className={styles.bar} />\n      <span className={styles.bar} />\n      <span className={styles.bar} />\n    </span>\n  )\n})\n"],"mappings":";;;;;AAWA,IAAaE,IAAUC,EAA0C,SAC/D,EAAE,UAAO,WAAW,WAAQ,WAAW,cAAW,GAAGC,KACrD,GACA;CACA,OACE,kBAAC,QAAD;EACO;EACL,WAAWC,EAAGL,EAAO,MAAMM,CAAS;EACpC,aAAWC;EACX,MAAMC,IAAQ,WAAW,KAAA;EACzB,cAAYA,KAAS,KAAA;EACrB,eAAa,MAAQ,KAAA;EACrB,GAAIJ;EAPN,UAAA;GASE,kBAAC,QAAD,EAAM,WAAWJ,EAAO,IAAM,CAAA;GAC9B,kBAAC,QAAD,EAAM,WAAWA,EAAO,IAAM,CAAA;GAC9B,kBAAC,QAAD,EAAM,WAAWA,EAAO,IAAM,CAAA;EAC1B;;AAEV,CAAC"}

package/dist/components/feedback/Spinner/Spinner.module.js

@@ -0,0 +1,10 @@
+//#region src/components/feedback/Spinner/Spinner.module.css
+var e = "kiln-Spinner__root", t = "kiln-Spinner__bar", n = "kiln-Spinner__fill", r = {
+	root: e,
+	bar: t,
+	fill: n
+};
+//#endregion
+export { t as bar, r as default, n as fill, e as root };
+
+//# sourceMappingURL=Spinner.module.js.map

package/dist/components/feedback/Spinner/Spinner.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.module.js","names":["root","bar","fill","Spinner_module_default"],"sources":["../../../../src/components/feedback/Spinner/Spinner.module.css"],"sourcesContent":[".root {\n  display: inline-flex;\n  align-items: flex-end;\n  gap: 0.14em;\n  inline-size: 1em;\n  block-size: 1em;\n  color: var(--spinner-color, currentColor);\n}\n\n.root[data-size='sm'] {\n  font-size: 0.875rem;\n}\n.root[data-size='md'] {\n  font-size: 1.25rem;\n}\n.root[data-size='lg'] {\n  font-size: 2rem;\n}\n\n.bar {\n  flex: 1;\n  block-size: 100%;\n  background: currentColor;\n  border-radius: 1px;\n  transform-origin: bottom;\n  animation: fill calc(var(--dur-3) * 3) var(--ease-in-out) infinite;\n}\n.bar:nth-child(2) {\n  animation-delay: var(--dur-3);\n}\n.bar:nth-child(3) {\n  animation-delay: calc(var(--dur-3) * 2);\n}\n\n@keyframes fill {\n  0%,\n  100% {\n    transform: scaleY(0.25);\n    opacity: 0.45;\n  }\n  33% {\n    transform: scaleY(1);\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bar {\n    animation: none;\n    opacity: 0.6;\n  }\n}\n"],"mappings":""}

package/dist/components/feedback/Spinner/index.d.ts

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

package/dist/components/feedback/StatusDot/StatusDot.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { Tone } from '../../../utils/tokens.js';
+export interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {
+    /** State colour. Default `neutral`. */
+    tone?: Tone;
+    /** What the colour means: "Paid", "Through to the round of 32", "Deploying". Always required — colour alone is not information. */
+    label: ReactNode;
+    /** Keep the label for screen readers only (e.g. in a dense table with a legend). */
+    labelHidden?: boolean;
+    size?: 'sm' | 'md';
+}
+/** A small static dot plus a label. For states that sit still; for "happening now" use LiveIndicator. */
+export declare const StatusDot: import("react").ForwardRefExoticComponent<StatusDotProps & import("react").RefAttributes<HTMLSpanElement>>;