open-mcp-app-ui 0.0.6 → 0.0.8

package/dist/charts/index.d.ts

@@ -2,6 +2,90 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { CSSProperties, ReactNode } from 'react';
 export { Area, Bar, CartesianGrid, Cell, Legend, Line, Pie, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, Tooltip as RechartsTooltip, ReferenceArea, ReferenceLine, ResponsiveContainer, Scatter, XAxis, YAxis } from 'recharts';
 
+/**
+ * Chart Theme — CSS variable mapping for Recharts.
+ *
+ * Reads MCP Apps spec CSS variables at render time and provides
+ * them as style objects for Recharts sub-components (tooltip, grid,
+ * axis labels, legend). This is how charts automatically adapt to
+ * the host's theme without configuration.
+ */
+/**
+ * Resolve a CSS variable value at runtime.
+ * Falls back to the provided default if the variable is not set.
+ *
+ * Recharts requires resolved color values for SVG attributes (stroke, fill)
+ * because SVG doesn't support var() in most attributes. We check both
+ * document.documentElement (inline styles set by the host SDK) and
+ * document.body as a fallback, since hosts may inject CSS variables
+ * on either element.
+ */
+declare const getCSSVar: ({ name, fallback }: {
+    name: string;
+    fallback: string;
+}) => string;
+/**
+ * Themed tooltip style object for Recharts <Tooltip>.
+ * Applied via contentStyle, labelStyle, and wrapperStyle props.
+ */
+declare const getTooltipStyle: () => {
+    contentStyle: {
+        backgroundColor: string;
+        border: string;
+        borderRadius: string;
+        color: string;
+        fontSize: string;
+        fontFamily: string;
+        padding: string;
+        boxShadow: string;
+    };
+    labelStyle: {
+        color: string;
+        fontWeight: number;
+        marginBottom: string;
+    };
+};
+/**
+ * Border variant type shared across chart sub-components.
+ * - "default" uses --color-border-primary (stronger)
+ * - "secondary" uses --color-border-secondary (subtler)
+ */
+type ChartBorderVariant = "default" | "secondary";
+/**
+ * Themed grid line color for <CartesianGrid>.
+ * Grids default to secondary (subtle background lines).
+ */
+declare const getGridColor: ({ variant }?: {
+    variant?: ChartBorderVariant;
+}) => string;
+/**
+ * Themed axis tick/label style for <XAxis> and <YAxis>.
+ * Axis lines default to primary (visible structural lines).
+ */
+declare const getAxisStyle: ({ variant }?: {
+    variant?: ChartBorderVariant;
+}) => {
+    tick: {
+        fill: string;
+        fontSize: string;
+        fontFamily: string;
+    };
+    axisLine: {
+        stroke: string;
+    };
+    tickLine: {
+        stroke: string;
+    };
+};
+/**
+ * Themed legend style for <Legend>.
+ */
+declare const getLegendStyle: () => {
+    color: string;
+    fontSize: string;
+    fontFamily: string;
+};
+
 /**
  * Shared chart types.
  * Defines the theme interface and common props used across all chart wrappers.
@@ -35,36 +119,56 @@ interface ThemedLineChartProps extends ChartContainerProps {
     children: ReactNode;
     /** Show background grid lines. */
     grid?: boolean;
+    /**
+     * Border variant for axis lines and tick marks.
+     * - "default" — uses --color-border-primary (stronger)
+     * - "secondary" — uses --color-border-secondary (subtler)
+     */
+    borderVariant?: ChartBorderVariant;
 }
 /**
  * Themed LineChart.
- * Automatically assigns palette colors to Line children that
- * don't have an explicit stroke prop.
+ * Automatically assigns palette colors to Line children and
+ * applies themed axis styles to XAxis/YAxis children.
  */
