@ktnpm_devops/react-component 0.12.1 → 0.13.1

package/dist/index99.js

@@ -1,60 +1,95 @@
-const root = "krc-root--s1oD";
-const trigger = "krc-trigger-WMlNa";
-const active = "krc-active-O65lj";
-const triggerContent = "krc-triggerContent-JipmE";
-const chevron = "krc-chevron-J2Zsy";
-const label = "krc-label-lZlV-";
-const value = "krc-value-HsQrC";
-const clear = "krc-clear-bsi5j";
-const panel = "krc-panel--0odx";
-const searchContainer = "krc-searchContainer-WRS-U";
-const search = "krc-search-Dh3pY";
-const list = "krc-list-1RUtr";
-const noResults = "krc-noResults-Hin1U";
-const option = "krc-option-0mFGi";
-const focused = "krc-focused-0-7tE";
-const selected = "krc-selected-1zIqI";
-const optionLabel = "krc-optionLabel-pj-hL";
-const optionCount = "krc-optionCount-rVlCP";
-const styles = {
-  root,
-  trigger,
-  active,
-  triggerContent,
-  chevron,
-  label,
-  value,
-  clear,
-  panel,
-  searchContainer,
-  search,
-  list,
-  noResults,
-  option,
-  focused,
-  selected,
-  optionLabel,
-  optionCount
+import { CHART_COLORS, SCATTER } from "./index59.js";
+const AXIS_NAME_GAP = { X: 28, Y: 38 };
+const GRID_MARGIN = {
+  BASE: 8,
+  TOP: 16,
+  RIGHT: 16,
+  X_NAME: 23,
+  Y_NAME: 34,
+  LEGEND: 30
+};
+const UNCATEGORISED_SERIES = "Points";
+const escapeHtml = (value) => value.replace(/[&<>"]/g, (char) => `&#${char.charCodeAt(0)};`);
+const symbolSizeFor = (weight, minWeight, maxWeight) => {
+  if (maxWeight === minWeight) return SCATTER.BASE_SYMBOL_SIZE;
+  const ratio = Math.sqrt((weight - minWeight) / (maxWeight - minWeight));
+  return SCATTER.MIN_SYMBOL_SIZE + (SCATTER.MAX_SYMBOL_SIZE - SCATTER.MIN_SYMBOL_SIZE) * ratio;
+};
+const groupByCategory = (points) => {
+  const groups = /* @__PURE__ */ new Map();
+  for (const folded of points) {
+    const key = folded.point.category ?? UNCATEGORISED_SERIES;
+    const group = groups.get(key);
+    if (group) group.push(folded);
+    else groups.set(key, [folded]);
+  }
+  return groups;
+};
+const toDataItem = (folded, sizeOf) => ({
+  name: folded.point.label,
+  value: [folded.point.x, folded.point.y, folded.count, folded.index],
+  symbolSize: sizeOf(folded.point.weight)
+});
+const buildTooltipFormatter = (config) => (params) => {
+  const { name, seriesName, value, marker } = params;
+  const [x, y, count] = value;
+  const lines = [`${marker} ${escapeHtml(name)}`];
+  lines.push(`${escapeHtml(config.xLabel ?? "x")}: ${x}`);
+  lines.push(`${escapeHtml(config.yLabel ?? "y")}: ${y}`);
+  if (seriesName !== UNCATEGORISED_SERIES) {
+    lines.push(`${escapeHtml(config.categoryLabel ?? "Category")}: ${escapeHtml(seriesName)}`);
+  }
+  if (count > 1) lines.push(`${count} points here`);
+  return lines.join("<br/>");
+};
+const buildScatterOption = (points, config) => {
+  const weights = points.map((p) => p.point.weight).filter((w) => w != null);
+  const minWeight = weights.length > 0 ? Math.min(...weights) : 0;
+  const maxWeight = weights.length > 0 ? Math.max(...weights) : 0;
+  const sizeOf = (weight) => weights.length === 0 ? SCATTER.BASE_SYMBOL_SIZE : symbolSizeFor(weight ?? minWeight, minWeight, maxWeight);
+  const groups = groupByCategory(points);
+  const series = [...groups.entries()].map(([category, group], i) => ({
+    name: category,
+    type: "scatter",
+    data: group.map((folded) => toDataItem(folded, sizeOf)),
+    itemStyle: { color: CHART_COLORS[i % CHART_COLORS.length], opacity: 0.85 },
+    emphasis: { focus: "series" }
+  }));
+  return {
+    tooltip: { trigger: "item", formatter: buildTooltipFormatter(config) },
+    legend: config.showLegend ? { bottom: 0, type: "scroll" } : void 0,
+    grid: {
+      left: config.yLabel ? GRID_MARGIN.Y_NAME : GRID_MARGIN.BASE,
+      right: GRID_MARGIN.RIGHT,
+      top: GRID_MARGIN.TOP,
+      // Room for the x axis name and the legend, each only when drawn.
+      bottom: GRID_MARGIN.BASE + (config.xLabel ? GRID_MARGIN.X_NAME : 0) + (config.showLegend ? GRID_MARGIN.LEGEND : 0),
+      containLabel: true
+    },
+    xAxis: {
+      type: "value",
+      name: config.xLabel,
+      nameLocation: "middle",
+      nameGap: AXIS_NAME_GAP.X,
+      scale: true
+    },
+    yAxis: {
+      type: "value",
+      name: config.yLabel,
+      nameLocation: "middle",
+      // Without this the y name is drawn horizontally and eats the plot's width.
+      nameRotate: 90,
+      nameGap: AXIS_NAME_GAP.Y,
+      scale: true
+    },
+    dataZoom: config.enableDataZoom ? [
+      { type: "inside", xAxisIndex: 0 },
+      { type: "inside", yAxisIndex: 0 }
+    ] : void 0,
+    series
+  };
 };
 export {
-  active,
-  chevron,
-  clear,
-  styles as default,
-  focused,
-  label,
-  list,
-  noResults,
-  option,
-  optionCount,
-  optionLabel,
-  panel,
-  root,
-  search,
-  searchContainer,
-  selected,
-  trigger,
-  triggerContent,
-  value
+  buildScatterOption
 };
 //# sourceMappingURL=index99.js.map

package/dist/index99.js.map

@@ -1 +1 @@
-{"version":3,"file":"index99.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index99.js","sources":["../src/charts/ScatterChartCard/buildScatterOption.ts"],"sourcesContent":["import type { FoldedPoint } from './foldPoints';\nimport { CHART_COLORS, SCATTER } from '../../constants';\n\n/** Distance from each axis line to its name (px — echarts canvas attributes, not CSS). */\nconst AXIS_NAME_GAP = { X: 28, Y: 38 } as const;\n\n/**\n * Grid margins (px). `containLabel` reserves room for the tick *labels* only, so\n * the axis names and the legend need their own margin or they get clipped at the\n * canvas edge. Each margin must exceed its `AXIS_NAME_GAP` by a text height.\n */\nconst GRID_MARGIN = {\n  BASE: 8,\n  TOP: 16,\n  RIGHT: 16,\n  X_NAME: 23,\n  Y_NAME: 34,\n  LEGEND: 30,\n} as const;\n\n/** Series name used when no point carries a category. */\nconst UNCATEGORISED_SERIES = 'Points';\n\nexport interface ScatterOptionConfig {\n  xLabel?: string;\n  yLabel?: string;\n  categoryLabel?: string;\n  showLegend: boolean;\n  enableDataZoom: boolean;\n}\n\n/** Point labels come from consumer data and land in the tooltip's HTML. */\nconst escapeHtml = (value: string) =>\n  value.replace(/[&<>\"]/g, (char) => `&#${char.charCodeAt(0)};`);\n\n/**\n * Map a weight onto a symbol diameter. The square root keeps the mark *area*\n * proportional to the weight, which is how a reader compares bubble sizes.\n * A dataset whose weights are all equal carries no size information, so it\n * renders at the base size rather than all-maximum.\n */\nconst symbolSizeFor = (weight: number, minWeight: number, maxWeight: number) => {\n  if (maxWeight === minWeight) return SCATTER.BASE_SYMBOL_SIZE;\n\n  const ratio = Math.sqrt((weight - minWeight) / (maxWeight - minWeight));\n  return SCATTER.MIN_SYMBOL_SIZE + (SCATTER.MAX_SYMBOL_SIZE - SCATTER.MIN_SYMBOL_SIZE) * ratio;\n};\n\n/** Group marks by category, preserving first-appearance order. */\nconst groupByCategory = (points: FoldedPoint[]) => {\n  const groups = new Map<string, FoldedPoint[]>();\n\n  for (const folded of points) {\n    const key = folded.point.category ?? UNCATEGORISED_SERIES;\n    const group = groups.get(key);\n    if (group) group.push(folded);\n    else groups.set(key, [folded]);\n  }\n\n  return groups;\n};\n\n/** `[x, y, count, sourceIndex]` — dims beyond the axes carry the tooltip/click metadata. */\nconst toDataItem = (folded: FoldedPoint, sizeOf: (weight: number | null | undefined) => number) => ({\n  name: folded.point.label,\n  value: [folded.point.x, folded.point.y, folded.count, folded.index],\n  symbolSize: sizeOf(folded.point.weight),\n});\n\nconst buildTooltipFormatter = (config: ScatterOptionConfig) => (params: unknown) => {\n  const { name, seriesName, value, marker } = params as {\n    name: string;\n    seriesName: string;\n    value: [number, number, number, number];\n    marker: string;\n  };\n  const [x, y, count] = value;\n\n  const lines = [`${marker} ${escapeHtml(name)}`];\n  lines.push(`${escapeHtml(config.xLabel ?? 'x')}: ${x}`);\n  lines.push(`${escapeHtml(config.yLabel ?? 'y')}: ${y}`);\n\n  if (seriesName !== UNCATEGORISED_SERIES) {\n    lines.push(`${escapeHtml(config.categoryLabel ?? 'Category')}: ${escapeHtml(seriesName)}`);\n  }\n\n  if (count > 1) lines.push(`${count} points here`);\n\n  return lines.join('<br/>');\n};\n\nexport const buildScatterOption = (points: FoldedPoint[], config: ScatterOptionConfig) => {\n  const weights = points.map((p) => p.point.weight).filter((w): w is number => w != null);\n  const minWeight = weights.length > 0 ? Math.min(...weights) : 0;\n  const maxWeight = weights.length > 0 ? Math.max(...weights) : 0;\n\n  // An absent weight sits at the bottom of the scale once any weight is present,\n  // and yields the base size when none is.\n  const sizeOf = (weight: number | null | undefined) =>\n    weights.length === 0\n      ? SCATTER.BASE_SYMBOL_SIZE\n      : symbolSizeFor(weight ?? minWeight, minWeight, maxWeight);\n\n  const groups = groupByCategory(points);\n  const series = [...groups.entries()].map(([category, group], i) => ({\n    name: category,\n    type: 'scatter' as const,\n    data: group.map((folded) => toDataItem(folded, sizeOf)),\n    itemStyle: { color: CHART_COLORS[i % CHART_COLORS.length], opacity: 0.85 },\n    emphasis: { focus: 'series' as const },\n  }));\n\n  return {\n    tooltip: { trigger: 'item' as const, formatter: buildTooltipFormatter(config) },\n    legend: config.showLegend ? { bottom: 0, type: 'scroll' as const } : undefined,\n    grid: {\n      left: config.yLabel ? GRID_MARGIN.Y_NAME : GRID_MARGIN.BASE,\n      right: GRID_MARGIN.RIGHT,\n      top: GRID_MARGIN.TOP,\n      // Room for the x axis name and the legend, each only when drawn.\n      bottom:\n        GRID_MARGIN.BASE +\n        (config.xLabel ? GRID_MARGIN.X_NAME : 0) +\n        (config.showLegend ? GRID_MARGIN.LEGEND : 0),\n      containLabel: true,\n    },\n    xAxis: {\n      type: 'value' as const,\n      name: config.xLabel,\n      nameLocation: 'middle' as const,\n      nameGap: AXIS_NAME_GAP.X,\n      scale: true,\n    },\n    yAxis: {\n      type: 'value' as const,\n      name: config.yLabel,\n      nameLocation: 'middle' as const,\n      // Without this the y name is drawn horizontally and eats the plot's width.\n      nameRotate: 90,\n      nameGap: AXIS_NAME_GAP.Y,\n      scale: true,\n    },\n    dataZoom: config.enableDataZoom\n      ? [\n          { type: 'inside' as const, xAxisIndex: 0 },\n          { type: 'inside' as const, yAxisIndex: 0 },\n        ]\n      : undefined,\n    series,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/style.css

@@ -1580,6 +1580,213 @@
 .krc-input--QI2U:focus {
   border-color: var(--accent-color);
 }
+/* Column flex so the map takes the height the card is given: the container grows
+   when the consumer sizes the card, and falls back to its own height when the
+   card is left to size itself. */
+.krc-root-m-WU1 {
+  display: flex;
+  flex-direction: column;
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-subtle);
+  overflow: hidden;
+}
+
+.krc-header-j8Yft {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: var(--border-width) solid var(--border-color);
+}
+
+.krc-title-10Tak {
+  margin: 0;
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.krc-headerActions-rh6MO {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.krc-toolbar-6bfl- {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-xs) var(--spacing-md);
+  border-bottom: var(--border-width) solid var(--border-color);
+}
+
+.krc-warning-dISP1 {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-md);
+  font-size: var(--font-size-xs);
+  color: var(--warning-color);
+  background: var(--warning-color-soft);
+  border-bottom: var(--border-width) solid var(--border-color);
+}
+
+/* An explicit height (not just a minimum) is what lets Leaflet resolve its own
+   `height: 100%`; `flex: 1` then lets it take any extra space the card was given. */
+.krc-mapContainer-MKTII {
+  position: relative;
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  height: 21.25rem;
+  min-height: 21.25rem;
+}
+
+.krc-map-o-Ldd {
+  width: 100%;
+  height: 100%;
+}
+
+.krc-loading-LE2tH,
+.krc-empty-JAoUd {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: center;
+  min-height: 21.25rem;
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.krc-error-FkrvS {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  min-height: 21.25rem;
+  color: var(--danger-color);
+  font-size: var(--font-size-sm);
+}
+
+.krc-retryButton-BKn73 {
+  padding: var(--spacing-xs) var(--spacing-md);
+  font-size: var(--font-size-sm);
+  color: var(--accent-color-contrast);
+  background: var(--accent-color);
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.krc-retryButton-BKn73:hover {
+  background: var(--accent-color-strong);
+}
+
+.krc-retryButton-BKn73:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+/* The legend sits inside Leaflet's control pane (see MapLegend), so it inherits
+   that stacking context and needs no z-index of its own. */
+.krc-legend-c-RjE {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-soft);
+}
+
+.krc-legendTitle-j4e4- {
+  margin: 0 0 var(--spacing-2xs);
+  font-size: var(--font-size-2xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-tertiary);
+}
+
+.krc-legendList-jRukT {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.krc-legendItem-X2jYA {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+}
+
+.krc-legendSwatch-OTMwM {
+  flex: 0 0 auto;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: var(--radius-pill);
+}
+
+/* Narrow containers (a chat dock is 20–47.5rem wide): the map must not push the
+   surrounding content out of view. */
+.krc-compact-Ha6w2 .krc-mapContainer-MKTII,
+.krc-compact-Ha6w2 .krc-loading-LE2tH,
+.krc-compact-Ha6w2 .krc-empty-JAoUd,
+.krc-compact-Ha6w2 .krc-error-FkrvS {
+  min-height: 13.75rem;
+}
+
+.krc-compact-Ha6w2 .krc-mapContainer-MKTII {
+  height: 13.75rem;
+}
+
+.krc-compact-Ha6w2 .krc-header-j8Yft {
+  padding: var(--spacing-xs) var(--spacing-sm);
+}
+
+.krc-compact-Ha6w2 .krc-title-10Tak {
+  font-size: var(--font-size-sm);
+}
+
+/* Leaflet paints its own light-grey backdrop and near-black attribution text,
+   which read as a hole in a dark surface while the tiles load. Scoped to this
+   component and limited to colour — no layout of Leaflet's is touched. */
+.krc-root-m-WU1 .leaflet-container {
+  background: var(--surface-alt);
+  font-family: inherit;
+}
+
+.krc-root-m-WU1 .leaflet-control-attribution {
+  color: var(--text-tertiary);
+  background: var(--surface-color);
+  font-size: var(--font-size-2xs);
+}
+
+.krc-root-m-WU1 .leaflet-control-attribution a {
+  color: var(--text-secondary);
+}
+
+.krc-srOnly-KDwnO {
+  position: absolute;
+  width: var(--border-width);
+  height: var(--border-width);
+  margin: calc(-1 * var(--border-width));
+  padding: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}
 .krc-wrap-JRsc1 {
   overflow: auto;
   border: var(--border-width) solid var(--border-color);

package/dist/types/geo.types.d.ts

@@ -0,0 +1,45 @@
+/** A single plottable point on a map. The geographic mirror of `ScatterPoint`. */
+export interface GeoPoint {
+    /** Stable identity: React key and selection value. */
+    id: string;
+    latitude: number;
+    longitude: number;
+    /** Tooltip text and accessible-listing label — what makes a point actionable. */
+    label: string;
+    /** Colour and legend dimension (zone, band, operator). */
+    category?: string | null;
+    /** Relative weight mapped to the marker radius (area ∝ weight). */
+    weight?: number | null;
+    /** Second tooltip line. */
+    detail?: string | null;
+}
+/** Point selection payload for map interaction callbacks. */
+export interface GeoPointSelection {
+    point: GeoPoint;
+    /** Index in the original `points` array, not in the normalised one. */
+    index: number;
+}
+/** What the map declares about what it actually drew. */
+export interface GeoRenderInfo {
+    /** Points received in `points`. */
+    total: number;
+    /** Markers drawn. */
+    drawn: number;
+    /** Points discarded for missing or out-of-range coordinates. */
+    skipped: number;
+    /** Points discarded by the `maxPoints` cap. */
+    dropped: number;
+}
+/** Basemap choice; `auto` follows the document theme. */
+export type GeoBasemap = 'light' | 'dark' | 'auto';
+/** A caller-supplied tile source, replacing the built-in basemaps. */
+export interface GeoTileLayer {
+    url: string;
+    attribution: string;
+}
+/** One swatch of the map legend. */
+export interface GeoLegendItem {
+    label: string;
+    color: string;
+}
+//# sourceMappingURL=geo.types.d.ts.map

package/dist/types/geo.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geo.types.d.ts","sourceRoot":"","sources":["../../src/types/geo.types.ts"],"names":[],"mappings":"AAAA,kFAAkF;AAClF,MAAM,WAAW,QAAQ;IACvB,sDAAsD;IACtD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB;AAED,6DAA6D;AAC7D,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,QAAQ,CAAC;IAChB,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;CACf;AAED,yDAAyD;AACzD,MAAM,WAAW,aAAa;IAC5B,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,OAAO,EAAE,MAAM,CAAC;IAChB,+CAA+C;IAC/C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,yDAAyD;AACzD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAEnD,sEAAsE;AACtE,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,oCAAoC;AACpC,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf"}

package/dist/types/index.d.ts

@@ -50,5 +50,6 @@ export interface TemporalTrendPoint {
     series: Record<string, number>;
 }
 export type { TimeRangeOption, ChartSeriesPoint, SankeyFlowRow as SankeyFlowRowV2, CounterTimeseriesPoint as CounterTimeseriesPointV2, DistinctCounterRow, ChartAnnotation as ChartAnnotationV2, ReferenceLine, EChartsInstance, ChartCategorySelection, SankeyColorMetric, SankeyWidthMetric, ChartSelectOption, ChartCardBaseProps, ScatterPoint, ScatterPointSelection, ScatterRenderInfo, } from './chart.types';
+export type { GeoPoint, GeoPointSelection, GeoRenderInfo, GeoBasemap, GeoTileLayer, GeoLegendItem, } from './geo.types';
 export type { NavItemConfig, SidebarSectionConfig, } from './layout.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,MAAM;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;CACV;AAED,gDAAgD;AAChD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,gCAAgC;AAChC,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,0DAA0D;AAC1D,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,0CAA0C;AAC1C,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,qCAAqC;AACrC,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,4CAA4C;AAC5C,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,iCAAiC;AACjC,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AAED,iCAAiC;AACjC,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AAGD,YAAY,EACV,eAAe,EACf,gBAAgB,EAChB,aAAa,IAAI,eAAe,EAChC,sBAAsB,IAAI,wBAAwB,EAClD,kBAAkB,EAClB,eAAe,IAAI,iBAAiB,EACpC,aAAa,EACb,eAAe,EACf,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,YAAY,EACZ,qBAAqB,EACrB,iBAAiB,GAClB,MAAM,eAAe,CAAC;AAGvB,YAAY,EACV,aAAa,EACb,oBAAoB,GACrB,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,MAAM;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;CACV;AAED,gDAAgD;AAChD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,gCAAgC;AAChC,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,0DAA0D;AAC1D,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,0CAA0C;AAC1C,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,qCAAqC;AACrC,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,4CAA4C;AAC5C,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,iCAAiC;AACjC,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AAED,iCAAiC;AACjC,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AAGD,YAAY,EACV,eAAe,EACf,gBAAgB,EAChB,aAAa,IAAI,eAAe,EAChC,sBAAsB,IAAI,wBAAwB,EAClD,kBAAkB,EAClB,eAAe,IAAI,iBAAiB,EACpC,aAAa,EACb,eAAe,EACf,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,YAAY,EACZ,qBAAqB,EACrB,iBAAiB,GAClB,MAAM,eAAe,CAAC;AAGvB,YAAY,EACV,QAAQ,EACR,iBAAiB,EACjB,aAAa,EACb,UAAU,EACV,YAAY,EACZ,aAAa,GACd,MAAM,aAAa,CAAC;AAGrB,YAAY,EACV,aAAa,EACb,oBAAoB,GACrB,MAAM,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktnpm_devops/react-component",
-  "version": "0.12.1",
+  "version": "0.13.1",
   "description": "Kenmei Technologies React Component Library",
   "type": "module",
   "license": "MIT",
@@ -37,8 +37,10 @@
     "LICENSE"
   ],
   "peerDependencies": {
+    "leaflet": "^1.9.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-leaflet": "^4.0.0 || ^5.0.0"
   },
   "peerDependenciesMeta": {
     "echarts": {
@@ -50,8 +52,14 @@
     "@tanstack/react-table": {
       "optional": true
     },
+    "leaflet": {
+      "optional": true
+    },
     "lucide-react": {
       "optional": true
+    },
+    "react-leaflet": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -68,6 +76,7 @@
     "@testing-library/jest-dom": "^6.4.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.0",
+    "@types/leaflet": "^1.9.22",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
@@ -81,10 +90,12 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.8.0",
     "happy-dom": "^14.0.0",
+    "leaflet": "^1.9.4",
     "lucide-react": "^0.441.0",
     "prettier": "^3.2.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
+    "react-leaflet": "^5.0.0",
     "storybook": "^8.4.0",
     "typescript": "^5.4.4",
     "vite": "^5.2.8",
@@ -99,6 +110,9 @@
     "type": "git",
     "url": "https://github.com/kenmeitechnologies/react-component.git"
   },
+  "engines": {
+    "node": ">=22"
+  },
   "scripts": {
     "dev": "storybook dev -p 6006",
     "build": "vite build && pnpm build:css",