@scttlnd/fintech-design-system 0.0.0-stage → 0.2.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 is generated), and consumer verification. 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,54 @@
-# 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";
+```
+
+Read [AGENTS.md](AGENTS.md) and [adoption guide](docs/ADOPTION.md) before integrating. Original Funder palette is sourced from `nicklaslind/Funder/src/app/globals.css`. Portare's light theme is a proposed product-specific adaptation.
+
+## Showcase
+
+The static design review page in [`showcase/index.html`](showcase/index.html) is deployed to GitHub Pages by `.github/workflows/pages.yml` on every push to `main` that touches it: <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`). `Menu`, `Field` and `Panel` use React hooks: in Next.js import them from a file marked `"use client"`.
+
+## 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/index.d.mts

@@ -0,0 +1,125 @@
+import { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";
+export declare function cn(...classes: Array<string | false | null | undefined>): string;
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "ghost";
+}
+export declare function Button({ variant, className, type, ...props }: ButtonProps): import("react").JSX.Element;
+interface PanelProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  title: ReactNode;
+  eyebrow?: ReactNode;
+  help?: ReactNode;
+  /** Optional trailing action area (buttons, menu). */
+  action?: ReactNode;
+  /** Heading element for the title. Defaults to h2; pick the level that fits the page outline. */
+  headingLevel?: 2 | 3 | 4;
+}
+/** Titled surface with optional eyebrow, help text and action. Renders a labelled `<section>`. */
+export declare function Panel({ title, eyebrow, help, action, headingLevel, className, children, ...props }: PanelProps): import("react").JSX.Element;
+type Tone = "neutral" | "accent" | "success" | "warn" | "danger";
+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;
+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;
+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;
+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;
+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;
+interface FieldControlProps {
+  id: string;
+  "aria-describedby"?: string;
+  "aria-invalid"?: true;
+}
+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;
+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;
+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;
+interface DistributionItem {
+  label: ReactNode;
+  value: number;
+}
+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;
+interface MenuItem {
+  label: string;
+  tone?: "danger";
+  disabled?: boolean;
+  onSelect: () => void;
+}
+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;
+export type { BadgeProps, ButtonProps, DistributionItem, DistributionListProps, EmptyStateProps, FieldControlProps, FieldProps, KeyValueProps, MenuItem, MenuProps, MeterProps, MetricProps, NoticeProps, PanelProps, SegmentedMeterProps, Tone };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -0,0 +1,366 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+// src/lib/cn.ts
+function cn(...classes) {
+	return classes.filter(Boolean).join(" ");
+}
+// 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
+	});
+}
+// src/components/Panel.tsx
+/** Titled surface with optional eyebrow, help text and action. Renders a labelled `<section>`. */
+function Panel({ title, eyebrow, help, action, headingLevel = 2, className, children, ...props }) {
+	const headingId = useId();
+	const Heading = `h${headingLevel}`;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": headingId,
+		className: cn("fds-panel", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "fds-panel__header",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "fds-panel__heading",
+				children: [
+					eyebrow ? /* @__PURE__ */ jsx("p", {
+						className: "fds-eyebrow",
+						children: eyebrow
+					}) : null,
+					/* @__PURE__ */ jsx(Heading, {
+						id: headingId,
+						className: "fds-panel__title",
+						children: title
+					}),
+					help ? /* @__PURE__ */ jsx("p", {
+						className: "fds-panel__help",
+						children: help
+					}) : null
+				]
+			}), action ? /* @__PURE__ */ jsx("div", {
+				className: "fds-panel__action",
+				children: action
+			}) : null]
+		}), children]
+	});
+}
+// 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
+		})]
+	});
+}
+// 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]
+	});
+}
+// src/components/Notice.tsx
+/** Inline message. `danger` announces as an alert; other tones as polite status. */
+function Notice({ tone = "info", title, action, className, children, role, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		role: role ?? (tone === "danger" ? "alert" : "status"),
+		className: cn("fds-notice", `fds-notice--${tone}`, className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "fds-notice__body",
+			children: [title ? /* @__PURE__ */ jsx("p", {
+				className: "fds-notice__title",
+				children: title
+			}) : null, children ? /* @__PURE__ */ jsx("div", {
+				className: "fds-notice__text",
+				children
+			}) : null]
+		}), action ? /* @__PURE__ */ jsx("div", {
+			className: "fds-notice__action",
+			children: action
+		}) : null]
+	});
+}
+/** Placeholder for lists or panels with no data, with an optional next step. */
+function EmptyState({ title, description, action, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("fds-empty", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "fds-empty__title",
+				children: title
+			}),
+			description ? /* @__PURE__ */ jsx("p", {
+				className: "fds-empty__description",
+				children: description
+			}) : null,
+			action ? /* @__PURE__ */ jsx("div", {
+				className: "fds-empty__action",
+				children: action
+			}) : null
+		]
+	});
+}
+// 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
+	});
+}
+// 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]
+	});
+}
+// 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 { Badge, Button, DistributionList, EmptyState, Field, Input, KeyValue, Menu, Meter, Metric, Notice, Panel, SegmentedMeter, Select, Textarea, cn };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/lib/cn.ts","../src/components/Button.tsx","../src/components/Panel.tsx","../src/components/Metric.tsx","../src/components/Badge.tsx","../src/components/Notice.tsx","../src/components/Field.tsx","../src/components/Meter.tsx","../src/components/Menu.tsx"],"sourcesContent":["export function cn(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(\" \");\n}\n","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","import { useId, type ElementType, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport interface PanelProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  title: ReactNode;\n  eyebrow?: ReactNode;\n  help?: ReactNode;\n  /** Optional trailing action area (buttons, menu). */\n  action?: ReactNode;\n  /** Heading element for the title. Defaults to h2; pick the level that fits the page outline. */\n  headingLevel?: 2 | 3 | 4;\n}\n\n/** Titled surface with optional eyebrow, help text and action. Renders a labelled `<section>`. */\nexport function Panel({\n  title,\n  eyebrow,\n  help,\n  action,\n  headingLevel = 2,\n  className,\n  children,\n  ...props\n}: PanelProps) {\n  const headingId = useId();\n  const Heading = `h${headingLevel}` as ElementType;\n  return (\n    <section aria-labelledby={headingId} className={cn(\"fds-panel\", className)} {...props}>\n      <header className=\"fds-panel__header\">\n        <div className=\"fds-panel__heading\">\n          {eyebrow ? <p className=\"fds-eyebrow\">{eyebrow}</p> : null}\n          <Heading id={headingId} className=\"fds-panel__title\">\n            {title}\n          </Heading>\n          {help ? <p className=\"fds-panel__help\">{help}</p> : null}\n        </div>\n        {action ? <div className=\"fds-panel__action\">{action}</div> : null}\n      </header>\n      {children}\n    </section>\n  );\n}\n","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","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","import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport interface NoticeProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  tone?: \"info\" | \"success\" | \"warn\" | \"danger\";\n  title?: ReactNode;\n  action?: ReactNode;\n}\n\n/** Inline message. `danger` announces as an alert; other tones as polite status. */\nexport function Notice({\n  tone = \"info\",\n  title,\n  action,\n  className,\n  children,\n  role,\n  ...props\n}: NoticeProps) {\n  return (\n    <div\n      role={role ?? (tone === \"danger\" ? \"alert\" : \"status\")}\n      className={cn(\"fds-notice\", `fds-notice--${tone}`, className)}\n      {...props}\n    >\n      <div className=\"fds-notice__body\">\n        {title ? <p className=\"fds-notice__title\">{title}</p> : null}\n        {children ? <div className=\"fds-notice__text\">{children}</div> : null}\n      </div>\n      {action ? <div className=\"fds-notice__action\">{action}</div> : null}\n    </div>\n  );\n}\n\nexport interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n}\n\n/** Placeholder for lists or panels with no data, with an optional next step. */\nexport function EmptyState({ title, description, action, className, ...props }: EmptyStateProps) {\n  return (\n    <div className={cn(\"fds-empty\", className)} {...props}>\n      <p className=\"fds-empty__title\">{title}</p>\n      {description ? <p className=\"fds-empty__description\">{description}</p> : null}\n      {action ? <div className=\"fds-empty__action\">{action}</div> : null}\n    </div>\n  );\n}\n","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","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","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":"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"}