-declare const LineChart: ({ data, height, colorPalette, className, style, grid, children, }: ThemedLineChartProps) => react_jsx_runtime.JSX.Element;
+declare const LineChart: ({ data, height, colorPalette, className, style, grid, borderVariant, children, }: ThemedLineChartProps) => react_jsx_runtime.JSX.Element;
 
 interface ThemedBarChartProps extends ChartContainerProps {
     /** Chart data array. */
     data: Record<string, unknown>[];
     children: ReactNode;
     grid?: boolean;
+    /**
+     * Border variant for axis lines and tick marks.
+     * - "default" — uses --color-border-primary (stronger)
+     * - "secondary" — uses --color-border-secondary (subtler)
+     */
+    borderVariant?: ChartBorderVariant;
 }
 /**
  * Themed BarChart.
- * Automatically assigns palette colors to Bar children.
+ * Automatically assigns palette colors to Bar children and
+ * applies themed axis styles to XAxis/YAxis children.
  */
-declare const BarChart: ({ data, height, colorPalette, className, style, grid, children, }: ThemedBarChartProps) => react_jsx_runtime.JSX.Element;
+declare const BarChart: ({ data, height, colorPalette, className, style, grid, borderVariant, children, }: ThemedBarChartProps) => react_jsx_runtime.JSX.Element;
 
 interface ThemedAreaChartProps extends ChartContainerProps {
     data: Record<string, unknown>[];
     children: ReactNode;
     grid?: boolean;
+    /**
+     * Border variant for axis lines and tick marks.
+     * - "default" — uses --color-border-primary (stronger)
+     * - "secondary" — uses --color-border-secondary (subtler)
+     */
+    borderVariant?: ChartBorderVariant;
 }
 /**
  * Themed AreaChart.
- * Auto-assigns palette colors with gradient fill to Area children.
+ * Auto-assigns palette colors with gradient fill to Area children and
+ * applies themed axis styles to XAxis/YAxis children.
  */
