From 722afb0c5949b482c1dedd88e721a0ff09158825 Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Fri, 27 Mar 2026 10:39:07 +1100
Subject: [PATCH 1/5] chore: add changeset for chart tokens and charts package

---
 .changeset/add-chart-tokens-and-charts-package.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/add-chart-tokens-and-charts-package.md

diff --git a/.changeset/add-chart-tokens-and-charts-package.md b/.changeset/add-chart-tokens-and-charts-package.md
new file mode 100644
index 00000000..dcb92219
--- /dev/null
+++ b/.changeset/add-chart-tokens-and-charts-package.md
@@ -0,0 +1,5 @@
+---
+"@tiny-design/tokens": minor
+---
+
+Add chart color tokens (chart-1 through chart-5) for light and dark themes

From 7025f2c376880cefbe6c4ca1dbdeb34cf66f9d48 Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Fri, 27 Mar 2026 10:49:12 +1100
Subject: [PATCH 2/5] feat(tokens): add chart color tokens

Add chart-1 through chart-5 color tokens for both light and dark themes
to support the new charts package.
---
 packages/tokens/css/base.css            | 15 +++++++++++++++
 packages/tokens/scss/_tokens.scss       |  7 +++++++
 packages/tokens/scss/themes/_dark.scss  |  7 +++++++
 packages/tokens/scss/themes/_light.scss |  7 +++++++
 4 files changed, 36 insertions(+)

diff --git a/packages/tokens/css/base.css b/packages/tokens/css/base.css
index d30c728f..3c7579f9 100644
--- a/packages/tokens/css/base.css
+++ b/packages/tokens/css/base.css
@@ -289,6 +289,11 @@
   --ty-height-md: 32px;
   --ty-height-lg: 42px;
   --ty-spacer: 1rem;
+  --ty-chart-1: #6e41bf;
+  --ty-chart-2: #1890ff;
+  --ty-chart-3: #52c41a;
+  --ty-chart-4: #ff9800;
+  --ty-chart-5: #f44336;
 }
 
 html[data-tiny-theme=dark] {
@@ -582,6 +587,11 @@ html[data-tiny-theme=dark] {
   --ty-height-md: 32px;
   --ty-height-lg: 42px;
   --ty-spacer: 1rem;
+  --ty-chart-1: #9065d0;
+  --ty-chart-2: #177ddc;
+  --ty-chart-3: #49aa19;
+  --ty-chart-4: #d89614;
+  --ty-chart-5: #d32029;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -876,6 +886,11 @@ html[data-tiny-theme=dark] {
     --ty-height-md: 32px;
     --ty-height-lg: 42px;
     --ty-spacer: 1rem;
+    --ty-chart-1: #9065d0;
+    --ty-chart-2: #177ddc;
+    --ty-chart-3: #49aa19;
+    --ty-chart-4: #d89614;
+    --ty-chart-5: #d32029;
   }
 }
 /* stylelint-disable scss/comment-no-empty */
diff --git a/packages/tokens/scss/_tokens.scss b/packages/tokens/scss/_tokens.scss
index 1a88bb29..e5f7967c 100644
--- a/packages/tokens/scss/_tokens.scss
+++ b/packages/tokens/scss/_tokens.scss
@@ -82,3 +82,10 @@ $token-height-sm: var(--ty-height-sm);
 $token-height-md: var(--ty-height-md);
 $token-height-lg: var(--ty-height-lg);
 $token-spacer: var(--ty-spacer);
+
+// ---- Chart ----
+$token-chart-1: var(--ty-chart-1);
+$token-chart-2: var(--ty-chart-2);
+$token-chart-3: var(--ty-chart-3);
+$token-chart-4: var(--ty-chart-4);
+$token-chart-5: var(--ty-chart-5);
diff --git a/packages/tokens/scss/themes/_dark.scss b/packages/tokens/scss/themes/_dark.scss
index c2e65ce3..6134cc2e 100644
--- a/packages/tokens/scss/themes/_dark.scss
+++ b/packages/tokens/scss/themes/_dark.scss
@@ -407,4 +407,11 @@ $dark-theme: (
   height-md: 32px,
   height-lg: 42px,
   spacer: 1rem,
+
+  // ---- Chart ----
+  chart-1: #9065d0,
+  chart-2: #177ddc,
+  chart-3: #49aa19,
+  chart-4: #d89614,
+  chart-5: #d32029,
 );
diff --git a/packages/tokens/scss/themes/_light.scss b/packages/tokens/scss/themes/_light.scss
index 8664cc69..29d47dcd 100644
--- a/packages/tokens/scss/themes/_light.scss
+++ b/packages/tokens/scss/themes/_light.scss
@@ -407,4 +407,11 @@ $light-theme: (
   height-md: 32px,
   height-lg: 42px,
   spacer: 1rem,
+
+  // ---- Chart ----
+  chart-1: #6e41bf,
+  chart-2: #1890ff,
+  chart-3: #52c41a,
+  chart-4: #ff9800,
+  chart-5: #f44336,
 );

From 79604076f193f18262840edae55bea399c8a7001 Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Fri, 27 Mar 2026 10:49:21 +1100
Subject: [PATCH 3/5] feat(charts): add @tiny-design/charts package

Theme-aware chart components built on Recharts, including ChartContainer,
ChartTooltip, ChartLegend, and ChartStyle with light/dark theme support.
---
 packages/charts/package.json            |  58 ++++++++
 packages/charts/src/chart-container.tsx |  58 ++++++++
 packages/charts/src/chart-context.tsx   |  28 ++++
 packages/charts/src/chart-legend.tsx    |  89 +++++++++++++
 packages/charts/src/chart-style.tsx     |  48 +++++++
 packages/charts/src/chart-tooltip.tsx   | 140 +++++++++++++++++++
 packages/charts/src/demo/AreaChart.tsx  |  71 ++++++++++
 packages/charts/src/demo/BarChart.tsx   |  52 ++++++++
 packages/charts/src/demo/LineChart.tsx  |  61 +++++++++
 packages/charts/src/demo/PieChart.tsx   |  65 +++++++++
 packages/charts/src/demo/RadarChart.tsx |  62 +++++++++
 packages/charts/src/demo/Tooltip.tsx    |  56 ++++++++
 packages/charts/src/index.md            | 170 ++++++++++++++++++++++++
 packages/charts/src/index.ts            |  13 ++
 packages/charts/src/index.zh_CN.md      | 170 ++++++++++++++++++++++++
 packages/charts/src/style/index.scss    | 151 +++++++++++++++++++++
 packages/charts/src/types.ts            |  11 ++
 packages/charts/tsconfig.json           |  14 ++
 18 files changed, 1317 insertions(+)
 create mode 100644 packages/charts/package.json
 create mode 100644 packages/charts/src/chart-container.tsx
 create mode 100644 packages/charts/src/chart-context.tsx
 create mode 100644 packages/charts/src/chart-legend.tsx
 create mode 100644 packages/charts/src/chart-style.tsx
 create mode 100644 packages/charts/src/chart-tooltip.tsx
 create mode 100644 packages/charts/src/demo/AreaChart.tsx
 create mode 100644 packages/charts/src/demo/BarChart.tsx
 create mode 100644 packages/charts/src/demo/LineChart.tsx
 create mode 100644 packages/charts/src/demo/PieChart.tsx
 create mode 100644 packages/charts/src/demo/RadarChart.tsx
 create mode 100644 packages/charts/src/demo/Tooltip.tsx
 create mode 100644 packages/charts/src/index.md
 create mode 100644 packages/charts/src/index.ts
 create mode 100644 packages/charts/src/index.zh_CN.md
 create mode 100644 packages/charts/src/style/index.scss
 create mode 100644 packages/charts/src/types.ts
 create mode 100644 packages/charts/tsconfig.json

