@scttlnd/fintech-design-system 0.2.0 → 0.3.0

package/dist/components/Panel.mjs

@@ -0,0 +1,42 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+// 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]
+	});
+}
+export { Panel };
+
+//# sourceMappingURL=Panel.mjs.map

package/dist/components/Panel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.mjs","names":[],"sources":["../../src/components/Panel.tsx"],"sourcesContent":["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"],"mappings":";;;;;;AAcA,SAAgB,MAAM,EACpB,OACA,SACA,MACA,QACA,eAAe,GACf,WACA,UACA,GAAG,SACU;CACb,MAAM,YAAY,MAAM;CACxB,MAAM,UAAU,IAAI;CACpB,OACE,qBAAC,WAAD;EAAS,mBAAiB;EAAW,WAAW,GAAG,aAAa,SAAS;EAAG,GAAI;EAAhF,UAAA,CACE,qBAAC,UAAD;GAAQ,WAAU;GAAlB,UAAA,CACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACG,UAAU,oBAAC,KAAD;MAAG,WAAU;MAAe,UAAA;KAAW,CAAA,IAAI;KACtD,oBAAC,SAAD;MAAS,IAAI;MAAW,WAAU;MAC/B,UAAA;KACM,CAAA;KACR,OAAO,oBAAC,KAAD;MAAG,WAAU;MAAmB,UAAA;KAAQ,CAAA,IAAI;IACjD;GACJ,CAAA,GAAA,SAAS,oBAAC,OAAD;IAAK,WAAU;IAAqB,UAAA;GAAY,CAAA,IAAI,IACxD;EACP,CAAA,GAAA,QACM;;AAEb"}

package/dist/index.d.mts

@@ -1,125 +1,10 @@
-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
+import { cn } from "./lib/cn.mjs";
+import { Button, ButtonProps } from "./components/Button.mjs";
+import { Panel, PanelProps } from "./components/Panel.mjs";
+import { KeyValue, KeyValueProps, Metric, MetricProps, Tone } from "./components/Metric.mjs";
+import { Badge, BadgeProps } from "./components/Badge.mjs";
+import { EmptyState, EmptyStateProps, Notice, NoticeProps } from "./components/Notice.mjs";
+import { Field, FieldControlProps, FieldProps, Input, Select, Textarea } from "./components/Field.mjs";
+import { DistributionItem, DistributionList, DistributionListProps, Meter, MeterProps, SegmentedMeter, SegmentedMeterProps } from "./components/Meter.mjs";
+import { Menu, MenuItem, MenuProps } from "./components/Menu.mjs";
+export { Badge, type BadgeProps, Button, type ButtonProps, type DistributionItem, DistributionList, type DistributionListProps, EmptyState, type EmptyStateProps, Field, type FieldControlProps, type FieldProps, Input, KeyValue, type KeyValueProps, Menu, type MenuItem, type MenuProps, Meter, type MeterProps, Metric, type MetricProps, Notice, type NoticeProps, Panel, type PanelProps, SegmentedMeter, type SegmentedMeterProps, Select, Textarea, type Tone, cn };

package/dist/index.mjs

@@ -1,366 +1,10 @@
-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]
-	});
-}
+import { cn } from "./lib/cn.mjs";
+import { Button } from "./components/Button.mjs";
+import { Panel } from "./components/Panel.mjs";
+import { KeyValue, Metric } from "./components/Metric.mjs";
+import { Badge } from "./components/Badge.mjs";
+import { EmptyState, Notice } from "./components/Notice.mjs";
+import { Field, Input, Select, Textarea } from "./components/Field.mjs";
+import { DistributionList, Meter, SegmentedMeter } from "./components/Meter.mjs";
+import { Menu } from "./components/Menu.mjs";
 export { Badge, Button, DistributionList, EmptyState, Field, Input, KeyValue, Menu, Meter, Metric, Notice, Panel, SegmentedMeter, Select, Textarea, cn };
-
-//# sourceMappingURL=index.mjs.map

package/dist/lib/cn.d.mts

@@ -0,0 +1,2 @@
+export declare function cn(...classes: Array<string | false | null | undefined>): string;
+//# sourceMappingURL=cn.d.mts.map

package/dist/lib/cn.mjs

@@ -0,0 +1,7 @@
+// src/lib/cn.ts
+function cn(...classes) {
+	return classes.filter(Boolean).join(" ");
+}
+export { cn };
+
+//# sourceMappingURL=cn.mjs.map

package/dist/lib/cn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.mjs","names":[],"sources":["../../src/lib/cn.ts"],"sourcesContent":["export function cn(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(\" \");\n}\n"],"mappings":";AAAA,SAAgB,GAAG,GAAG,SAA2D;CAC/E,OAAO,QAAQ,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACzC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scttlnd/fintech-design-system",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Shared design foundations for Funder, Portare and Investor",
   "license": "MIT",
   "repository": {
@@ -35,20 +35,35 @@
     "build": "vp pack",
     "check": "vp check",
     "test": "vp test --run",
+    "typecheck": "tsc --noEmit",
     "changeset": "changeset",
     "version": "changeset version && vp check --fix",
     "release": "changeset publish",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "showcase:dev": "vp dev --config showcase/vite.config.ts",
+    "showcase:build": "vp build --config showcase/vite.config.ts",
+    "test:browser": "playwright test",
+    "test:visual": "FDS_VISUAL=1 playwright test",
+    "test:visual:update": "FDS_VISUAL=1 playwright test --update-snapshots",
+    "test:package": "node scripts/check-build.mjs && node scripts/check-size.mjs",
+    "smoke:next": "node scripts/smoke-next.mjs",
+    "smoke:next:browser": "node scripts/verify-next.mjs"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^1.0.1",
     "@changesets/cli": "^3.0.3",
+    "@playwright/test": "^1.65.0",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.8",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.7",
+    "axe-core": "^4.14.0",
+    "happy-dom": "^21.0.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "^5.7.3",
-    "vite-plus": "^1.5.0"
+    "vite-plus": "^1.5.0",
+    "vitest-axe": "^0.1.0"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0"

package/styles/components/badge.css

@@ -0,0 +1,33 @@
+@layer fds {
+  /* 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;
+  }
+}