@mitcsutt/kiln-ui 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","names":["styles","List_module_default","ListRoot","forwardRef","Comp","rest","cx","className","divided","density","ListItem","Row","asChild","Slot","interactive","selected","highlighted","ListLeading","ListContent","ListDescription","ListTrailing","List"],"sources":["../../../../src/components/display/List/List.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type LiHTMLAttributes, type ReactNode } from 'react'\nimport { Slot } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport styles from './List.module.css'\n\nexport type ListDensity = 'compact' | 'regular'\nexport type ListElement = 'ul' | 'ol'\n\nexport interface ListProps extends HTMLAttributes<HTMLUListElement> {\n  /** Hairline rules between rows. Default `true`. */\n  divided?: boolean\n  /** Row height. Default `regular`. */\n  density?: ListDensity\n  /** `ol` when order is the content (a leaderboard). Default `ul`. */\n  as?: ListElement\n}\n\n/**\n * The workhorse row list: leaderboards, team members, invoices, recent work. Rows are\n * `Leading · Content · Trailing`, divided by hairlines, never boxed in cards.\n *\n * <List><List.Item><List.Leading>1</List.Leading><List.Content>…</List.Content></List.Item></List>\n */\nconst ListRoot = forwardRef<HTMLUListElement, ListProps>(function List(\n  { divided = true, density = 'regular', as: Comp = 'ul', className, ...rest },\n  ref,\n) {\n  return (\n    <Comp\n      // @ts-expect-error — ul/ol share HTMLOListElement-compatible attributes; ref type differs only nominally\n      ref={ref}\n      role=\"list\"\n      className={cx(styles.list, className)}\n      data-divided={divided || undefined}\n      data-density={density}\n      {...rest}\n    />\n  )\n})\n\nexport interface ListItemProps extends LiHTMLAttributes<HTMLLIElement> {\n  /** Hover affordance. Implied by `asChild`. */\n  interactive?: boolean\n  /**\n   * Make the whole row one link or button: the single child becomes the row, so there\n   * is exactly one interactive element and no nested anchors.\n   * `<List.Item asChild><a href=\"/projects/atlas\">…slots…</a></List.Item>`\n   */\n  asChild?: boolean\n  /** The current item (accent-soft fill) — e.g. the open page in a list of links. */\n  selected?: boolean\n  /** Draw attention to a row with `--color-highlight` — typically \"you\". */\n  highlighted?: boolean\n  children?: ReactNode\n}\n\nconst ListItem = forwardRef<HTMLLIElement, ListItemProps>(function ListItem(\n  {\n    interactive = false,\n    asChild = false,\n    selected = false,\n    highlighted = false,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const Row = asChild ? Slot.Root : 'div'\n  return (\n    <li\n      ref={ref}\n      className={cx(styles.item, className)}\n      data-interactive={interactive || asChild || undefined}\n      data-selected={selected || undefined}\n      data-highlighted={highlighted || undefined}\n      {...rest}\n    >\n      <Row className={styles.row}>{children}</Row>\n    </li>\n  )\n})\n\n/** Rank, avatar or icon at the start of the row. Numbers are tabular and right-aligned. */\nconst ListLeading = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(\n  function ListLeading({ className, ...rest }, ref) {\n    return <span ref={ref} className={cx(styles.leading, className)} {...rest} />\n  },\n)\n\n/** Title (the direct text) and an optional `List.Description` below it. */\nconst ListContent = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(\n  function ListContent({ className, ...rest }, ref) {\n    return <span ref={ref} className={cx(styles.content, className)} {...rest} />\n  },\n)\n\nconst ListDescription = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(\n  function ListDescription({ className, ...rest }, ref) {\n    return <span ref={ref} className={cx(styles.description, className)} {...rest} />\n  },\n)\n\n/** Value, meta or actions at the end of the row. Numbers are tabular. */\nconst ListTrailing = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(\n  function ListTrailing({ className, ...rest }, ref) {\n    return <span ref={ref} className={cx(styles.trailing, className)} {...rest} />\n  },\n)\n\nexport const List = Object.assign(ListRoot, {\n  Item: ListItem,\n  Leading: ListLeading,\n  Content: ListContent,\n  Description: ListDescription,\n  Trailing: ListTrailing,\n})\n"],"mappings":";;;;;;AAuBA,IAAME,IAAWC,EAAwC,SACvD,EAAE,aAAU,IAAM,aAAU,WAAW,IAAIC,IAAO,MAAM,cAAW,GAAGC,KACtE,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,MAAK;EACL,WAAWE,EAAGN,EAAO,MAAMO,CAAS;EACpC,gBAAcC,KAAW,KAAA;EACzB,gBAAcC;EACd,GAAIJ;CACL,CAAA;AAEL,CAAC,GAkBKK,IAAWP,EAAyC,SACxD,EACE,iBAAc,IACd,aAAU,IACV,cAAW,IACX,iBAAc,IACd,cACA,aACA,GAAGE,KAEL,GACA;CACA,IAAMM,IAAMC,IAAUC,EAAK,OAAO;CAClC,OACE,kBAAC,MAAD;EACO;EACL,WAAWP,EAAGN,EAAO,MAAMO,CAAS;EACpC,oBAAkBO,KAAeF,KAAW,KAAA;EAC5C,iBAAeG,KAAY,KAAA;EAC3B,oBAAkBC,KAAe,KAAA;EACjC,GAAIX;EAEJ,UAAA,kBAACM,GAAD;GAAK,WAAWX,EAAO;GAAM;EAAc,CAAA;CACzC,CAAA;AAER,CAAC,GAGKiB,IAAcd,EAClB,SAAqB,EAAE,cAAW,GAAGE,KAAQ,GAAK;CAChD,OAAO,kBAAC,QAAD;EAAW;EAAK,WAAWC,EAAGN,EAAO,SAASO,CAAS;EAAG,GAAIF;CAAO,CAAA;AAC9E,CACF,GAGMa,IAAcf,EAClB,SAAqB,EAAE,cAAW,GAAGE,KAAQ,GAAK;CAChD,OAAO,kBAAC,QAAD;EAAW;EAAK,WAAWC,EAAGN,EAAO,SAASO,CAAS;EAAG,GAAIF;CAAO,CAAA;AAC9E,CACF,GAEMc,IAAkBhB,EACtB,SAAyB,EAAE,cAAW,GAAGE,KAAQ,GAAK;CACpD,OAAO,kBAAC,QAAD;EAAW;EAAK,WAAWC,EAAGN,EAAO,aAAaO,CAAS;EAAG,GAAIF;CAAO,CAAA;AAClF,CACF,GAGMe,IAAejB,EACnB,SAAsB,EAAE,cAAW,GAAGE,KAAQ,GAAK;CACjD,OAAO,kBAAC,QAAD;EAAW;EAAK,WAAWC,EAAGN,EAAO,UAAUO,CAAS;EAAG,GAAIF;CAAO,CAAA;AAC/E,CACF,GAEagB,IAAO,OAAO,OAAOnB,GAAU;CAC1C,MAAMQ;CACN,SAASO;CACT,SAASC;CACT,aAAaC;CACb,UAAUC;AACZ,CAAC"}

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

@@ -0,0 +1,14 @@
+//#region src/components/display/List/List.module.css
+var e = "kiln-List__list", t = "kiln-List__item", n = "kiln-List__row", r = "kiln-List__leading", i = "kiln-List__content", a = "kiln-List__description", o = "kiln-List__trailing", s = {
+	list: e,
+	item: t,
+	row: n,
+	leading: r,
+	content: i,
+	description: a,
+	trailing: o
+};
+//#endregion
+export { i as content, s as default, a as description, t as item, r as leading, e as list, n as row, o as trailing };
+
+//# sourceMappingURL=List.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.module.js","names":["list","item","row","leading","content","description","trailing","List_module_default"],"sources":["../../../../src/components/display/List/List.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --list-inset         default var(--space-2) — row padding-inline (room for fills)\n *   --list-row-radius    default var(--radius-field) — hover/selected/highlighted fill\n *   --list-trailing-size default: the row's text size (same as the title)\n *   --highlight-tone-{positive,caution,critical,info}-text, --highlight-accent-text\n *                        tone text inside a highlighted row (shared with Table)\n *\n * Structure: li.item > .row (a div, or the asChild link/button) > slots. The row carries\n * padding, hover and focus so a linked row is one target edge to edge. Slots are spans,\n * valid inside <a> and <button>.\n */\n.list {\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-text);\n  color: var(--color-ink);\n}\n\n.item {\n  --_py: var(--space-3);\n  --_fill: transparent;\n  --_fill-ink: inherit;\n\n  position: relative;\n  min-inline-size: 0;\n}\n.list[data-density='compact'] > .item {\n  --_py: var(--space-2);\n}\n\n.list[data-divided] > .item + .item {\n  border-block-start: var(--border-width) solid var(--color-line);\n}\n/* A filled row doesn't need rules either side — the fill is its edge. */\n.list[data-divided] > .item:is([data-highlighted], [data-selected]),\n.list[data-divided] > .item:is([data-highlighted], [data-selected]) + .item {\n  border-block-start-color: transparent;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  inline-size: 100%;\n  min-inline-size: 0;\n  margin: 0;\n  padding-block: var(--_py);\n  padding-inline: var(--list-inset, var(--space-2));\n  border: 0;\n  border-radius: var(--list-row-radius, var(--radius-field));\n  background: var(--_fill);\n  color: var(--_fill-ink);\n  font: inherit;\n  text-align: start;\n  text-decoration: none;\n  transition: background-color var(--dur-1) var(--ease-out);\n}\n\n.item[data-selected] {\n  --_fill: var(--color-accent-soft);\n  --_fill-ink: var(--color-ink);\n}\n.item[data-highlighted] {\n  --_fill: var(--color-highlight);\n  --_fill-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\n/*\n * A filled row re-points the colour roles for its content, so a muted description, a\n * tone-coloured Numeral or a LiveIndicator stays legible on the fill (gold in Fiesta\n * night). The item publishes fill/ink under private names and the row swaps the roles —\n * redefining a role from itself on one element would be a var() cycle (see Section).\n */\n.item:is([data-highlighted], [data-selected]) > .row {\n  --color-ink: var(--_fill-ink);\n  --color-ink-muted: color-mix(in oklab, var(--_fill-ink), var(--_fill) 25%);\n  --color-ink-subtle: color-mix(in oklab, var(--_fill-ink), var(--_fill) 35%);\n}\n.item[data-highlighted] > .row {\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\n.item[data-interactive] > .row {\n  cursor: pointer;\n}\n@media (hover: hover) {\n  .item[data-interactive]:not([data-highlighted], [data-selected]) > .row:hover {\n    background: var(--color-surface-sunken);\n  }\n  .item[data-interactive]:is([data-highlighted], [data-selected]) > .row:hover {\n    background: color-mix(in oklch, var(--_fill) 88%, var(--color-ink));\n  }\n}\n.row:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: -2px;\n}\n\n/* ── Slots ───────────────────────────────────────────────────────────────── */\n\n.leading {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: flex-end;\n  min-inline-size: 2ch;\n  color: var(--color-ink-muted);\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n  font-weight: var(--label-weight);\n  font-variant-numeric: tabular-nums lining-nums;\n  font-size: var(--text-md);\n}\n.item[data-highlighted] .leading {\n  color: inherit;\n}\n\n.content {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  gap: calc(var(--space-1) / 2);\n  min-inline-size: 0;\n  font-size: var(--text-md);\n  font-weight: var(--label-weight);\n  line-height: var(--leading-snug);\n  overflow-wrap: anywhere;\n}\n\n.description {\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n  font-weight: 400;\n}\n\n.trailing {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  margin-inline-start: auto;\n  text-align: end;\n  /*\n   * The row's text face and size, with tabular figures: a bare \"7 tasks\" sits level with the\n   * title instead of looming in the numeric face. Put a <Numeral>/<Amount> here for figures\n   * that should carry the numeric face (receipt mono in Ledger).\n   */\n  font-variant-numeric: tabular-nums lining-nums;\n  font-size: var(--list-trailing-size, var(--text-md));\n  font-weight: var(--label-weight);\n  line-height: var(--leading-snug);\n  white-space: nowrap;\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { List } from './List.js';
+export type { ListProps, ListItemProps, ListDensity, ListElement } from './List.js';

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

@@ -0,0 +1,46 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type Space } from '../../../utils/tokens.js';
+export type MarqueeSpeed = 'slow' | 'normal' | 'fast';
+export type MarqueeDirection = 'left' | 'right';
+export type MarqueeSurface = 'plain' | 'inverse' | 'accent';
+export interface MarqueeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * The things that scroll. Pass an array (or several children) — each entry becomes
+     * one item with a separator after it, so the loop is seamless.
+     */
+    items?: ReactNode[];
+    /** Alternative to `items`: each direct child is one item. */
+    children?: ReactNode;
+    /** Accessible name for the region, e.g. "Deploy status". Required: a ticker needs a name. */
+    label: string;
+    /** Travel speed. Measured in px/s once mounted, so long and short tickers feel the same. */
+    speed?: MarqueeSpeed;
+    /** Which way the content travels. Default `left`. */
+    direction?: MarqueeDirection;
+    /** Pause while hovered or while anything inside has focus. Default `true`. */
+    pauseOnHover?: boolean;
+    /**
+     * Show a pause/play button at the end of the band (WCAG 2.2.2: moving content needs a
+     * way to stop it that works for keyboard and touch). Default `true`.
+     */
+    pauseControl?: boolean;
+    /** Space between an item and its separator, as a step on the space scale. Default 5. */
+    gap?: Space;
+    /**
+     * Replaces the separator drawn between items. The default is a slanted hairline
+     * themed through `--marquee-separator-*`. Pass `null` for none.
+     */
+    separator?: ReactNode;
+    /** Band colour. `plain` sits on the page between hairlines; `inverse` and `accent` fill. */
+    surface?: MarqueeSurface;
+}
+/**
+ * A horizontal ticker: live status, a features strip, a top-accounts summary.
+ *
+ * The content is rendered twice for a seamless loop; the copy is `aria-hidden` and
+ * `inert`, so screen readers and the tab order see it once. Under
+ * `prefers-reduced-motion` the band stops and becomes a scrollable row.
+ *
+ * <Marquee label="Deploy status" items={[<>Atlas 2.4 deploying</>, …]} surface="inverse" />
+ */
+export declare const Marquee: import("react").ForwardRefExoticComponent<MarqueeProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/display/Marquee/Marquee.js

@@ -0,0 +1,95 @@
+import { cx as e } from "../../../utils/cx.js";
+import { createIcon as t } from "../../../icons/Icon.js";
+import { mergeStyles as n } from "../../../utils/responsive.js";
+import { space as r } from "../../../utils/tokens.js";
+import i from "./Marquee.module.js";
+import { Children as a, forwardRef as o, isValidElement as s, useCallback as c, useEffect as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/display/Marquee/Marquee.tsx
+var m = {
+	slow: 28,
+	normal: 48,
+	fast: 84
+}, h = {
+	slow: 7,
+	normal: 4.5,
+	fast: 2.5
+}, g = t("PauseIcon", /* @__PURE__ */ f("path", { d: "M7.5 5.5v9M12.5 5.5v9" })), _ = t("PlayIcon", /* @__PURE__ */ f("path", { d: "M7 5.25v9.5L14.75 10z" })), v = o(function({ items: t, children: o, label: v, speed: y = "normal", direction: b = "left", pauseOnHover: x = !0, pauseControl: S = !0, gap: C = 5, separator: w, surface: T = "plain", className: E, style: D, ...O }, k) {
+	let A = (t ?? a.toArray(o)).filter((e) => e != null && e !== !1), [j, M] = d(!1), [N, P] = d(null), F = u(null);
+	l(() => {
+		let e = F.current;
+		if (!e || typeof ResizeObserver > "u") return;
+		let t = () => {
+			let t = e.getBoundingClientRect().width;
+			t > 0 && P(t / m[y]);
+		};
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => {
+			n.disconnect();
+		};
+	}, [y]);
+	let I = c((e) => {
+		e?.setAttribute("inert", "");
+	}, []), L = N ?? Math.max(A.length, 1) * h[y], R = () => w === void 0 ? /* @__PURE__ */ f("span", { className: i.rule }) : w === null ? null : /* @__PURE__ */ f("span", {
+		className: i.custom,
+		children: w
+	}), z = () => A.map((e, t) => /* @__PURE__ */ p("li", {
+		className: i.item,
+		children: [/* @__PURE__ */ f("span", {
+			className: i.content,
+			children: e
+		}), /* @__PURE__ */ f("span", {
+			className: i.separator,
+			"aria-hidden": "true",
+			children: R()
+		})]
+	}, s(e) && e.key !== null ? e.key : t));
+	return /* @__PURE__ */ p("div", {
+		ref: k,
+		role: "region",
+		"aria-label": v,
+		className: e(i.marquee, E),
+		"data-surface": T,
+		"data-direction": b,
+		"data-speed": y,
+		"data-pause-on-hover": x || void 0,
+		"data-paused": j || void 0,
+		style: n({
+			"--marquee-gap": r(C),
+			"--marquee-duration": `${L.toFixed(2)}s`
+		}, D),
+		...O,
+		children: [/* @__PURE__ */ f("div", {
+			className: i.viewport,
+			children: /* @__PURE__ */ p("div", {
+				className: i.track,
+				children: [/* @__PURE__ */ f("ul", {
+					ref: F,
+					role: "list",
+					className: i.group,
+					children: z()
+				}), /* @__PURE__ */ f("ul", {
+					ref: I,
+					role: "list",
+					className: e(i.group, i.copy),
+					"aria-hidden": "true",
+					children: z()
+				})]
+			})
+		}), S ? /* @__PURE__ */ f("button", {
+			type: "button",
+			className: i.control,
+			"aria-pressed": j,
+			"aria-label": `Pause ${v}`,
+			onClick: () => {
+				M((e) => !e);
+			},
+			children: f(j ? _ : g, {})
+		}) : null]
+	});
+});
+//#endregion
+export { v as Marquee };
+
+//# sourceMappingURL=Marquee.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Marquee.js","names":["styles","Marquee_module_default","SPEED","FALLBACK_PER_ITEM","PauseIcon","createIcon","PlayIcon","Marquee","forwardRef","rest","list","items","Children","children","item","paused","setPaused","useState","duration","setDuration","groupRef","useRef","group","measure","width","speed","observer","inertRef","useCallback","seconds","renderSeparator","separator","renderGroup","isValidElement","i","label","cx","className","surface","direction","pauseOnHover","mergeStyles","space","gap","style","pauseControl","p","jsx"],"sources":["../../../../src/components/display/Marquee/Marquee.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { createIcon } from '#icons'\nimport { cx } from '#utils/cx'\nimport { mergeStyles } from '#utils/responsive'\nimport { space, type Space } from '#utils/tokens'\nimport styles from './Marquee.module.css'\n\nexport type MarqueeSpeed = 'slow' | 'normal' | 'fast'\nexport type MarqueeDirection = 'left' | 'right'\nexport type MarqueeSurface = 'plain' | 'inverse' | 'accent'\n\nexport interface MarqueeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /**\n   * The things that scroll. Pass an array (or several children) — each entry becomes\n   * one item with a separator after it, so the loop is seamless.\n   */\n  items?: ReactNode[]\n  /** Alternative to `items`: each direct child is one item. */\n  children?: ReactNode\n  /** Accessible name for the region, e.g. \"Deploy status\". Required: a ticker needs a name. */\n  label: string\n  /** Travel speed. Measured in px/s once mounted, so long and short tickers feel the same. */\n  speed?: MarqueeSpeed\n  /** Which way the content travels. Default `left`. */\n  direction?: MarqueeDirection\n  /** Pause while hovered or while anything inside has focus. Default `true`. */\n  pauseOnHover?: boolean\n  /**\n   * Show a pause/play button at the end of the band (WCAG 2.2.2: moving content needs a\n   * way to stop it that works for keyboard and touch). Default `true`.\n   */\n  pauseControl?: boolean\n  /** Space between an item and its separator, as a step on the space scale. Default 5. */\n  gap?: Space\n  /**\n   * Replaces the separator drawn between items. The default is a slanted hairline\n   * themed through `--marquee-separator-*`. Pass `null` for none.\n   */\n  separator?: ReactNode\n  /** Band colour. `plain` sits on the page between hairlines; `inverse` and `accent` fill. */\n  surface?: MarqueeSurface\n}\n\n/* Pixels per second. Tuned so text stays readable at a glance. */\nconst SPEED: Record<MarqueeSpeed, number> = { slow: 28, normal: 48, fast: 84 }\n/* Seconds per item, used before the track has been measured (and on the server). */\nconst FALLBACK_PER_ITEM: Record<MarqueeSpeed, number> = { slow: 7, normal: 4.5, fast: 2.5 }\n\nconst PauseIcon = createIcon('PauseIcon', <path d=\"M7.5 5.5v9M12.5 5.5v9\" />)\nconst PlayIcon = createIcon('PlayIcon', <path d=\"M7 5.25v9.5L14.75 10z\" />)\n\n/**\n * A horizontal ticker: live status, a features strip, a top-accounts summary.\n *\n * The content is rendered twice for a seamless loop; the copy is `aria-hidden` and\n * `inert`, so screen readers and the tab order see it once. Under\n * `prefers-reduced-motion` the band stops and becomes a scrollable row.\n *\n * <Marquee label=\"Deploy status\" items={[<>Atlas 2.4 deploying</>, …]} surface=\"inverse\" />\n */\nexport const Marquee = forwardRef<HTMLDivElement, MarqueeProps>(function Marquee(\n  {\n    items,\n    children,\n    label,\n    speed = 'normal',\n    direction = 'left',\n    pauseOnHover = true,\n    pauseControl = true,\n    gap = 5,\n    separator,\n    surface = 'plain',\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const list = (items ?? Children.toArray(children)).filter(\n    (item) => item !== null && item !== undefined && item !== false,\n  )\n  const [paused, setPaused] = useState(false)\n  const [duration, setDuration] = useState<number | null>(null)\n  const groupRef = useRef<HTMLUListElement>(null)\n\n  // Measure one copy of the content and derive the loop duration from a constant speed.\n  useEffect(() => {\n    const group = groupRef.current\n    if (!group || typeof ResizeObserver === 'undefined') return\n    const measure = () => {\n      const width = group.getBoundingClientRect().width\n      if (width > 0) setDuration(width / SPEED[speed])\n    }\n    measure()\n    const observer = new ResizeObserver(measure)\n    observer.observe(group)\n    return () => {\n      observer.disconnect()\n    }\n  }, [speed])\n\n  // `inert` is only a known prop in React 19, so set the attribute directly (works in 18 too).\n  const inertRef = useCallback((node: HTMLUListElement | null) => {\n    node?.setAttribute('inert', '')\n  }, [])\n\n  const seconds = duration ?? Math.max(list.length, 1) * FALLBACK_PER_ITEM[speed]\n\n  const renderSeparator = () =>\n    separator === undefined ? (\n      <span className={styles.rule} />\n    ) : separator === null ? null : (\n      <span className={styles.custom}>{separator}</span>\n    )\n\n  const renderGroup = () =>\n    list.map((item, i) => (\n      <li key={isValidElement(item) && item.key !== null ? item.key : i} className={styles.item}>\n        <span className={styles.content}>{item}</span>\n        <span className={styles.separator} aria-hidden=\"true\">\n          {renderSeparator()}\n        </span>\n      </li>\n    ))\n\n  return (\n    <div\n      ref={ref}\n      role=\"region\"\n      aria-label={label}\n      className={cx(styles.marquee, className)}\n      data-surface={surface}\n      data-direction={direction}\n      data-speed={speed}\n      data-pause-on-hover={pauseOnHover || undefined}\n      data-paused={paused || undefined}\n      style={mergeStyles(\n        {\n          '--marquee-gap': space(gap),\n          '--marquee-duration': `${seconds.toFixed(2)}s`,\n        } as CSSProperties,\n        style,\n      )}\n      {...rest}\n    >\n      <div className={styles.viewport}>\n        <div className={styles.track}>\n          <ul ref={groupRef} role=\"list\" className={styles.group}>\n            {renderGroup()}\n          </ul>\n          <ul\n            ref={inertRef}\n            role=\"list\"\n            className={cx(styles.group, styles.copy)}\n            aria-hidden=\"true\"\n          >\n            {renderGroup()}\n          </ul>\n        </div>\n      </div>\n      {pauseControl ? (\n        <button\n          type=\"button\"\n          className={styles.control}\n          aria-pressed={paused}\n          aria-label={`Pause ${label}`}\n          onClick={() => {\n            setPaused((p) => !p)\n          }}\n        >\n          {paused ? <PlayIcon /> : <PauseIcon />}\n        </button>\n      ) : null}\n    </div>\n  )\n})\n"],"mappings":";;;;;;;;AAuDA,IAAME,IAAsC;CAAE,MAAM;CAAI,QAAQ;CAAI,MAAM;AAAG,GAEvEC,IAAkD;CAAE,MAAM;CAAG,QAAQ;CAAK,MAAM;AAAI,GAEpFC,IAAYC,EAAW,aAAa,kBAAC,QAAD,EAAM,GAAE,wBAAyB,CAAA,CAAC,GACtEC,IAAWD,EAAW,YAAY,kBAAC,QAAD,EAAM,GAAE,wBAAyB,CAAA,CAAC,GAW7DE,IAAUC,EAAyC,SAC9D,EACE,UACA,aACA,UACA,WAAQ,UACR,eAAY,QACZ,kBAAe,IACf,kBAAe,IACf,SAAM,GACN,cACA,aAAU,SACV,cACA,UACA,GAAGC,KAEL,GACA;CACA,IAAMC,KAAQC,KAASC,EAAS,QAAQC,CAAQ,EAAA,CAAG,QAChD,MAASC,KAAS,QAA8BA,MAAS,EAC5D,GACM,CAACC,GAAQC,KAAaC,EAAS,EAAK,GACpC,CAACC,GAAUC,KAAeF,EAAwB,IAAI,GACtDG,IAAWC,EAAyB,IAAI;CAG9C,QAAgB;EACd,IAAMC,IAAQF,EAAS;EACvB,IAAI,CAACE,KAAS,OAAO,iBAAmB,KAAa;EACrD,IAAMC,UAAgB;GACpB,IAAMC,IAAQF,EAAM,sBAAsB,CAAC,CAAC;GAC5C,AAAIE,IAAQ,KAAGL,EAAYK,IAAQtB,EAAMuB,EAAM;EACjD;EACA,EAAQ;EACR,IAAMC,IAAW,IAAI,eAAeH,CAAO;EAE3C,OADAG,EAAS,QAAQJ,CAAK,SACT;GACX,EAAS,WAAW;EACtB;CACF,GAAG,CAACG,CAAK,CAAC;CAGV,IAAME,IAAWC,GAAa,MAAkC;EAC9D,GAAM,aAAa,SAAS,EAAE;CAChC,GAAG,CAAC,CAAC,GAECC,IAAUX,KAAY,KAAK,IAAIR,EAAK,QAAQ,CAAC,IAAIP,EAAkBsB,IAEnEK,UACJC,MAAc,KAAA,IACZ,kBAAC,QAAD,EAAM,WAAW/B,EAAO,KAAO,CAAA,IAC7B+B,MAAc,OAAO,OACvB,kBAAC,QAAD;EAAM,WAAW/B,EAAO;EAAS,UAAA+B;CAAgB,CAAA,GAG/CC,UACJtB,EAAK,KAAK,GAAM,MACd,kBAAC,MAAD;EAAmE,WAAWV,EAAO;EAArF,UAAA,CACE,kBAAC,QAAD;GAAM,WAAWA,EAAO;GAAU,UAAAc;EAAW,CAAA,GAC7C,kBAAC,QAAD;GAAM,WAAWd,EAAO;GAAW,eAAY;GAC5C,UAAA8B,EAAgB;EACb,CAAA,CACJ;CALK,GAAAG,EAAenB,CAAI,KAAKA,EAAK,QAAQ,OAAOA,EAAK,MAAMoB,CAK5D,CACL;CAEH,OACE,kBAAC,OAAD;EACO;EACL,MAAK;EACL,cAAYC;EACZ,WAAWC,EAAGpC,EAAO,SAASqC,CAAS;EACvC,gBAAcC;EACd,kBAAgBC;EAChB,cAAYd;EACZ,uBAAqBe,KAAgB,KAAA;EACrC,eAAazB,KAAU,KAAA;EACvB,OAAO0B,EACL;GACE,iBAAiBC,EAAMC,CAAG;GAC1B,sBAAsB,GAAGd,EAAQ,QAAQ,CAAC,EAAE;EAC9C,GACAe,CACF;EACA,GAAInC;EAjBN,UAAA,CAmBE,kBAAC,OAAD;GAAK,WAAWT,EAAO;GACrB,UAAA,kBAAC,OAAD;IAAK,WAAWA,EAAO;IAAvB,UAAA,CACE,kBAAC,MAAD;KAAI,KAAKoB;KAAU,MAAK;KAAO,WAAWpB,EAAO;KAC9C,UAAAgC,EAAY;IACX,CAAA,GACJ,kBAAC,MAAD;KACE,KAAKL;KACL,MAAK;KACL,WAAWS,EAAGpC,EAAO,OAAOA,EAAO,IAAI;KACvC,eAAY;KAEX,UAAAgC,EAAY;IACX,CAAA,CACD;;EACF,CAAA,GACJa,IACC,kBAAC,UAAD;GACE,MAAK;GACL,WAAW7C,EAAO;GAClB,gBAAce;GACd,cAAY,SAASoB;GACrB,eAAe;IACb,GAAW,MAAM,CAACW,CAAC;GACrB;GAEC,UAASC,EAAThC,IAAUT,IAAeF,GAAhB,CAAW,CAAgB;EAC/B,CAAA,IACN,IACD;;AAET,CAAC"}

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

@@ -0,0 +1,19 @@
+//#region src/components/display/Marquee/Marquee.module.css
+var e = "kiln-Marquee__marquee", t = "kiln-Marquee__viewport", n = "kiln-Marquee__track", r = "kiln-Marquee__scroll", i = "kiln-Marquee__group", a = "kiln-Marquee__item", o = "kiln-Marquee__content", s = "kiln-Marquee__separator", c = "kiln-Marquee__rule", l = "kiln-Marquee__custom", u = "kiln-Marquee__control", d = "kiln-Marquee__copy", f = {
+	marquee: e,
+	viewport: t,
+	track: n,
+	scroll: r,
+	group: i,
+	item: a,
+	content: o,
+	separator: s,
+	rule: c,
+	custom: l,
+	control: u,
+	copy: d
+};
+//#endregion
+export { o as content, u as control, d as copy, l as custom, f as default, i as group, a as item, e as marquee, c as rule, r as scroll, s as separator, n as track, t as viewport };
+
+//# sourceMappingURL=Marquee.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Marquee.module.js","names":["marquee","viewport","track","scroll","group","item","content","separator","rule","custom","control","copy","Marquee_module_default"],"sources":["../../../../src/components/display/Marquee/Marquee.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --marquee-font                default var(--font-text)\n *   --marquee-size                default var(--text-sm)\n *   --marquee-padding             block padding of the band, default var(--space-3)\n *   --marquee-edge                rules above/below the plain band, default var(--color-line)\n *   --marquee-separator-color     default currentColor\n *   --marquee-separator-opacity   default 0.5\n *   --marquee-separator-width     default var(--border-width)\n *   --marquee-separator-height    default 1.1em\n *   --marquee-separator-rotate    default 18deg  (a slanted rule; 0deg = upright bar)\n *   --marquee-separator-radius    default 0      (set width = height + a radius for a dot)\n *\n * Written by the component: --marquee-gap, --marquee-duration.\n */\n.marquee {\n  --_bg: transparent;\n  --_ink: var(--color-ink-muted);\n  --_edge: var(--marquee-edge, var(--color-line));\n\n  display: flex;\n  align-items: stretch;\n  min-inline-size: 0;\n  background: var(--_bg);\n  color: var(--_ink);\n  border-block: var(--border-width) solid var(--_edge);\n  font-family: var(--marquee-font, var(--font-text));\n  font-size: var(--marquee-size, var(--text-sm));\n  font-weight: var(--label-weight);\n  line-height: var(--leading-snug);\n  font-variant-numeric: tabular-nums lining-nums;\n}\n\n.marquee:not([data-surface='plain']) {\n  /* Tone text colours are tuned for the page, not for a filled band: let nested\n     indicators follow the band's ink. */\n  --live-label-color: currentColor;\n}\n\n.marquee[data-surface='inverse'] {\n  --_bg: var(--color-surface-inverse);\n  --_ink: var(--color-ink-inverse);\n  --_edge: var(--color-surface-inverse);\n}\n.marquee[data-surface='accent'] {\n  --_bg: var(--color-accent);\n  --_ink: var(--color-accent-ink);\n  --_edge: var(--color-line-strong);\n}\n\n.viewport {\n  flex: 1;\n  min-inline-size: 0;\n  overflow: hidden;\n}\n\n.track {\n  display: flex;\n  inline-size: max-content;\n  padding-block: var(--marquee-padding, var(--space-3));\n  animation: scroll var(--marquee-duration) linear infinite;\n}\n\n.marquee[data-direction='right'] .track {\n  animation-direction: reverse;\n}\n\n.marquee[data-paused] .track,\n.marquee[data-pause-on-hover]:focus-within .track {\n  animation-play-state: paused;\n}\n@media (hover: hover) {\n  .marquee[data-pause-on-hover]:hover .track {\n    animation-play-state: paused;\n  }\n}\n\n.group {\n  display: flex;\n  flex: none;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: var(--marquee-gap, var(--space-5));\n  padding-inline-end: var(--marquee-gap, var(--space-5));\n  white-space: nowrap;\n}\n\n.content {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n.separator {\n  display: inline-flex;\n  align-items: center;\n  color: var(--marquee-separator-color, currentColor);\n}\n\n.rule {\n  display: block;\n  inline-size: var(--marquee-separator-width, var(--border-width));\n  block-size: var(--marquee-separator-height, 1.1em);\n  border-radius: var(--marquee-separator-radius, 0);\n  background: currentColor;\n  opacity: var(--marquee-separator-opacity, 0.5);\n  rotate: var(--marquee-separator-rotate, 18deg);\n}\n\n.custom {\n  display: inline-flex;\n  opacity: var(--marquee-separator-opacity, 0.5);\n}\n\n/* Pause / play — quiet, but always reachable. */\n.control {\n  flex: none;\n  display: grid;\n  place-items: center;\n  inline-size: var(--control-sm);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-inline-start: var(--border-width) solid var(--_edge);\n  background: var(--_bg);\n  color: inherit;\n  font-size: var(--text-md);\n  opacity: 0.8;\n  cursor: pointer;\n  transition: opacity var(--dur-1) var(--ease-out);\n}\n.marquee[data-surface='inverse'] .control {\n  border-inline-start-color: color-mix(in oklch, var(--_ink) 25%, transparent);\n}\n@media (hover: hover) {\n  .control:hover {\n    opacity: 1;\n  }\n}\n.control:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: -4px;\n  opacity: 1;\n}\n.marquee:not([data-surface='plain']) .control:focus-visible {\n  outline-color: currentColor;\n}\n\n@keyframes scroll {\n  from {\n    translate: 0 0;\n  }\n  to {\n    translate: -50% 0;\n  }\n}\n\n/* Reduced motion: no travel — a static row the reader scrolls themselves. */\n@media (prefers-reduced-motion: reduce) {\n  .viewport {\n    overflow-x: auto;\n    scrollbar-width: thin;\n  }\n  .track {\n    animation: none;\n    padding-inline: var(--space-4);\n  }\n  .copy,\n  .control {\n    display: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Marquee } from './Marquee.js';
+export type { MarqueeProps, MarqueeSpeed, MarqueeDirection, MarqueeSurface } from './Marquee.js';

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

@@ -0,0 +1,30 @@
+import { type HTMLAttributes, type ImgHTMLAttributes, type ReactNode } from 'react';
+export type MediaRatio = '1/1' | '4/3' | '3/2' | '16/9' | '21/9' | '3/4' | '2/3' | 'auto';
+export type MediaFit = 'cover' | 'contain';
+export type MediaRadius = 'none' | 'media' | 'surface';
+export interface MediaProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    src: string;
+    /** Required. Describe the image; pass `""` only when it's purely decorative. */
+    alt: string;
+    /** Frame ratio. The image is fitted inside. Default `auto` (the image's own ratio). */
+    ratio?: MediaRatio;
+    /** Default `cover`. Use `contain` for logos, diagrams and screenshots that must not crop. */
+    fit?: MediaFit;
+    /** Corner role. Default `media`. */
+    radius?: MediaRadius;
+    /** Renders a `<figure>` with this as its `<figcaption>`. */
+    caption?: ReactNode;
+    /** Shown inside the frame if the image fails to load. Default: an empty sunken frame. */
+    fallback?: ReactNode;
+    /** Default `lazy`. Use `eager` for the image above the fold. */
+    loading?: 'lazy' | 'eager';
+    /** Extra attributes for the `<img>` (srcSet, sizes, width/height, fetchPriority). */
+    imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'loading'>;
+}
+/**
+ * A framed image: fixed ratio, fitted, lazy by default, with a caption and a graceful
+ * failure state. Screenshots, company logos, scanned documents.
+ *
+ * <Media src="/images/dashboard.png" alt="Revenue dashboard, September" ratio="16/9" caption="Dashboard, 2026" />
+ */
+export declare const Media: import("react").ForwardRefExoticComponent<MediaProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/display/Media/Media.js

@@ -0,0 +1,47 @@
+import { cx as e } from "../../../utils/cx.js";
+import t from "./Media.module.js";
+import { forwardRef as n, useEffect as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/display/Media/Media.tsx
+var c = n(function({ src: n, alt: c, ratio: l = "auto", fit: u = "cover", radius: d = "media", caption: f, fallback: p, loading: m = "lazy", imgProps: h, className: g, ..._ }, v) {
+	let [y, b] = a(!1), x = i(null);
+	return r(() => {
+		let e = x.current;
+		b(!!(e?.complete && e.naturalWidth === 0 && typeof e.currentSrc == "string" && e.currentSrc !== ""));
+	}, [n]), /* @__PURE__ */ s(f === void 0 ? "div" : "figure", {
+		ref: v,
+		className: e(t.media, g),
+		"data-ratio": l,
+		"data-fit": u,
+		"data-radius": d,
+		"data-failed": y || void 0,
+		..._,
+		children: [/* @__PURE__ */ o("div", {
+			className: t.frame,
+			children: y ? /* @__PURE__ */ o("div", {
+				className: t.fallback,
+				role: c ? "img" : void 0,
+				"aria-label": c || void 0,
+				children: p
+			}) : /* @__PURE__ */ o("img", {
+				ref: x,
+				className: t.image,
+				src: n,
+				alt: c,
+				loading: m,
+				decoding: "async",
+				onError: () => {
+					b(!0);
+				},
+				...h
+			})
+		}), f === void 0 ? null : /* @__PURE__ */ o("figcaption", {
+			className: t.caption,
+			children: f
+		})]
+	});
+});
+//#endregion
+export { c as Media };
+
+//# sourceMappingURL=Media.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Media.js","names":["styles","Media_module_default","Media","forwardRef","rest","failed","setFailed","useState","imgRef","useRef","useEffect","img","src","caption","cx","className","ratio","fit","radius","alt","fallback","imgProps"],"sources":["../../../../src/components/display/Media/Media.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ImgHTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { cx } from '#utils/cx'\nimport styles from './Media.module.css'\n\nexport type MediaRatio = '1/1' | '4/3' | '3/2' | '16/9' | '21/9' | '3/4' | '2/3' | 'auto'\nexport type MediaFit = 'cover' | 'contain'\nexport type MediaRadius = 'none' | 'media' | 'surface'\n\nexport interface MediaProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {\n  src: string\n  /** Required. Describe the image; pass `\"\"` only when it's purely decorative. */\n  alt: string\n  /** Frame ratio. The image is fitted inside. Default `auto` (the image's own ratio). */\n  ratio?: MediaRatio\n  /** Default `cover`. Use `contain` for logos, diagrams and screenshots that must not crop. */\n  fit?: MediaFit\n  /** Corner role. Default `media`. */\n  radius?: MediaRadius\n  /** Renders a `<figure>` with this as its `<figcaption>`. */\n  caption?: ReactNode\n  /** Shown inside the frame if the image fails to load. Default: an empty sunken frame. */\n  fallback?: ReactNode\n  /** Default `lazy`. Use `eager` for the image above the fold. */\n  loading?: 'lazy' | 'eager'\n  /** Extra attributes for the `<img>` (srcSet, sizes, width/height, fetchPriority). */\n  imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'loading'>\n}\n\n/**\n * A framed image: fixed ratio, fitted, lazy by default, with a caption and a graceful\n * failure state. Screenshots, company logos, scanned documents.\n *\n * <Media src=\"/images/dashboard.png\" alt=\"Revenue dashboard, September\" ratio=\"16/9\" caption=\"Dashboard, 2026\" />\n */\nexport const Media = forwardRef<HTMLElement, MediaProps>(function Media(\n  {\n    src,\n    alt,\n    ratio = 'auto',\n    fit = 'cover',\n    radius = 'media',\n    caption,\n    fallback,\n    loading = 'lazy',\n    imgProps,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [failed, setFailed] = useState(false)\n  const imgRef = useRef<HTMLImageElement>(null)\n\n  // Reset when the source changes; also catch an error that fired before hydration.\n  useEffect(() => {\n    const img = imgRef.current\n    setFailed(\n      Boolean(\n        img?.complete &&\n        img.naturalWidth === 0 &&\n        typeof img.currentSrc === 'string' &&\n        img.currentSrc !== '',\n      ),\n    )\n  }, [src])\n\n  const Root = caption !== undefined ? 'figure' : 'div'\n  return (\n    <Root\n      // @ts-expect-error — polymorphic ref across figure/div is safe here\n      ref={ref}\n      className={cx(styles.media, className)}\n      data-ratio={ratio}\n      data-fit={fit}\n      data-radius={radius}\n      data-failed={failed || undefined}\n      {...rest}\n    >\n      <div className={styles.frame}>\n        {failed ? (\n          <div\n            className={styles.fallback}\n            role={alt ? 'img' : undefined}\n            aria-label={alt || undefined}\n          >\n            {fallback}\n          </div>\n        ) : (\n          <img\n            ref={imgRef}\n            className={styles.image}\n            src={src}\n            alt={alt}\n            loading={loading}\n            decoding=\"async\"\n            onError={() => {\n              setFailed(true)\n            }}\n            {...imgProps}\n          />\n        )}\n      </div>\n      {caption !== undefined ? <figcaption className={styles.caption}>{caption}</figcaption> : null}\n    </Root>\n  )\n})\n"],"mappings":";;;;;AA0CA,IAAaE,IAAQC,EAAoC,SACvD,EACE,QACA,QACA,WAAQ,QACR,SAAM,SACN,YAAS,SACT,YACA,aACA,aAAU,QACV,aACA,cACA,GAAGC,KAEL,GACA;CACA,IAAM,CAACC,GAAQC,KAAaC,EAAS,EAAK,GACpCC,IAASC,EAAyB,IAAI;CAgB5C,OAbAC,QAAgB;EACd,IAAMC,IAAMH,EAAO;EACnB,EACE,GACEG,GAAK,YACLA,EAAI,iBAAiB,KACrB,OAAOA,EAAI,cAAe,YAC1BA,EAAI,eAAe,GAEvB;CACF,GAAG,CAACC,CAAG,CAAC,GAIN,kBAFWC,MAAY,KAAA,IAAuB,QAAX,UAEnC;EAEO;EACL,WAAWC,EAAGd,EAAO,OAAOe,CAAS;EACrC,cAAYC;EACZ,YAAUC;EACV,eAAaC;EACb,eAAab,KAAU,KAAA;EACvB,GAAID;EARN,UAAA,CAUE,kBAAC,OAAD;GAAK,WAAWJ,EAAO;GACpB,UAAAK,IACC,kBAAC,OAAD;IACE,WAAWL,EAAO;IAClB,MAAMmB,IAAM,QAAQ,KAAA;IACpB,cAAYA,KAAO,KAAA;IAElB,UAAAC;GACE,CAAA,IAEL,kBAAC,OAAD;IACE,KAAKZ;IACL,WAAWR,EAAO;IACb;IACA;IACI;IACT,UAAS;IACT,eAAe;KACb,EAAU,EAAI;IAChB;IACA,GAAIqB;GACL,CAAA;EAEA,CAAA,GACJR,MAAY,KAAA,IAA4E,OAAhE,kBAAC,cAAD;GAAY,WAAWb,EAAO;GAAU,UAAAa;EAAoB,CAAA,CACjF;;AAEV,CAAC"}

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

@@ -0,0 +1,12 @@
+//#region src/components/display/Media/Media.module.css
+var e = "kiln-Media__media", t = "kiln-Media__frame", n = "kiln-Media__image", r = "kiln-Media__fallback", i = "kiln-Media__caption", a = {
+	media: e,
+	frame: t,
+	image: n,
+	fallback: r,
+	caption: i
+};
+//#endregion
+export { i as caption, a as default, r as fallback, t as frame, n as image, e as media };
+
+//# sourceMappingURL=Media.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Media.module.js","names":["media","frame","image","fallback","caption","Media_module_default"],"sources":["../../../../src/components/display/Media/Media.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --media-bg   default var(--color-surface-sunken) — the frame while loading / on failure\n */\n.media {\n  --_radius: var(--radius-media);\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  min-inline-size: 0;\n  margin: 0;\n}\n.media[data-radius='none'] {\n  --_radius: 0;\n}\n.media[data-radius='surface'] {\n  --_radius: var(--radius-surface);\n}\n\n.frame {\n  position: relative;\n  overflow: hidden;\n  border-radius: var(--_radius);\n  background: var(--media-bg, var(--color-surface-sunken));\n}\n/* A hairline inside the frame so light images don't dissolve into light canvases. */\n.frame::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-ink) 8%, transparent);\n  pointer-events: none;\n}\n\n.media[data-ratio='1/1'] .frame {\n  aspect-ratio: 1;\n}\n.media[data-ratio='4/3'] .frame {\n  aspect-ratio: 4 / 3;\n}\n.media[data-ratio='3/2'] .frame {\n  aspect-ratio: 3 / 2;\n}\n.media[data-ratio='16/9'] .frame {\n  aspect-ratio: 16 / 9;\n}\n.media[data-ratio='21/9'] .frame {\n  aspect-ratio: 21 / 9;\n}\n.media[data-ratio='3/4'] .frame {\n  aspect-ratio: 3 / 4;\n}\n.media[data-ratio='2/3'] .frame {\n  aspect-ratio: 2 / 3;\n}\n\n.image {\n  display: block;\n  inline-size: 100%;\n  block-size: auto;\n}\n.media:not([data-ratio='auto']) .image {\n  position: absolute;\n  inset: 0;\n  block-size: 100%;\n  object-fit: cover;\n}\n.media[data-fit='contain'] .image {\n  object-fit: contain;\n}\n\n.fallback {\n  display: grid;\n  place-items: center;\n  inline-size: 100%;\n  block-size: 100%;\n  min-block-size: var(--space-9);\n  padding: var(--space-4);\n  color: var(--color-ink-subtle);\n  font-family: var(--font-text);\n  font-size: var(--text-sm);\n  text-align: center;\n}\n.media:not([data-ratio='auto']) .fallback {\n  position: absolute;\n  inset: 0;\n  min-block-size: 0;\n}\n\n.caption {\n  color: var(--color-ink-muted);\n  font-family: var(--font-text);\n  font-size: var(--text-sm);\n  line-height: var(--leading-snug);\n  text-wrap: pretty;\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Media } from './Media.js';
+export type { MediaProps, MediaRatio, MediaFit, MediaRadius } from './Media.js';

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

@@ -0,0 +1,32 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { Size, Tone } from '../../../utils/tokens.js';
+import { type MeterThresholds } from './meterTone.js';
+export type MeterTone = Extract<Tone, 'positive' | 'caution' | 'critical' | 'accent' | 'neutral' | 'info'>;
+export interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, MeterThresholds {
+    /** The measured amount. May exceed `max` (a quota that has run over): the bar fills and `data-over` is set. */
+    value: number;
+    /** Visible label; also the accessible name. */
+    label?: ReactNode;
+    /** Replaces the default percentage, visibly and as `aria-valuetext`: "578.4 GB of 680 GB". */
+    valueLabel?: string;
+    /** Show the value text in the label row. Default `true`. */
+    showValue?: boolean;
+    /**
+     * Force a tone. By default it's derived from `low`/`high`/`optimum` exactly like HTML
+     * `<meter>` (optimum → positive, one region off → caution, two off → critical), or
+     * `accent` when no thresholds are given.
+     */
+    tone?: MeterTone;
+    /** Divide the track into this many segments with ticks. */
+    segments?: number;
+    size?: Size;
+}
+/**
+ * A measurement against a known range: usage vs quota, storage used, revenue vs target.
+ * Tone follows the thresholds, so 40% of the storage quota is calm, 85% is a warning
+ * and 110% is critical without the app deciding colours.
+ *
+ * <Meter label="Storage" value={578.4} max={680} low={510} high={680} optimum={0}
+ *        valueLabel="578.4 GB of 680 GB" />
+ */
+export declare const Meter: import("react").ForwardRefExoticComponent<MeterProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/display/Meter/Meter.js

@@ -0,0 +1,56 @@
+import { cx as e } from "../../../utils/cx.js";
+import { mergeStyles as t } from "../../../utils/responsive.js";
+import { meterTone as n } from "./meterTone.js";
+import r from "./Meter.module.js";
+import { forwardRef as i, useId as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/display/Meter/Meter.tsx
+var c = i(function({ value: i, min: c = 0, max: l = 1, low: u, high: d, optimum: f, label: p, valueLabel: m, showValue: h = !0, tone: g, segments: _, size: v = "md", className: y, style: b, "aria-label": x, ...S }, C) {
+	let w = a(), T = l - c || 1, E = Math.min(Math.max(i, c), l), D = (E - c) / T, O = g ?? (u !== void 0 || d !== void 0 || f !== void 0 ? n(i, {
+		min: c,
+		max: l,
+		low: u,
+		high: d,
+		optimum: f
+	}) : "accent"), k = m ?? `${String(Math.round((i - c) / T * 100))}%`, A = _ && _ > 1 ? Array.from({ length: _ - 1 }, (e, t) => (t + 1) / _) : [];
+	return /* @__PURE__ */ s("div", {
+		ref: C,
+		role: "meter",
+		"aria-valuemin": c,
+		"aria-valuemax": l,
+		"aria-valuenow": E,
+		"aria-valuetext": k,
+		"aria-label": x,
+		"aria-labelledby": p && !x ? w : void 0,
+		className: e(r.meter, y),
+		"data-tone": O,
+		"data-size": v,
+		"data-over": i > l || void 0,
+		"data-segmented": A.length ? "" : void 0,
+		style: t({ "--meter-fraction": D }, b),
+		...S,
+		children: [p || h ? /* @__PURE__ */ s("div", {
+			className: r.header,
+			children: [p ? /* @__PURE__ */ o("span", {
+				id: w,
+				className: r.label,
+				children: p
+			}) : null, h ? /* @__PURE__ */ o("span", {
+				className: r.value,
+				"aria-hidden": "true",
+				children: k
+			}) : null]
+		}) : null, /* @__PURE__ */ s("div", {
+			className: r.track,
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ o("div", { className: r.fill }), A.map((e) => /* @__PURE__ */ o("span", {
+				className: r.tick,
+				style: { "--meter-tick": e }
+			}, e))]
+		})]
+	});
+});
+//#endregion
+export { c as Meter };
+
+//# sourceMappingURL=Meter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Meter.js","names":["styles","Meter_module_default","Meter","forwardRef","ariaLabel","rest","labelId","useId","range","max","min","clamped","value","fraction","resolvedTone","tone","low","high","optimum","meterTone","text","valueLabel","ticks","segments","i","label","cx","className","size","mergeStyles","style","showValue","at"],"sources":["../../../../src/components/display/Meter/Meter.tsx"],"sourcesContent":["import { forwardRef, useId, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles } from '#utils/responsive'\nimport type { Size, Tone } from '#utils/tokens'\nimport { meterTone, type MeterThresholds } from './meterTone'\nimport styles from './Meter.module.css'\n\nexport type MeterTone = Extract<\n  Tone,\n  'positive' | 'caution' | 'critical' | 'accent' | 'neutral' | 'info'\n>\n\nexport interface MeterProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, MeterThresholds {\n  /** The measured amount. May exceed `max` (a quota that has run over): the bar fills and `data-over` is set. */\n  value: number\n  /** Visible label; also the accessible name. */\n  label?: ReactNode\n  /** Replaces the default percentage, visibly and as `aria-valuetext`: \"578.4 GB of 680 GB\". */\n  valueLabel?: string\n  /** Show the value text in the label row. Default `true`. */\n  showValue?: boolean\n  /**\n   * Force a tone. By default it's derived from `low`/`high`/`optimum` exactly like HTML\n   * `<meter>` (optimum → positive, one region off → caution, two off → critical), or\n   * `accent` when no thresholds are given.\n   */\n  tone?: MeterTone\n  /** Divide the track into this many segments with ticks. */\n  segments?: number\n  size?: Size\n}\n\n/**\n * A measurement against a known range: usage vs quota, storage used, revenue vs target.\n * Tone follows the thresholds, so 40% of the storage quota is calm, 85% is a warning\n * and 110% is critical without the app deciding colours.\n *\n * <Meter label=\"Storage\" value={578.4} max={680} low={510} high={680} optimum={0}\n *        valueLabel=\"578.4 GB of 680 GB\" />\n */\nexport const Meter = forwardRef<HTMLDivElement, MeterProps>(function Meter(\n  {\n    value,\n    min = 0,\n    max = 1,\n    low,\n    high,\n    optimum,\n    label,\n    valueLabel,\n    showValue = true,\n    tone,\n    segments,\n    size = 'md',\n    className,\n    style,\n    'aria-label': ariaLabel,\n    ...rest\n  },\n  ref,\n) {\n  const labelId = useId()\n  const range = max - min || 1\n  const clamped = Math.min(Math.max(value, min), max)\n  const fraction = (clamped - min) / range\n  const hasThresholds = low !== undefined || high !== undefined || optimum !== undefined\n  const resolvedTone: MeterTone =\n    tone ?? (hasThresholds ? meterTone(value, { min, max, low, high, optimum }) : 'accent')\n  const text = valueLabel ?? `${String(Math.round(((value - min) / range) * 100))}%`\n  const ticks =\n    segments && segments > 1\n      ? Array.from({ length: segments - 1 }, (_, i) => (i + 1) / segments)\n      : []\n\n  return (\n    <div\n      ref={ref}\n      role=\"meter\"\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={clamped}\n      aria-valuetext={text}\n      aria-label={ariaLabel}\n      aria-labelledby={label && !ariaLabel ? labelId : undefined}\n      className={cx(styles.meter, className)}\n      data-tone={resolvedTone}\n      data-size={size}\n      data-over={value > max || undefined}\n      data-segmented={ticks.length ? '' : undefined}\n      style={mergeStyles({ '--meter-fraction': fraction } as CSSProperties, style)}\n      {...rest}\n    >\n      {label || showValue ? (\n        <div className={styles.header}>\n          {label ? (\n            <span id={labelId} className={styles.label}>\n              {label}\n            </span>\n          ) : null}\n          {showValue ? (\n            <span className={styles.value} aria-hidden=\"true\">\n              {text}\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n      <div className={styles.track} aria-hidden=\"true\">\n        <div className={styles.fill} />\n        {ticks.map((at) => (\n          <span key={at} className={styles.tick} style={{ '--meter-tick': at } as CSSProperties} />\n        ))}\n      </div>\n    </div>\n  )\n})\n"],"mappings":";;;;;;;AAyCA,IAAaE,IAAQC,EAAuC,SAC1D,EACE,UACA,SAAM,GACN,SAAM,GACN,QACA,SACA,YACA,UACA,eACA,eAAY,IACZ,SACA,aACA,UAAO,MACP,cACA,UACA,cAAcC,GACd,GAAGC,KAEL,GACA;CACA,IAAMC,IAAUC,EAAM,GAChBC,IAAQC,IAAMC,KAAO,GACrBC,IAAU,KAAK,IAAI,KAAK,IAAIC,GAAOF,CAAG,GAAGD,CAAG,GAC5CI,KAAYF,IAAUD,KAAOF,GAE7BM,IACJC,MAFoBC,MAAQ,KAAA,KAAaC,MAAS,KAAA,KAAaC,MAAY,KAAA,IAElDC,EAAUP,GAAO;EAAE;EAAK;EAAK;EAAK;EAAM;CAAQ,CAAC,IAAI,WAC1EQ,IAAOC,KAAc,GAAG,OAAO,KAAK,OAAQT,IAAQF,KAAOF,IAAS,GAAG,CAAC,EAAE,IAC1Ec,IACJC,KAAYA,IAAW,IACnB,MAAM,KAAK,EAAE,QAAQA,IAAW,EAAE,IAAI,GAAG,OAAOC,IAAI,KAAKD,CAAQ,IACjE,CAAC;CAEP,OACE,kBAAC,OAAD;EACO;EACL,MAAK;EACL,iBAAeb;EACf,iBAAeD;EACf,iBAAeE;EACf,kBAAgBS;EAChB,cAAYhB;EACZ,mBAAiBqB,KAAS,CAACrB,IAAYE,IAAU,KAAA;EACjD,WAAWoB,EAAG1B,EAAO,OAAO2B,CAAS;EACrC,aAAWb;EACX,aAAWc;EACX,aAAWhB,IAAQH,KAAO,KAAA;EAC1B,kBAAgBa,EAAM,SAAS,KAAK,KAAA;EACpC,OAAOO,EAAY,EAAE,oBAAoBhB,EAAS,GAAoBiB,CAAK;EAC3E,GAAIzB;EAfN,UAAA,CAiBGoB,KAASM,IACR,kBAAC,OAAD;GAAK,WAAW/B,EAAO;GAAvB,UAAA,CACGyB,IACC,kBAAC,QAAD;IAAM,IAAInB;IAAS,WAAWN,EAAO;IAClC,UAAAyB;GACG,CAAA,IACJ,MACHM,IACC,kBAAC,QAAD;IAAM,WAAW/B,EAAO;IAAO,eAAY;IACxC,UAAAoB;GACG,CAAA,IACJ,IACD;EACH,CAAA,IAAA,MACJ,kBAAC,OAAD;GAAK,WAAWpB,EAAO;GAAO,eAAY;GAA1C,UAAA,CACE,kBAAC,OAAD,EAAK,WAAWA,EAAO,KAAO,CAAA,GAC7BsB,EAAM,KAAK,MACV,kBAAC,QAAD;IAAe,WAAWtB,EAAO;IAAM,OAAO,EAAE,gBAAgBgC,EAAG;GAAqB,GAA7EA,CAA6E,CACzF,CACE;EACF,CAAA,CAAA;;AAET,CAAC"}

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

@@ -0,0 +1,14 @@
+//#region src/components/display/Meter/Meter.module.css
+var e = "kiln-Meter__meter", t = "kiln-Meter__header", n = "kiln-Meter__label", r = "kiln-Meter__value", i = "kiln-Meter__track", a = "kiln-Meter__fill", o = "kiln-Meter__tick", s = {
+	meter: e,
+	header: t,
+	label: n,
+	value: r,
+	track: i,
+	fill: a,
+	tick: o
+};
+//#endregion
+export { s as default, a as fill, t as header, n as label, e as meter, o as tick, i as track, r as value };
+
+//# sourceMappingURL=Meter.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Meter.module.js","names":["meter","header","label","value","track","fill","tick","Meter_module_default"],"sources":["../../../../src/components/display/Meter/Meter.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --meter-radius        default var(--radius-chip)\n *   --meter-track         track fill, default var(--color-surface-sunken)\n *   --meter-track-edge    track keyline, default var(--color-line-strong)\n *   --meter-tick-color    segment ticks, default var(--color-canvas)\n *   --meter-neutral       fill for tone=\"neutral\", default var(--color-ink-subtle)\n *\n * Written by the component: --meter-fraction (0–1) on the root, --meter-tick on each tick.\n */\n.meter {\n  --_c: var(--color-accent);\n  --_text: var(--color-ink-muted);\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.meter[data-size='sm'] {\n  --_h: var(--space-1);\n}\n.meter[data-size='lg'] {\n  --_h: var(--space-3);\n}\n\n/* Neutral is a quiet grey, not solid ink: it's the \"nothing to report\" bar (≥ 3:1 on the track). */\n.meter[data-tone='neutral'] {\n  --_c: var(--meter-neutral, var(--color-ink-subtle));\n}\n.meter[data-tone='info'] {\n  --_c: var(--tone-info);\n}\n.meter[data-tone='positive'] {\n  --_c: var(--tone-positive);\n}\n.meter[data-tone='caution'] {\n  --_c: var(--tone-caution);\n  --_text: var(--tone-caution-text);\n}\n.meter[data-tone='critical'] {\n  --_c: var(--tone-critical);\n  --_text: var(--tone-critical-text);\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  min-inline-size: 0;\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(--_text);\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  white-space: nowrap;\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(--meter-track-edge, var(--color-line-strong));\n  border-radius: var(--meter-radius, var(--radius-chip));\n  background: var(--meter-track, var(--color-surface-sunken));\n}\n\n.fill {\n  block-size: 100%;\n  inline-size: 100%;\n  background: var(--_c);\n  transform-origin: left;\n  scale: var(--meter-fraction, 0) 1;\n  transition:\n    scale var(--dur-3) var(--ease-out),\n    background-color var(--dur-2) var(--ease-out);\n}\n.fill:dir(rtl) {\n  transform-origin: right;\n}\n\n.tick {\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: calc(var(--meter-tick) * 100%);\n  inline-size: calc(var(--border-width) * 2);\n  translate: -50% 0;\n  background: var(--meter-tick-color, var(--color-canvas));\n}\n"],"mappings":""}

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

@@ -0,0 +1,4 @@
+export { Meter } from './Meter.js';
+export { meterTone } from './meterTone.js';
+export type { MeterProps, MeterTone } from './Meter.js';
+export type { MeterThresholds } from './meterTone.js';

package/dist/components/display/Meter/meterTone.d.ts

@@ -0,0 +1,15 @@
+export interface MeterThresholds {
+    min?: number;
+    max?: number;
+    /** Upper bound of the "low" region. */
+    low?: number;
+    /** Lower bound of the "high" region. */
+    high?: number;
+    /** Where the good value lives. Below `low` = less is better (a quota); above `high` = more is better (a revenue target). */
+    optimum?: number;
+}
+/**
+ * The tone `<meter>` would pick. Unlike the element, a value past `max` still counts as
+ * being in the region past `high` — a quota that has run over must not read as "fine".
+ */
+export declare function meterTone(value: number, t?: MeterThresholds): 'positive' | 'caution' | 'critical';

package/dist/components/display/Meter/meterTone.js

@@ -0,0 +1,9 @@
+//#region src/components/display/Meter/meterTone.ts
+function e(e, t = {}) {
+	let n = t.min ?? 0, r = Math.max(t.max ?? 1, n), i = Math.min(Math.max(t.low ?? n, n), r), a = Math.min(Math.max(t.high ?? r, i), r), o = Math.min(Math.max(t.optimum ?? (n + r) / 2, n), r), s = (e) => e < i ? 0 : e > a ? 2 : 1, c = Math.abs(s(e) - s(o));
+	return c === 0 ? "positive" : c === 1 ? "caution" : "critical";
+}
+//#endregion
+export { e as meterTone };
+
+//# sourceMappingURL=meterTone.js.map

package/dist/components/display/Meter/meterTone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meterTone.js","names":["meterTone","min","max","low","high","optimum","region","v","distance","value"],"sources":["../../../../src/components/display/Meter/meterTone.ts"],"sourcesContent":["export interface MeterThresholds {\n  min?: number\n  max?: number\n  /** Upper bound of the \"low\" region. */\n  low?: number\n  /** Lower bound of the \"high\" region. */\n  high?: number\n  /** Where the good value lives. Below `low` = less is better (a quota); above `high` = more is better (a revenue target). */\n  optimum?: number\n}\n\n/**\n * The tone `<meter>` would pick. Unlike the element, a value past `max` still counts as\n * being in the region past `high` — a quota that has run over must not read as \"fine\".\n */\nexport function meterTone(\n  value: number,\n  t: MeterThresholds = {},\n): 'positive' | 'caution' | 'critical' {\n  const min = t.min ?? 0\n  const max = Math.max(t.max ?? 1, min)\n  const low = Math.min(Math.max(t.low ?? min, min), max)\n  const high = Math.min(Math.max(t.high ?? max, low), max)\n  const optimum = Math.min(Math.max(t.optimum ?? (min + max) / 2, min), max)\n\n  const region = (v: number) => (v < low ? 0 : v > high ? 2 : 1)\n  const distance = Math.abs(region(value) - region(optimum))\n  return distance === 0 ? 'positive' : distance === 1 ? 'caution' : 'critical'\n}\n"],"mappings":";AAeA,SAAgBA,EACd,GACA,IAAqB,CAAC,GACe;CACrC,IAAMC,IAAM,EAAE,OAAO,GACfC,IAAM,KAAK,IAAI,EAAE,OAAO,GAAGD,CAAG,GAC9BE,IAAM,KAAK,IAAI,KAAK,IAAI,EAAE,OAAOF,GAAKA,CAAG,GAAGC,CAAG,GAC/CE,IAAO,KAAK,IAAI,KAAK,IAAI,EAAE,QAAQF,GAAKC,CAAG,GAAGD,CAAG,GACjDG,IAAU,KAAK,IAAI,KAAK,IAAI,EAAE,YAAYJ,IAAMC,KAAO,GAAGD,CAAG,GAAGC,CAAG,GAEnEI,KAAU,MAAeC,IAAIJ,IAAM,IAAII,IAAIH,IAAO,IAAI,GACtDI,IAAW,KAAK,IAAIF,EAAOG,CAAK,IAAIH,EAAOD,CAAO,CAAC;CACzD,OAAOG,MAAa,IAAI,aAAaA,MAAa,IAAI,YAAY;AACpE"}

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

@@ -0,0 +1,27 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { Progress as ProgressPrimitive } from 'radix-ui';
+import type { Size, Tone } from '../../../utils/tokens.js';
+export interface ProgressProps extends Omit<ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, 'value' | 'max' | 'children'> {
+    /** Current value. `null` or omitted = indeterminate (working, amount unknown). */
+    value?: number | null;
+    /** Default 100. */
+    max?: number;
+    /** Default `accent`. */
+    tone?: Tone;
+    /** Bar thickness. */
+    size?: Size;
+    /** Visible label above the bar; also its accessible name. */
+    label?: ReactNode;
+    /** Show the value at the end of the label row. */
+    showValue?: boolean;
+    /** Formats the visible value and `aria-valuetext`. Default: whole percent. */
+    formatValue?: (value: number, max: number) => string;
+}
+/**
+ * How far along a task is: an upload, an import, a sync in progress.
+ * For a quantity against a limit (usage vs quota) use `Meter` instead.
+ *
+ * `ref` and native/ARIA props land on the `progressbar` element; `className` and `style`
+ * on the outer wrapper (label row + track).
+ */
+export declare const Progress: import("react").ForwardRefExoticComponent<ProgressProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,45 @@
+import { cx as e } from "../../../utils/cx.js";
+import { mergeStyles as t } from "../../../utils/responsive.js";
+import n from "./Progress.module.js";
+import { forwardRef as r, useId as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Progress as s } from "radix-ui";
+//#region src/components/display/Progress/Progress.tsx
+var c = (e, t) => `${String(Math.round(e / t * 100))}%`, l = r(function({ value: r = null, max: l = 100, tone: u = "accent", size: d = "md", label: f, showValue: p = !1, formatValue: m = c, className: h, style: g, "aria-label": _, ...v }, y) {
+	let b = i(), x = r !== null && Number.isFinite(r), S = x ? Math.min(Math.max(r, 0), l) : 0, C = x ? m(S, l) : void 0;
+	return /* @__PURE__ */ o("div", {
+		className: e(n.progress, h),
+		style: g,
+		"data-tone": u,
+		"data-size": d,
+		children: [f || p && x ? /* @__PURE__ */ o("div", {
+			className: n.header,
+			children: [f ? /* @__PURE__ */ a("span", {
+				id: b,
+				className: n.label,
+				children: f
+			}) : null, p && x ? /* @__PURE__ */ a("span", {
+				className: n.value,
+				"aria-hidden": "true",
+				children: C
+			}) : null]
+		}) : null, /* @__PURE__ */ a(s.Root, {
+			ref: y,
+			className: n.track,
+			value: x ? S : null,
+			max: l,
+			getValueLabel: (e, t) => m(e, t),
+			"aria-label": _,
+			"aria-labelledby": f && !_ ? b : void 0,
+			...v,
+			children: /* @__PURE__ */ a(s.Indicator, {
+				className: n.indicator,
+				style: t(x ? { "--progress-fraction": S / l } : void 0)
+			})
+		})]
+	});
+});
+//#endregion
+export { l as Progress };
+
+//# sourceMappingURL=Progress.js.map