diff --git a/packages/charts/package.json b/packages/charts/package.json
new file mode 100644
index 00000000..8332f92b
--- /dev/null
+++ b/packages/charts/package.json
@@ -0,0 +1,58 @@
+{
+  "name": "@tiny-design/charts",
+  "version": "1.6.1",
+  "description": "Theme-aware chart components for Tiny Design, built on Recharts",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wangdicoder/tiny-design.git",
+    "directory": "packages/charts"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "typings": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./es/index.js",
+      "require": "./lib/index.js"
+    },
+    "./lib/*": "./lib/*",
+    "./es/*": "./es/*"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "files": [
+    "lib",
+    "es"
+  ],
+  "scripts": {
+    "build": "npm run clean && tsdown",
+    "clean": "rimraf lib es"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "recharts": ">=2.0.0"
+  },
+  "dependencies": {
+    "@tiny-design/tokens": "workspace:*",
+    "classnames": "^2.3.1",
+    "tslib": "^2.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "recharts": "^2.15.0",
+    "rimraf": "^3.0.2",
+    "tsdown": "^0.21.1",
+    "typescript": "^5.4.0"
+  }
+}
diff --git a/packages/charts/src/chart-container.tsx b/packages/charts/src/chart-container.tsx
new file mode 100644
index 00000000..05dd038e
--- /dev/null
+++ b/packages/charts/src/chart-container.tsx
@@ -0,0 +1,58 @@
+import React, { useId, useMemo } from 'react';
+import classNames from 'classnames';
+import { ResponsiveContainer } from 'recharts';
+import { ChartContextProvider } from './chart-context';
+import { ChartStyle } from './chart-style';
+import { ChartConfig } from './types';
+
+const PREFIX = 'ty-chart';
+
+export interface ChartContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  config: ChartConfig;
+  children: React.ReactElement;
+}
+
+/**
+ * ChartContainer wraps Recharts charts with:
+ * 1. A ResponsiveContainer for auto-sizing
+ * 2. CSS custom properties (--color-KEY) injected via inline styles
+ * 3. ChartConfig provided via React context for tooltip/legend
+ */
+const ChartContainer = React.forwardRef<HTMLDivElement, ChartContainerProps>(
+  ({ config, children, className, style, id, ...props }, ref) => {
+    const uniqueId = useId();
+    const chartId = id || `chart-${uniqueId}`;
+
+    // Build --color-KEY CSS custom properties from config
+    const colorVars = useMemo(() => {
+      const vars: Record<string, string> = {};
+      for (const [key, value] of Object.entries(config)) {
+        if (value.color) {
+          vars[`--color-${key}`] = value.color;
+        }
+      }
+      return vars;
+    }, [config]);
+
+    return (
+      <ChartContextProvider config={config}>
+        <ChartStyle id={chartId} config={config} />
+        <div
+          ref={ref}
+          data-chart={chartId}
+          className={classNames(PREFIX, className)}
+          style={{ ...colorVars, ...style } as React.CSSProperties}
+          {...props}
+        >
+          <ResponsiveContainer>
+            {children}
+          </ResponsiveContainer>
+        </div>
+      </ChartContextProvider>
+    );
+  }
+);
+
+ChartContainer.displayName = 'ChartContainer';
+
+export default ChartContainer;
diff --git a/packages/charts/src/chart-context.tsx b/packages/charts/src/chart-context.tsx
new file mode 100644
index 00000000..b0d493f7
--- /dev/null
+++ b/packages/charts/src/chart-context.tsx
@@ -0,0 +1,28 @@
+import React, { createContext, useContext } from 'react';
+import { ChartConfig } from './types';
+
+interface ChartContextValue {
+  config: ChartConfig;
+}
+
+const ChartContext = createContext<ChartContextValue | null>(null);
+
+export function useChart(): ChartContextValue {
+  const context = useContext(ChartContext);
+  if (!context) {
+    throw new Error('useChart must be used within a <ChartContainer />');
+  }
+  return context;
+}
+
+export function ChartContextProvider({
+  config,
+  children,
+}: {
+  config: ChartConfig;
+  children: React.ReactNode;
+}) {
+  return (
+    <ChartContext.Provider value={{ config }}>{children}</ChartContext.Provider>
+  );
+}
diff --git a/packages/charts/src/chart-legend.tsx b/packages/charts/src/chart-legend.tsx
new file mode 100644
index 00000000..9cfb0046
--- /dev/null
+++ b/packages/charts/src/chart-legend.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Legend as RechartsLegend } from 'recharts';
+import { useChart } from './chart-context';
+
+const PREFIX = 'ty-chart-legend';
+
+export const ChartLegend = RechartsLegend;
+
+export interface ChartLegendContentProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  payload?: Array<{
+    value?: string;
+    dataKey?: string;
+    color?: string;
+    type?: string;
+  }>;
+  nameKey?: string;
+  hideIcon?: boolean;
+  verticalAlign?: 'top' | 'bottom';
+}
+
+export const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  ChartLegendContentProps
+>(
+  (
+    {
+      payload,
+      nameKey,
+      hideIcon = false,
+      verticalAlign = 'bottom',
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={classNames(
+          PREFIX,
+          `${PREFIX}_${verticalAlign}`,
+          className
+        )}
+        {...props}
+      >
+        {payload.map((entry) => {
+          const key = nameKey
+            ? (entry.dataKey || entry.value)
+            : entry.dataKey || entry.value;
+          const itemConfig = key ? config[key] : undefined;
+          const displayName = itemConfig?.label || entry.value || key;
+          const color =
+            entry.color || (itemConfig?.color ? `var(--color-${key})` : undefined);
+
+          const IconComponent = itemConfig?.icon;
+
+          return (
+            <div
+              key={String(key)}
+              className={`${PREFIX}__item`}
+            >
+              {!hideIcon && (
+                IconComponent ? (
+                  <IconComponent />
+                ) : (
+                  <span
+                    className={`${PREFIX}__icon`}
+                    style={{ backgroundColor: color }}
+                  />
+                )
+              )}
+              <span className={`${PREFIX}__label`}>{displayName}</span>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+);
+
+ChartLegendContent.displayName = 'ChartLegendContent';
diff --git a/packages/charts/src/chart-style.tsx b/packages/charts/src/chart-style.tsx
new file mode 100644
index 00000000..a9fcdaeb
--- /dev/null
+++ b/packages/charts/src/chart-style.tsx
@@ -0,0 +1,48 @@
+import React, { useMemo } from 'react';
+import { ChartConfig } from './types';
+
+const THEMES = { light: '', dark: 'html[data-tiny-theme=dark]' } as const;
+
+/**
+ * Generates an inline <style> element for chart color tokens that need
+ * separate light/dark values (i.e. when `theme` is used in ChartConfig).
+ *
+ * This is only rendered when at least one config entry uses `theme`.
+ */
+export function ChartStyle({
+  id,
+  config,
+}: {
+  id: string;
+  config: ChartConfig;
+}) {
+  const colorConfig = useMemo(
+    () =>
+      Object.entries(config).filter(([, cfg]) => cfg.theme || cfg.color),
+    [config]
+  );
+
+  if (
+    !colorConfig.length ||
+    !colorConfig.some(([, cfg]) => cfg.theme)
+  ) {
+    return null;
+  }
+
+  const css = Object.entries(THEMES)
+    .map(([key, prefix]) => {
+      const vars = colorConfig
+        .map(([dataKey, cfg]) => {
+          const color = cfg.theme?.[key as keyof typeof cfg.theme] || cfg.color;
+          return color ? `  --color-${dataKey}: ${color};` : null;
+        })
+        .filter(Boolean)
+        .join('\n');
+      return `${prefix} [data-chart="${id}"] {\n${vars}\n}`;
+    })
+    .join('\n');
+
+  return (
+    <style dangerouslySetInnerHTML={{ __html: css }} />
+  );
+}
diff --git a/packages/charts/src/chart-tooltip.tsx b/packages/charts/src/chart-tooltip.tsx
new file mode 100644
index 00000000..8c3e706b
--- /dev/null
+++ b/packages/charts/src/chart-tooltip.tsx
@@ -0,0 +1,140 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Tooltip as RechartsTooltip } from 'recharts';
+import { useChart } from './chart-context';
+
+const PREFIX = 'ty-chart-tooltip';
+
+export const ChartTooltip = RechartsTooltip;
+
+export interface ChartTooltipContentProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  active?: boolean;
+  payload?: Array<{
+    name?: string;
+    value?: number | string;
+    dataKey?: string;
+    payload?: Record<string, unknown>;
+    color?: string;
+    fill?: string;
+  }>;
+  label?: string;
+  labelKey?: string;
+  nameKey?: string;
+  indicator?: 'dot' | 'line' | 'dashed';
+  hideLabel?: boolean;
+  hideIndicator?: boolean;
+  labelFormatter?: (label: string, payload: unknown[]) => React.ReactNode;
+  formatter?: (
+    value: number | string,
+    name: string,
+    item: unknown,
+    index: number,
+    payload: unknown[]
+  ) => React.ReactNode;
+}
+
+export const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  ChartTooltipContentProps
+>(
+  (
+    {
+      active,
+      payload,
+      label,
+      labelKey,
+      nameKey,
+      indicator = 'dot',
+      hideLabel = false,
+      hideIndicator = false,
+      labelFormatter,
+      formatter,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const { config } = useChart();
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const tooltipLabel = (() => {
+      if (hideLabel) return null;
+
+      const labelConfig = labelKey ? config[labelKey] : undefined;
+      const displayLabel = labelConfig?.label || label;
+
+      if (labelFormatter && label) {
+        return (
+          <div className={`${PREFIX}__label`}>
+            {labelFormatter(label, payload)}
+          </div>
+        );
+      }
+
+      return displayLabel ? (
+        <div className={`${PREFIX}__label`}>{displayLabel}</div>
+      ) : null;
+    })();
+
+    return (
+      <div
+        ref={ref}
+        className={classNames(PREFIX, className)}
+        {...props}
+      >
+        {tooltipLabel}
+        <div className={`${PREFIX}__items`}>
+          {payload.map((item, index) => {
+            const key = nameKey
+              ? (item.payload?.[nameKey] as string) || item.name
+              : item.dataKey || item.name;
+            const itemConfig = key ? config[key] : undefined;
+            const displayName = itemConfig?.label || item.name || key;
+            const color =
+              item.color ||
+              item.fill ||
+              (itemConfig?.color ? `var(--color-${key})` : undefined);
+
+            const displayValue =
+              formatter && item.value !== undefined
+                ? formatter(item.value, String(item.name), item, index, payload)
+                : item.value;
+
+            const IconComponent = itemConfig?.icon;
+
+            return (
+              <div key={`${key}-${index}`} className={`${PREFIX}__item`}>
+                {!hideIndicator && (
+                  <span
+                    className={classNames(
+                      `${PREFIX}__indicator`,
+                      `${PREFIX}__indicator_${indicator}`
+                    )}
+                    style={{ '--indicator-color': color } as React.CSSProperties}
+                  />
+                )}
+                <div className={`${PREFIX}__item-content`}>
+                  <span className={`${PREFIX}__item-name`}>
+                    {IconComponent && (
+                      <IconComponent />
+                    )}
+                    {displayName}
+                  </span>
+                  <span className={`${PREFIX}__item-value`}>
+                    {displayValue}
+                  </span>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+);
+
+ChartTooltipContent.displayName = 'ChartTooltipContent';
diff --git a/packages/charts/src/demo/AreaChart.tsx b/packages/charts/src/demo/AreaChart.tsx
new file mode 100644
index 00000000..a4e75240
--- /dev/null
+++ b/packages/charts/src/demo/AreaChart.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@tiny-design/charts';
+
+const chartData = [
+  { month: 'January', desktop: 186, mobile: 80 },
+  { month: 'February', desktop: 305, mobile: 200 },
+  { month: 'March', desktop: 237, mobile: 120 },
+  { month: 'April', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'June', desktop: 214, mobile: 140 },
+];
+
+const chartConfig: ChartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--ty-chart-1)',
+  },
+  mobile: {
+    label: 'Mobile',
+    color: 'var(--ty-chart-2)',
+  },
+};
+
+export default function AreaChartDemo() {
+  return (
+    <ChartContainer config={chartConfig} style={{ height: 300, width: '100%' }}>
+      <AreaChart data={chartData}>
+        <defs>
+          <linearGradient id="desktopGrad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor="var(--color-desktop)" stopOpacity={0.3} />
+            <stop offset="95%" stopColor="var(--color-desktop)" stopOpacity={0} />
+          </linearGradient>
+          <linearGradient id="mobileGrad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor="var(--color-mobile)" stopOpacity={0.3} />
+            <stop offset="95%" stopColor="var(--color-mobile)" stopOpacity={0} />
+          </linearGradient>
+        </defs>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={(value) => value.slice(0, 3)}
+        />
+        <YAxis tickLine={false} axisLine={false} />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <Area
+          type="monotone"
+          dataKey="desktop"
+          stroke="var(--color-desktop)"
+          fill="url(#desktopGrad)"
+          strokeWidth={2}
+        />
+        <Area
+          type="monotone"
+          dataKey="mobile"
+          stroke="var(--color-mobile)"
+          fill="url(#mobileGrad)"
+          strokeWidth={2}
+        />
+      </AreaChart>
+    </ChartContainer>
+  );
+}
diff --git a/packages/charts/src/demo/BarChart.tsx b/packages/charts/src/demo/BarChart.tsx
new file mode 100644
index 00000000..599341f5
--- /dev/null
+++ b/packages/charts/src/demo/BarChart.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  type ChartConfig,
+} from '@tiny-design/charts';
+
+const chartData = [
+  { month: 'January', desktop: 186, mobile: 80 },
+  { month: 'February', desktop: 305, mobile: 200 },
+  { month: 'March', desktop: 237, mobile: 120 },
+  { month: 'April', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'June', desktop: 214, mobile: 140 },
+];
+
+const chartConfig: ChartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--ty-chart-1)',
+  },
+  mobile: {
+    label: 'Mobile',
+    color: 'var(--ty-chart-2)',
+  },
+};
+
+export default function BarChartDemo() {
+  return (
+    <ChartContainer config={chartConfig} style={{ height: 300, width: '100%' }}>
+      <BarChart data={chartData}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={(value) => value.slice(0, 3)}
+        />
+        <YAxis tickLine={false} axisLine={false} />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartLegend content={<ChartLegendContent />} />
+        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+      </BarChart>
+    </ChartContainer>
+  );
+}
diff --git a/packages/charts/src/demo/LineChart.tsx b/packages/charts/src/demo/LineChart.tsx
new file mode 100644
index 00000000..968cb880
--- /dev/null
+++ b/packages/charts/src/demo/LineChart.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { Line, LineChart, CartesianGrid, XAxis, YAxis } from 'recharts';
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@tiny-design/charts';
+
+const chartData = [
+  { month: 'January', desktop: 186, mobile: 80 },
+  { month: 'February', desktop: 305, mobile: 200 },
+  { month: 'March', desktop: 237, mobile: 120 },
+  { month: 'April', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'June', desktop: 214, mobile: 140 },
+];
+
+const chartConfig: ChartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--ty-chart-1)',
+  },
+  mobile: {
+    label: 'Mobile',
+    color: 'var(--ty-chart-3)',
+  },
+};
+
+export default function LineChartDemo() {
+  return (
+    <ChartContainer config={chartConfig} style={{ height: 300, width: '100%' }}>
+      <LineChart data={chartData}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={(value) => value.slice(0, 3)}
+        />
+        <YAxis tickLine={false} axisLine={false} />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <Line
+          type="monotone"
+          dataKey="desktop"
+          stroke="var(--color-desktop)"
+          strokeWidth={2}
+          dot={{ fill: 'var(--color-desktop)' }}
+        />
+        <Line
+          type="monotone"
+          dataKey="mobile"
+          stroke="var(--color-mobile)"
+          strokeWidth={2}
+          dot={{ fill: 'var(--color-mobile)' }}
+        />
+      </LineChart>
+    </ChartContainer>
+  );
+}
diff --git a/packages/charts/src/demo/PieChart.tsx b/packages/charts/src/demo/PieChart.tsx
new file mode 100644
index 00000000..67e79146
--- /dev/null
+++ b/packages/charts/src/demo/PieChart.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { Pie, PieChart, Cell } from 'recharts';
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  type ChartConfig,
+} from '@tiny-design/charts';
+
+const chartData = [
+  { browser: 'Chrome', visitors: 275, fill: 'var(--color-chrome)' },
+  { browser: 'Safari', visitors: 200, fill: 'var(--color-safari)' },
+  { browser: 'Firefox', visitors: 187, fill: 'var(--color-firefox)' },
+  { browser: 'Edge', visitors: 173, fill: 'var(--color-edge)' },
+  { browser: 'Other', visitors: 90, fill: 'var(--color-other)' },
+];
+
+const chartConfig: ChartConfig = {
+  chrome: {
+    label: 'Chrome',
+    color: 'var(--ty-chart-1)',
+  },
+  safari: {
+    label: 'Safari',
+    color: 'var(--ty-chart-2)',
+  },
+  firefox: {
+    label: 'Firefox',
+    color: 'var(--ty-chart-3)',
+  },
+  edge: {
+    label: 'Edge',
+    color: 'var(--ty-chart-4)',
+  },
+  other: {
+    label: 'Other',
+    color: 'var(--ty-chart-5)',
+  },
+};
+
+export default function PieChartDemo() {
+  return (
+    <ChartContainer config={chartConfig} style={{ height: 300, width: '100%' }}>
+      <PieChart>
+        <ChartTooltip content={<ChartTooltipContent nameKey="browser" />} />
+        <ChartLegend content={<ChartLegendContent nameKey="browser" />} />
+        <Pie
+          data={chartData}
+          dataKey="visitors"
+          nameKey="browser"
+          cx="50%"
+          cy="50%"
+          innerRadius={60}
+          outerRadius={100}
+        >
+          {chartData.map((entry) => (
+            <Cell key={entry.browser} fill={entry.fill} />
+          ))}
+        </Pie>
+      </PieChart>
+    </ChartContainer>
+  );
+}
diff --git a/packages/charts/src/demo/RadarChart.tsx b/packages/charts/src/demo/RadarChart.tsx
new file mode 100644
index 00000000..31b3396e
--- /dev/null
+++ b/packages/charts/src/demo/RadarChart.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import {
+  Radar,
+  RadarChart,
+  PolarAngleAxis,
+  PolarGrid,
+} from 'recharts';
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  type ChartConfig,
+} from '@tiny-design/charts';
+
+const chartData = [
+  { subject: 'Math', a: 120, b: 110 },
+  { subject: 'Chinese', a: 98, b: 130 },
+  { subject: 'English', a: 86, b: 130 },
+  { subject: 'Geography', a: 99, b: 100 },
+  { subject: 'Physics', a: 85, b: 90 },
+  { subject: 'History', a: 65, b: 85 },
+];
+
+const chartConfig: ChartConfig = {
+  a: {
+    label: 'Student A',
+    color: 'var(--ty-chart-1)',
+  },
+  b: {
+    label: 'Student B',
+    color: 'var(--ty-chart-4)',
+  },
+};
+
+export default function RadarChartDemo() {
+  return (
+    <ChartContainer config={chartConfig} style={{ height: 300, width: '100%' }}>
+      <RadarChart data={chartData}>
+        <PolarGrid />
+        <PolarAngleAxis dataKey="subject" />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartLegend content={<ChartLegendContent />} />
+        <Radar
+          name="a"
+          dataKey="a"
+          stroke="var(--color-a)"
+          fill="var(--color-a)"
+          fillOpacity={0.25}
+        />
+        <Radar
+          name="b"
+          dataKey="b"
+          stroke="var(--color-b)"
+          fill="var(--color-b)"
+          fillOpacity={0.25}
+        />
+      </RadarChart>
+    </ChartContainer>
+  );
+}
diff --git a/packages/charts/src/demo/Tooltip.tsx b/packages/charts/src/demo/Tooltip.tsx
new file mode 100644
index 00000000..ee480092
--- /dev/null
+++ b/packages/charts/src/demo/Tooltip.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@tiny-design/charts';
+
+const chartData = [
+  { month: 'January', desktop: 186, mobile: 80 },
+  { month: 'February', desktop: 305, mobile: 200 },
+  { month: 'March', desktop: 237, mobile: 120 },
+  { month: 'April', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'June', desktop: 214, mobile: 140 },
+];
+
+const chartConfig: ChartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--ty-chart-1)',
+  },
+  mobile: {
+    label: 'Mobile',
+    color: 'var(--ty-chart-2)',
+  },
+};
+
+export default function TooltipDemo() {
+  return (
+    <ChartContainer config={chartConfig} style={{ height: 300, width: '100%' }}>
+      <BarChart data={chartData}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={(value) => value.slice(0, 3)}
+        />
+        <YAxis tickLine={false} axisLine={false} />
+        <ChartTooltip
+          content={
+            <ChartTooltipContent
+              indicator="line"
+              labelFormatter={(label) => `Month: ${label}`}
+            />
+          }
+        />
+        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+      </BarChart>
+    </ChartContainer>
+  );
+}
diff --git a/packages/charts/src/index.md b/packages/charts/src/index.md
new file mode 100644
index 00000000..639cac8b
--- /dev/null
+++ b/packages/charts/src/index.md
@@ -0,0 +1,170 @@
+import BarChartDemo from './demo/BarChart';
+import BarChartSource from './demo/BarChart.tsx?raw';
+import LineChartDemo from './demo/LineChart';
+import LineChartSource from './demo/LineChart.tsx?raw';
+import AreaChartDemo from './demo/AreaChart';
+import AreaChartSource from './demo/AreaChart.tsx?raw';
+import PieChartDemo from './demo/PieChart';
+import PieChartSource from './demo/PieChart.tsx?raw';
+import RadarChartDemo from './demo/RadarChart';
+import RadarChartSource from './demo/RadarChart.tsx?raw';
+import TooltipDemo from './demo/Tooltip';
+import TooltipSource from './demo/Tooltip.tsx?raw';
+
+# Chart
+
+Beautiful, theme-aware charts built on [Recharts](https://recharts.org/). Colors automatically adapt to light and dark themes via `--ty-chart-*` design tokens.
+
+## Installation
+
+```bash
+pnpm add @tiny-design/charts recharts
+```
+
+## Usage
+
+```jsx
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@tiny-design/charts';
+import { Bar, BarChart } from 'recharts';
+```
+
+## Examples
+
+<Layout>
+  <Column>
+    <Demo>
+
+### Bar Chart
+
+A basic bar chart with grid, axis, tooltip, and legend. Colors are referenced using `var(--color-KEY)` which maps to the `ChartConfig`.
+
+<DemoBlock component={BarChartDemo} source={BarChartSource} />
+
+    </Demo>
+    <Demo>
+
+### Line Chart
+
+Line chart with two data series and customised stroke colors.
+
+<DemoBlock component={LineChartDemo} source={LineChartSource} />
+
+    </Demo>
+    <Demo>
+
+### Area Chart
+
+Area chart with gradient fills. Uses SVG `linearGradient` definitions referencing the chart color tokens.
+
+<DemoBlock component={AreaChartDemo} source={AreaChartSource} />
+
+    </Demo>
+  </Column>
+  <Column>
+    <Demo>
+
+### Pie Chart
+
+A donut chart with 5 data series using all chart color tokens. Uses `nameKey` to map data keys to config labels.
+
+<DemoBlock component={PieChartDemo} source={PieChartSource} />
+
+    </Demo>
+    <Demo>
+
+### Radar Chart
+
+Radar chart comparing two data series across multiple dimensions.
+
+<DemoBlock component={RadarChartDemo} source={RadarChartSource} />
+
+    </Demo>
+    <Demo>
+
+### Custom Tooltip
+
+Tooltip with `indicator="line"` style and a custom `labelFormatter`.
+
+<DemoBlock component={TooltipDemo} source={TooltipSource} />
+
+    </Demo>
+  </Column>
+</Layout>
+
+## Chart Config
+
+The chart config maps data keys to labels, icons, and color tokens. Colors can be CSS variables, hex, hsl, or oklch.
+
+```tsx
+import { type ChartConfig } from '@tiny-design/charts';
+
+const chartConfig: ChartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--ty-chart-1)',   // Uses design token
+  },
+  mobile: {
+    label: 'Mobile',
+    color: '#60a5fa',             // Or any CSS color
+  },
+};
+```
+
+## Theming
+
+5 chart color tokens are included in `@tiny-design/tokens`, automatically adapting to light/dark themes:
+
+| Token | Light | Dark |
+|-------|-------|------|
+| `--ty-chart-1` | `#6e41bf` (Primary) | `#9065d0` |
+| `--ty-chart-2` | `#1890ff` (Info)    | `#177ddc` |
+| `--ty-chart-3` | `#52c41a` (Success) | `#49aa19` |
+| `--ty-chart-4` | `#ff9800` (Warning) | `#d89614` |
+| `--ty-chart-5` | `#f44336` (Danger)  | `#d32029` |
+
+### Using Colors
+
+Reference colors in chart elements using `var(--color-KEY)` where `KEY` matches the config key:
+
+```tsx
+<Bar dataKey="desktop" fill="var(--color-desktop)" />
+```
+
+Or in chart data:
+
+```tsx
+const chartData = [
+  { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+];
+```
+
+## API
+
+### ChartContainer
+
+| Property  | Description                                    | Type                  | Default |
+| --------- | ---------------------------------------------- | --------------------- | ------- |
+| config    | Chart configuration object                     | `ChartConfig`         | -       |
+| children  | Recharts chart element                         | `React.ReactElement`  | -       |
+| className | className of container                         | `string`              | -       |
+| style     | style object (must include height or min-height) | `CSSProperties`     | -       |
+
+### ChartTooltipContent
+
+| Property      | Description                         | Type                                          | Default |
+| ------------- | ----------------------------------- | --------------------------------------------- | ------- |
+| indicator     | indicator style                     | enum: `dot` &#124; `line` &#124; `dashed`     | `dot`   |
+| hideLabel     | hide the tooltip label              | `boolean`                                     | `false` |
+| hideIndicator | hide the color indicator            | `boolean`                                     | `false` |
+| labelKey      | config key for tooltip label        | `string`                                      | -       |
+| nameKey       | data key for tooltip item names     | `string`                                      | -       |
+| labelFormatter | custom label renderer              | `(label, payload) => ReactNode`               | -       |
+| formatter     | custom value renderer               | `(value, name, item, index, payload) => ReactNode` | -  |
+
+### ChartLegendContent
+
+| Property      | Description                         | Type                                          | Default   |
+| ------------- | ----------------------------------- | --------------------------------------------- | --------- |
+| nameKey       | data key for legend item names      | `string`                                      | -         |
+| hideIcon      | hide the color icon                 | `boolean`                                     | `false`   |
+| verticalAlign | legend position                     | enum: `top` &#124; `bottom`                   | `bottom`  |
diff --git a/packages/charts/src/index.ts b/packages/charts/src/index.ts
new file mode 100644
index 00000000..7dd5be5d
--- /dev/null
+++ b/packages/charts/src/index.ts
@@ -0,0 +1,13 @@
+export { default as ChartContainer } from './chart-container';
+export type { ChartContainerProps } from './chart-container';
+
+export { ChartTooltip, ChartTooltipContent } from './chart-tooltip';
+export type { ChartTooltipContentProps } from './chart-tooltip';
+
+export { ChartLegend, ChartLegendContent } from './chart-legend';
+export type { ChartLegendContentProps } from './chart-legend';
+
+export { ChartStyle } from './chart-style';
+export { useChart } from './chart-context';
+
+export type { ChartConfig } from './types';
diff --git a/packages/charts/src/index.zh_CN.md b/packages/charts/src/index.zh_CN.md
new file mode 100644
index 00000000..590fc57f
--- /dev/null
+++ b/packages/charts/src/index.zh_CN.md
@@ -0,0 +1,170 @@
+import BarChartDemo from './demo/BarChart';
+import BarChartSource from './demo/BarChart.tsx?raw';
+import LineChartDemo from './demo/LineChart';
+import LineChartSource from './demo/LineChart.tsx?raw';
+import AreaChartDemo from './demo/AreaChart';
+import AreaChartSource from './demo/AreaChart.tsx?raw';
+import PieChartDemo from './demo/PieChart';
+import PieChartSource from './demo/PieChart.tsx?raw';
+import RadarChartDemo from './demo/RadarChart';
+import RadarChartSource from './demo/RadarChart.tsx?raw';
+import TooltipDemo from './demo/Tooltip';
+import TooltipSource from './demo/Tooltip.tsx?raw';
+
+# 图表 Chart
+
+基于 [Recharts](https://recharts.org/) 构建的主题感知图表组件。颜色通过 `--ty-chart-*` 设计令牌自动适配亮色和暗色主题。
+
+## 安装
+
+```bash
+pnpm add @tiny-design/charts recharts
+```
+
+## 使用方式
+
+```jsx
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@tiny-design/charts';
+import { Bar, BarChart } from 'recharts';
+```
+
+## 代码演示
+
+<Layout>
+  <Column>
+    <Demo>
+
+### 柱状图
+
+基本柱状图，包含网格、坐标轴、提示框和图例。通过 `var(--color-KEY)` 引用 `ChartConfig` 中映射的颜色。
+
+<DemoBlock component={BarChartDemo} source={BarChartSource} />
+
+    </Demo>
+    <Demo>
+
+### 折线图
+
+包含两组数据系列的折线图，使用自定义描边颜色。
+
+<DemoBlock component={LineChartDemo} source={LineChartSource} />
+
+    </Demo>
+    <Demo>
+
+### 面积图
+
+带渐变填充的面积图。使用 SVG `linearGradient` 引用图表颜色令牌。
+
+<DemoBlock component={AreaChartDemo} source={AreaChartSource} />
+
+    </Demo>
+  </Column>
+  <Column>
+    <Demo>
+
+### 饼图
+
+使用全部 5 个图表颜色令牌的环形图。通过 `nameKey` 将数据键映射到配置标签。
+
+<DemoBlock component={PieChartDemo} source={PieChartSource} />
+
+    </Demo>
+    <Demo>
+
+### 雷达图
+
+在多个维度上比较两组数据系列的雷达图。
+
+<DemoBlock component={RadarChartDemo} source={RadarChartSource} />
+
+    </Demo>
+    <Demo>
+
+### 自定义提示框
+
+使用 `indicator="line"` 样式和自定义 `labelFormatter` 的提示框。
+
+<DemoBlock component={TooltipDemo} source={TooltipSource} />
+
+    </Demo>
+  </Column>
+</Layout>
+
+## 图表配置
+
+图表配置将数据键映射到标签、图标和颜色令牌。颜色可以是 CSS 变量、十六进制、HSL 或 OKLCH。
+
+```tsx
+import { type ChartConfig } from '@tiny-design/charts';
+
+const chartConfig: ChartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--ty-chart-1)',   // 使用设计令牌
+  },
+  mobile: {
+    label: 'Mobile',
+    color: '#60a5fa',             // 或任何 CSS 颜色
+  },
+};
+```
+
+## 主题
+
+`@tiny-design/tokens` 中包含 5 个图表颜色令牌，自动适配亮色/暗色主题：
+
+| 令牌 | 亮色 | 暗色 |
+|------|------|------|
+| `--ty-chart-1` | `#6e41bf`（主色） | `#9065d0` |
+| `--ty-chart-2` | `#1890ff`（信息色） | `#177ddc` |
+| `--ty-chart-3` | `#52c41a`（成功色） | `#49aa19` |
+| `--ty-chart-4` | `#ff9800`（警告色） | `#d89614` |
+| `--ty-chart-5` | `#f44336`（危险色） | `#d32029` |
+
+### 使用颜色
+
+在图表元素中通过 `var(--color-KEY)` 引用颜色，其中 `KEY` 对应配置键名：
+
+```tsx
+<Bar dataKey="desktop" fill="var(--color-desktop)" />
+```
+
+或在图表数据中使用：
+
+```tsx
+const chartData = [
+  { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+];
+```
+
+## API
+
+### ChartContainer
+
+| 属性      | 说明                                   | 类型                  | 默认值  |
+| --------- | -------------------------------------- | --------------------- | ------- |
+| config    | 图表配置对象                           | `ChartConfig`         | -       |
+| children  | Recharts 图表元素                      | `React.ReactElement`  | -       |
+| className | 容器类名                               | `string`              | -       |
+| style     | 样式对象（必须包含 height 或 min-height） | `CSSProperties`     | -       |
+
+### ChartTooltipContent
+
+| 属性           | 说明                      | 类型                                          | 默认值  |
+| -------------- | ------------------------- | --------------------------------------------- | ------- |
+| indicator      | 指示器样式                | enum: `dot` &#124; `line` &#124; `dashed`     | `dot`   |
+| hideLabel      | 隐藏提示框标签            | `boolean`                                     | `false` |
+| hideIndicator  | 隐藏颜色指示器            | `boolean`                                     | `false` |
+| labelKey       | 提示框标签的配置键        | `string`                                      | -       |
+| nameKey        | 提示框项名称的数据键      | `string`                                      | -       |
+| labelFormatter | 自定义标签渲染函数        | `(label, payload) => ReactNode`               | -       |
+| formatter      | 自定义值渲染函数          | `(value, name, item, index, payload) => ReactNode` | -  |
+
+### ChartLegendContent
+
+| 属性          | 说明                      | 类型                                          | 默认值    |
+| ------------- | ------------------------- | --------------------------------------------- | --------- |
+| nameKey       | 图例项名称的数据键        | `string`                                      | -         |
+| hideIcon      | 隐藏颜色图标              | `boolean`                                     | `false`   |
+| verticalAlign | 图例位置                  | enum: `top` &#124; `bottom`                   | `bottom`  |
diff --git a/packages/charts/src/style/index.scss b/packages/charts/src/style/index.scss
new file mode 100644
index 00000000..61356808
--- /dev/null
+++ b/packages/charts/src/style/index.scss
@@ -0,0 +1,151 @@
+@use '@tiny-design/tokens/scss/tokens' as *;
+
+// ---- Chart Container ----
+.ty-chart {
+  position: relative;
+  width: 100%;
+  min-height: 200px;
+
+  // Recharts text elements inherit chart-friendly styles
+  .recharts-cartesian-axis-tick-value {
+    font-size: $token-font-size-sm;
+    fill: $token-color-text-secondary;
+  }
+
+  .recharts-cartesian-grid line {
+    stroke: $token-color-border-light;
+  }
+}
+
+// ---- Chart Tooltip ----
+// Override Recharts' built-in tooltip wrapper to prevent double-boxing
+.ty-chart .recharts-tooltip-wrapper {
+  outline: none !important;
+
+  .recharts-default-tooltip {
+    background: transparent !important;
+    border: none !important;
+    padding: 0 !important;
+    box-shadow: none !important;
+  }
+}
+
+.ty-chart-tooltip {
+  background-color: $token-color-bg-elevated;
+  backdrop-filter: blur(12px);
+  border: 1px solid $token-color-border-light;
+  border-radius: 8px;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.07),
+    0 2px 4px -2px rgba(0, 0, 0, 0.05),
+    0 0 0 1px rgba(0, 0, 0, 0.03);
+  padding: 10px 14px;
+  font-size: $token-font-size-sm;
+  min-width: 140px;
+  line-height: 1.5;
+
+  &__label {
+    font-weight: 600;
+    color: $token-color-text;
+    margin-bottom: 6px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid $token-color-border-light;
+    letter-spacing: -0.01em;
+  }
+
+  &__items {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 2px 0;
+  }
+
+  &__indicator {
+    flex-shrink: 0;
+
+    &_dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: var(--indicator-color);
+      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
+    }
+
+    &_line {
+      width: 14px;
+      height: 3px;
+      border-radius: 2px;
+      background-color: var(--indicator-color);
+    }
+
+    &_dashed {
+      width: 14px;
+      height: 0;
+      border-top: 2px dashed var(--indicator-color);
+    }
+  }
+
+  &__item-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex: 1;
+    gap: 20px;
+  }
+
+  &__item-name {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: $token-color-text-secondary;
+    white-space: nowrap;
+  }
+
+  &__item-value {
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    color: $token-color-text;
+    font-feature-settings: 'tnum';
+  }
+}
+
+// ---- Chart Legend ----
+.ty-chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 16px;
+  font-size: $token-font-size-sm;
+
+  &_top {
+    padding-bottom: 8px;
+  }
+
+  &_bottom {
+    padding-top: 8px;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: default;
+  }
+
+  &__icon {
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    flex-shrink: 0;
+  }
+
+  &__label {
+    color: $token-color-text-secondary;
+  }
+}
diff --git a/packages/charts/src/types.ts b/packages/charts/src/types.ts
new file mode 100644
index 00000000..719df280
--- /dev/null
+++ b/packages/charts/src/types.ts
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export type ChartConfig = Record<
+  string,
+  {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+    color?: string;
+    theme?: { light: string; dark: string };
+  }
+>;
diff --git a/packages/charts/tsconfig.json b/packages/charts/tsconfig.json
new file mode 100644
index 00000000..2faa36f7
--- /dev/null
+++ b/packages/charts/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "declaration": true,
+    "baseUrl": "."
+  },
+  "include": [
+    "src/"
+  ],
+  "exclude": [
+    "src/**/*.test.ts",
+    "src/**/*.test.tsx"
+  ]
+}

