@ktnpm_devops/react-component 0.4.0 → 0.5.0

package/dist/index43.cjs

@@ -1,9 +1,220 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "krc-root-pJYpn";
-const styles = {
-  root
-};
-exports.default = styles;
-exports.root = root;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const clsx = require("./index47.cjs");
+const ReactECharts = require("echarts-for-react");
+const constants = require("./index51.cjs");
+const TemporalTrendChartCard_module = require("./index66.cjs");
+function groupByCategory(data, limit) {
+  const grouped = /* @__PURE__ */ new Map();
+  for (const point of data) {
+    const key = point.category ?? "Unknown";
+    if (!grouped.has(key)) {
+      grouped.set(key, []);
+    }
+    grouped.get(key).push({
+      ts: point.ts ?? "",
+      value: point.value
+    });
+  }
+  const entries = [...grouped.entries()].sort(
+    (a, b) => b[1].reduce((sum, p) => sum + p.value, 0) - a[1].reduce((sum, p) => sum + p.value, 0)
+  );
+  if (entries.length <= limit) {
+    return entries;
+  }
+  const top = entries.slice(0, limit - 1);
+  const rest = entries.slice(limit - 1);
+  const otherMap = /* @__PURE__ */ new Map();
+  for (const [, points] of rest) {
+    for (const p of points) {
+      otherMap.set(p.ts, (otherMap.get(p.ts) ?? 0) + p.value);
+    }
+  }
+  const otherPoints = [...otherMap.entries()].map(([ts, value]) => ({
+    ts,
+    value
+  }));
+  return [...top, ["Other", otherPoints]];
+}
+function buildMarkAreas(annotations) {
+  return annotations.filter((a) => a.end).map((a) => [
+    {
+      name: a.label,
+      xAxis: a.start,
+      itemStyle: { color: a.color ?? "rgba(255,107,90,0.1)" }
+    },
+    { xAxis: a.end }
+  ]);
+}
+function buildMarkLines(annotations) {
+  return annotations.filter((a) => !a.end).map((a) => ({
+    name: a.label,
+    xAxis: a.start,
+    lineStyle: { color: a.color ?? constants.CHART_COLORS[0], type: "dashed" },
+    label: { formatter: a.label, position: "end" }
+  }));
+}
+function TemporalTrendChartCard({
+  title,
+  data,
+  isLoading = false,
+  error,
+  onRetry,
+  onChartReady,
+  actions,
+  className,
+  groupBy,
+  groupOptions,
+  onGroupChange,
+  granularity,
+  granularityOptions,
+  onGranularityChange,
+  annotations = [],
+  showLegend = true,
+  onToggleLegend,
+  onSeriesSelect,
+  onBucketSelect,
+  maxSeries = constants.MAX_SERIES
+}) {
+  const seriesGroups = react.useMemo(
+    () => groupByCategory(data, maxSeries),
+    [data, maxSeries]
+  );
+  const option = react.useMemo(() => {
+    const markAreas = buildMarkAreas(annotations);
+    const markLines = buildMarkLines(annotations);
+    const series = seriesGroups.map(([name, points], idx) => ({
+      name,
+      type: "line",
+      stack: "total",
+      areaStyle: {},
+      emphasis: { focus: "series" },
+      color: constants.CHART_COLORS[idx % constants.CHART_COLORS.length],
+      data: points.sort((a, b) => a.ts < b.ts ? -1 : 1).map((p) => [p.ts, p.value]),
+      ...idx === 0 && (markAreas.length > 0 || markLines.length > 0) ? {
+        markArea: markAreas.length > 0 ? { silent: true, data: markAreas } : void 0,
+        markLine: markLines.length > 0 ? { silent: true, symbol: "none", data: markLines } : void 0
+      } : {}
+    }));
+    return {
+      tooltip: {
+        trigger: "axis",
+        axisPointer: { type: "cross" }
+      },
+      legend: {
+        show: showLegend,
+        type: "scroll",
+        bottom: 0
+      },
+      grid: {
+        left: "3%",
+        right: "4%",
+        bottom: showLegend ? "15%" : "3%",
+        containLabel: true
+      },
+      xAxis: { type: "time" },
+      yAxis: { type: "value" },
+      series
+    };
+  }, [seriesGroups, annotations, showLegend]);
+  const handleChartReady = react.useCallback(
+    (instance) => {
+      onChartReady == null ? void 0 : onChartReady(instance);
+    },
+    [onChartReady]
+  );
+  const handleEvents = react.useMemo(() => {
+    const events = {};
+    if (onSeriesSelect) {
+      events["legendselectchanged"] = (params) => {
+        const p = params;
+        onSeriesSelect(p.name);
+      };
+    }
+    if (onBucketSelect) {
+      events["brushSelected"] = (params) => {
+        var _a, _b, _c;
+        const p = params;
+        const area = (_c = (_b = (_a = p.batch) == null ? void 0 : _a[0]) == null ? void 0 : _b.areas) == null ? void 0 : _c[0];
+        if (area) {
+          onBucketSelect({ start: area.coordRange[0], end: area.coordRange[1] });
+        }
+      };
+    }
+    return events;
+  }, [onSeriesSelect, onBucketSelect]);
+  const hasToolbar = groupOptions || granularityOptions || onToggleLegend;
+  const hasData = data.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(TemporalTrendChartCard_module.default.root, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TemporalTrendChartCard_module.default.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: TemporalTrendChartCard_module.default.title, children: title }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TemporalTrendChartCard_module.default.headerRight, children: [
+        hasToolbar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TemporalTrendChartCard_module.default.toolbar, children: [
+          groupOptions && groupOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              className: TemporalTrendChartCard_module.default.select,
+              value: groupBy ?? "",
+              onChange: (e) => onGroupChange == null ? void 0 : onGroupChange(e.target.value),
+              "aria-label": "Group by",
+              children: groupOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
+            }
+          ),
+          granularityOptions && granularityOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              className: TemporalTrendChartCard_module.default.select,
+              value: granularity ?? "",
+              onChange: (e) => onGranularityChange == null ? void 0 : onGranularityChange(e.target.value || null),
+              "aria-label": "Granularity",
+              children: granularityOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
+            }
+          ),
+          onToggleLegend && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: clsx.clsx(
+                TemporalTrendChartCard_module.default.legendToggle,
+                showLegend && TemporalTrendChartCard_module.default.legendToggleActive
+              ),
+              onClick: onToggleLegend,
+              "aria-label": "Toggle legend",
+              children: "Legend"
+            }
+          )
+        ] }),
+        actions
+      ] })
+    ] }),
+    isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: TemporalTrendChartCard_module.default.loading, children: "Loading chart data..." }),
+    !isLoading && error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TemporalTrendChartCard_module.default.error, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: error }),
+      onRetry && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: TemporalTrendChartCard_module.default.retryButton,
+          onClick: onRetry,
+          children: "Retry"
+        }
+      )
+    ] }),
+    !isLoading && !error && !hasData && /* @__PURE__ */ jsxRuntime.jsx("div", { className: TemporalTrendChartCard_module.default.empty, children: "No data available" }),
+    !isLoading && !error && hasData && /* @__PURE__ */ jsxRuntime.jsx("div", { className: TemporalTrendChartCard_module.default.chartContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      ReactECharts,
+      {
+        option,
+        style: { height: "100%", minHeight: "18.75rem" },
+        onChartReady: handleChartReady,
+        onEvents: handleEvents,
+        notMerge: true
+      }
+    ) })
+  ] });
+}
+TemporalTrendChartCard.displayName = "TemporalTrendChartCard";
+exports.TemporalTrendChartCard = TemporalTrendChartCard;
 //# sourceMappingURL=index43.cjs.map

