@scttlnd/fintech-design-system 0.0.0-stage → 0.3.0

package/AGENTS.md

@@ -0,0 +1,15 @@
+# Agent implementation contract
+
+This repository is the **source of truth** for shared visual tokens and primitive components used by Funder, Portare and Investor. Read this file and README.md before UI changes.
+
+1. Consume the published npm package. Do not copy components or token values into consumer repositories.
+2. Import `@scttlnd/fintech-design-system/styles.css` and exactly one theme CSS at the app root. Keep product-specific composition, navigation and domain components in the consuming app.
+3. Prefer CSS variables `--fds-*` and exported primitives. Avoid hardcoded colors and duplicate primitives.
+4. Funder is the reference for the dark palette. Portare light theme is a **proposed** accessibility-oriented adaptation, not a verified Funder style.
+5. Preserve keyboard focus, semantic HTML, reduced motion, 44px touch targets where appropriate, WCAG contrast, mobile viewport/safe areas, and 16px mobile form control font sizes.
+6. Changes to public exports/tokens require SemVer, a changeset (`npx changeset`; CHANGELOG.md and the package version are generated, never edit them by hand), and consumer verification. Any PR that changes `src/` (non-test), `styles/` or package exports needs a described changeset; the `release-policy` CI job enforces it, and tokens, themes and exports need at least a minor. Never silently break an existing theme.
+7. Never place financial arithmetic, API clients, user state, authentication, or business-specific charts in this package.
+8. Run `npm install`, `npm run check`, `npm test`, `npm run build` before proposing a release; review npm tarball contents with `npm pack --dry-run`.
+9. The package must be published to npm before consumer dependencies can resolve. Renovate updates versions only after publication.
+
+Consumer integration: Portare and Investor should document this package in their AGENTS.md and renovate.json. Use one version per app, pin through package.json and lockfile, and review Renovate PRs with visual checks.

package/README.md

@@ -1,3 +1,60 @@
-# Temporary Holding Version
+# Fintech Design System
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Shared Funder-derived design foundations for Portare, Investor and Funder. Each brand and product remains independent.
+
+## Develop with Vite+
+
+```sh
+npm ci
+npm run check
+npm test
+npm run build
+npm pack --dry-run
+```
+
+The project-local `vite-plus` package provides `vp pack`, `vp check` and `vp test`. Global `vp` is optional.
+
+## Use in frontend (after npm release)
+
+```sh
+npm install @scttlnd/fintech-design-system
+```
+
+At the app root import base styles then exactly one theme:
+
+```tsx
+import "@scttlnd/fintech-design-system/styles.css";
+import "@scttlnd/fintech-design-system/themes/investor.css"; // or portare.css / funder.css
+import { Button } from "@scttlnd/fintech-design-system";
+```
+
+Panels have a soft glow and film grain by default (`data-fds-grain="off"` opts out); see [Foundation tokens](docs/TOKENS.md#grain-surfaces-default-opt-out).
+
+Read [AGENTS.md](AGENTS.md) and [adoption guide](docs/ADOPTION.md) before integrating. Planned component roadmap: [component plan](docs/COMPONENT-PLAN.md). Original Funder palette is sourced from `nicklaslind/Funder/src/app/globals.css`. Portare's light theme is a proposed product-specific adaptation.
+
+## Showcase
+
+The component showcase (`npm run showcase:dev` locally, `npm run showcase:build` for a static build) in [`showcase/index.html`](showcase/index.html) is deployed to GitHub Pages by `.github/workflows/pages.yml` when its components, styles, dependencies, or showcase change on `main`: <https://scottlinddk.github.io/fintech-design-system/>. One-time setup: repository **Settings → Pages → Source: GitHub Actions**.
+
+## Components
+
+| Component                                     | Purpose                                                                 | Origin                                                           |
+| --------------------------------------------- | ----------------------------------------------------------------------- | ---------------------------------------------------------------- |
+| `Button`                                      | Primary / secondary / ghost actions                                     | Shared                                                           |
+| `Panel`                                       | Titled surface with eyebrow, help text and action; labelled `<section>` | Funder `Panel`, Investor `.panel`                                |
+| `Metric`, `KeyValue`                          | Label/value tiles for **pre-formatted** figures                         | Funder `Metric` / `KeyValue`, Investor `.metrics`                |
+| `Badge`                                       | Status chip (`neutral`, `accent`, `success`, `warn`, `danger`)          | Funder `Pill`, Investor `.status-badge`                          |
+| `Notice`, `EmptyState`                        | Inline messages (`danger` = `role="alert"`) and empty placeholders      | Investor `.notice`, `.empty-state`                               |
+| `Field`, `Input`, `Select`, `Textarea`        | Label/hint/error wiring with 44px touch targets and 16px mobile font    | Investor `.form-grid`/`.field-hint`, Funder form sizing standard |
+| `Meter`, `SegmentedMeter`, `DistributionList` | Bounded bars, discrete scale, ranked share bars (`role="meter"`)        | Funder `EvidenceBar`, `RiskBars`, `ExposureList`                 |
+| `Menu`                                        | Action menu with Escape/arrow-key support and focus return              | Funder `Menu`                                                    |
+
+Components render only `--fds-*` styled markup. Formatting, locale, currency and calculations stay in the consuming app (pass pre-formatted strings, or `formatValue`). The published modules for `Button`, `Menu`, `Field` (including its native controls), and `Panel` carry `"use client"`. The root barrel and static primitives such as `Badge` remain server-compatible. Event handlers, `Menu.items` callbacks and `Field.children` render functions still belong in a consumer client component because functions cannot cross the server/client boundary. See [Next.js verification](docs/verification/next-app-router.md).
+
+## Cascade layer
+
+Package styles and themes live in `@layer fds`. Normal unlayered consumer CSS overrides them regardless of specificity or import order. This changes cascade behaviour in Phase 0; review consumer resets and focus rules before upgrading. Layered apps can declare `@layer reset, fds, app;`. See [cascade migration notes](docs/CASCADE.md).
+
+## npm publishing
+
+Releases are automated by `.github/workflows/release.yml` (Changesets) on every push to `main`, using npm trusted publishing (OIDC). **Requires** the npm user/scope `@scttlnd` (npm username `scttlnd`; the GitHub owner `scottlinddk` is a different name), a one-time bootstrap publication because npm can only attach a Trusted Publisher to an existing package, and then a Trusted Publisher configured on npmjs.com for GitHub `scottlinddk/fintech-design-system`, workflow filename `release.yml`. No package has been published yet.

package/dist/components/Badge.d.mts

@@ -0,0 +1,9 @@
+import { Tone } from "./Metric.mjs";
+import { HTMLAttributes, ReactNode } from "react";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  tone?: Tone;
+  icon?: ReactNode;
+}
+/** Compact status/label chip. Never rely on tone alone: include meaningful text. */
+export declare function Badge({ tone, icon, className, children, ...props }: BadgeProps): import("react").JSX.Element;
+//# sourceMappingURL=Badge.d.mts.map