From c8caa2d3dea1cf80755e407a81989bafaed1362d Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Fri, 27 Mar 2026 10:49:34 +1100
Subject: [PATCH 4/5] feat(docs): integrate charts package and add charts to
 fixed version group

Add chart component route to docs under Data Display, wire up Vite alias
and style imports, render tag badges on new sidebar items, and add
@tiny-design/charts to the changeset fixed version group.
---
 .changeset/config.json                        |   3 +-
 apps/docs/package.json                        |   4 +-
 .../src/components/sidebar-menu/index.tsx     |   2 +
 .../components/sidebar-menu/sidebar-menu.scss |  11 +-
 apps/docs/src/index.tsx                       |   1 +
 apps/docs/src/routers.tsx                     |  10 +-
 apps/docs/vite.config.ts                      |   2 +
 pnpm-lock.yaml                                | 296 +++++++++++++++++-
 8 files changed, 318 insertions(+), 11 deletions(-)

diff --git a/.changeset/config.json b/.changeset/config.json
index 3714b850..20fb4565 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -6,7 +6,8 @@
     [
       "@tiny-design/react",
       "@tiny-design/icons",
-      "@tiny-design/tokens"
+      "@tiny-design/tokens",
+      "@tiny-design/charts"
     ]
   ],
   "linked": [],
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 44f04ab0..d8fbb9d0 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@mdx-js/react": "^3.1.1",
     "@stackblitz/sdk": "^1.11.0",