package/dist/index43.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index43.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"index43.cjs","sources":["../src/charts/TemporalTrendChartCard/TemporalTrendChartCard.tsx"],"sourcesContent":["import { useMemo, useCallback } from 'react';\nimport clsx from 'clsx';\nimport ReactECharts from 'echarts-for-react';\nimport type { TemporalTrendChartCardProps } from './TemporalTrendChartCard.types';\nimport type { EChartsInstance, ChartAnnotation } from '../../types/chart.types';\nimport { MAX_SERIES, CHART_COLORS } from '../../constants';\nimport styles from './TemporalTrendChartCard.module.css';\n\n/** Group data points by category, returning sorted series keyed by category name. */\nfunction groupByCategory(\n  data: TemporalTrendChartCardProps['data'],\n  limit: number,\n) {\n  const grouped = new Map<string, { ts: string; value: number }[]>();\n\n  for (const point of data) {\n    const key = point.category ?? 'Unknown';\n    if (!grouped.has(key)) {\n      grouped.set(key, []);\n    }\n    grouped.get(key)!.push({\n      ts: point.ts ?? '',\n      value: point.value,\n    });\n  }\n\n  const entries = [...grouped.entries()].sort(\n    (a, b) =>\n      b[1].reduce((sum, p) => sum + p.value, 0) -\n      a[1].reduce((sum, p) => sum + p.value, 0),\n  );\n\n  if (entries.length <= limit) {\n    return entries;\n  }\n\n  const top = entries.slice(0, limit - 1);\n  const rest = entries.slice(limit - 1);\n\n  const otherMap = new Map<string, number>();\n  for (const [, points] of rest) {\n    for (const p of points) {\n      otherMap.set(p.ts, (otherMap.get(p.ts) ?? 0) + p.value);\n    }\n  }\n\n  const otherPoints = [...otherMap.entries()].map(([ts, value]) => ({\n    ts,\n    value,\n  }));\n\n  return [...top, ['Other', otherPoints] as const] as Array<\n    [string, { ts: string; value: number }[]]\n  >;\n}\n\n/** Build markArea items from range annotations. */\nfunction buildMarkAreas(annotations: ChartAnnotation[]) {\n  return annotations\n    .filter((a) => a.end)\n    .map((a) => [\n      {\n        name: a.label,\n        xAxis: a.start,\n        itemStyle: { color: a.color ?? 'rgba(255,107,90,0.1)' },\n      },\n      { xAxis: a.end },\n    ]);\n}\n\n/** Build markLine items from point annotations. */\nfunction buildMarkLines(annotations: ChartAnnotation[]) {\n  return annotations\n    .filter((a) => !a.end)\n    .map((a) => ({\n      name: a.label,\n      xAxis: a.start,\n      lineStyle: { color: a.color ?? CHART_COLORS[0], type: 'dashed' as const },\n      label: { formatter: a.label, position: 'end' as const },\n    }));\n}\n\nexport function TemporalTrendChartCard({\n  title,\n  data,\n  isLoading = false,\n  error,\n  onRetry,\n  onChartReady,\n  actions,\n  className,\n  groupBy,\n  groupOptions,\n  onGroupChange,\n  granularity,\n  granularityOptions,\n  onGranularityChange,\n  annotations = [],\n  showLegend = true,\n  onToggleLegend,\n  onSeriesSelect,\n  onBucketSelect,\n  maxSeries = MAX_SERIES,\n}: TemporalTrendChartCardProps) {\n  const seriesGroups = useMemo(\n    () => groupByCategory(data, maxSeries),\n    [data, maxSeries],\n  );\n\n  const option = useMemo(() => {\n    const markAreas = buildMarkAreas(annotations);\n    const markLines = buildMarkLines(annotations);\n\n    const series = seriesGroups.map(([name, points], idx) => ({\n      name,\n      type: 'line' as const,\n      stack: 'total',\n      areaStyle: {},\n      emphasis: { focus: 'series' as const },\n      color: CHART_COLORS[idx % CHART_COLORS.length],\n      data: points\n        .sort((a, b) => (a.ts < b.ts ? -1 : 1))\n        .map((p) => [p.ts, p.value]),\n      ...(idx === 0 && (markAreas.length > 0 || markLines.length > 0)\n        ? {\n            markArea:\n              markAreas.length > 0 ? { silent: true, data: markAreas } : undefined,\n            markLine:\n              markLines.length > 0\n                ? { silent: true, symbol: 'none', data: markLines }\n                : undefined,\n          }\n        : {}),\n    }));\n\n    return {\n      tooltip: {\n        trigger: 'axis' as const,\n        axisPointer: { type: 'cross' as const },\n      },\n      legend: {\n        show: showLegend,\n        type: 'scroll' as const,\n        bottom: 0,\n      },\n      grid: {\n        left: '3%',\n        right: '4%',\n        bottom: showLegend ? '15%' : '3%',\n        containLabel: true,\n      },\n      xAxis: { type: 'time' as const },\n      yAxis: { type: 'value' as const },\n      series,\n    };\n  }, [seriesGroups, annotations, showLegend]);\n\n  const handleChartReady = useCallback(\n    (instance: EChartsInstance) => {\n      onChartReady?.(instance);\n    },\n    [onChartReady],\n  );\n\n  const handleEvents = useMemo(() => {\n    const events: Record<string, (...args: unknown[]) => void> = {};\n\n    if (onSeriesSelect) {\n      events['legendselectchanged'] = (params: unknown) => {\n        const p = params as { name: string };\n        onSeriesSelect(p.name);\n      };\n    }\n\n    if (onBucketSelect) {\n      events['brushSelected'] = (params: unknown) => {\n        const p = params as {\n          batch: { areas: { coordRange: [string, string] }[] }[];\n        };\n        const area = p.batch?.[0]?.areas?.[0];\n        if (area) {\n          onBucketSelect({ start: area.coordRange[0], end: area.coordRange[1] });\n        }\n      };\n    }\n\n    return events;\n  }, [onSeriesSelect, onBucketSelect]);\n\n  const hasToolbar = groupOptions || granularityOptions || onToggleLegend;\n  const hasData = data.length > 0;\n\n  return (\n    <div className={clsx(styles.root, className)}>\n      <div className={styles.header}>\n        <span className={styles.title}>{title}</span>\n        <div className={styles.headerRight}>\n          {hasToolbar && (\n            <div className={styles.toolbar}>\n              {groupOptions && groupOptions.length > 0 && (\n                <select\n                  className={styles.select}\n                  value={groupBy ?? ''}\n                  onChange={(e) => onGroupChange?.(e.target.value)}\n                  aria-label=\"Group by\"\n                >\n                  {groupOptions.map((opt) => (\n                    <option key={opt.value} value={opt.value}>\n                      {opt.label}\n                    </option>\n                  ))}\n                </select>\n              )}\n              {granularityOptions && granularityOptions.length > 0 && (\n                <select\n                  className={styles.select}\n                  value={granularity ?? ''}\n                  onChange={(e) =>\n                    onGranularityChange?.(e.target.value || null)\n                  }\n                  aria-label=\"Granularity\"\n                >\n                  {granularityOptions.map((opt) => (\n                    <option key={opt.value} value={opt.value}>\n                      {opt.label}\n                    </option>\n                  ))}\n                </select>\n              )}\n              {onToggleLegend && (\n                <button\n                  type=\"button\"\n                  className={clsx(\n                    styles.legendToggle,\n                    showLegend && styles.legendToggleActive,\n                  )}\n                  onClick={onToggleLegend}\n                  aria-label=\"Toggle legend\"\n                >\n                  Legend\n                </button>\n              )}\n            </div>\n          )}\n          {actions}\n        </div>\n      </div>\n\n      {isLoading && <div className={styles.loading}>Loading chart data...</div>}\n\n      {!isLoading && error && (\n        <div className={styles.error}>\n          <span>{error}</span>\n          {onRetry && (\n            <button\n              type=\"button\"\n              className={styles.retryButton}\n              onClick={onRetry}\n            >\n              Retry\n            </button>\n          )}\n        </div>\n      )}\n\n      {!isLoading && !error && !hasData && (\n        <div className={styles.empty}>No data available</div>\n      )}\n\n      {!isLoading && !error && hasData && (\n        <div className={styles.chartContainer}>\n          <ReactECharts\n            option={option}\n            style={{ height: '100%', minHeight: '18.75rem' }}\n            onChartReady={handleChartReady}\n            onEvents={handleEvents}\n            notMerge\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n\nTemporalTrendChartCard.displayName = 'TemporalTrendChartCard';\n"],"names":["CHART_COLORS","MAX_SERIES","useMemo","useCallback","clsx","styles","jsxs","jsx"],"mappings":"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"}