package/dist/components/Badge.mjs

@@ -0,0 +1,18 @@
+import { cn } from "../lib/cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/Badge.tsx
+/** Compact status/label chip. Never rely on tone alone: include meaningful text. */
+function Badge({ tone = "neutral", icon, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("fds-badge", `fds-badge--${tone}`, className),
+		...props,
+		children: [icon ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "fds-badge__icon",
+			children: icon
+		}) : null, children]
+	});
+}
+export { Badge };
+
+//# sourceMappingURL=Badge.mjs.map

package/dist/components/Badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.mjs","names":[],"sources":["../../src/components/Badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport type { Tone } from \"./Metric.js\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  tone?: Tone;\n  icon?: ReactNode;\n}\n\n/** Compact status/label chip. Never rely on tone alone: include meaningful text. */\nexport function Badge({ tone = \"neutral\", icon, className, children, ...props }: BadgeProps) {\n  return (\n    <span className={cn(\"fds-badge\", `fds-badge--${tone}`, className)} {...props}>\n      {icon ? (\n        <span aria-hidden=\"true\" className=\"fds-badge__icon\">\n          {icon}\n        </span>\n      ) : null}\n      {children}\n    </span>\n  );\n}\n"],"mappings":";;;;AAUA,SAAgB,MAAM,EAAE,OAAO,WAAW,MAAM,WAAW,UAAU,GAAG,SAAqB;CAC3F,OACE,qBAAC,QAAD;EAAM,WAAW,GAAG,aAAa,cAAc,QAAQ,SAAS;EAAG,GAAI;EAAvE,UAAA,CACG,OACC,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GAChC,UAAA;EACG,CAAA,IACJ,MACH,QACG;;AAEV"}

package/dist/components/Button.d.mts

@@ -0,0 +1,6 @@
+import { ButtonHTMLAttributes } from "react";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "ghost";
+}
+export declare function Button({ variant, className, type, ...props }: ButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=Button.d.mts.map

package/dist/components/Button.mjs

@@ -0,0 +1,14 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+// src/components/Button.tsx
+function Button({ variant = "primary", className, type = "button", ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		className: cn("fds-button", `fds-button--${variant}`, className),
+		...props
+	});
+}
+export { Button };
+
+//# sourceMappingURL=Button.mjs.map

package/dist/components/Button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.mjs","names":[],"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: \"primary\" | \"secondary\" | \"ghost\";\n}\n\nexport function Button({ variant = \"primary\", className, type = \"button\", ...props }: ButtonProps) {\n  return (\n    <button\n      type={type}\n      className={cn(\"fds-button\", `fds-button--${variant}`, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;AAOA,SAAgB,OAAO,EAAE,UAAU,WAAW,WAAW,OAAO,UAAU,GAAG,SAAsB;CACjG,OACE,oBAAC,UAAD;EACQ;EACN,WAAW,GAAG,cAAc,eAAe,WAAW,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL"}

package/dist/components/Field.d.mts

@@ -0,0 +1,20 @@
+import { InputHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";
+export interface FieldControlProps {
+  id: string;
+  "aria-describedby"?: string;
+  "aria-invalid"?: true;
+}
+export interface FieldProps {
+  label: ReactNode;
+  hint?: ReactNode;
+  error?: ReactNode;
+  className?: string;
+  /** Render prop so the control receives the generated id and aria wiring. */
+  children: (control: FieldControlProps) => ReactNode;
+}
+/** Label + hint + error wrapper that wires `id`, `aria-describedby` and `aria-invalid`. */
+export declare function Field({ label, hint, error, className, children }: FieldProps): import("react").JSX.Element;
+export declare function Input({ className, ...props }: InputHTMLAttributes<HTMLInputElement>): import("react").JSX.Element;
+export declare function Select({ className, ...props }: SelectHTMLAttributes<HTMLSelectElement>): import("react").JSX.Element;
+export declare function Textarea({ className, ...props }: TextareaHTMLAttributes<HTMLTextAreaElement>): import("react").JSX.Element;
+//# sourceMappingURL=Field.d.mts.map

package/dist/components/Field.mjs

@@ -0,0 +1,57 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+// src/components/Field.tsx
+/** Label + hint + error wrapper that wires `id`, `aria-describedby` and `aria-invalid`. */
+function Field({ label, hint, error, className, children }) {
+	const id = useId();
+	const hintId = `${id}-hint`;
+	const errorId = `${id}-error`;
+	const describedBy = [hint ? hintId : null, error ? errorId : null].filter(Boolean).join(" ");
+	const control = { id };
+	if (describedBy) control["aria-describedby"] = describedBy;
+	if (error) control["aria-invalid"] = true;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("fds-field", className),
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				className: "fds-field__label",
+				htmlFor: id,
+				children: label
+			}),
+			children(control),
+			hint ? /* @__PURE__ */ jsx("p", {
+				className: "fds-field__hint",
+				id: hintId,
+				children: hint
+			}) : null,
+			error ? /* @__PURE__ */ jsx("p", {
+				className: "fds-field__error",
+				id: errorId,
+				children: error
+			}) : null
+		]
+	});
+}
+function Input({ className, ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		className: cn("fds-control", className),
+		...props
+	});
+}
+function Select({ className, ...props }) {
+	return /* @__PURE__ */ jsx("select", {
+		className: cn("fds-control", className),
+		...props
+	});
+}
+function Textarea({ className, ...props }) {
+	return /* @__PURE__ */ jsx("textarea", {
+		className: cn("fds-control fds-control--multiline", className),
+		...props
+	});
+}
+export { Field, Input, Select, Textarea };
+
+//# sourceMappingURL=Field.mjs.map

