choropleth-kit 0.0.0-stage → 0.1.0

package/dist/styles.css

@@ -0,0 +1,417 @@
+/* src/react/styles.css */
+@media (prefers-reduced-motion: reduce) {
+  .cm-root {
+    --cm-transition-duration: 0ms;
+  }
+}
+:where(.cm-root:not([data-unstyled])) {
+  background: var(--cm-background, transparent);
+  color: var(--cm-label-color, inherit);
+  font-family: var(--cm-font-family, inherit);
+  font-size: var(--cm-font-size, 12px);
+}
+:where(.cm-root:not([data-unstyled])) .cm-region {
+  transition: fill var(--cm-transition-duration, 250ms), opacity var(--cm-transition-duration, 250ms);
+}
+:where(.cm-root:not([data-unstyled])) .cm-regions[data-outlined] .cm-region {
+  stroke: var(--cm-border-color, #ffffff);
+  stroke-width: var(--cm-border-width, 0.5px);
+  vector-effect: non-scaling-stroke;
+}
+:where(.cm-root:not([data-unstyled])) .cm-borders {
+  fill: none;
+  stroke: var(--cm-border-color, #ffffff);
+  stroke-width: var(--cm-border-width, 0.5px);
+  vector-effect: non-scaling-stroke;
+}
+:where(.cm-root:not([data-unstyled])) .cm-selection :is(path, circle) {
+  fill: none;
+  vector-effect: non-scaling-stroke;
+}
+:where(.cm-root:not([data-unstyled])) .cm-selection [data-selection=hover] {
+  stroke: var(--cm-hover-stroke, #000000);
+  stroke-width: var(--cm-hover-stroke-width, 1.5px);
+}
+:where(.cm-root:not([data-unstyled])) .cm-selection [data-selection=selected] {
+  stroke: var(--cm-selected-stroke, #0b5fff);
+  stroke-width: var(--cm-selected-stroke-width, 2px);
+}
+:where(.cm-root:not([data-unstyled])) .cm-bubble {
+  stroke: var(--cm-bubble-stroke, #ffffff);
+  stroke-width: 0.5px;
+  fill-opacity: var(--cm-bubble-opacity, 0.75);
+  transform: scale(var(--cm-bubble-scale, 1));
+  transform-box: fill-box;
+  transform-origin: center;
+  vector-effect: non-scaling-stroke;
+  transition: r var(--cm-transition-duration, 250ms), fill var(--cm-transition-duration, 250ms);
+}
+:where(.cm-root:not([data-unstyled])) .cm-region[data-drillable] {
+  cursor: zoom-in;
+}
+:where(.cm-root:not([data-unstyled])) .cm-fallback-point {
+  stroke: var(--cm-bubble-stroke, #ffffff);
+  stroke-width: 1px;
+  vector-effect: non-scaling-stroke;
+}
+:where(.cm-root:not([data-unstyled]))[data-zoomed] .cm-svg {
+  cursor: grab;
+}
+:where(.cm-root:not([data-unstyled]))[data-interacting] .cm-svg {
+  cursor: grabbing;
+}
+:where(.cm-root:not([data-unstyled]))[data-interacting] :is(.cm-regions, .cm-bubbles, .cm-fallback-points) {
+  pointer-events: none;
+}
+:where(.cm-root:not([data-unstyled]))[data-interacting] .cm-region {
+  transition: none;
+}
+:where(.cm-root:not([data-unstyled]))[data-interacting] .cm-tooltip {
+  display: none;
+}
+:where(.cm-root:not([data-unstyled])) .cm-svg:focus-visible {
+  outline: var(--cm-focus-ring-width, 2px) solid var(--cm-focus-ring, #0b5fff);
+  outline-offset: -2px;
+}
+:where(.cm-root:not([data-unstyled])) .cm-zoom-controls {
+  display: flex;
+  flex-direction: column;
+  background: var(--cm-control-bg, #ffffff);
+  border: 1px solid var(--cm-control-border, #cccccc);
+  border-radius: var(--cm-control-radius, 6px);
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
+}
+:where(.cm-root:not([data-unstyled])) .cm-zoom-button {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--cm-control-color, #111111);
+  font: inherit;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+:where(.cm-root:not([data-unstyled])) .cm-zoom-button + .cm-zoom-button {
+  border-top: 1px solid var(--cm-control-border, #cccccc);
+}
+:where(.cm-root:not([data-unstyled])) .cm-zoom-button:hover:not(:disabled) {
+  background: var( --cm-control-hover-bg, color-mix(in srgb, var(--cm-control-bg, #ffffff), var(--cm-control-color, #111111) 10%) );
+}
+:where(.cm-root:not([data-unstyled])) .cm-zoom-button:focus-visible {
+  outline: var(--cm-focus-ring-width, 2px) solid var(--cm-focus-ring, #0b5fff);
+  outline-offset: -2px;
+}
+:where(.cm-root:not([data-unstyled])) .cm-zoom-button:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+:where(.cm-root:not([data-unstyled])) .cm-gesture-hint {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 8px 14px;
+  border-radius: 6px;
+  background: var(--cm-hint-bg, rgb(17 24 39 / 0.85));
+  color: var(--cm-hint-color, #ffffff);
+  pointer-events: none;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 200ms;
+}
+:where(.cm-root:not([data-unstyled])) .cm-gesture-hint[data-visible] {
+  opacity: 1;
+}
+@media (prefers-reduced-motion: reduce) {
+  :where(.cm-root:not([data-unstyled])) .cm-gesture-hint {
+    transition: none;
+  }
+}
+:where(.cm-root:not([data-unstyled]))[data-dim=selection][data-has-selection] .cm-regions,
+:where(.cm-root:not([data-unstyled]))[data-dim=hover-and-selection][data-has-selection] .cm-regions,
+:where(.cm-root:not([data-unstyled]))[data-dim=hover-and-selection] .cm-svg:has(path[data-selection=hover]) .cm-regions {
+  opacity: var(--cm-dim-opacity, 0.45);
+}
+:where(.cm-root:not([data-unstyled])) .cm-regions {
+  transition: opacity var(--cm-transition-duration, 250ms);
+}
+:where(.cm-root:not([data-unstyled])) .cm-skeleton {
+  width: 100%;
+  border-radius: 6px;
+  background:
+    linear-gradient(
+      90deg,
+      var(--cm-skeleton-color, #e5e5e5) 25%,
+      color-mix(in srgb, var(--cm-skeleton-color, #e5e5e5), #ffffff 55%) 50%,
+      var(--cm-skeleton-color, #e5e5e5) 75%);
+  background-size: 200% 100%;
+  animation: cm-shimmer 1.5s linear infinite;
+}
+:where(.cm-root:not([data-unstyled])) .cm-error {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  background: var(--cm-skeleton-color, #e5e5e5);
+  border-radius: 6px;
+}
+:where(.cm-root:not([data-unstyled]))[data-loading] .cm-regions {
+  animation: cm-pulse 1.5s ease-in-out infinite;
+}
+@keyframes cm-shimmer {
+  to {
+    background-position: -200% 0;
+  }
+}
+@keyframes cm-pulse {
+  50% {
+    opacity: 0.55;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :where(.cm-root:not([data-unstyled])) .cm-skeleton,
+  :where(.cm-root:not([data-unstyled]))[data-loading] .cm-regions {
+    animation: none;
+  }
+}
+:where(.cm-root:not([data-unstyled])) .cm-legend__title {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+:where(.cm-root:not([data-unstyled])) .cm-legend__items {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+:where(.cm-root:not([data-unstyled])) .cm-legend__item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+:where(.cm-root:not([data-unstyled])) .cm-legend__swatch {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+}
+:where(.cm-root:not([data-unstyled])) .cm-legend__count {
+  opacity: 0.6;
+}
+:where(.cm-root:not([data-unstyled])) .cm-legend__gradient {
+  width: 160px;
+  height: 10px;
+}
+:where(.cm-root:not([data-unstyled])) .cm-legend__range {
+  display: flex;
+  justify-content: space-between;
+  width: 160px;
+}
+:where(.cm-root:not([data-unstyled])) .cm-legend__sizes {
+  list-style: none;
+  margin: 6px 0 0;
+  padding: 0;
+}
+:where(.cm-root:not([data-unstyled])) .cm-legend__size {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+:where(.cm-root:not([data-unstyled])) .cm-legend__circle circle {
+  fill: none;
+  stroke: currentColor;
+}
+:where(.cm-root:not([data-unstyled])) .cm-tooltip--default {
+  background: var(--cm-tooltip-bg, #ffffff);
+  color: var(--cm-tooltip-color, #111111);
+  border: 1px solid var(--cm-tooltip-border, #cccccc);
+  border-radius: var(--cm-tooltip-radius, 4px);
+  box-shadow: var(--cm-tooltip-shadow, none);
+  padding: 4px 8px;
+  white-space: nowrap;
+}
+:where(.cm-root:not([data-unstyled])) .cm-layer[data-role=context] .cm-context-region {
+  fill: var(--cm-context-fill, #e5e5e5);
+  stroke: var(--cm-context-border-color, #ffffff);
+  stroke-width: 0.5px;
+  vector-effect: non-scaling-stroke;
+  transition: fill var(--cm-transition-duration, 250ms);
+}
+:where(.cm-root:not([data-unstyled])) .cm-layer[data-role=context] .cm-context-region[data-focus] {
+  stroke: none;
+}
+:where(.cm-root:not([data-unstyled])) .cm-layer[data-role=context] .cm-context-region[data-drillable] {
+  cursor: zoom-in;
+}
+:where(.cm-root:not([data-unstyled])) .cm-layer[data-role=context] .cm-context-region[data-drillable]:hover {
+  fill: var( --cm-context-hover-fill, color-mix(in srgb, var(--cm-context-fill, #e5e5e5), var(--cm-hover-stroke, #000000) 12%) );
+}
+:where(.cm-root:not([data-unstyled]))[data-interacting] .cm-layer[data-role=context] {
+  pointer-events: none;
+}
+:where(.cm-root:not([data-unstyled])) .cm-layer[data-role=exiting] .cm-context-region {
+  fill: var(--cm-context-fill, #e5e5e5);
+  stroke: var(--cm-context-border-color, #ffffff);
+  stroke-width: 0.5px;
+  vector-effect: non-scaling-stroke;
+}
+:where(.cm-root:not([data-unstyled])) .cm-layer[data-role=exiting] {
+  animation: cm-fade-out var(--cm-reveal-duration, 200ms) ease-out both;
+}
+:where(.cm-root:not([data-unstyled]))[data-drill-phase=flying] .cm-region:not([data-drill-target]),
+:where(.cm-root:not([data-unstyled]))[data-drill-phase=loading] .cm-region:not([data-drill-target]) {
+  opacity: var(--cm-drill-dim-opacity, 0.35);
+  transition: opacity var(--cm-reveal-duration, 200ms);
+}
+:where(.cm-root:not([data-unstyled]))[data-drill-phase=loading] .cm-region[data-drill-target] {
+  animation: cm-breathe 1.2s ease-in-out infinite alternate;
+}
+:where(.cm-root:not([data-unstyled]))[data-drill-phase=revealing] .cm-regions .cm-region {
+  animation: cm-fade-in var(--cm-reveal-duration, 200ms) ease-out both;
+  animation-delay: calc(var(--cm-wave, 0) * var(--cm-reveal-stagger, 250ms));
+}
+@keyframes cm-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes cm-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes cm-breathe {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.55;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :where(.cm-root:not([data-unstyled]))[data-drill-phase=revealing] .cm-regions .cm-region,
+  :where(.cm-root:not([data-unstyled]))[data-drill-phase=loading] .cm-region[data-drill-target],
+  :where(.cm-root:not([data-unstyled])) .cm-layer[data-role=exiting] {
+    animation: none;
+  }
+  :where(.cm-root:not([data-unstyled])) .cm-layer[data-role=exiting] {
+    display: none;
+  }
+}
+:where(.cm-root:not([data-unstyled])) .cm-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  max-width: calc(100% - 24px);
+  padding: 2px 6px;
+  border: 1px solid var(--cm-control-border, #cccccc);
+  border-radius: var(--cm-control-radius, 6px);
+  background: var(--cm-control-bg, #ffffff);
+  color: var(--cm-control-color, #111111);
+  font-family: var(--cm-font-family, inherit);
+  font-size: var(--cm-font-size, 12px);
+}
+:where(.cm-root:not([data-unstyled])) .cm-breadcrumb__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:where(.cm-root:not([data-unstyled])) .cm-breadcrumb__item + .cm-breadcrumb__item::before {
+  content: "\203a";
+  padding: 0 4px;
+  opacity: 0.55;
+}
+:where(.cm-root:not([data-unstyled])) .cm-breadcrumb button {
+  padding: 2px 4px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+:where(.cm-root:not([data-unstyled])) .cm-breadcrumb button:hover {
+  background: var( --cm-control-hover-bg, color-mix(in srgb, var(--cm-control-bg, #ffffff), var(--cm-control-color, #111111) 10%) );
+}
+:where(.cm-root:not([data-unstyled])) .cm-breadcrumb button:focus-visible {
+  outline: var(--cm-focus-ring-width, 2px) solid var(--cm-focus-ring, #0b5fff);
+}
+:where(.cm-root:not([data-unstyled])) .cm-breadcrumb__current {
+  padding: 2px 4px;
+  font-weight: 600;
+}
+:where(.cm-root:not([data-unstyled])) .cm-tooltip__hint {
+  margin-top: 2px;
+  opacity: 0.7;
+  font-size: 0.9em;
+}
+:where(.cm-root:not([data-unstyled]))[data-highlight-class="0"] .cm-region:not([data-class="0"]),
+:where(.cm-root:not([data-unstyled]))[data-highlight-class="1"] .cm-region:not([data-class="1"]),
+:where(.cm-root:not([data-unstyled]))[data-highlight-class="2"] .cm-region:not([data-class="2"]),
+:where(.cm-root:not([data-unstyled]))[data-highlight-class="3"] .cm-region:not([data-class="3"]),
+:where(.cm-root:not([data-unstyled]))[data-highlight-class="4"] .cm-region:not([data-class="4"]),
+:where(.cm-root:not([data-unstyled]))[data-highlight-class="5"] .cm-region:not([data-class="5"]),
+:where(.cm-root:not([data-unstyled]))[data-highlight-class="6"] .cm-region:not([data-class="6"]),
+:where(.cm-root:not([data-unstyled]))[data-highlight-class="7"] .cm-region:not([data-class="7"]),
+:where(.cm-root:not([data-unstyled]))[data-highlight-class="8"] .cm-region:not([data-class="8"]),
+:where(.cm-root:not([data-unstyled]))[data-highlight-class="9"] .cm-region:not([data-class="9"]),
+:where(.cm-root:not([data-unstyled]))[data-highlight-class="10"] .cm-region:not([data-class="10"]),
+:where(.cm-root:not([data-unstyled]))[data-highlight-class="11"] .cm-region:not([data-class="11"]),
+:where(.cm-root:not([data-unstyled]))[data-highlight-class=empty] .cm-region:not([data-class=empty]) {
+  opacity: var(--cm-dim-opacity, 0.45);
+}
+:where(.cm-root:not([data-unstyled])) .cm-legend [data-class] {
+  cursor: default;
+}
+:where(.cm-root:not([data-unstyled])) .cm-legend__bar-wrap {
+  width: 280px;
+}
+:where(.cm-root:not([data-unstyled])) .cm-legend__bar {
+  display: flex;
+  height: 10px;
+  border-radius: 2px;
+  overflow: hidden;
+}
+:where(.cm-root:not([data-unstyled])) .cm-legend__segment {
+  flex: 1 1 0;
+}
+:where(.cm-root:not([data-unstyled])) .cm-legend__ticks {
+  position: relative;
+  height: 1.4em;
+  margin-bottom: 4px;
+  font-size: 0.9em;
+}
+:where(.cm-root:not([data-unstyled])) .cm-legend__tick {
+  position: absolute;
+  top: 2px;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  opacity: 0.75;
+}
+:where(.cm-root:not([data-unstyled])) .cm-legend__tick:first-child {
+  transform: none;
+}
+:where(.cm-root:not([data-unstyled])) .cm-legend__tick:last-child {
+  transform: translateX(-100%);
+}
+:where(.cm-root:not([data-unstyled])) .cm-legend__swatch[data-pattern=hatch] {
+  background-image:
+    repeating-linear-gradient(
+      45deg,
+      var(--cm-pattern-color, color-mix(in srgb, var(--cm-label-color, #111111) 45%, transparent)) 0 1.5px,
+      transparent 1.5px 4px);
+}
+:where(.cm-root:not([data-unstyled])) .cm-legend__swatch[data-pattern=dots] {
+  background-image: radial-gradient(var(--cm-pattern-color, color-mix(in srgb, var(--cm-label-color, #111111) 45%, transparent)) 1px, transparent 1.2px);
+  background-size: 4px 4px;
+}
+/*# sourceMappingURL=styles.css.map */

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/package.json

@@ -1,6 +1,141 @@
 {
   "name": "choropleth-kit",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Choropleth (thematic) maps for React: zoom, drill-down, legends, theming. Three API levels, d3-geo under the hood.",
+  "author": "Manuel Martín",
+  "keywords": [
+    "choropleth",
+    "map",
+    "react",
+    "svg",
+    "d3",
+    "d3-geo",
+    "topojson",
+    "geojson",
+    "thematic-map",
+    "drill-down",
+    "data-visualization"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Manoplo/choropleth-kit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Manoplo/choropleth-kit/issues"
+  },
+  "homepage": "https://github.com/Manoplo/choropleth-kit#readme",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "!dist/**/*.map",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "import": "./dist/core.js"
+    },
+    "./geo": {
+      "types": "./dist/geo.d.ts",
+      "import": "./dist/geo.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "core": [
+        "./dist/core.d.ts"
+      ],
+      "geo": [
+        "./dist/geo.d.ts"
+      ]
+    }
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@size-limit/esbuild": "^14.3.0",
+    "@size-limit/file": "^14.3.0",
+    "@storybook/react-vite": "^10.6.5",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.8",
+    "@types/d3-ease": "^3.0.2",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-selection": "^3.0.12",
+    "@types/d3-transition": "^3.0.9",
+    "@types/d3-zoom": "^3.0.9",
+    "@types/node": "^26.6.6",
+    "@types/polylabel": "^2.0.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@types/topojson-client": "^3.1.5",
+    "@vitejs/plugin-react": "^6.2.1",
+    "@vitest/coverage-v8": "^5.1.0",
+    "i18n-iso-countries": "^7.14.0",
+    "jsdom": "^27.0.1",
+    "oxlint": "^1.91.0",
+    "prettier": "^3.9.10",
+    "publint": "^0.3.25",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "size-limit": "^14.3.0",
+    "storybook": "^10.6.5",
+    "tsup": "^8.5.1",
+    "typescript": "~5.9.3",
+    "vite": "^8.3.5",
+    "vitest": "^5.1.0",
+    "world-atlas": "^2.0.2"
+  },
+  "dependencies": {
+    "@types/d3-geo": "^3.1.1",
+    "@types/d3-interpolate": "^3.0.4",
+    "@types/d3-scale-chromatic": "^3.1.0",
+    "@types/geojson": "^7946.0.16",
+    "@types/topojson-specification": "^1.0.5",
+    "d3-ease": "^3.0.2",
+    "d3-geo": "^3.1.2",
+    "d3-interpolate": "^3.0.2",
+    "d3-scale": "^4.0.3",
+    "d3-scale-chromatic": "^3.1.1",
+    "d3-selection": "^3.0.1",
+    "d3-transition": "^3.0.2",
+    "d3-zoom": "^3.0.1",
+    "polylabel": "^2.1.0",
+    "topojson-client": "^3.1.0"
+  },
+  "scripts": {
+    "build": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint .",
+    "lint:fix": "oxlint --fix .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "size": "pnpm build && size-limit",
+    "smoke:package": "node scripts/smoke-package.mjs",
+    "check:package": "publint && attw --pack . --ignore-rules cjs-resolves-to-esm no-resolution --profile esm-only",
+    "verify": "pnpm typecheck && pnpm lint && pnpm format:check && pnpm test && pnpm build && size-limit && pnpm check:package"
+  }
 }