-declare const AreaChart: ({ data, height, colorPalette, className, style, grid, children, }: ThemedAreaChartProps) => react_jsx_runtime.JSX.Element;
+declare const AreaChart: ({ data, height, colorPalette, className, style, grid, borderVariant, children, }: ThemedAreaChartProps) => react_jsx_runtime.JSX.Element;
 
 interface ThemedPieChartProps extends Omit<ChartContainerProps, "height"> {
     /** Chart height (also used for approximate width in responsive container). */
@@ -81,12 +185,19 @@ declare const PieChart: ({ height, colorPalette, className, style, children, }:
 interface ThemedScatterChartProps extends ChartContainerProps {
     children: ReactNode;
     grid?: boolean;
+    /**
+     * Border variant for axis lines and tick marks.
+     * - "default" — uses --color-border-primary (stronger)
+     * - "secondary" — uses --color-border-secondary (subtler)
+     */
+    borderVariant?: ChartBorderVariant;
 }
 /**
  * Themed ScatterChart.
- * Auto-assigns palette fill colors to Scatter children.
+ * Auto-assigns palette fill colors to Scatter children and
+ * applies themed axis styles to XAxis/YAxis children.
  */
-declare const ScatterChart: ({ height, colorPalette, className, style, grid, children, }: ThemedScatterChartProps) => react_jsx_runtime.JSX.Element;
+declare const ScatterChart: ({ height, colorPalette, className, style, grid, borderVariant, children, }: ThemedScatterChartProps) => react_jsx_runtime.JSX.Element;
 
 interface ThemedRadarChartProps extends ChartContainerProps {
     data: Record<string, unknown>[];
@@ -102,12 +213,19 @@ interface ThemedComposedChartProps extends ChartContainerProps {
     data: Record<string, unknown>[];
     children: ReactNode;
     grid?: boolean;
+    /**
+     * Border variant for axis lines and tick marks.
+     * - "default" — uses --color-border-primary (stronger)
+     * - "secondary" — uses --color-border-secondary (subtler)
+     */
+    borderVariant?: ChartBorderVariant;
 }
 /**
  * Themed ComposedChart.
- * Auto-assigns palette colors to Line, Bar, and Area children.
+ * Auto-assigns palette colors to Line, Bar, and Area children and
+ * applies themed axis styles to XAxis/YAxis children.
  */
-declare const ComposedChart: ({ data, height, colorPalette, className, style, grid, children, }: ThemedComposedChartProps) => react_jsx_runtime.JSX.Element;
+declare const ComposedChart: ({ data, height, colorPalette, className, style, grid, borderVariant, children, }: ThemedComposedChartProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * ThemedTooltip — Pre-themed tooltip using MCP Apps spec CSS variables.
@@ -121,4 +239,4 @@ declare const ComposedChart: ({ data, height, colorPalette, className, style, gr
  */
 declare const ThemedTooltip: (props: any) => react_jsx_runtime.JSX.Element;
 
-export { AreaChart, BarChart, type ChartContainerProps, ComposedChart, DEFAULT_PALETTE, LineChart, PieChart, RadarChart, ScatterChart, ThemedTooltip as Tooltip };
+export { AreaChart, BarChart, type ChartBorderVariant, type ChartContainerProps, ComposedChart, DEFAULT_PALETTE, LineChart, PieChart, RadarChart, ScatterChart, ThemedTooltip as Tooltip, getAxisStyle, getCSSVar, getGridColor, getLegendStyle, getTooltipStyle };

package/dist/charts/index.js

@@ -3,6 +3,8 @@ import { Children, cloneElement, isValidElement } from "react";
 import {
   LineChart as RechartsLineChart,
   Line as RechartsLine,
+  XAxis as RechartsXAxis,
+  YAxis as RechartsYAxis,
   CartesianGrid
 } from "recharts";
 
@@ -26,15 +28,19 @@ var ChartContainer = ({
   height = 300,
   className = "",
   style,
+  borderVariant = "default",
   children
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: `omu-chart w-full ${className}`,
-    style: { height: `${height}px`, ...style },
-    children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children })
-  }
-);
+}) => {
+  const baseClass = borderVariant === "secondary" ? "omu-chart-secondary" : "omu-chart";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${baseClass} w-full ${className}`,
+      style: { height: `${height}px`, ...style },
+      children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children })
+    }
+  );
+};
 var getSeriesColor = ({
   index,
   palette
@@ -44,9 +50,20 @@ var getSeriesColor = ({
 };
 
 // src/charts/theme.ts
+import React from "react";
 var getCSSVar = ({ name, fallback }) => {
   if (typeof window === "undefined") return fallback;
-  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  const root = document.documentElement;
+  let value = root.style.getPropertyValue(name).trim();
+  if (!value) {
+    value = getComputedStyle(root).getPropertyValue(name).trim();
+  }
+  if (!value && document.body) {
+    value = document.body.style.getPropertyValue(name).trim();
+    if (!value) {
+      value = getComputedStyle(document.body).getPropertyValue(name).trim();
+    }
+  }
   return value || fallback;
 };
 var getTooltipStyle = () => ({
@@ -66,7 +83,53 @@ var getTooltipStyle = () => ({
     marginBottom: "4px"
   }
 });
-var getGridColor = () => getCSSVar({ name: "--color-border-secondary", fallback: "#e5e7eb" });
+var getBorderColor = ({ variant = "default" } = {}) => variant === "secondary" ? getCSSVar({ name: "--color-border-secondary", fallback: "#e5e7eb" }) : getCSSVar({ name: "--color-border-primary", fallback: "#d1d5db" });
+var getGridColor = ({ variant = "secondary" } = {}) => getBorderColor({ variant });
+var getAxisStyle = ({ variant = "default" } = {}) => ({
+  tick: {
+    fill: getCSSVar({ name: "--color-text-secondary", fallback: "#6b7280" }),
+    fontSize: getCSSVar({ name: "--font-text-xs-size", fallback: "11px" }),
+    fontFamily: getCSSVar({ name: "--font-sans", fallback: "ui-sans-serif, system-ui, sans-serif" })
+  },
+  axisLine: {
+    stroke: getBorderColor({ variant })
+  },
+  tickLine: {
+    stroke: getBorderColor({ variant })
+  }
+});
+var themeAxisChild = ({
+  child,
+  variant = "default",
+  XAxis: XAxis2,
+  YAxis: YAxis2,
+  CartesianGrid: CartesianGrid7
+}) => {
+  const t = child.type;
+  const dn = t?.displayName;
+  if (t === XAxis2 || t === YAxis2 || dn === "XAxis" || dn === "YAxis") {
+    const style = getAxisStyle({ variant });
+    const props = child.props;
+    return React.cloneElement(child, {
+      tick: props.tick === false ? false : { ...style.tick, ...typeof props.tick === "object" && props.tick ? props.tick : {} },
+      axisLine: props.axisLine === false ? false : { ...style.axisLine, ...typeof props.axisLine === "object" && props.axisLine ? props.axisLine : {} },
+      tickLine: props.tickLine === false ? false : { ...style.tickLine, ...typeof props.tickLine === "object" && props.tickLine ? props.tickLine : {} }
+    });
+  }
+  if (CartesianGrid7 && (t === CartesianGrid7 || dn === "CartesianGrid")) {
+    const props = child.props;
+    return React.cloneElement(child, {
+      stroke: props.stroke ?? getGridColor({ variant }),
+      opacity: props.opacity ?? 0.5
+    });
+  }
+  return null;
+};
+var getLegendStyle = () => ({
+  color: getCSSVar({ name: "--color-text-secondary", fallback: "#6b7280" }),
+  fontSize: getCSSVar({ name: "--font-text-sm-size", fallback: "13px" }),
+  fontFamily: getCSSVar({ name: "--font-sans", fallback: "ui-sans-serif, system-ui, sans-serif" })
+});
 
 // src/charts/LineChart.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
@@ -77,11 +140,14 @@ var LineChart = ({
   className,
   style,
   grid = true,
+  borderVariant = "default",
   children
 }) => {
   let seriesIndex = 0;
   const themedChildren = Children.map(children, (child) => {
     if (!isValidElement(child)) return child;
+    const themedAxis = themeAxisChild({ child, variant: borderVariant, XAxis: RechartsXAxis, YAxis: RechartsYAxis, CartesianGrid });
+    if (themedAxis) return themedAxis;
     if (child.type === RechartsLine || child.type?.displayName === "Line") {
       const idx = seriesIndex++;
       const existing = child.props.stroke;
@@ -94,8 +160,8 @@ var LineChart = ({
     }
     return child;
   });
-  return /* @__PURE__ */ jsx2(ChartContainer, { height, className, style, children: /* @__PURE__ */ jsxs(RechartsLineChart, { data, margin: { top: 5, right: 20, bottom: 5, left: 0 }, children: [
-    grid && /* @__PURE__ */ jsx2(CartesianGrid, { strokeDasharray: "3 3", stroke: getGridColor(), opacity: 0.5 }),
+  return /* @__PURE__ */ jsx2(ChartContainer, { height, className, style, borderVariant, children: /* @__PURE__ */ jsxs(RechartsLineChart, { data, margin: { top: 5, right: 20, bottom: 5, left: 0 }, children: [
+    grid && /* @__PURE__ */ jsx2(CartesianGrid, { strokeDasharray: "3 3" }),
     themedChildren
   ] }) });
 };
@@ -105,6 +171,8 @@ import { Children as Children2, cloneElement as cloneElement2, isValidElement as
 import {
   BarChart as RechartsBarChart,
   Bar as RechartsBar,
+  XAxis as RechartsXAxis2,
+  YAxis as RechartsYAxis2,
   CartesianGrid as CartesianGrid2
 } from "recharts";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -115,11 +183,14 @@ var BarChart = ({
   className,
   style,
   grid = true,
+  borderVariant = "default",
   children
 }) => {
   let seriesIndex = 0;
   const themedChildren = Children2.map(children, (child) => {
     if (!isValidElement2(child)) return child;
+    const themedAxis = themeAxisChild({ child, variant: borderVariant, XAxis: RechartsXAxis2, YAxis: RechartsYAxis2, CartesianGrid: CartesianGrid2 });
+    if (themedAxis) return themedAxis;
     if (child.type === RechartsBar || child.type?.displayName === "Bar") {
       const idx = seriesIndex++;
       const existing = child.props.fill;
@@ -130,8 +201,8 @@ var BarChart = ({
     }
     return child;
   });
-  return /* @__PURE__ */ jsx3(ChartContainer, { height, className, style, children: /* @__PURE__ */ jsxs2(RechartsBarChart, { data, margin: { top: 5, right: 20, bottom: 5, left: 0 }, children: [
-    grid && /* @__PURE__ */ jsx3(CartesianGrid2, { strokeDasharray: "3 3", stroke: getGridColor(), opacity: 0.5, vertical: false }),
+  return /* @__PURE__ */ jsx3(ChartContainer, { height, className, style, borderVariant, children: /* @__PURE__ */ jsxs2(RechartsBarChart, { data, margin: { top: 5, right: 20, bottom: 5, left: 0 }, children: [
+    grid && /* @__PURE__ */ jsx3(CartesianGrid2, { strokeDasharray: "3 3", vertical: false }),
     themedChildren
   ] }) });
 };
@@ -141,6 +212,8 @@ import { Children as Children3, cloneElement as cloneElement3, isValidElement as
 import {
   AreaChart as RechartsAreaChart,
   Area as RechartsArea,
+  XAxis as RechartsXAxis3,
+  YAxis as RechartsYAxis3,
   CartesianGrid as CartesianGrid3
 } from "recharts";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -151,11 +224,14 @@ var AreaChart = ({
   className,
   style,
   grid = true,
+  borderVariant = "default",
   children
 }) => {
   let seriesIndex = 0;
   const themedChildren = Children3.map(children, (child) => {
     if (!isValidElement3(child)) return child;
+    const themedAxis = themeAxisChild({ child, variant: borderVariant, XAxis: RechartsXAxis3, YAxis: RechartsYAxis3, CartesianGrid: CartesianGrid3 });
+    if (themedAxis) return themedAxis;
     if (child.type === RechartsArea || child.type?.displayName === "Area") {
       const idx = seriesIndex++;
       const color = child.props.stroke || getSeriesColor({ index: idx, palette: colorPalette });
@@ -168,8 +244,8 @@ var AreaChart = ({
     }
     return child;
   });
-  return /* @__PURE__ */ jsx4(ChartContainer, { height, className, style, children: /* @__PURE__ */ jsxs3(RechartsAreaChart, { data, margin: { top: 5, right: 20, bottom: 5, left: 0 }, children: [
-    grid && /* @__PURE__ */ jsx4(CartesianGrid3, { strokeDasharray: "3 3", stroke: getGridColor(), opacity: 0.5 }),
+  return /* @__PURE__ */ jsx4(ChartContainer, { height, className, style, borderVariant, children: /* @__PURE__ */ jsxs3(RechartsAreaChart, { data, margin: { top: 5, right: 20, bottom: 5, left: 0 }, children: [
+    grid && /* @__PURE__ */ jsx4(CartesianGrid3, { strokeDasharray: "3 3" }),
     themedChildren
   ] }) });
 };
@@ -213,6 +289,8 @@ import { Children as Children5, cloneElement as cloneElement5, isValidElement as
 import {
   ScatterChart as RechartsScatterChart,
   Scatter as RechartsScatter,
+  XAxis as RechartsXAxis4,
+  YAxis as RechartsYAxis4,
   CartesianGrid as CartesianGrid4
 } from "recharts";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -222,11 +300,14 @@ var ScatterChart = ({
   className,
   style,
   grid = true,
+  borderVariant = "default",
   children
 }) => {
   let seriesIndex = 0;
   const themedChildren = Children5.map(children, (child) => {
     if (!isValidElement5(child)) return child;
+    const themedAxis = themeAxisChild({ child, variant: borderVariant, XAxis: RechartsXAxis4, YAxis: RechartsYAxis4, CartesianGrid: CartesianGrid4 });
+    if (themedAxis) return themedAxis;
     if (child.type === RechartsScatter || child.type?.displayName === "Scatter") {
       const idx = seriesIndex++;
       const existing = child.props.fill;
@@ -236,8 +317,8 @@ var ScatterChart = ({
     }
     return child;
   });
-  return /* @__PURE__ */ jsx6(ChartContainer, { height, className, style, children: /* @__PURE__ */ jsxs4(RechartsScatterChart, { margin: { top: 5, right: 20, bottom: 5, left: 0 }, children: [
-    grid && /* @__PURE__ */ jsx6(CartesianGrid4, { strokeDasharray: "3 3", stroke: getGridColor(), opacity: 0.5 }),
+  return /* @__PURE__ */ jsx6(ChartContainer, { height, className, style, borderVariant, children: /* @__PURE__ */ jsxs4(RechartsScatterChart, { margin: { top: 5, right: 20, bottom: 5, left: 0 }, children: [
+    grid && /* @__PURE__ */ jsx6(CartesianGrid4, { strokeDasharray: "3 3" }),
     themedChildren
   ] }) });
 };
@@ -281,6 +362,8 @@ import {
   Line as RechartsLine2,
   Bar as RechartsBar2,
   Area as RechartsArea2,
+  XAxis as RechartsXAxis5,
+  YAxis as RechartsYAxis5,
   CartesianGrid as CartesianGrid5
 } from "recharts";
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -291,11 +374,14 @@ var ComposedChart = ({
   className,
   style,
   grid = true,
+  borderVariant = "default",
   children
 }) => {
   let seriesIndex = 0;
   const themedChildren = Children7.map(children, (child) => {
     if (!isValidElement7(child)) return child;
+    const themedAxis = themeAxisChild({ child, variant: borderVariant, XAxis: RechartsXAxis5, YAxis: RechartsYAxis5, CartesianGrid: CartesianGrid5 });
+    if (themedAxis) return themedAxis;
     const t = child.type;
     const dn = t?.displayName;
     if (t === RechartsLine2 || dn === "Line") {
@@ -325,8 +411,8 @@ var ComposedChart = ({
     }
     return child;
   });
-  return /* @__PURE__ */ jsx8(ChartContainer, { height, className, style, children: /* @__PURE__ */ jsxs5(RechartsComposedChart, { data, margin: { top: 5, right: 20, bottom: 5, left: 0 }, children: [
-    grid && /* @__PURE__ */ jsx8(CartesianGrid5, { strokeDasharray: "3 3", stroke: getGridColor(), opacity: 0.5 }),
+  return /* @__PURE__ */ jsx8(ChartContainer, { height, className, style, borderVariant, children: /* @__PURE__ */ jsxs5(RechartsComposedChart, { data, margin: { top: 5, right: 20, bottom: 5, left: 0 }, children: [
+    grid && /* @__PURE__ */ jsx8(CartesianGrid5, { strokeDasharray: "3 3" }),
     themedChildren
   ] }) });
 };
@@ -396,6 +482,11 @@ export {
   ScatterChart,
   ThemedTooltip as Tooltip,
   XAxis,
-  YAxis
+  YAxis,
+  getAxisStyle,
+  getCSSVar,
+  getGridColor,
+  getLegendStyle,
+  getTooltipStyle
 };
 //# sourceMappingURL=index.js.map