package/dist/components/Field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.mjs","names":[],"sources":["../../src/components/Field.tsx"],"sourcesContent":["import {\n  useId,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type SelectHTMLAttributes,\n  type TextareaHTMLAttributes,\n} from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport interface FieldControlProps {\n  id: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: true;\n}\n\nexport interface FieldProps {\n  label: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  className?: string;\n  /** Render prop so the control receives the generated id and aria wiring. */\n  children: (control: FieldControlProps) => ReactNode;\n}\n\n/** Label + hint + error wrapper that wires `id`, `aria-describedby` and `aria-invalid`. */\nexport function Field({ label, hint, error, className, children }: FieldProps) {\n  const id = useId();\n  const hintId = `${id}-hint`;\n  const errorId = `${id}-error`;\n  const describedBy = [hint ? hintId : null, error ? errorId : null].filter(Boolean).join(\" \");\n  const control: FieldControlProps = { id };\n  if (describedBy) control[\"aria-describedby\"] = describedBy;\n  if (error) control[\"aria-invalid\"] = true;\n  return (\n    <div className={cn(\"fds-field\", className)}>\n      <label className=\"fds-field__label\" htmlFor={id}>\n        {label}\n      </label>\n      {children(control)}\n      {hint ? (\n        <p className=\"fds-field__hint\" id={hintId}>\n          {hint}\n        </p>\n      ) : null}\n      {error ? (\n        <p className=\"fds-field__error\" id={errorId}>\n          {error}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\nexport function Input({ className, ...props }: InputHTMLAttributes<HTMLInputElement>) {\n  return <input className={cn(\"fds-control\", className)} {...props} />;\n}\n\nexport function Select({ className, ...props }: SelectHTMLAttributes<HTMLSelectElement>) {\n  return <select className={cn(\"fds-control\", className)} {...props} />;\n}\n\nexport function Textarea({ className, ...props }: TextareaHTMLAttributes<HTMLTextAreaElement>) {\n  return <textarea className={cn(\"fds-control fds-control--multiline\", className)} {...props} />;\n}\n"],"mappings":";;;;;;AAyBA,SAAgB,MAAM,EAAE,OAAO,MAAM,OAAO,WAAW,YAAwB;CAC7E,MAAM,KAAK,MAAM;CACjB,MAAM,SAAS,GAAG,GAAG;CACrB,MAAM,UAAU,GAAG,GAAG;CACtB,MAAM,cAAc,CAAC,OAAO,SAAS,MAAM,QAAQ,UAAU,IAAI,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAC3F,MAAM,UAA6B,EAAE,GAAG;CACxC,IAAI,aAAa,QAAQ,sBAAsB;CAC/C,IAAI,OAAO,QAAQ,kBAAkB;CACrC,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,aAAa,SAAS;EAAzC,UAAA;GACE,oBAAC,SAAD;IAAO,WAAU;IAAmB,SAAS;IAC1C,UAAA;GACI,CAAA;GACN,SAAS,OAAO;GAChB,OACC,oBAAC,KAAD;IAAG,WAAU;IAAkB,IAAI;IAChC,UAAA;GACA,CAAA,IACD;GACH,QACC,oBAAC,KAAD;IAAG,WAAU;IAAmB,IAAI;IACjC,UAAA;GACA,CAAA,IACD;EACD;;AAET;AAEA,SAAgB,MAAM,EAAE,WAAW,GAAG,SAAgD;CACpF,OAAO,oBAAC,SAAD;EAAO,WAAW,GAAG,eAAe,SAAS;EAAG,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAgB,OAAO,EAAE,WAAW,GAAG,SAAkD;CACvF,OAAO,oBAAC,UAAD;EAAQ,WAAW,GAAG,eAAe,SAAS;EAAG,GAAI;CAAQ,CAAA;AACtE;AAEA,SAAgB,SAAS,EAAE,WAAW,GAAG,SAAsD;CAC7F,OAAO,oBAAC,YAAD;EAAU,WAAW,GAAG,sCAAsC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC/F"}

package/dist/components/Menu.d.mts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+export interface MenuItem {
+  label: string;
+  tone?: "danger";
+  disabled?: boolean;
+  onSelect: () => void;
+}
+export interface MenuProps {
+  /** Accessible name of the trigger button. */
+  ariaLabel: string;
+  items: readonly MenuItem[];
+  /** Trigger content. Defaults to a vertical-ellipsis glyph. */
+  trigger?: ReactNode;
+  className?: string;
+}
+/** Action menu: closes on outside press and Escape (returning focus), arrow-key navigation. */
+export declare function Menu({ ariaLabel, items, trigger, className }: MenuProps): import("react").JSX.Element;
+//# sourceMappingURL=Menu.d.mts.map

package/dist/components/Menu.mjs