package/dist/index43.js

@@ -1,9 +1,220 @@
-const root = "krc-root-pJYpn";
-const styles = {
-  root
-};
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo, useCallback } from "react";
+import { clsx } from "./index47.js";
+import ReactECharts from "echarts-for-react";
+import { MAX_SERIES, CHART_COLORS } from "./index51.js";
+import styles from "./index66.js";
+function groupByCategory(data, limit) {
+  const grouped = /* @__PURE__ */ new Map();
+  for (const point of data) {
+    const key = point.category ?? "Unknown";
+    if (!grouped.has(key)) {
+      grouped.set(key, []);
+    }
+    grouped.get(key).push({
+      ts: point.ts ?? "",
+      value: point.value
+    });
+  }
+  const entries = [...grouped.entries()].sort(
+    (a, b) => b[1].reduce((sum, p) => sum + p.value, 0) - a[1].reduce((sum, p) => sum + p.value, 0)
+  );
+  if (entries.length <= limit) {
+    return entries;
+  }
+  const top = entries.slice(0, limit - 1);
+  const rest = entries.slice(limit - 1);
+  const otherMap = /* @__PURE__ */ new Map();
+  for (const [, points] of rest) {
+    for (const p of points) {
+      otherMap.set(p.ts, (otherMap.get(p.ts) ?? 0) + p.value);
+    }
+  }
+  const otherPoints = [...otherMap.entries()].map(([ts, value]) => ({
+    ts,
+    value
+  }));
+  return [...top, ["Other", otherPoints]];
+}
+function buildMarkAreas(annotations) {
+  return annotations.filter((a) => a.end).map((a) => [
+    {
+      name: a.label,
+      xAxis: a.start,
+      itemStyle: { color: a.color ?? "rgba(255,107,90,0.1)" }
+    },
+    { xAxis: a.end }
+  ]);
+}
+function buildMarkLines(annotations) {
+  return annotations.filter((a) => !a.end).map((a) => ({
+    name: a.label,
+    xAxis: a.start,
+    lineStyle: { color: a.color ?? CHART_COLORS[0], type: "dashed" },
+    label: { formatter: a.label, position: "end" }
+  }));
+}
+function TemporalTrendChartCard({
+  title,
+  data,
+  isLoading = false,
+  error,
+  onRetry,
+  onChartReady,
+  actions,
+  className,
+  groupBy,
+  groupOptions,
+  onGroupChange,
+  granularity,
+  granularityOptions,
+  onGranularityChange,
+  annotations = [],
+  showLegend = true,
+  onToggleLegend,
+  onSeriesSelect,
+  onBucketSelect,
+  maxSeries = MAX_SERIES
+}) {
+  const seriesGroups = useMemo(
+    () => groupByCategory(data, maxSeries),
+    [data, maxSeries]
+  );
+  const option = useMemo(() => {
+    const markAreas = buildMarkAreas(annotations);
+    const markLines = buildMarkLines(annotations);
+    const series = seriesGroups.map(([name, points], idx) => ({
+      name,
+      type: "line",
+      stack: "total",
+      areaStyle: {},
+      emphasis: { focus: "series" },
+      color: CHART_COLORS[idx % CHART_COLORS.length],
+      data: points.sort((a, b) => a.ts < b.ts ? -1 : 1).map((p) => [p.ts, p.value]),
+      ...idx === 0 && (markAreas.length > 0 || markLines.length > 0) ? {
+        markArea: markAreas.length > 0 ? { silent: true, data: markAreas } : void 0,
+        markLine: markLines.length > 0 ? { silent: true, symbol: "none", data: markLines } : void 0
+      } : {}
+    }));
+    return {
+      tooltip: {
+        trigger: "axis",
+        axisPointer: { type: "cross" }
+      },
+      legend: {
+        show: showLegend,
+        type: "scroll",
+        bottom: 0
+      },
+      grid: {
+        left: "3%",
+        right: "4%",
+        bottom: showLegend ? "15%" : "3%",
+        containLabel: true
+      },
+      xAxis: { type: "time" },
+      yAxis: { type: "value" },
+      series
+    };
+  }, [seriesGroups, annotations, showLegend]);
+  const handleChartReady = useCallback(
+    (instance) => {
+      onChartReady == null ? void 0 : onChartReady(instance);
+    },
+    [onChartReady]
+  );
+  const handleEvents = useMemo(() => {
+    const events = {};
+    if (onSeriesSelect) {
+      events["legendselectchanged"] = (params) => {
+        const p = params;
+        onSeriesSelect(p.name);
+      };
+    }
+    if (onBucketSelect) {
+      events["brushSelected"] = (params) => {
+        var _a, _b, _c;
+        const p = params;
+        const area = (_c = (_b = (_a = p.batch) == null ? void 0 : _a[0]) == null ? void 0 : _b.areas) == null ? void 0 : _c[0];
+        if (area) {
+          onBucketSelect({ start: area.coordRange[0], end: area.coordRange[1] });
+        }
+      };
+    }
+    return events;
+  }, [onSeriesSelect, onBucketSelect]);
+  const hasToolbar = groupOptions || granularityOptions || onToggleLegend;
+  const hasData = data.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+      /* @__PURE__ */ jsx("span", { className: styles.title, children: title }),
+      /* @__PURE__ */ jsxs("div", { className: styles.headerRight, children: [
+        hasToolbar && /* @__PURE__ */ jsxs("div", { className: styles.toolbar, children: [
+          groupOptions && groupOptions.length > 0 && /* @__PURE__ */ jsx(
+            "select",
+            {
+              className: styles.select,
+              value: groupBy ?? "",
+              onChange: (e) => onGroupChange == null ? void 0 : onGroupChange(e.target.value),
+              "aria-label": "Group by",
+              children: groupOptions.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+            }
+          ),
+          granularityOptions && granularityOptions.length > 0 && /* @__PURE__ */ jsx(
+            "select",
+            {
+              className: styles.select,
+              value: granularity ?? "",
+              onChange: (e) => onGranularityChange == null ? void 0 : onGranularityChange(e.target.value || null),
+              "aria-label": "Granularity",
+              children: granularityOptions.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+            }
+          ),
+          onToggleLegend && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: clsx(
+                styles.legendToggle,
+                showLegend && styles.legendToggleActive
+              ),
+              onClick: onToggleLegend,
+              "aria-label": "Toggle legend",
+              children: "Legend"
+            }
+          )
+        ] }),
+        actions
+      ] })
+    ] }),
+    isLoading && /* @__PURE__ */ jsx("div", { className: styles.loading, children: "Loading chart data..." }),
+    !isLoading && error && /* @__PURE__ */ jsxs("div", { className: styles.error, children: [
+      /* @__PURE__ */ jsx("span", { children: error }),
+      onRetry && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: styles.retryButton,
+          onClick: onRetry,
+          children: "Retry"
+        }
+      )
+    ] }),
+    !isLoading && !error && !hasData && /* @__PURE__ */ jsx("div", { className: styles.empty, children: "No data available" }),
+    !isLoading && !error && hasData && /* @__PURE__ */ jsx("div", { className: styles.chartContainer, children: /* @__PURE__ */ jsx(
+      ReactECharts,
+      {
+        option,
+        style: { height: "100%", minHeight: "18.75rem" },
+        onChartReady: handleChartReady,
+        onEvents: handleEvents,
+        notMerge: true
+      }
+    ) })
+  ] });
+}
+TemporalTrendChartCard.displayName = "TemporalTrendChartCard";
 export {
-  styles as default,
-  root
+  TemporalTrendChartCard
 };
 //# sourceMappingURL=index43.js.map