+    "@tiny-design/charts": "workspace:*",
     "@tiny-design/icons": "workspace:*",
     "@tiny-design/react": "workspace:*",
     "@tiny-design/tokens": "workspace:*",
@@ -17,7 +18,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.0.0",
-    "react-runner": "^1.0.5"
+    "react-runner": "^1.0.5",
+    "recharts": "^2.15.0"
   },
   "devDependencies": {
     "@mdx-js/rollup": "^3.1.1",
diff --git a/apps/docs/src/components/sidebar-menu/index.tsx b/apps/docs/src/components/sidebar-menu/index.tsx
index cb54b489..f9c5b9aa 100755
--- a/apps/docs/src/components/sidebar-menu/index.tsx
+++ b/apps/docs/src/components/sidebar-menu/index.tsx
@@ -46,6 +46,7 @@ export const SidebarMenu = (props: Props): React.ReactElement => {
                             isActive ? 'sidebar-menu__menu-item_active' : ''
                           }>
                           {item.title}
+                          {item.tag && item.tag}
                         </NavLink>
                       </li>
                     ))}
@@ -62,6 +63,7 @@ export const SidebarMenu = (props: Props): React.ReactElement => {
                       isActive ? 'sidebar-menu__menu-item_active' : ''
                     }>
                     {router.title}