@@ -0,0 +1,109 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+// src/components/Menu.tsx
+/** Action menu: closes on outside press and Escape (returning focus), arrow-key navigation. */
+function Menu({ ariaLabel, items, trigger, className }) {
+	const [open, setOpen] = useState(false);
+	const rootRef = useRef(null);
+	const triggerRef = useRef(null);
+	const menuId = useId();
+	useEffect(() => {
+		if (!open) return;
+		const onPointerDown = (event) => {
+			if (!rootRef.current?.contains(event.target)) setOpen(false);
+		};
+		document.addEventListener("mousedown", onPointerDown);
+		document.addEventListener("touchstart", onPointerDown);
+		return () => {
+			document.removeEventListener("mousedown", onPointerDown);
+			document.removeEventListener("touchstart", onPointerDown);
+		};
+	}, [open]);
+	useEffect(() => {
+		if (open) rootRef.current?.querySelector("[role=\"menuitem\"]:not(:disabled)")?.focus();
+	}, [open]);
+	const onKeyDown = (event) => {
+		if (!open) return;
+		if (event.key === "Escape") {
+			event.stopPropagation();
+			setOpen(false);
+			triggerRef.current?.focus();
+			return;
+		}
+		const enabled = Array.from(rootRef.current?.querySelectorAll("[role=\"menuitem\"]:not(:disabled)") ?? []);
+		if (enabled.length === 0) return;
+		const current = enabled.indexOf(document.activeElement);
+		const move = (next) => {
+			event.preventDefault();
+			enabled[(next + enabled.length) % enabled.length]?.focus();
+		};
+		if (event.key === "ArrowDown") move(current + 1);
+		else if (event.key === "ArrowUp") move(current < 0 ? enabled.length - 1 : current - 1);
+		else if (event.key === "Home") move(0);
+		else if (event.key === "End") move(enabled.length - 1);
+		else if (event.key === "Tab") setOpen(false);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("fds-menu", className),
+		onKeyDown,
+		ref: rootRef,
+		children: [/* @__PURE__ */ jsx("button", {
+			"aria-controls": open ? menuId : void 0,
+			"aria-expanded": open,
+			"aria-haspopup": "menu",
+			"aria-label": ariaLabel,
+			className: "fds-menu__trigger",
+			onClick: () => setOpen((value) => !value),
+			ref: triggerRef,
+			type: "button",
+			children: trigger ?? /* @__PURE__ */ jsxs("svg", {
+				"aria-hidden": "true",
+				focusable: "false",
+				height: "16",
+				viewBox: "0 0 16 16",
+				width: "16",
+				children: [
+					/* @__PURE__ */ jsx("circle", {
+						cx: "3",
+						cy: "8",
+						fill: "currentColor",
+						r: "1.4"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "8",
+						cy: "8",
+						fill: "currentColor",
+						r: "1.4"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "13",
+						cy: "8",
+						fill: "currentColor",
+						r: "1.4"
+					})
+				]
+			})
+		}), open ? /* @__PURE__ */ jsx("div", {
+			className: "fds-menu__list",
+			id: menuId,
+			role: "menu",
+			children: items.map((item) => /* @__PURE__ */ jsx("button", {
+				className: cn("fds-menu__item", item.tone === "danger" && "fds-menu__item--danger"),
+				disabled: item.disabled,
+				onClick: () => {
+					setOpen(false);
+					triggerRef.current?.focus();
+					item.onSelect();
+				},
+				role: "menuitem",
+				type: "button",
+				children: item.label
+			}, item.label))
+		}) : null]
+	});
+}
+export { Menu };
+
+//# sourceMappingURL=Menu.mjs.map