package/dist/index43.js.map

@@ -1 +1 @@
-{"version":3,"file":"index43.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index43.js","sources":["../src/charts/TemporalTrendChartCard/TemporalTrendChartCard.tsx"],"sourcesContent":["import { useMemo, useCallback } from 'react';\nimport clsx from 'clsx';\nimport ReactECharts from 'echarts-for-react';\nimport type { TemporalTrendChartCardProps } from './TemporalTrendChartCard.types';\nimport type { EChartsInstance, ChartAnnotation } from '../../types/chart.types';\nimport { MAX_SERIES, CHART_COLORS } from '../../constants';\nimport styles from './TemporalTrendChartCard.module.css';\n\n/** Group data points by category, returning sorted series keyed by category name. */\nfunction groupByCategory(\n  data: TemporalTrendChartCardProps['data'],\n  limit: number,\n) {\n  const grouped = new Map<string, { ts: string; value: number }[]>();\n\n  for (const point of data) {\n    const key = point.category ?? 'Unknown';\n    if (!grouped.has(key)) {\n      grouped.set(key, []);\n    }\n    grouped.get(key)!.push({\n      ts: point.ts ?? '',\n      value: point.value,\n    });\n  }\n\n  const entries = [...grouped.entries()].sort(\n    (a, b) =>\n      b[1].reduce((sum, p) => sum + p.value, 0) -\n      a[1].reduce((sum, p) => sum + p.value, 0),\n  );\n\n  if (entries.length <= limit) {\n    return entries;\n  }\n\n  const top = entries.slice(0, limit - 1);\n  const rest = entries.slice(limit - 1);\n\n  const otherMap = new Map<string, number>();\n  for (const [, points] of rest) {\n    for (const p of points) {\n      otherMap.set(p.ts, (otherMap.get(p.ts) ?? 0) + p.value);\n    }\n  }\n\n  const otherPoints = [...otherMap.entries()].map(([ts, value]) => ({\n    ts,\n    value,\n  }));\n\n  return [...top, ['Other', otherPoints] as const] as Array<\n    [string, { ts: string; value: number }[]]\n  >;\n}\n\n/** Build markArea items from range annotations. */\nfunction buildMarkAreas(annotations: ChartAnnotation[]) {\n  return annotations\n    .filter((a) => a.end)\n    .map((a) => [\n      {\n        name: a.label,\n        xAxis: a.start,\n        itemStyle: { color: a.color ?? 'rgba(255,107,90,0.1)' },\n      },\n      { xAxis: a.end },\n    ]);\n}\n\n/** Build markLine items from point annotations. */\nfunction buildMarkLines(annotations: ChartAnnotation[]) {\n  return annotations\n    .filter((a) => !a.end)\n    .map((a) => ({\n      name: a.label,\n      xAxis: a.start,\n      lineStyle: { color: a.color ?? CHART_COLORS[0], type: 'dashed' as const },\n      label: { formatter: a.label, position: 'end' as const },\n    }));\n}\n\nexport function TemporalTrendChartCard({\n  title,\n  data,\n  isLoading = false,\n  error,\n  onRetry,\n  onChartReady,\n  actions,\n  className,\n  groupBy,\n  groupOptions,\n  onGroupChange,\n  granularity,\n  granularityOptions,\n  onGranularityChange,\n  annotations = [],\n  showLegend = true,\n  onToggleLegend,\n  onSeriesSelect,\n  onBucketSelect,\n  maxSeries = MAX_SERIES,\n}: TemporalTrendChartCardProps) {\n  const seriesGroups = useMemo(\n    () => groupByCategory(data, maxSeries),\n    [data, maxSeries],\n  );\n\n  const option = useMemo(() => {\n    const markAreas = buildMarkAreas(annotations);\n    const markLines = buildMarkLines(annotations);\n\n    const series = seriesGroups.map(([name, points], idx) => ({\n      name,\n      type: 'line' as const,\n      stack: 'total',\n      areaStyle: {},\n      emphasis: { focus: 'series' as const },\n      color: CHART_COLORS[idx % CHART_COLORS.length],\n      data: points\n        .sort((a, b) => (a.ts < b.ts ? -1 : 1))\n        .map((p) => [p.ts, p.value]),\n      ...(idx === 0 && (markAreas.length > 0 || markLines.length > 0)\n        ? {\n            markArea:\n              markAreas.length > 0 ? { silent: true, data: markAreas } : undefined,\n            markLine:\n              markLines.length > 0\n                ? { silent: true, symbol: 'none', data: markLines }\n                : undefined,\n          }\n        : {}),\n    }));\n\n    return {\n      tooltip: {\n        trigger: 'axis' as const,\n        axisPointer: { type: 'cross' as const },\n      },\n      legend: {\n        show: showLegend,\n        type: 'scroll' as const,\n        bottom: 0,\n      },\n      grid: {\n        left: '3%',\n        right: '4%',\n        bottom: showLegend ? '15%' : '3%',\n        containLabel: true,\n      },\n      xAxis: { type: 'time' as const },\n      yAxis: { type: 'value' as const },\n      series,\n    };\n  }, [seriesGroups, annotations, showLegend]);\n\n  const handleChartReady = useCallback(\n    (instance: EChartsInstance) => {\n      onChartReady?.(instance);\n    },\n    [onChartReady],\n  );\n\n  const handleEvents = useMemo(() => {\n    const events: Record<string, (...args: unknown[]) => void> = {};\n\n    if (onSeriesSelect) {\n      events['legendselectchanged'] = (params: unknown) => {\n        const p = params as { name: string };\n        onSeriesSelect(p.name);\n      };\n    }\n\n    if (onBucketSelect) {\n      events['brushSelected'] = (params: unknown) => {\n        const p = params as {\n          batch: { areas: { coordRange: [string, string] }[] }[];\n        };\n        const area = p.batch?.[0]?.areas?.[0];\n        if (area) {\n          onBucketSelect({ start: area.coordRange[0], end: area.coordRange[1] });\n        }\n      };\n    }\n\n    return events;\n  }, [onSeriesSelect, onBucketSelect]);\n\n  const hasToolbar = groupOptions || granularityOptions || onToggleLegend;\n  const hasData = data.length > 0;\n\n  return (\n    <div className={clsx(styles.root, className)}>\n      <div className={styles.header}>\n        <span className={styles.title}>{title}</span>\n        <div className={styles.headerRight}>\n          {hasToolbar && (\n            <div className={styles.toolbar}>\n              {groupOptions && groupOptions.length > 0 && (\n                <select\n                  className={styles.select}\n                  value={groupBy ?? ''}\n                  onChange={(e) => onGroupChange?.(e.target.value)}\n                  aria-label=\"Group by\"\n                >\n                  {groupOptions.map((opt) => (\n                    <option key={opt.value} value={opt.value}>\n                      {opt.label}\n                    </option>\n                  ))}\n                </select>\n              )}\n              {granularityOptions && granularityOptions.length > 0 && (\n                <select\n                  className={styles.select}\n                  value={granularity ?? ''}\n                  onChange={(e) =>\n                    onGranularityChange?.(e.target.value || null)\n                  }\n                  aria-label=\"Granularity\"\n                >\n                  {granularityOptions.map((opt) => (\n                    <option key={opt.value} value={opt.value}>\n                      {opt.label}\n                    </option>\n                  ))}\n                </select>\n              )}\n              {onToggleLegend && (\n                <button\n                  type=\"button\"\n                  className={clsx(\n                    styles.legendToggle,\n                    showLegend && styles.legendToggleActive,\n                  )}\n                  onClick={onToggleLegend}\n                  aria-label=\"Toggle legend\"\n                >\n                  Legend\n                </button>\n              )}\n            </div>\n          )}\n          {actions}\n        </div>\n      </div>\n\n      {isLoading && <div className={styles.loading}>Loading chart data...</div>}\n\n      {!isLoading && error && (\n        <div className={styles.error}>\n          <span>{error}</span>\n          {onRetry && (\n            <button\n              type=\"button\"\n              className={styles.retryButton}\n              onClick={onRetry}\n            >\n              Retry\n            </button>\n          )}\n        </div>\n      )}\n\n      {!isLoading && !error && !hasData && (\n        <div className={styles.empty}>No data available</div>\n      )}\n\n      {!isLoading && !error && hasData && (\n        <div className={styles.chartContainer}>\n          <ReactECharts\n            option={option}\n            style={{ height: '100%', minHeight: '18.75rem' }}\n            onChartReady={handleChartReady}\n            onEvents={handleEvents}\n            notMerge\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n\nTemporalTrendChartCard.displayName = 'TemporalTrendChartCard';\n"],"names":[],"mappings":"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"}

