@flytedan/flytebot-design-system 0.61.0 → 0.62.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.61.0",
+  "version": "0.62.0",
   "description": "flytedesk Design System — shared component library, tokens, and business-logic kits for flytedesk apps.",
   "type": "module",
   "license": "UNLICENSED",
@@ -66,13 +66,17 @@
   },
   "devDependencies": {
     "@testing-library/user-event": "^14.6.7",
+    "@types/d3-geo": "^3.1.1",
     "@types/node": "^26.6.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@types/topojson-client": "^3.1.5",
+    "@types/topojson-specification": "^1.0.5",
     "@typescript-eslint/eslint-plugin": "^8.14.0",
     "@typescript-eslint/parser": "^8.14.0",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/browser": "^2.1.9",
+    "d3-geo": "^3.1.1",
     "eslint": "^9.14.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "fast-check": "^4.10.2",
@@ -80,8 +84,10 @@
     "playwright": "^1.63.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "topojson-client": "^3.1.0",
     "tsup": "^8.3.5",
     "typescript": "^5.6.3",
+    "us-atlas": "^3.0.1",
     "vite": "^5.4.11",
     "vitest": "^2.1.4"
   }

package/styles/components.css

@@ -8318,3 +8318,88 @@ button.fd-erow-metric:focus-visible {
     animation: fd-pulse 1.6s ease-in-out infinite;
   }
 }
+
+/* USChoropleth: a US map shaded on the sequential ramp (--seq-1..5), its legend, an optional ranking
+   and a table view. The component's own width decides the layout (a container query), not the
+   window's: the same card sits in different page widths. */
+.fd-uschoro {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.fd-uschoro-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 20px;
+}
+@container (min-width: 640px) {
+  .fd-uschoro-layout:has(.fd-uschoro-top) {
+    grid-template-columns: minmax(0, 1fr) 280px;
+    align-items: start;
+  }
+}
+.fd-uschoro-main {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+.fd-uschoro-stage {
+  position: relative;
+}
+.fd-uschoro-svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+/* The skeleton holds the map's own proportions, so the page does not jump when the outlines arrive. */
+.fd-uschoro-skeleton {
+  aspect-ratio: 975 / 610;
+}
+.fd-uschoro-state {
+  stroke: var(--surface);
+  stroke-width: 1;
+  outline: none;
+}
+.fd-uschoro-state[data-step="none"] { fill: var(--surface-3); stroke: var(--border-strong); }
+.fd-uschoro-state[data-step="1"] { fill: var(--seq-1); }
+.fd-uschoro-state[data-step="2"] { fill: var(--seq-2); }
+.fd-uschoro-state[data-step="3"] { fill: var(--seq-3); }
+.fd-uschoro-state[data-step="4"] { fill: var(--seq-4); }
+.fd-uschoro-state[data-step="5"] { fill: var(--seq-5); }
+/* The state being read (hovered, focused or tapped): an outline drawn over its neighbours, whatever its shade. */
+.fd-uschoro-active {
+  fill: none;
+  stroke: var(--text);
+  stroke-width: 2.5;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+.fd-uschoro-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 14px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: var(--body-sm-size);
+  color: var(--text-2);
+}
+.fd-uschoro-legend li {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.fd-uschoro-swatch {
+  width: 16px;
+  height: 12px;
+  border-radius: 3px;
+  border: 1px solid var(--border-strong);
+}
+.fd-uschoro-swatch[data-step="none"] { background: var(--surface-3); }
+.fd-uschoro-swatch[data-step="1"] { background: var(--seq-1); }
+.fd-uschoro-swatch[data-step="2"] { background: var(--seq-2); }
+.fd-uschoro-swatch[data-step="3"] { background: var(--seq-3); }
+.fd-uschoro-swatch[data-step="4"] { background: var(--seq-4); }
+.fd-uschoro-swatch[data-step="5"] { background: var(--seq-5); }

package/styles/tokens.css

@@ -131,6 +131,12 @@
   --chart-1:#2272BA;--chart-2:#23A183;--chart-3:#7C8698;--chart-4:#C8890B;
   --chart-5:#6E5BC9;--chart-6:#C86B8A;--chart-7:#4F97D6;--chart-8:#A8B0BD;
 
+  /* sequential data ramp — one hue, five steps, for a magnitude (a count per state). Light runs pale to
+     dark, dark runs near-surface to light, so the largest value is always the most prominent against
+     its surface. Distinct from the saturation index (--csi-*, teal, reserved for that index) and from
+     the categorical --chart-* ramp (which names kinds, never amounts). */
+  --seq-1:var(--blue-100);--seq-2:var(--blue-300);--seq-3:var(--blue-500);--seq-4:var(--blue-700);--seq-5:var(--blue-900);
+
   /* channel identity — one hue per medium, hue family per channel group.
      Blues = large format, violets = moving, ambers = paper, roses = direct,
      slate = digital. Never reuse a channel hue for anything else; the colour IS
@@ -238,6 +244,7 @@
   --link-hover:#A0C9E8;
   --skeleton-base:#1F242D;
   --skeleton-sheen:rgba(255,255,255,.06);
+  --seq-1:var(--blue-900);--seq-2:var(--blue-700);--seq-3:var(--blue-600);--seq-4:var(--blue-500);--seq-5:var(--blue-300);
   --grad-primary:linear-gradient(100deg,#1A5B96 0%,#3671B8 100%);/* @kind color */
   --grad-primary-hover:linear-gradient(100deg,#22699F 0%,#4180C7 100%);/* @kind color */
   --wash-hero:none;/* @kind color */--wash-panel:none;/* @kind color */--wash-edge:none;/* @kind color */