package/dist/components/Menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.mjs","names":[],"sources":["../../src/components/Menu.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport interface MenuItem {\n  label: string;\n  tone?: \"danger\";\n  disabled?: boolean;\n  onSelect: () => void;\n}\n\nexport interface MenuProps {\n  /** Accessible name of the trigger button. */\n  ariaLabel: string;\n  items: readonly MenuItem[];\n  /** Trigger content. Defaults to a vertical-ellipsis glyph. */\n  trigger?: ReactNode;\n  className?: string;\n}\n\n/** Action menu: closes on outside press and Escape (returning focus), arrow-key navigation. */\nexport function Menu({ ariaLabel, items, trigger, className }: MenuProps) {\n  const [open, setOpen] = useState(false);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const menuId = useId();\n\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (event: MouseEvent | TouchEvent) => {\n      if (!rootRef.current?.contains(event.target as Node)) setOpen(false);\n    };\n    document.addEventListener(\"mousedown\", onPointerDown);\n    document.addEventListener(\"touchstart\", onPointerDown);\n    return () => {\n      document.removeEventListener(\"mousedown\", onPointerDown);\n      document.removeEventListener(\"touchstart\", onPointerDown);\n    };\n  }, [open]);\n\n  useEffect(() => {\n    if (open)\n      rootRef.current?.querySelector<HTMLElement>('[role=\"menuitem\"]:not(:disabled)')?.focus();\n  }, [open]);\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!open) return;\n    if (event.key === \"Escape\") {\n      event.stopPropagation();\n      setOpen(false);\n      triggerRef.current?.focus();\n      return;\n    }\n    const enabled = Array.from(\n      rootRef.current?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]:not(:disabled)') ?? [],\n    );\n    if (enabled.length === 0) return;\n    const current = enabled.indexOf(document.activeElement as HTMLElement);\n    const move = (next: number) => {\n      event.preventDefault();\n      enabled[(next + enabled.length) % enabled.length]?.focus();\n    };\n    if (event.key === \"ArrowDown\") move(current + 1);\n    else if (event.key === \"ArrowUp\") move(current < 0 ? enabled.length - 1 : current - 1);\n    else if (event.key === \"Home\") move(0);\n    else if (event.key === \"End\") move(enabled.length - 1);\n    else if (event.key === \"Tab\") setOpen(false);\n  };\n\n  return (\n    <div className={cn(\"fds-menu\", className)} onKeyDown={onKeyDown} ref={rootRef}>\n      <button\n        aria-controls={open ? menuId : undefined}\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        aria-label={ariaLabel}\n        className=\"fds-menu__trigger\"\n        onClick={() => setOpen((value) => !value)}\n        ref={triggerRef}\n        type=\"button\"\n      >\n        {trigger ?? (\n          <svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\">\n            <circle cx=\"3\" cy=\"8\" fill=\"currentColor\" r=\"1.4\" />\n            <circle cx=\"8\" cy=\"8\" fill=\"currentColor\" r=\"1.4\" />\n            <circle cx=\"13\" cy=\"8\" fill=\"currentColor\" r=\"1.4\" />\n          </svg>\n        )}\n      </button>\n      {open ? (\n        <div className=\"fds-menu__list\" id={menuId} role=\"menu\">\n          {items.map((item) => (\n            <button\n              className={cn(\"fds-menu__item\", item.tone === \"danger\" && \"fds-menu__item--danger\")}\n              disabled={item.disabled}\n              key={item.label}\n              onClick={() => {\n                setOpen(false);\n                triggerRef.current?.focus();\n                item.onSelect();\n              }}\n              role=\"menuitem\"\n              type=\"button\"\n            >\n              {item.label}\n            </button>\n          ))}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAoBA,SAAgB,KAAK,EAAE,WAAW,OAAO,SAAS,aAAwB;CACxE,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,aAAa,OAA0B,IAAI;CACjD,MAAM,SAAS,MAAM;CAErB,gBAAgB;EACd,IAAI,CAAC,MAAM;EACX,MAAM,iBAAiB,UAAmC;GACxD,IAAI,CAAC,QAAQ,SAAS,SAAS,MAAM,MAAc,GAAG,QAAQ,KAAK;EACrE;EACA,SAAS,iBAAiB,aAAa,aAAa;EACpD,SAAS,iBAAiB,cAAc,aAAa;EACrD,aAAa;GACX,SAAS,oBAAoB,aAAa,aAAa;GACvD,SAAS,oBAAoB,cAAc,aAAa;EAC1D;CACF,GAAG,CAAC,IAAI,CAAC;CAET,gBAAgB;EACd,IAAI,MACF,QAAQ,SAAS,cAA2B,oCAAkC,CAAC,EAAE,MAAM;CAC3F,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,aAAa,UAAyC;EAC1D,IAAI,CAAC,MAAM;EACX,IAAI,MAAM,QAAQ,UAAU;GAC1B,MAAM,gBAAgB;GACtB,QAAQ,KAAK;GACb,WAAW,SAAS,MAAM;GAC1B;EACF;EACA,MAAM,UAAU,MAAM,KACpB,QAAQ,SAAS,iBAA8B,oCAAkC,KAAK,CAAC,CACzF;EACA,IAAI,QAAQ,WAAW,GAAG;EAC1B,MAAM,UAAU,QAAQ,QAAQ,SAAS,aAA4B;EACrE,MAAM,QAAQ,SAAiB;GAC7B,MAAM,eAAe;GACrB,SAAS,OAAO,QAAQ,UAAU,QAAQ,OAAO,EAAE,MAAM;EAC3D;EACA,IAAI,MAAM,QAAQ,aAAa,KAAK,UAAU,CAAC;OAC1C,IAAI,MAAM,QAAQ,WAAW,KAAK,UAAU,IAAI,QAAQ,SAAS,IAAI,UAAU,CAAC;OAChF,IAAI,MAAM,QAAQ,QAAQ,KAAK,CAAC;OAChC,IAAI,MAAM,QAAQ,OAAO,KAAK,QAAQ,SAAS,CAAC;OAChD,IAAI,MAAM,QAAQ,OAAO,QAAQ,KAAK;CAC7C;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,SAAS;EAAc;EAAW,KAAK;EAAtE,UAAA,CACE,oBAAC,UAAD;GACE,iBAAe,OAAO,SAAS,KAAA;GAC/B,iBAAe;GACf,iBAAc;GACd,cAAY;GACZ,WAAU;GACV,eAAe,SAAS,UAAU,CAAC,KAAK;GACxC,KAAK;GACL,MAAK;GAEJ,UAAA,WACC,qBAAC,OAAD;IAAK,eAAY;IAAO,WAAU;IAAQ,QAAO;IAAK,SAAQ;IAAY,OAAM;IAAhF,UAAA;KACE,oBAAC,UAAD;MAAQ,IAAG;MAAI,IAAG;MAAI,MAAK;MAAe,GAAE;KAAO,CAAA;KACnD,oBAAC,UAAD;MAAQ,IAAG;MAAI,IAAG;MAAI,MAAK;MAAe,GAAE;KAAO,CAAA;KACnD,oBAAC,UAAD;MAAQ,IAAG;MAAK,IAAG;MAAI,MAAK;MAAe,GAAE;KAAO,CAAA;IACjD;;EAED,CAAA,GACP,OACC,oBAAC,OAAD;GAAK,WAAU;GAAiB,IAAI;GAAQ,MAAK;GAC9C,UAAA,MAAM,KAAK,SACV,oBAAC,UAAD;IACE,WAAW,GAAG,kBAAkB,KAAK,SAAS,YAAY,wBAAwB;IAClF,UAAU,KAAK;IAEf,eAAe;KACb,QAAQ,KAAK;KACb,WAAW,SAAS,MAAM;KAC1B,KAAK,SAAS;IAChB;IACA,MAAK;IACL,MAAK;IAEJ,UAAA,KAAK;GACA,GAVD,KAAK,KAUJ,CACT;EACE,CAAA,IACH,IACD;;AAET"}

package/dist/components/Meter.d.mts