package/dist/index44.cjs

@@ -1,30 +1,12 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "krc-root-Kdtyn";
-const primary = "krc-primary-6l6aH";
-const secondary = "krc-secondary-29n8Y";
-const outline = "krc-outline-U1Mlr";
-const ghost = "krc-ghost-5wRsR";
-const danger = "krc-danger-gL4NM";
-const sm = "krc-sm-zP51s";
-const lg = "krc-lg-ZefGA";
-const styles = {
-  root,
-  primary,
-  secondary,
-  outline,
-  ghost,
-  danger,
-  sm,
-  lg
-};
-exports.danger = danger;
-exports.default = styles;
-exports.ghost = ghost;
-exports.lg = lg;
-exports.outline = outline;
-exports.primary = primary;
-exports.root = root;
-exports.secondary = secondary;
-exports.sm = sm;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const clsx = require("./index47.cjs");
+const Textarea_module = require("./index57.cjs");
+const Textarea = react.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("textarea", { ref, className: clsx.clsx(Textarea_module.default.root, className), ...props })
+);
+Textarea.displayName = "Textarea";
+exports.Textarea = Textarea;
 //# sourceMappingURL=index44.cjs.map

package/dist/index44.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index44.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index44.cjs","sources":["../src/primitives/Textarea/Textarea.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './Textarea.module.css';\n\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, ...props }, ref) => (\n    <textarea ref={ref} className={clsx(styles.root, className)} {...props} />\n  ),\n);\n\nTextarea.displayName = 'Textarea';\n"],"names":["forwardRef","jsx","clsx","styles"],"mappings":";;;;;;AAMO,MAAM,WAAWA,MAAAA;AAAAA,EACtB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxBC,2BAAAA,IAAC,YAAA,EAAS,KAAU,WAAWC,KAAAA,KAAKC,gBAAAA,QAAO,MAAM,SAAS,GAAI,GAAG,MAAA,CAAO;AAE5E;AAEA,SAAS,cAAc;;"}

