@city-of-baltimore/bromo 0.4.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 City of Baltimore
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,97 @@
+# Bromo Design System
+
+React components, design tokens, and an app shell for City of Baltimore civic
+applications — one visual and interaction language across the city's digital
+services, built on [MUI](https://mui.com) 7 and React 19.
+
+**Component catalog / Storybook:** https://bromo.fly.dev
+
+## Install
+
+```bash
+npm install @city-of-baltimore/bromo
+```
+
+No registry configuration or tokens required.
+
+## Quick start
+
+Wrap your app once, import the stylesheet once, and use the shell:
+
+```tsx
+// main.tsx
+import "@city-of-baltimore/bromo/styles.css"; // loads the city fonts
+import { BrowserRouter } from "react-router-dom";
+import { BromoProvider } from "@city-of-baltimore/bromo";
+
+createRoot(document.getElementById("root")!).render(
+  <BrowserRouter>
+    <BromoProvider config={{ productTitle: "311 Explorer" }}>
+      <App />
+    </BromoProvider>
+  </BrowserRouter>,
+);
+```
+
+```tsx
+import { AppShell, SectionSurface, Button } from "@city-of-baltimore/bromo";
+
+export function HomePage() {
+  return (
+    <AppShell eyebrow="Operations" title="Service requests" subtitle="Citywide view">
+      <SectionSurface>
+        <Button>Export</Button>
+      </SectionSurface>
+    </AppShell>
+  );
+}
+```
+
+`BromoProvider` wires the theme, `CssBaseline`, light/dark color mode,
+and the `--bromo-*` design tokens — don't add your own `ThemeProvider` around it.
+A `react-router` router is required (shell components render router links).
+
+## Entry points
+
+Heavy optional dependencies never ride along with a button: chart, map, and
+API client components live on their own subpaths, each behind an optional
+peer dependency.
+
+| Import | Contents | Optional peer |
+| --- | --- | --- |
+| `@city-of-baltimore/bromo` | components, providers, theme/color-mode helpers, systems token layer | — |
+| `…/tokens` | theme + color-mode helpers only | — |
+| `…/charts` | `AppChart` (+ `AppTable` re-export) | `@mui/x-charts` |
+| `…/map` | `AppMap`, `MapFrame`, `MapLegend`, `MapA11ySummary` | `maplibre-gl` |
+| `…/api` | typed BFF/auth client factory | `openapi-fetch` |
+| `…/styles.css` | kit stylesheet (loads the city font families) | — |
+
+Required peers: `react` / `react-dom` 19, `react-router-dom` 7, `@mui/material`
+(+ icons/system/utils) 7, `@emotion/react` / `@emotion/styled` 11. Exact ranges
+live in this package's `peerDependencies`.
+
+## Versioning
+
+Semantic versioning over a frozen public API: every export of the root entry,
+the subpath layout, and the `--bromo-*` CSS custom property names. Deprecations
+ship at least one minor release before removal, with migration notes in the
+[CHANGELOG](https://github.com/city-of-baltimore/bromo/blob/main/CHANGELOG.md).
+
+## Accessibility
+
+Components target WCAG 2.1 AA: two-tone focus indicators, AA-checked status
+inks in both color modes, selection states that don't rely on color alone, and
+an axe audit over the component showcase in CI. A formal conformance statement
+and per-component ledger are in progress.
+
+## License
+
+[MIT](./LICENSE) — the same license as the GOV.UK Design System. This design
+system is public infrastructure: any government, civic organization, or vendor
+is welcome to use, adapt, and build on it — that's the point. The "City of
+Baltimore" name, seal, and brand assets identify official city services and
+remain protected by trademark law; don't use them to imply endorsement.
+
+---
+
+Built by the City of Baltimore.

package/dist-kit/Alert-Cw_gMn8C.js

@@ -0,0 +1,295 @@
+import { l as e, m as t } from "./SectionHeader-D2kyZqwI.js";
+import { n, r } from "./themeTokens-CAvxuaP0.js";
+import { Alert as i, AlertTitle as a, Box as o, CssBaseline as s, GlobalStyles as c, ThemeProvider as l, Typography as u } from "@mui/material";
+import { createContext as d, useContext as f, useEffect as p, useMemo as m, useState as h, useSyncExternalStore as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { alpha as y, createTheme as b, responsiveFontSizes as x, useTheme as S } from "@mui/material/styles";
+//#region src/app/assertFontsLoaded.ts
+var C = !1;
+function w() {
+	if (typeof document > "u" || C) return;
+	let e = window.location.hostname;
+	if (!(e === "localhost" || e === "127.0.0.1" || e.endsWith(".local"))) return;
+	let t = () => {
+		let e = ["proxima-nova", "Nunito Sans"].filter((e) => !document.fonts.check(`16px "${e}"`));
+		e.length !== 0 && (C = !0, console.warn(`[bromo] Theme font(s) not loaded: ${e.join(", ")}. Import "@city-of-baltimore/bromo/styles.css" once near your app root, otherwise headings fall back to a system sans. See docs/toolkit_troubleshooting.md §1.`));
+	};
+	document.fonts.status === "loaded" ? t() : document.fonts.ready.then(t);
+}
+//#endregion
+//#region src/app/theme.ts
+var T = {
+	control: 8,
+	inset: 6,
+	surface: 8,
+	overlay: 10,
+	pill: 999
+}, E = "\"Nunito Sans\", \"Segoe UI\", system-ui, sans-serif", D = "\"proxima-nova\", \"Segoe UI\", system-ui, sans-serif";
+function O(e, t) {
+	let n = r(e), i = e === "dark", a = b({
+		palette: {
+			mode: e,
+			primary: {
+				main: n.palette.primary,
+				dark: n.palette.primaryDark,
+				contrastText: i ? n.palette.primaryDark : "#ffffff"
+			},
+			secondary: {
+				main: n.palette.secondary,
+				contrastText: n.palette.primaryDark
+			},
+			background: {
+				default: n.palette.backgroundDefault,
+				paper: n.palette.backgroundPaper
+			},
+			text: {
+				primary: n.palette.textPrimary,
+				secondary: n.palette.textSecondary
+			},
+			divider: n.palette.divider,
+			warning: {
+				main: n.palette.warning,
+				light: n.palette.accentSoft,
+				dark: "#d79f18",
+				contrastText: n.palette.primaryDark
+			},
+			error: { main: n.palette.error },
+			success: { main: n.palette.success },
+			info: { main: n.palette.info }
+		},
+		shape: { borderRadius: T.surface },
+		spacing: 8,
+		typography: {
+			fontFamily: E,
+			h1: {
+				fontFamily: D,
+				fontWeight: 800,
+				letterSpacing: 0
+			},
+			h2: {
+				fontFamily: D,
+				fontWeight: 700,
+				letterSpacing: 0
+			},
+			h3: {
+				fontFamily: D,
+				fontWeight: 700,
+				letterSpacing: 0
+			},
+			h4: {
+				fontFamily: D,
+				fontWeight: 700,
+				letterSpacing: 0
+			},
+			h5: {
+				fontFamily: D,
+				fontWeight: 700
+			},
+			h6: {
+				fontFamily: D,
+				fontWeight: 700
+			},
+			body1: {
+				fontSize: "1rem",
+				lineHeight: 1.65
+			},
+			body2: {
+				fontSize: "0.95rem",
+				lineHeight: 1.6
+			},
+			caption: {
+				fontSize: "0.75rem",
+				lineHeight: 1.4
+			},
+			subtitle2: {
+				textTransform: "uppercase",
+				letterSpacing: "0.18em",
+				fontWeight: 700,
+				fontSize: "0.72rem"
+			},
+			button: {
+				fontWeight: 700,
+				textTransform: "none"
+			}
+		},
+		components: {
+			MuiCssBaseline: { styleOverrides: { body: {
+				backgroundColor: n.palette.backgroundDefault,
+				color: n.palette.textPrimary
+			} } },
+			MuiButton: {
+				styleOverrides: {
+					root: {
+						borderRadius: T.control,
+						paddingInline: 18
+					},
+					outlined: {
+						borderColor: y(n.palette.primary, i ? .32 : .16),
+						backgroundColor: i ? y(n.palette.backgroundPaper, .56) : y("#ffffff", .84)
+					}
+				},
+				variants: [{
+					props: {
+						variant: "contained",
+						color: "primary"
+					},
+					style: {
+						boxShadow: "none",
+						"&:hover": { boxShadow: "none" }
+					}
+				}]
+			},
+			MuiChip: { styleOverrides: { root: {
+				borderRadius: T.control,
+				fontWeight: 700
+			} } },
+			MuiPaper: { styleOverrides: { root: {
+				backgroundImage: "none",
+				border: `1px solid ${n.palette.divider}`,
+				boxShadow: i ? "0 18px 40px rgba(4, 8, 18, 0.38)" : "0 12px 30px rgba(25, 14, 33, 0.08)"
+			} } },
+			MuiCard: { styleOverrides: { root: { borderRadius: T.surface } } },
+			MuiOutlinedInput: { styleOverrides: { root: {
+				borderRadius: T.control,
+				backgroundColor: y(n.palette.backgroundPaper, i ? .88 : .75)
+			} } },
+			MuiInputLabel: { styleOverrides: { root: {
+				color: n.palette.textSecondary,
+				"&.Mui-disabled": { color: n.palette.textSecondary },
+				"&.Mui-focused": { color: n.palette.primary }
+			} } },
+			MuiMenu: { styleOverrides: { paper: {
+				borderRadius: T.overlay,
+				backgroundColor: y(n.palette.surfaceElevated, i ? .96 : .94)
+			} } },
+			MuiDrawer: { styleOverrides: { paper: { backgroundImage: "none" } } },
+			MuiTableCell: { styleOverrides: {
+				head: {
+					backgroundColor: y(n.palette.surfaceAlt, i ? .96 : .88),
+					borderBottom: `1px solid ${n.palette.dividerStrong}`,
+					fontWeight: 700
+				},
+				body: { borderBottom: `1px solid ${y(n.palette.divider, .9)}` }
+			} }
+		},
+		toolkitTokens: {
+			focusRing: n.cssVariables["--bromo-focus-ring"],
+			radii: T,
+			chart: n.chart
+		}
+	});
+	return x(t ? b(a, t) : a);
+}
+//#endregion
+//#region src/app/colorModeDefaults.ts
+var k = "system", A = /* @__PURE__ */ new Set();
+function j() {
+	if (typeof window > "u") return null;
+	let e = window.localStorage.getItem("bromo-color-mode");
+	return e === "light" || e === "dark" || e === "system" ? e : null;
+}
+function M() {
+	return j() ?? k;
+}
+function N(e) {
+	return A.add(e), () => {
+		A.delete(e);
+	};
+}
+//#endregion
+//#region src/app/colorMode.tsx
+var P = "bromo-color-mode", F = d(null), I = "(prefers-color-scheme: dark)";
+function L() {
+	return typeof window > "u" ? !1 : window.matchMedia(I).matches;
+}
+function R(e) {
+	if (typeof window > "u") return () => {};
+	let t = window.matchMedia(I);
+	return t.addEventListener("change", e), () => t.removeEventListener("change", e);
+}
+function z({ children: e, themeOverrides: t }) {
+	let [r, i] = h(() => M()), [a, o] = h(() => j() !== null), u = g(R, L, () => !1), d = r === "system" ? u ? "dark" : "light" : r, f = m(() => O(d, t), [d, t]);
+	return p(() => {
+		w();
+	}, []), p(() => N((e) => {
+		a || i(e);
+	}), [a]), p(() => {
+		typeof window > "u" || (a ? window.localStorage.setItem(P, r) : window.localStorage.removeItem(P), n(d));
+	}, [
+		a,
+		r,
+		d
+	]), /* @__PURE__ */ _(F.Provider, {
+		value: {
+			preference: r,
+			resolvedMode: d,
+			setPreference: (e) => {
+				o(!0), i(e);
+			}
+		},
+		children: /* @__PURE__ */ v(l, {
+			theme: f,
+			children: [
+				/* @__PURE__ */ _(s, {}),
+				/* @__PURE__ */ _(c, { styles: {
+					"html, body, #root": { minHeight: "100%" },
+					"*": { boxSizing: "border-box" },
+					"[data-color-scheme='dark']": { colorScheme: "dark" },
+					"[data-color-scheme='light']": { colorScheme: "light" },
+					"a:focus-visible, button:focus-visible, [role='button']:focus-visible": {
+						outline: "var(--bromo-focus-width) solid var(--bromo-focus-ring)",
+						outlineOffset: "var(--bromo-focus-offset)",
+						boxShadow: "0 0 0 var(--bromo-focus-width) var(--bromo-focus-ring-inner)"
+					}
+				} }),
+				e
+			]
+		})
+	});
+}
+function B() {
+	let e = f(F);
+	if (!e) throw Error("useColorMode must be used inside ColorModeProvider.");
+	return e;
+}
+//#endregion
+//#region src/components/Alert.tsx
+function V({ tone: n = "info", title: r, message: s, actionLabel: c, onAction: l, requestId: d, testId: f = "status-banner" }) {
+	let p = S(), m = n === "danger" || n === "error" ? "error" : n;
+	return /* @__PURE__ */ v(i, {
+		action: c && l ? /* @__PURE__ */ _(t, {
+			color: "inherit",
+			emphasis: "subtle",
+			size: "small",
+			onClick: l,
+			children: c
+		}) : null,
+		"data-testid": f,
+		role: m === "error" ? "alert" : "status",
+		severity: m,
+		sx: e(p, m),
+		children: [
+			/* @__PURE__ */ _(a, { children: r }),
+			/* @__PURE__ */ _(o, {
+				"data-testid": `${f}-message`,
+				children: s
+			}),
+			d ? /* @__PURE__ */ v(u, {
+				"data-testid": `${f}-request-id`,
+				variant: "body2",
+				sx: { color: "text.secondary" },
+				children: [
+					"Request ID:",
+					" ",
+					/* @__PURE__ */ _(o, {
+						component: "span",
+						sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+						children: d
+					})
+				]
+			}) : null
+		]
+	});
+}
+//#endregion
+export { D as a, E as i, z as n, O as o, B as r, V as t };