@@ -0,0 +1,39 @@
+import { HTMLAttributes, ReactNode } from "react";
+export interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  /** Accessible name; required because the bar itself has no text. */
+  label: string;
+  /** Current value within `min`..`max`. Values outside are clamped for display. */
+  value: number;
+  min?: number;
+  max?: number;
+  /** Optional human-readable value for assistive tech, e.g. "72 of 100". */
+  valueText?: string;
+}
+/** Horizontal bar for a bounded score or share. Display only: no domain logic. */
+export declare function Meter({ label, value, min, max, valueText, className, ...props }: MeterProps): import("react").JSX.Element;
+export interface SegmentedMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  label: string;
+  /** Number of filled segments. */
+  value: number;
+  segments?: number;
+  valueText?: string;
+}
+/** Discrete scale (for example a 1-7 risk indicator). */
+export declare function SegmentedMeter({ label, value, segments, valueText, className, ...props }: SegmentedMeterProps): import("react").JSX.Element;
+export interface DistributionItem {
+  label: ReactNode;
+  value: number;
+}
+export interface DistributionListProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  items: readonly DistributionItem[];
+  /** Maximum rows shown; the remainder is summarised via `renderOverflow`. */
+  limit?: number;
+  /** Formats the value text. Consumer owns units and locale. */
+  formatValue?: (value: number) => ReactNode;
+  /** Shown when there is nothing positive to display. */
+  empty?: ReactNode;
+  renderOverflow?: (hidden: number) => ReactNode;
+}
+/** Ranked list of share bars, scaled relative to the largest row. */
+export declare function DistributionList({ items, limit, formatValue, empty, renderOverflow, className, ...props }: DistributionListProps): import("react").JSX.Element | null;
+//# sourceMappingURL=Meter.d.mts.map

package/dist/components/Meter.mjs

@@ -0,0 +1,82 @@
+import { cn } from "../lib/cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/Meter.tsx
+const clamp = (n, lo, hi) => Math.min(Math.max(n, lo), hi);
+/** Horizontal bar for a bounded score or share. Display only: no domain logic. */
+function Meter({ label, value, min = 0, max = 100, valueText, className, ...props }) {
+	const span = max - min;
+	const ratio = span > 0 ? clamp((value - min) / span, 0, 1) : 0;
+	return /* @__PURE__ */ jsx("div", {
+		role: "meter",
+		"aria-label": label,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		"aria-valuenow": clamp(value, min, max),
+		"aria-valuetext": valueText,
+		className: cn("fds-meter", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "fds-meter__fill",
+			style: { width: `${ratio * 100}%` }
+		})
+	});
+}
+/** Discrete scale (for example a 1-7 risk indicator). */
+function SegmentedMeter({ label, value, segments = 7, valueText, className, ...props }) {
+	const filled = clamp(Math.round(value), 0, segments);
+	return /* @__PURE__ */ jsx("div", {
+		role: "meter",
+		"aria-label": label,
+		"aria-valuemin": 0,
+		"aria-valuemax": segments,
+		"aria-valuenow": filled,
+		"aria-valuetext": valueText,
+		className: cn("fds-segmeter", className),
+		...props,
+		children: Array.from({ length: segments }, (_, index) => /* @__PURE__ */ jsx("span", { className: cn("fds-segmeter__segment", index < filled && "fds-segmeter__segment--on") }, index))
+	});
+}
+/** Ranked list of share bars, scaled relative to the largest row. */
+function DistributionList({ items, limit = 5, formatValue = (v) => String(v), empty, renderOverflow, className, ...props }) {
+	const sorted = [...items].sort((a, b) => b.value - a.value);
+	const top = sorted.slice(0, limit);
+	const max = top[0]?.value ?? 0;
+	if (max <= 0) return empty ? /* @__PURE__ */ jsx("p", {
+		className: "fds-distribution__empty",
+		children: empty
+	}) : null;
+	const hidden = sorted.length - top.length;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("fds-distribution", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("ul", {
+			className: "fds-distribution__list",
+			children: top.map((item, index) => /* @__PURE__ */ jsxs("li", {
+				className: "fds-distribution__row",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "fds-distribution__meta",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "fds-distribution__label",
+						children: item.label
+					}), /* @__PURE__ */ jsx("span", {
+						className: "fds-distribution__value",
+						children: formatValue(item.value)
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: "fds-meter fds-meter--thin",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "fds-meter__fill",
+						style: { width: `${Math.max(item.value, 0) / max * 100}%` }
+					})
+				})]
+			}, index))
+		}), hidden > 0 && renderOverflow ? /* @__PURE__ */ jsx("p", {
+			className: "fds-distribution__overflow",
+			children: renderOverflow(hidden)
+		}) : null]
+	});
+}
+export { DistributionList, Meter, SegmentedMeter };
+
+//# sourceMappingURL=Meter.mjs.map