package/dist/index44.js

@@ -1,30 +1,12 @@
-const root = "krc-root-Kdtyn";
-const primary = "krc-primary-6l6aH";
-const secondary = "krc-secondary-29n8Y";
-const outline = "krc-outline-U1Mlr";
-const ghost = "krc-ghost-5wRsR";
-const danger = "krc-danger-gL4NM";
-const sm = "krc-sm-zP51s";
-const lg = "krc-lg-ZefGA";
-const styles = {
-  root,
-  primary,
-  secondary,
-  outline,
-  ghost,
-  danger,
-  sm,
-  lg
-};
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { clsx } from "./index47.js";
+import styles from "./index57.js";
+const Textarea = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("textarea", { ref, className: clsx(styles.root, className), ...props })
+);
+Textarea.displayName = "Textarea";
 export {
-  danger,
-  styles as default,
-  ghost,
-  lg,
-  outline,
-  primary,
-  root,
-  secondary,
-  sm
+  Textarea
 };
 //# sourceMappingURL=index44.js.map

package/dist/index44.js.map

@@ -1 +1 @@
-{"version":3,"file":"index44.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index44.js","sources":["../src/primitives/Textarea/Textarea.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './Textarea.module.css';\n\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, ...props }, ref) => (\n    <textarea ref={ref} className={clsx(styles.root, className)} {...props} />\n  ),\n);\n\nTextarea.displayName = 'Textarea';\n"],"names":[],"mappings":";;;;AAMO,MAAM,WAAW;AAAA,EACtB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB,oBAAC,YAAA,EAAS,KAAU,WAAW,KAAK,OAAO,MAAM,SAAS,GAAI,GAAG,MAAA,CAAO;AAE5E;AAEA,SAAS,cAAc;"}