+                    {router.tag && router.tag}
                   </NavLink>
                 </li>
               );
diff --git a/apps/docs/src/components/sidebar-menu/sidebar-menu.scss b/apps/docs/src/components/sidebar-menu/sidebar-menu.scss
index 14ec3064..f6351c7d 100755
--- a/apps/docs/src/components/sidebar-menu/sidebar-menu.scss
+++ b/apps/docs/src/components/sidebar-menu/sidebar-menu.scss
@@ -34,7 +34,6 @@
   }
 
   &__menu-item {
-    line-height: 40px;
     font-size: 14px;
     position: relative;
     padding-left: 50px;
@@ -43,6 +42,11 @@
       text-decoration: none;
       color: var(--ty-color-text);
       transition: all 300ms;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 40px;
+      padding-right: 16px;
 
       &:hover {
         color: var(--ty-color-primary);
@@ -96,6 +100,11 @@
     padding: 0;
   }
 
+  &__tag {
+    font-size: 10px;
+    text-transform: uppercase;
+  }
+
   &__backdrop {
     display: none;
   }
diff --git a/apps/docs/src/index.tsx b/apps/docs/src/index.tsx
index 891fd4a6..5e2a1d97 100755
--- a/apps/docs/src/index.tsx
+++ b/apps/docs/src/index.tsx
@@ -3,6 +3,7 @@ import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { MDXProvider } from '@mdx-js/react';
 import '@tiny-design/react/style/index.scss';
+import '@tiny-design/charts/style/index.scss';
 import './index.scss';
 import './utils/theme-persistence';
 
diff --git a/apps/docs/src/routers.tsx b/apps/docs/src/routers.tsx
index 14cac092..2cf16675 100755
--- a/apps/docs/src/routers.tsx
+++ b/apps/docs/src/routers.tsx
@@ -1,4 +1,5 @@
-import { lazy } from 'react';
+import React, { lazy } from 'react';
+import { Tag } from '@tiny-design/react';
 import { SiteLocale } from './locale/types';
 
 export interface RouterItem {
@@ -6,6 +7,7 @@ export interface RouterItem {
   route?: string;
   component?: any;
   children?: RouterItem[];
+  tag?: React.ReactNode;
 }
 
 type LocalizedLazy = { en: any; zh: any };
@@ -147,6 +149,7 @@ const c = {
   inputOTP: ll(() => import('../../../packages/react/src/input-otp/index.md'), () => import('../../../packages/react/src/input-otp/index.zh_CN.md')),
   overlay: ll(() => import('../../../packages/react/src/overlay/index.md'), () => import('../../../packages/react/src/overlay/index.zh_CN.md')),
   waterfall: ll(() => import('../../../packages/react/src/waterfall/index.md'), () => import('../../../packages/react/src/waterfall/index.zh_CN.md')),
+  chart: ll(() => import('../../../packages/charts/src/index.md'), () => import('../../../packages/charts/src/index.zh_CN.md')),
 };
 
 export const getGuideMenu = (s: SiteLocale): RouterItem[] => {
@@ -168,8 +171,8 @@ export const getGuideMenu = (s: SiteLocale): RouterItem[] => {
     {
       title: s.guideMenu.groups.ai,
       children: [
-        { title: s.guideMenu.mcpServer, route: 'mcp-server', component: pick(guide.mcpServer, isZh) },
-        { title: s.guideMenu.cli, route: 'cli', component: pick(guide.cli, isZh) },
+        { title: s.guideMenu.mcpServer, route: 'mcp-server', component: pick(guide.mcpServer, isZh), tag: <Tag color="info">New</Tag> },
+        { title: s.guideMenu.cli, route: 'cli', component: pick(guide.cli, isZh), tag: <Tag color="info">New</Tag> },
       ],
     },
     {
@@ -254,6 +257,7 @@ export const getComponentMenu = (s: SiteLocale): RouterItem[] => {
         { title: 'Timeline', route: 'timeline', component: pick(c.timeline, z) },
         { title: 'Tooltip', route: 'tooltip', component: pick(c.tooltip, z) },
         { title: 'Tree', route: 'tree', component: pick(c.tree, z) },
+        { title: 'Chart', route: 'chart', component: pick(c.chart, z), tag: <Tag color="info">New</Tag> },
       ],
     },
     {
diff --git a/apps/docs/vite.config.ts b/apps/docs/vite.config.ts
index 0dbc1646..de6734d8 100644
--- a/apps/docs/vite.config.ts
+++ b/apps/docs/vite.config.ts
@@ -9,6 +9,7 @@ import { readFileSync } from 'fs';
 const reactPkg = path.resolve(__dirname, '../../packages/react/package.json');
 const reactSrc = path.resolve(__dirname, '../../packages/react/src');
 const iconsSrc = path.resolve(__dirname, '../../packages/icons/src');
+const chartsSrc = path.resolve(__dirname, '../../packages/charts/src');
 
 const tinyVersion = JSON.parse(readFileSync(reactPkg, 'utf-8')).version;
 
@@ -31,6 +32,7 @@ export default defineConfig({
     alias: {
       '@tiny-design/react': reactSrc,
       '@tiny-design/icons': iconsSrc,
+      '@tiny-design/charts': chartsSrc,
     },
     dedupe: ['react', 'react-dom'],
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5498e4f8..02b10575 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,6 +71,9 @@ importers:
       '@stackblitz/sdk':
         specifier: ^1.11.0
         version: 1.11.0
+      '@tiny-design/charts':
+        specifier: workspace:*
+        version: link:../../packages/charts
       '@tiny-design/icons':
         specifier: workspace:*
         version: link:../../packages/icons
@@ -95,6 +98,9 @@ importers:
       react-runner:
         specifier: ^1.0.5
         version: 1.0.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      recharts:
+        specifier: ^2.15.0
+        version: 2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     devDependencies:
       '@mdx-js/rollup':
         specifier: ^3.1.1
@@ -121,6 +127,43 @@ importers:
         specifier: ^7.3.1
         version: 7.3.1(@types/node@25.4.0)(jiti@2.6.1)(sass@1.98.0)(tsx@4.21.0)(yaml@2.8.2)
 
+  packages/charts:
+    dependencies:
+      '@tiny-design/tokens':
+        specifier: workspace:*
+        version: link:../tokens
+      classnames:
+        specifier: ^2.3.1
+        version: 2.5.1
+      tslib:
+        specifier: ^2.3.1
+        version: 2.8.1
+    devDependencies:
+      '@types/react':
+        specifier: ^18.2.0
+        version: 18.3.28
+      '@types/react-dom':
+        specifier: ^18.2.0
+        version: 18.3.7(@types/react@18.3.28)
+      react:
+        specifier: ^18.2.0
+        version: 18.3.1
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.3.1(react@18.3.1)
+      recharts:
+        specifier: ^2.15.0
+        version: 2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
+      tsdown:
+        specifier: ^0.21.1
+        version: 0.21.2(typescript@5.9.3)
+      typescript:
+        specifier: ^5.4.0
+        version: 5.9.3
+
   packages/cli:
     dependencies:
       chalk:
@@ -168,7 +211,7 @@ importers:
         version: 18.3.28
       jest:
         specifier: ^29.0.0
-        version: 29.7.0(@types/node@25.4.0)
+        version: 29.7.0(@types/node@22.19.15)
       jest-environment-jsdom:
         specifier: ^29.0.0
         version: 29.7.0
@@ -183,7 +226,7 @@ importers:
         version: 3.0.2
       ts-jest:
         specifier: ^29.0.0
-        version: 29.4.6(@babel/core@7.29.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.29.0))(jest-util@29.7.0)(jest@29.7.0(@types/node@25.4.0))(typescript@5.9.3)
+        version: 29.4.6(@babel/core@7.29.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.29.0))(jest-util@29.7.0)(jest@29.7.0(@types/node@22.19.15))(typescript@5.9.3)
       tsdown:
         specifier: ^0.21.1
         version: 0.21.2(typescript@5.9.3)
@@ -211,7 +254,7 @@ importers:
         version: 29.7.0(@types/node@22.19.15)
       ts-jest:
         specifier: ^29.0.0
-        version: 29.4.6(@babel/core@7.29.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.29.0))(esbuild@0.27.3)(jest-util@29.7.0)(jest@29.7.0(@types/node@22.19.15))(typescript@5.9.3)
+        version: 29.4.6(@babel/core@7.29.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.29.0))(jest-util@29.7.0)(jest@29.7.0(@types/node@22.19.15))(typescript@5.9.3)
       tsup:
         specifier: ^8.0.0
         version: 8.5.1(jiti@2.6.1)(postcss@8.5.8)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2)
@@ -1386,6 +1429,33 @@ packages:
   '@types/babel__traverse@7.28.0':
     resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
 
+  '@types/d3-array@3.2.2':
+    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-shape@3.1.8':
+    resolution: {integrity: sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
@@ -2177,6 +2247,50 @@ packages:
   cyclist@1.0.2:
     resolution: {integrity: sha512-0sVXIohTfLqVIW3kb/0n6IiWF3Ifj5nm2XaSrLq2DI6fKIGa2fYAZdk917rUneaeLVpYfFcyXE2ft0fe3remsA==}
 
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.2:
+    resolution: {integrity: sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
   data-urls@3.0.2:
     resolution: {integrity: sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==}
     engines: {node: '>=12'}
@@ -2225,6 +2339,9 @@ packages:
       supports-color:
         optional: true
 
+  decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+
   decimal.js@10.6.0:
     resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
 
@@ -2310,6 +2427,9 @@ packages:
   dom-accessibility-api@0.6.3:
     resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
 
+  dom-helpers@5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+
   domexception@4.0.0:
     resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==}
     engines: {node: '>=12'}
@@ -2599,6 +2719,9 @@ packages:
     resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
     engines: {node: '>= 0.6'}
 
+  eventemitter3@4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+
   eventemitter3@5.0.4:
     resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
 
@@ -2661,6 +2784,10 @@ packages:
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
+  fast-equals@5.4.0:
+    resolution: {integrity: sha512-jt2DW/aNFNwke7AUd+Z+e6pz39KO5rzdbbFCg2sGafS4mk13MI7Z8O5z9cADNn5lhGODIgLwug6TZO2ctf7kcw==}
+    engines: {node: '>=6.0.0'}
+
   fast-glob@3.3.3:
     resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
     engines: {node: '>=8.6.0'}
@@ -3145,6 +3272,10 @@ packages:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
 
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
   ip-address@10.1.0:
     resolution: {integrity: sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==}
     engines: {node: '>= 12'}
@@ -4551,6 +4682,18 @@ packages:
       react: ^16.0.0 || ^17 || ^18
       react-dom: ^16.0.0 || ^17 || ^18
 
+  react-smooth@4.0.4:
+    resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  react-transition-group@4.4.5:
+    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
+    peerDependencies:
+      react: '>=16.6.0'
+      react-dom: '>=16.6.0'
+
   react@18.3.1:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
@@ -4566,6 +4709,16 @@ packages:
     resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
     engines: {node: '>= 14.18.0'}
 
+  recharts-scale@0.4.5:
+    resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
+
+  recharts@2.15.4:
+    resolution: {integrity: sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   recma-build-jsx@1.0.0:
     resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==}
 
@@ -5174,6 +5327,9 @@ packages:
     resolution: {integrity: sha512-G7r3AhovYtr5YKOWQkta8RKAPb+J9IsO4uVmzjl8AZwfhs8UcUwTiD6gcJYSgOtzyjvQKrKYn41syHbUWMkafA==}
     engines: {node: '>=0.10.0'}
 
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
   tinyexec@0.3.2:
     resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
@@ -5528,6 +5684,9 @@ packages:
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
+  victory-vendor@36.9.2:
+    resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
+
   vite@7.3.1:
     resolution: {integrity: sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6890,6 +7049,30 @@ snapshots:
     dependencies:
       '@babel/types': 7.29.0
 
+  '@types/d3-array@3.2.2': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-shape@3.1.8':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
   '@types/debug@4.1.12':
     dependencies:
       '@types/ms': 2.1.0
@@ -7802,6 +7985,44 @@ snapshots:
 
   cyclist@1.0.2: {}
 
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-color@3.1.0: {}
+
+  d3-ease@3.0.1: {}
+
+  d3-format@3.1.2: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
   data-urls@3.0.2:
     dependencies:
       abab: 2.0.6
@@ -7845,6 +8066,8 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  decimal.js-light@2.5.1: {}
+
   decimal.js@10.6.0: {}
 
   decode-named-character-reference@1.3.0:
@@ -7925,6 +8148,11 @@ snapshots:
 
   dom-accessibility-api@0.6.3: {}
 
+  dom-helpers@5.2.1:
+    dependencies:
+      '@babel/runtime': 7.28.6
+      csstype: 3.2.3
+
   domexception@4.0.0:
     dependencies:
       webidl-conversions: 7.0.0
@@ -8339,6 +8567,8 @@ snapshots:
 
   etag@1.8.1: {}
 
+  eventemitter3@4.0.7: {}
+
   eventemitter3@5.0.4: {}
 
   eventsource-parser@3.0.6: {}
@@ -8449,6 +8679,8 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
+  fast-equals@5.4.0: {}
+
   fast-glob@3.3.3:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -9014,6 +9246,8 @@ snapshots:
       hasown: 2.0.2
       side-channel: 1.1.0
 
+  internmap@2.0.3: {}
+
   ip-address@10.1.0: {}
 
   ip@1.1.9: {}
@@ -10946,6 +11180,23 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
       sucrase: 3.35.1
 
+  react-smooth@4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      fast-equals: 5.4.0
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+
+  react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.28.6
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0
@@ -10969,6 +11220,23 @@ snapshots:
 
   readdirp@4.1.2: {}
 
+  recharts-scale@0.4.5:
+    dependencies:
+      decimal.js-light: 2.5.1
+
+  recharts@2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      clsx: 2.1.1
+      eventemitter3: 4.0.7
+      lodash: 4.17.23
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-is: 18.3.1
+      react-smooth: 4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      recharts-scale: 0.4.5
+      tiny-invariant: 1.3.3
+      victory-vendor: 36.9.2
+
   recma-build-jsx@1.0.0:
     dependencies:
       '@types/estree': 1.0.8
@@ -11789,6 +12057,8 @@ snapshots:
 
   timed-out@4.0.1: {}
 
+  tiny-invariant@1.3.3: {}
+
   tinyexec@0.3.2: {}
 
   tinyexec@1.0.2: {}
@@ -11841,7 +12111,7 @@ snapshots:
 
   ts-interface-checker@0.1.13: {}
 
-  ts-jest@29.4.6(@babel/core@7.29.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.29.0))(esbuild@0.27.3)(jest-util@29.7.0)(jest@29.7.0(@types/node@22.19.15))(typescript@5.9.3):
+  ts-jest@29.4.6(@babel/core@7.29.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.29.0))(jest-util@29.7.0)(jest@29.7.0(@types/node@22.19.15))(typescript@5.9.3):
     dependencies:
       bs-logger: 0.2.6
       fast-json-stable-stringify: 2.1.0
@@ -11859,7 +12129,6 @@ snapshots:
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
       babel-jest: 29.7.0(@babel/core@7.29.0)
-      esbuild: 0.27.3
       jest-util: 29.7.0
 
   ts-jest@29.4.6(@babel/core@7.29.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.29.0))(jest-util@29.7.0)(jest@29.7.0(@types/node@25.4.0))(typescript@5.9.3):
@@ -12188,6 +12457,23 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
+  victory-vendor@36.9.2:
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.9
+      '@types/d3-shape': 3.1.8
+      '@types/d3-time': 3.0.4
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
   vite@7.3.1(@types/node@25.4.0)(jiti@2.6.1)(sass@1.98.0)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       esbuild: 0.27.3

From bb1f832b1abc0e115122ecda13410a69d7ed9c45 Mon Sep 17 00:00:00 2001
From: wangdicoder <wangdicoder@gmail.com>
Date: Fri, 27 Mar 2026 10:51:23 +1100
Subject: [PATCH 5/5] chore: lint

---
 .changeset/add-chart-tokens-and-charts-package.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/add-chart-tokens-and-charts-package.md b/.changeset/add-chart-tokens-and-charts-package.md
index dcb92219..3968c192 100644
--- a/.changeset/add-chart-tokens-and-charts-package.md
+++ b/.changeset/add-chart-tokens-and-charts-package.md
@@ -1,5 +1,5 @@
 ---
-"@tiny-design/tokens": minor
+"@tiny-design/tokens": patch
 ---
 
 Add chart color tokens (chart-1 through chart-5) for light and dark themes