package/dist/components/Meter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Meter.mjs","names":[],"sources":["../../src/components/Meter.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /** Accessible name; required because the bar itself has no text. */\n  label: string;\n  /** Current value within `min`..`max`. Values outside are clamped for display. */\n  value: number;\n  min?: number;\n  max?: number;\n  /** Optional human-readable value for assistive tech, e.g. \"72 of 100\". */\n  valueText?: string;\n}\n\nconst clamp = (n: number, lo: number, hi: number) => Math.min(Math.max(n, lo), hi);\n\n/** Horizontal bar for a bounded score or share. Display only: no domain logic. */\nexport function Meter({\n  label,\n  value,\n  min = 0,\n  max = 100,\n  valueText,\n  className,\n  ...props\n}: MeterProps) {\n  const span = max - min;\n  const ratio = span > 0 ? clamp((value - min) / span, 0, 1) : 0;\n  return (\n    <div\n      role=\"meter\"\n      aria-label={label}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={clamp(value, min, max)}\n      aria-valuetext={valueText}\n      className={cn(\"fds-meter\", className)}\n      {...props}\n    >\n      <div className=\"fds-meter__fill\" style={{ width: `${ratio * 100}%` }} />\n    </div>\n  );\n}\n\nexport interface SegmentedMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  label: string;\n  /** Number of filled segments. */\n  value: number;\n  segments?: number;\n  valueText?: string;\n}\n\n/** Discrete scale (for example a 1-7 risk indicator). */\nexport function SegmentedMeter({\n  label,\n  value,\n  segments = 7,\n  valueText,\n  className,\n  ...props\n}: SegmentedMeterProps) {\n  const filled = clamp(Math.round(value), 0, segments);\n  return (\n    <div\n      role=\"meter\"\n      aria-label={label}\n      aria-valuemin={0}\n      aria-valuemax={segments}\n      aria-valuenow={filled}\n      aria-valuetext={valueText}\n      className={cn(\"fds-segmeter\", className)}\n      {...props}\n    >\n      {Array.from({ length: segments }, (_, index) => (\n        <span\n          key={index}\n          className={cn(\"fds-segmeter__segment\", index < filled && \"fds-segmeter__segment--on\")}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport interface DistributionItem {\n  label: ReactNode;\n  value: number;\n}\n\nexport interface DistributionListProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  items: readonly DistributionItem[];\n  /** Maximum rows shown; the remainder is summarised via `renderOverflow`. */\n  limit?: number;\n  /** Formats the value text. Consumer owns units and locale. */\n  formatValue?: (value: number) => ReactNode;\n  /** Shown when there is nothing positive to display. */\n  empty?: ReactNode;\n  renderOverflow?: (hidden: number) => ReactNode;\n}\n\n/** Ranked list of share bars, scaled relative to the largest row. */\nexport function DistributionList({\n  items,\n  limit = 5,\n  formatValue = (v) => String(v),\n  empty,\n  renderOverflow,\n  className,\n  ...props\n}: DistributionListProps) {\n  const sorted = [...items].sort((a, b) => b.value - a.value);\n  const top = sorted.slice(0, limit);\n  const max = top[0]?.value ?? 0;\n  if (max <= 0) return empty ? <p className=\"fds-distribution__empty\">{empty}</p> : null;\n  const hidden = sorted.length - top.length;\n  return (\n    <div className={cn(\"fds-distribution\", className)} {...props}>\n      <ul className=\"fds-distribution__list\">\n        {top.map((item, index) => (\n          <li key={index} className=\"fds-distribution__row\">\n            <div className=\"fds-distribution__meta\">\n              <span className=\"fds-distribution__label\">{item.label}</span>\n              <span className=\"fds-distribution__value\">{formatValue(item.value)}</span>\n            </div>\n            <div aria-hidden=\"true\" className=\"fds-meter fds-meter--thin\">\n              <div\n                className=\"fds-meter__fill\"\n                style={{ width: `${(Math.max(item.value, 0) / max) * 100}%` }}\n              />\n            </div>\n          </li>\n        ))}\n      </ul>\n      {hidden > 0 && renderOverflow ? (\n        <p className=\"fds-distribution__overflow\">{renderOverflow(hidden)}</p>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;AAcA,MAAM,SAAS,GAAW,IAAY,OAAe,KAAK,IAAI,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE;;AAGjF,SAAgB,MAAM,EACpB,OACA,OACA,MAAM,GACN,MAAM,KACN,WACA,WACA,GAAG,SACU;CACb,MAAM,OAAO,MAAM;CACnB,MAAM,QAAQ,OAAO,IAAI,OAAO,QAAQ,OAAO,MAAM,GAAG,CAAC,IAAI;CAC7D,OACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,iBAAe;EACf,iBAAe;EACf,iBAAe,MAAM,OAAO,KAAK,GAAG;EACpC,kBAAgB;EAChB,WAAW,GAAG,aAAa,SAAS;EACpC,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,WAAU;GAAkB,OAAO,EAAE,OAAO,GAAG,QAAQ,IAAI,GAAG;EAAI,CAAA;CACpE,CAAA;AAET;;AAWA,SAAgB,eAAe,EAC7B,OACA,OACA,WAAW,GACX,WACA,WACA,GAAG,SACmB;CACtB,MAAM,SAAS,MAAM,KAAK,MAAM,KAAK,GAAG,GAAG,QAAQ;CACnD,OACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,kBAAgB;EAChB,WAAW,GAAG,gBAAgB,SAAS;EACvC,GAAI;EAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAS,IAAI,GAAG,UACpC,oBAAC,QAAD,EAEE,WAAW,GAAG,yBAAyB,QAAQ,UAAU,2BAA2B,EACrF,GAFM,KAEN,CACF;CACE,CAAA;AAET;;AAmBA,SAAgB,iBAAiB,EAC/B,OACA,QAAQ,GACR,eAAe,MAAM,OAAO,CAAC,GAC7B,OACA,gBACA,WACA,GAAG,SACqB;CACxB,MAAM,SAAS,CAAC,GAAG,KAAK,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;CAC1D,MAAM,MAAM,OAAO,MAAM,GAAG,KAAK;CACjC,MAAM,MAAM,IAAI,EAAE,EAAE,SAAS;CAC7B,IAAI,OAAO,GAAG,OAAO,QAAQ,oBAAC,KAAD;EAAG,WAAU;EAA2B,UAAA;CAAS,CAAA,IAAI;CAClF,MAAM,SAAS,OAAO,SAAS,IAAI;CACnC,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,oBAAoB,SAAS;EAAG,GAAI;EAAvD,UAAA,CACE,oBAAC,MAAD;GAAI,WAAU;GACX,UAAA,IAAI,KAAK,MAAM,UACd,qBAAC,MAAD;IAAgB,WAAU;IAA1B,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,QAAD;MAAM,WAAU;MAA2B,UAAA,KAAK;KAAY,CAAA,GAC5D,oBAAC,QAAD;MAAM,WAAU;MAA2B,UAAA,YAAY,KAAK,KAAK;KAAQ,CAAA,CACtE;IACL,CAAA,GAAA,oBAAC,OAAD;KAAK,eAAY;KAAO,WAAU;KAChC,UAAA,oBAAC,OAAD;MACE,WAAU;MACV,OAAO,EAAE,OAAO,GAAI,KAAK,IAAI,KAAK,OAAO,CAAC,IAAI,MAAO,IAAI,GAAG;KAC7D,CAAA;IACE,CAAA,CACH;GAXK,GAAA,KAWL,CACL;EACC,CAAA,GACH,SAAS,KAAK,iBACb,oBAAC,KAAD;GAAG,WAAU;GAA8B,UAAA,eAAe,MAAM;EAAK,CAAA,IACnE,IACD;;AAET"}

package/dist/components/Metric.d.mts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from "react";
+export type Tone = "neutral" | "accent" | "success" | "warn" | "danger";
+export interface MetricProps extends HTMLAttributes<HTMLDivElement> {
+  label: ReactNode;
+  /** Pre-formatted value. Formatting and calculation belong to the consuming app. */
+  value: ReactNode;
+  tone?: Tone;
+}
+/** Label/value tile for pre-formatted figures. Does no number formatting or arithmetic. */
+export declare function Metric({ label, value, tone, className, ...props }: MetricProps): import("react").JSX.Element;
+export interface KeyValueProps extends HTMLAttributes<HTMLDivElement> {
+  label: ReactNode;
+  value: ReactNode;
+}
+/** Quieter label/value pair for detail views. */
+export declare function KeyValue({ label, value, className, ...props }: KeyValueProps): import("react").JSX.Element;
+//# sourceMappingURL=Metric.d.mts.map

package/dist/components/Metric.mjs

@@ -0,0 +1,34 @@
+import { cn } from "../lib/cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/Metric.tsx
+/** Label/value tile for pre-formatted figures. Does no number formatting or arithmetic. */
+function Metric({ label, value, tone = "neutral", className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("fds-metric", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "fds-metric__label",
+			children: label
+		}), /* @__PURE__ */ jsx("p", {
+			className: cn("fds-metric__value", `fds-tone--${tone}`),
+			children: value
+		})]
+	});
+}
+/** Quieter label/value pair for detail views. */
+function KeyValue({ label, value, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("fds-keyvalue", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "fds-metric__label",
+			children: label
+		}), /* @__PURE__ */ jsx("p", {
+			className: "fds-keyvalue__value",
+			children: value
+		})]
+	});
+}
+export { KeyValue, Metric };
+
+//# sourceMappingURL=Metric.mjs.map