package/dist/index45.cjs

@@ -1,18 +1,21 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "krc-root-la9-1";
-const logo = "krc-logo-b73UT";
-const card = "krc-card-1ev-q";
-const footer = "krc-footer-E0B15";
-const styles = {
-  root,
-  logo,
-  card,
-  footer
-};
-exports.card = card;
-exports.default = styles;
-exports.footer = footer;
-exports.logo = logo;
-exports.root = root;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const clsx = require("./index47.cjs");
+const Toast_module = require("./index50.cjs");
+const Toast = react.forwardRef(
+  ({ variant = "default", className, role = "status", children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role,
+      className: clsx.clsx(Toast_module.default.toast, variant !== "default" && Toast_module.default[variant], className),
+      ...props,
+      children
+    }
+  )
+);
+Toast.displayName = "Toast";
+exports.Toast = Toast;
 //# sourceMappingURL=index45.cjs.map

package/dist/index45.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index45.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index45.cjs","sources":["../src/primitives/Toast/Toast.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { ToastProps } from './Toast.types';\nimport styles from './Toast.module.css';\n\n/** Presentational toast bubble. Usually rendered by `ToastProvider`, exported for standalone use. */\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n  ({ variant = 'default', className, role = 'status', children, ...props }, ref) => (\n    <div\n      ref={ref}\n      role={role}\n      className={clsx(styles.toast, variant !== 'default' && styles[variant], className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\n\nToast.displayName = 'Toast';\n"],"names":["forwardRef","jsx","clsx","styles"],"mappings":";;;;;;AAMO,MAAM,QAAQA,MAAAA;AAAAA,EACnB,CAAC,EAAE,UAAU,WAAW,WAAW,OAAO,UAAU,UAAU,GAAG,SAAS,QACxEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAWC,KAAAA,KAAKC,aAAAA,QAAO,OAAO,YAAY,aAAaA,aAAAA,QAAO,OAAO,GAAG,SAAS;AAAA,MAChF,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,MAAM,cAAc;;"}