package/package.json

@@ -1,6 +1,59 @@
 {
   "name": "@scttlnd/fintech-design-system",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Shared design foundations for Funder, Portare and Investor",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/scottlinddk/fintech-design-system.git"
+  },
+  "files": [
+    "dist",
+    "styles",
+    "AGENTS.md",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./styles.css": "./styles/index.css",
+    "./themes/funder.css": "./styles/themes/funder.css",
+    "./themes/portare.css": "./styles/themes/portare.css",
+    "./themes/investor.css": "./styles/themes/investor.css"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "check": "vp check",
+    "test": "vp test --run",
+    "changeset": "changeset",
+    "version": "changeset version && vp check --fix",
+    "release": "changeset publish",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@changesets/changelog-github": "^1.0.1",
+    "@changesets/cli": "^3.0.3",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.7.3",
+    "vite-plus": "^1.5.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.0 || ^19.0.0"
+  },
+  "engines": {
+    "node": ">=22.14.0"
+  }
+}

package/styles/components.css

@@ -0,0 +1,367 @@
+/* Shared primitives. Only --fds-* tokens; tones are derived with color-mix so every theme works. */
+
+.fds-eyebrow {
+  margin: 0;
+  font-size: 0.75rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--fds-muted);
+}
+
+/* Panel */
+.fds-panel {
+  padding: 1rem;
+  border: 1px solid var(--fds-line);
+  border-radius: var(--fds-radius-lg);
+  background: var(--fds-panel);
+  color: var(--fds-foreground);
+}
+.fds-panel__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+.fds-panel__heading {
+  min-width: 0;
+}
+.fds-panel__title {
+  margin: 0.25rem 0 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+.fds-panel__help {
+  margin: 0.375rem 0 0;
+  max-width: 65ch;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  color: var(--fds-muted);
+}
+@media (min-width: 640px) {
+  .fds-panel {
+    padding: 1.25rem;
+  }
+  .fds-panel__header {
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+  }
+}
+
+/* Tones */
+.fds-tone--accent {
+  color: var(--fds-accent);
+}
+.fds-tone--success {
+  color: var(--fds-success);
+}
+.fds-tone--warn {
+  color: var(--fds-warn);
+}
+.fds-tone--danger {
+  color: var(--fds-danger);
+}
+
+/* Metric / KeyValue */
+.fds-metric,
+.fds-keyvalue {
+  padding: 0.75rem;
+  border: 1px solid var(--fds-line);
+  border-radius: var(--fds-radius-md);
+  background: var(--fds-panel-soft, var(--fds-panel));
+}
+.fds-keyvalue {
+  border-color: var(--fds-line-soft, var(--fds-line));
+}
+.fds-metric__label {
+  margin: 0;
+  font-size: 0.75rem;
+  color: var(--fds-muted);
+}
+.fds-metric__value {
+  margin: 0.5rem 0 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.fds-keyvalue__value {
+  margin: 0.25rem 0 0;
+  font-weight: 500;
+}
+
+/* Badge */
+.fds-badge {
+  --fds-badge-color: var(--fds-muted-strong, var(--fds-foreground));
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-height: 1.75rem;
+  padding: 0 0.5rem;
+  border: 1px solid color-mix(in srgb, var(--fds-badge-color) 30%, transparent);
+  border-radius: var(--fds-radius-sm);
+  background: color-mix(in srgb, var(--fds-badge-color) 12%, transparent);
+  color: var(--fds-badge-color);
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+.fds-badge--accent {
+  --fds-badge-color: var(--fds-accent);
+}
+.fds-badge--success {
+  --fds-badge-color: var(--fds-success);
+}
+.fds-badge--warn {
+  --fds-badge-color: var(--fds-warn);
+}
+.fds-badge--danger {
+  --fds-badge-color: var(--fds-danger);
+}
+.fds-badge__icon {
+  display: inline-flex;
+}
+
+/* Notice */
+.fds-notice {
+  --fds-notice-color: var(--fds-accent);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid color-mix(in srgb, var(--fds-notice-color) 35%, transparent);
+  border-left-width: 4px;
+  border-radius: var(--fds-radius-md);
+  background: color-mix(in srgb, var(--fds-notice-color) 10%, transparent);
+  color: var(--fds-foreground);
+}
+.fds-notice--success {
+  --fds-notice-color: var(--fds-success);
+}
+.fds-notice--warn {
+  --fds-notice-color: var(--fds-warn);
+}
+.fds-notice--danger {
+  --fds-notice-color: var(--fds-danger);
+}
+.fds-notice__title {
+  margin: 0;
+  font-weight: 600;
+}
+.fds-notice__text {
+  font-size: 0.875rem;
+  color: var(--fds-muted-strong, var(--fds-foreground));
+}
+
+/* Empty state */
+.fds-empty {
+  padding: 2rem 1rem;
+  text-align: center;
+}
+.fds-empty__title {
+  margin: 0;
+  font-weight: 600;
+}
+.fds-empty__description {
+  margin: 0.5rem auto 0;
+  max-width: 45ch;
+  font-size: 0.875rem;
+  color: var(--fds-muted);
+}
+.fds-empty__action {
+  margin-top: 1rem;
+}
+
+/* Form controls: 44px targets on touch / small screens, 16px font to stop iOS zoom. */
+.fds-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.fds-field__label {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+.fds-field__hint,
+.fds-field__error {
+  margin: 0;
+  font-size: 0.8125rem;
+}
+.fds-field__hint {
+  color: var(--fds-muted);
+}
+.fds-field__error {
+  color: var(--fds-danger);
+}
+.fds-control {
+  width: 100%;
+  min-height: 2.75rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--fds-line);
+  border-radius: var(--fds-radius-md);
+  background: var(--fds-panel-soft, var(--fds-panel));
+  color: var(--fds-foreground);
+  font: inherit;
+  font-size: 1rem;
+}
+.fds-control--multiline {
+  min-height: 6rem;
+  resize: vertical;
+}
+.fds-control:focus-visible {
+  outline: 2px solid var(--fds-accent);
+  outline-offset: 2px;
+  border-color: var(--fds-accent);
+}
+.fds-control[aria-invalid="true"] {
+  border-color: var(--fds-danger);
+}
+.fds-control:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+@media (min-width: 640px) and (pointer: fine) {
+  .fds-control {
+    min-height: 2.25rem;
+    font-size: 0.875rem;
+  }
+  .fds-control--multiline {
+    min-height: 6rem;
+  }
+}
+
+/* Meters */
+.fds-meter {
+  height: 0.5rem;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--fds-line);
+}
+.fds-meter--thin {
+  height: 0.375rem;
+}
+.fds-meter__fill {
+  height: 100%;
+  border-radius: inherit;
+  background: var(--fds-accent);
+}
+.fds-segmeter {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.fds-segmeter__segment {
+  width: 0.5rem;
+  height: 1rem;
+  border-radius: 2px;
+  background: var(--fds-line);
+}
+.fds-segmeter__segment--on {
+  background: var(--fds-accent);
+}
+.fds-distribution__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.fds-distribution__meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.25rem;
+  font-size: 0.75rem;
+}
+.fds-distribution__label {
+  color: var(--fds-muted-strong, var(--fds-foreground));
+}
+.fds-distribution__value {
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+.fds-distribution__empty,
+.fds-distribution__overflow {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--fds-muted);
+}
+.fds-distribution__overflow {
+  margin-top: 0.5rem;
+}
+
+/* Menu */
+.fds-menu {
+  position: relative;
+  display: inline-block;
+}
+.fds-menu__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  border: 1px solid var(--fds-line);
+  border-radius: var(--fds-radius-md);
+  background: var(--fds-panel-soft, var(--fds-panel));
+  color: var(--fds-muted);
+  cursor: pointer;
+}
+.fds-menu__trigger:hover {
+  border-color: var(--fds-accent);
+  color: var(--fds-foreground);
+}
+.fds-menu__trigger:focus-visible,
+.fds-menu__item:focus-visible {
+  outline: 2px solid var(--fds-accent);
+  outline-offset: 2px;
+}
+.fds-menu__list {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  z-index: 30;
+  min-width: 11rem;
+  margin-top: 0.25rem;
+  padding: 0.25rem 0;
+  overflow: hidden;
+  border: 1px solid var(--fds-line);
+  border-radius: var(--fds-radius-md);
+  background: var(--fds-panel);
+  box-shadow: 0 10px 30px rgb(0 0 0 / 0.25);
+}
+.fds-menu__item {
+  display: block;
+  width: 100%;
+  min-height: 2.75rem;
+  padding: 0.5rem 0.75rem;
+  border: 0;
+  background: transparent;
+  color: var(--fds-foreground);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.fds-menu__item:hover,
+.fds-menu__item:focus-visible {
+  background: var(--fds-panel-raised);
+}
+.fds-menu__item--danger {
+  color: var(--fds-danger);
+}
+.fds-menu__item:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+@media (min-width: 640px) and (pointer: fine) {
+  .fds-menu__trigger {
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+  .fds-menu__item {
+    min-height: 2.25rem;
+  }
+}

package/styles/index.css

@@ -0,0 +1,45 @@
+@import "./tokens.css";
+@import "./components.css";
+.fds-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 2.5rem;
+  padding: 0.55rem 1rem;
+  border-radius: var(--fds-radius-md);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    border-color 0.15s;
+}
+.fds-button:focus-visible {
+  outline: 2px solid var(--fds-accent);
+  outline-offset: 2px;
+}
+.fds-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.fds-button--primary {
+  background: var(--fds-accent);
+  color: var(--fds-on-accent);
+  border: 1px solid transparent;
+}
+.fds-button--secondary {
+  background: var(--fds-panel-raised);
+  color: var(--fds-foreground);
+  border: 1px solid var(--fds-line);
+}
+.fds-button--ghost {
+  background: transparent;
+  color: var(--fds-foreground);
+  border: 1px solid transparent;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fds-button {
+    transition: none;
+  }
+}

package/styles/themes/funder.css

@@ -0,0 +1,9 @@
+:root,
+[data-fds-theme="funder"] {
+  color-scheme: dark;
+  --fds-background: #08090b;
+  --fds-foreground: #f4f4f5;
+  --fds-accent: #7dd3fc;
+  --fds-accent-strong: #38bdf8;
+  --fds-on-accent: #08090b;
+}

package/styles/themes/investor.css

@@ -0,0 +1,9 @@
+:root,
+[data-fds-theme="investor"] {
+  color-scheme: dark;
+  --fds-background: #08090b;
+  --fds-foreground: #f4f4f5;
+  --fds-accent: #7dd3fc;
+  --fds-accent-strong: #38bdf8;
+  --fds-on-accent: #08090b;
+}

package/styles/themes/portare.css

@@ -0,0 +1,24 @@
+:root,
+[data-fds-theme="portare"] {
+  color-scheme: light;
+  --fds-background: #fafbfc;
+  --fds-foreground: #111827;
+  --fds-muted: #525b6b;
+  --fds-panel: #fff;
+  --fds-panel-raised: #f3f5f8;
+  --fds-line: #d8dee7;
+  --fds-accent: #075e7c;
+  --fds-accent-strong: #064c66;
+  --fds-on-accent: #fff;
+}
+
+/* Semantic and secondary surface tokens: the base (dark) values fail contrast on a light surface. */
+:root,
+[data-fds-theme="portare"] {
+  --fds-muted-strong: #374151;
+  --fds-line-soft: #e5e9f0;
+  --fds-panel-soft: #f8fafc;
+  --fds-success: #1f6f4a;
+  --fds-warn: #8a5a00;
+  --fds-danger: #b3261e;
+}

package/styles/tokens.css

@@ -0,0 +1,25 @@
+:root {
+  --fds-background: #08090b;
+  --fds-foreground: #f4f4f5;
+  --fds-muted: #a1a1aa;
+  --fds-muted-strong: #d4d4d8;
+  --fds-line: #27272a;
+  --fds-line-soft: #1b1b1f;
+  --fds-panel: #101114;
+  --fds-panel-raised: #15161a;
+  --fds-panel-soft: #0c0d10;
+  --fds-accent: #7dd3fc;
+  --fds-accent-strong: #38bdf8;
+  --fds-on-accent: #08090b;
+  --fds-success: #86efac;
+  --fds-warn: #fbbf24;
+  --fds-danger: #fda4af;
+  --fds-radius-md: 0.625rem;
+  --fds-font-sans:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+:root {
+  --fds-radius-lg: 0.75rem;
+  --fds-radius-sm: 0.375rem;
+}