package/dist/components/Metric.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Metric.mjs","names":[],"sources":["../../src/components/Metric.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport type Tone = \"neutral\" | \"accent\" | \"success\" | \"warn\" | \"danger\";\n\nexport interface MetricProps extends HTMLAttributes<HTMLDivElement> {\n  label: ReactNode;\n  /** Pre-formatted value. Formatting and calculation belong to the consuming app. */\n  value: ReactNode;\n  tone?: Tone;\n}\n\n/** Label/value tile for pre-formatted figures. Does no number formatting or arithmetic. */\nexport function Metric({ label, value, tone = \"neutral\", className, ...props }: MetricProps) {\n  return (\n    <div className={cn(\"fds-metric\", className)} {...props}>\n      <p className=\"fds-metric__label\">{label}</p>\n      <p className={cn(\"fds-metric__value\", `fds-tone--${tone}`)}>{value}</p>\n    </div>\n  );\n}\n\nexport interface KeyValueProps extends HTMLAttributes<HTMLDivElement> {\n  label: ReactNode;\n  value: ReactNode;\n}\n\n/** Quieter label/value pair for detail views. */\nexport function KeyValue({ label, value, className, ...props }: KeyValueProps) {\n  return (\n    <div className={cn(\"fds-keyvalue\", className)} {...props}>\n      <p className=\"fds-metric__label\">{label}</p>\n      <p className=\"fds-keyvalue__value\">{value}</p>\n    </div>\n  );\n}\n"],"mappings":";;;;AAaA,SAAgB,OAAO,EAAE,OAAO,OAAO,OAAO,WAAW,WAAW,GAAG,SAAsB;CAC3F,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,cAAc,SAAS;EAAG,GAAI;EAAjD,UAAA,CACE,oBAAC,KAAD;GAAG,WAAU;GAAqB,UAAA;EAAS,CAAA,GAC3C,oBAAC,KAAD;GAAG,WAAW,GAAG,qBAAqB,aAAa,MAAM;GAAI,UAAA;EAAS,CAAA,CACnE;;AAET;;AAQA,SAAgB,SAAS,EAAE,OAAO,OAAO,WAAW,GAAG,SAAwB;CAC7E,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,gBAAgB,SAAS;EAAG,GAAI;EAAnD,UAAA,CACE,oBAAC,KAAD;GAAG,WAAU;GAAqB,UAAA;EAAS,CAAA,GAC3C,oBAAC,KAAD;GAAG,WAAU;GAAuB,UAAA;EAAS,CAAA,CAC1C;;AAET"}

package/dist/components/Notice.d.mts

@@ -0,0 +1,16 @@
+import { HTMLAttributes, ReactNode } from "react";
+export interface NoticeProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  tone?: "info" | "success" | "warn" | "danger";
+  title?: ReactNode;
+  action?: ReactNode;
+}
+/** Inline message. `danger` announces as an alert; other tones as polite status. */
+export declare function Notice({ tone, title, action, className, children, role, ...props }: NoticeProps): import("react").JSX.Element;
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+}
+/** Placeholder for lists or panels with no data, with an optional next step. */
+export declare function EmptyState({ title, description, action, className, ...props }: EmptyStateProps): import("react").JSX.Element;
+//# sourceMappingURL=Notice.d.mts.map