@squadbase/vantage 0.2.0 → 0.2.2

package/dist/components/index.d.ts

@@ -260,7 +260,13 @@ interface EChartProps {
      */
     height?: string | number;
     loading?: boolean;
-    /** `echarts.init` にそのまま渡すテーマ(名前または登録済みテーマオブジェクト)。 */
+    /**
+     * `echarts.init` にそのまま渡すテーマ(名前または登録済みテーマオブジェクト)。
+     *
+     * 渡すとデザイントークン追従は**完全に無効**になり、明暗の切り替えにも追従しなく
+     * なる。系列色だけ変えたいなら `option.color` を使う ― option はテーマより優先
+     * されるので、軸・凡例・ツールチップのトークン追従は残る。
+     */
     theme?: string | object;
     onEvents?: Record<string, (params: unknown) => void>;
     ariaLabel?: string;

package/dist/components/index.js

@@ -1,6 +1,6 @@
-import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarFooter, SidebarRail, SidebarInset, SidebarTrigger, Separator, Button, Input, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, useIsMobile, Popover, PopoverTrigger, PopoverContent, Calendar, ToggleGroup, ToggleGroupItem, Badge, SelectGroup, SelectLabel, Collapsible, CollapsibleTrigger, SidebarMenuButton, SidebarMenuBadge, CollapsibleContent, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarMenuItem, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Skeleton, Checkbox } from '../chunk-DIABD3KZ.js';
+import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarFooter, SidebarRail, SidebarInset, SidebarTrigger, Separator, Button, Input, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, useIsMobile, Popover, PopoverTrigger, PopoverContent, Calendar, ToggleGroup, ToggleGroupItem, Badge, SelectGroup, SelectLabel, Collapsible, CollapsibleTrigger, SidebarMenuButton, SidebarMenuBadge, CollapsibleContent, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarMenuItem, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Skeleton, Checkbox } from '../chunk-JC6MT5UU.js';
 import { cn } from '../chunk-A2UUGASH.js';
-import { forwardRef, useRef, useState, useEffect, useCallback, Fragment, createContext, useMemo, useId, useContext } from 'react';
+import { forwardRef, useRef, useState, useEffect, useMemo, useCallback, Fragment, createContext, useId, useContext } from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { Check, Copy, Download, Search, ArrowUp, ArrowDown, ArrowUpDown, Columns3, CalendarIcon, ChevronDownIcon, Minus, ChevronRight, XIcon, LoaderIcon, CheckIcon, ChevronDown, X } from 'lucide-react';
@@ -183,7 +183,6 @@ function NavSelect({
   return /* @__PURE__ */ jsxs(
     Select,
     {
-      items: Object.fromEntries(allItems.map((item) => [item.href, item.label])),
       value: currentValue,
       onValueChange: (href) => {
         if (href !== null) onNavigate(href);
@@ -474,6 +473,123 @@ function DashboardCardPreset({
     footer && /* @__PURE__ */ jsx(DashboardCardFooter, { className: footerClassName, children: footer })
   ] });
 }
+
+// src/components/chart-theme.ts
+var SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"];
+var normalizeContext;
+function toCanvasColor(value) {
+  const raw = value.trim();
+  if (!raw) return null;
+  if (normalizeContext === void 0) {
+    normalizeContext = document.createElement("canvas").getContext("2d");
+  }
+  const ctx = normalizeContext;
+  if (!ctx) return raw;
+  ctx.fillStyle = "#000000";
+  ctx.fillStyle = raw;
+  const onBlack = ctx.fillStyle;
+  ctx.fillStyle = "#ffffff";
+  ctx.fillStyle = raw;
+  return onBlack === ctx.fillStyle ? onBlack : null;
+}
+function readChartTokens(el) {
+  if (typeof document === "undefined") return null;
+  const target = document.documentElement;
+  if (!target) return null;
+  const styles = getComputedStyle(target);
+  const read = (name) => toCanvasColor(styles.getPropertyValue(name));
+  const series = [];
+  for (const token of SERIES_TOKENS) {
+    const color = read(token);
+    if (color) series.push(color);
+  }
+  return {
+    series,
+    foreground: read("--foreground"),
+    mutedForeground: read("--muted-foreground"),
+    border: read("--border"),
+    popover: read("--popover"),
+    popoverForeground: read("--popover-foreground")
+  };
+}
+function sameChartTokens(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.series.length === b.series.length && a.series.every((color, i) => color === b.series[i]) && a.foreground === b.foreground && a.mutedForeground === b.mutedForeground && a.border === b.border && a.popover === b.popover && a.popoverForeground === b.popoverForeground;
+}
+function watchChartTokens(onChange) {
+  if (typeof document === "undefined") return () => {
+  };
+  let frame = 0;
+  const schedule = () => {
+    if (frame) return;
+    frame = requestAnimationFrame(() => {
+      frame = 0;
+      onChange();
+    });
+  };
+  const themeObserver = new MutationObserver(schedule);
+  const attributeFilter = ["class", "style", "data-theme"];
+  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter });
+  if (document.body) themeObserver.observe(document.body, { attributes: true, attributeFilter });
+  const styleObserver = new MutationObserver(schedule);
+  if (document.head) {
+    styleObserver.observe(document.head, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: ["href", "media", "disabled"]
+    });
+  }
+  const onLoad = (event) => {
+    if (event.target instanceof HTMLLinkElement) schedule();
+  };
+  document.addEventListener("load", onLoad, true);
+  const media = window.matchMedia("(prefers-color-scheme: dark)");
+  media.addEventListener("change", schedule);
+  return () => {
+    if (frame) cancelAnimationFrame(frame);
+    themeObserver.disconnect();
+    styleObserver.disconnect();
+    document.removeEventListener("load", onLoad, true);
+    media.removeEventListener("change", schedule);
+  };
+}
+function axisTheme(tokens, splitLine) {
+  const line = tokens.border ?? void 0;
+  return {
+    axisLine: { show: true, lineStyle: { color: line } },
+    axisTick: { show: true, lineStyle: { color: line } },
+    axisLabel: { show: true, color: tokens.mutedForeground ?? void 0 },
+    splitLine: { show: splitLine, lineStyle: { color: line ? [line] : void 0 } },
+    splitArea: { show: false }
+  };
+}
+function buildChartTheme(tokens) {
+  const text = tokens.foreground ?? void 0;
+  const muted = tokens.mutedForeground ?? void 0;
+  const line = tokens.border ?? void 0;
+  return {
+    // Let the page background show through: charts sit on cards, not on a canvas.
+    backgroundColor: "transparent",
+    ...tokens.series.length > 0 ? { color: tokens.series } : {},
+    textStyle: { color: text },
+    title: { textStyle: { color: text }, subtextStyle: { color: muted } },
+    legend: { textStyle: { color: muted } },
+    categoryAxis: axisTheme(tokens, false),
+    valueAxis: axisTheme(tokens, true),
+    logAxis: axisTheme(tokens, true),
+    timeAxis: axisTheme(tokens, true),
+    tooltip: {
+      backgroundColor: tokens.popover ?? void 0,
+      borderColor: line,
+      borderWidth: 1,
+      textStyle: { color: tokens.popoverForeground ?? void 0 },
+      axisPointer: { lineStyle: { color: line }, crossStyle: { color: line } }
+    }
+  };
+}
 var EChart = forwardRef(function EChart2({
   option,
   height,
@@ -488,10 +604,24 @@ var EChart = forwardRef(function EChart2({
   const containerRef = useRef(null);
   const [instance, setInstance] = useState(null);
   const [copied, setCopied] = useState(false);
+  const [tokens, setTokens] = useState(() => readChartTokens());
+  useEffect(() => {
+    if (theme !== void 0) return;
+    const sync = () => {
+      setTokens((prev) => {
+        const next = readChartTokens();
+        return sameChartTokens(prev, next) ? prev : next;
+      });
+    };
+    sync();
+    return watchChartTokens(sync);
+  }, [theme]);
+  const autoTheme = useMemo(() => tokens ? buildChartTheme(tokens) : void 0, [tokens]);
+  const resolvedTheme = theme ?? autoTheme;
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
-    const inst = echarts.init(container, theme, { renderer: "canvas" });
+    const inst = echarts.init(container, resolvedTheme, { renderer: "canvas" });
     setInstance(inst);
     const observer = new ResizeObserver(() => inst.resize());
     observer.observe(container);
@@ -499,7 +629,7 @@ var EChart = forwardRef(function EChart2({
       observer.disconnect();
       inst.dispose();
     };
-  }, [theme]);
+  }, [resolvedTheme]);
   useEffect(() => {
     if (!instance) return;
     instance.setOption(option, { notMerge: true, lazyUpdate: true });
@@ -1181,7 +1311,6 @@ var DataTablePagination = forwardRef(
             /* @__PURE__ */ jsxs(
               Select,
               {
-                items: Object.fromEntries(pageSizeOptions.map((size) => [String(size), `${size}\u4EF6`])),
                 value: String(currentPageSize),
                 onValueChange: (value) => table.setPageSize(Number(value)),
                 children: [
@@ -1326,22 +1455,10 @@ function FilterBarSelect({
 }) {
   const { value, onChange } = useFilterBar();
   const handleChange = (selected) => onChange({ ...value, [filterKey]: selected ?? void 0 });
-  const items = useMemo(
-    () => Object.fromEntries(options.map((option) => [option.value, option.label])),
-    [options]
-  );
-  return /* @__PURE__ */ jsxs(
-    Select,
-    {
-      items,
-      value: value[filterKey] ?? "",
-      onValueChange: handleChange,
-      children: [
-        /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", "aria-label": label, "data-slot": "filter-bar-select", className, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: placeholder ?? label }) }),
-        /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value)) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(Select, { value: value[filterKey] ?? "", onValueChange: handleChange, children: [
+    /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", "aria-label": label, "data-slot": "filter-bar-select", className, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: placeholder ?? label }) }),
+    /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value)) })
+  ] });
 }
 FilterBarSelect.displayName = "FilterBarSelect";
 function FilterBarMultiSelect({