@octohirono/stitch-design-system 0.1.0 → 0.2.0

package/dist/components/BarChart/BarChart.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+/** 单条系列：从每行数据里取哪个字段、显示成什么名。 */
+export interface BarChartSeries {
+    /** 该系列在数据项里取值的字段名 */
+    dataKey: string;
+    /** 系列显示名（tooltip / 图例）；缺省用 `dataKey` */
+    name?: string;
+}
+/**
+ * 柱状图。系列色只从契约分类色槽 `var(--stitch-cat-*)` 取、按序号循环，随站换肤整图跟随；
+ * 组件内零硬编码主题值、零手写内联 svg（svg 全由 recharts 出），无 emoji。多系列默认分组并排，
+ * `stack` 开启则堆叠成一柱；多系列另出图例（`Legend`）把系列名列出，不只靠颜色区分（守 a11y）。
+ * 整图作一张图对外——`role="img"` + `aria-label`（缺省兜底非空名）。
+ */
+export interface BarChartProps {
+    /** 数据源，每项一行记录（Ant charts `data` 语义） */
+    data: Record<string, unknown>[];
+    /** x 轴取值字段名（Ant charts `xField` 语义） */
+    xField: string;
+    /** 一条或多条系列（各取一个 y 字段） */
+    series: BarChartSeries[];
+    /**
+     * 多系列堆叠成一柱（Ant charts `isStack` 语义）；关闭时多系列分组并排
+     * @default false
+     */
+    stack?: boolean;
+    /**
+     * 图表高度（px）；宽度恒铺满容器
+     * @default 300
+     */
+    height?: number;
+    /** y 值格式化（如货币）；作用于坐标轴刻度与 tooltip 值 */
+    valueFormatter?: (value: number) => string;
+    /** 图表整体可访问名（`role="img"` 的文本替代）；缺省兜底非空名 */
+    ariaLabel?: string;
+    /** 透传外层容器类名 */
+    className?: string;
+}
+/**
+ * 把数据画成柱状（单 / 多系列，可堆叠），系列色走契约分类色槽、随站换肤。
+ */
+export declare const BarChart: React.FC<BarChartProps>;

package/dist/components/BarChart/BarChart.js

@@ -0,0 +1,71 @@
+import { catColor as e } from "../_internal/dataviz/chartColors.js";
+import { ChartFrame as t } from "../_internal/dataviz/ChartFrame.js";
+import { ChartTooltip as n } from "../_internal/dataviz/ChartTooltip.js";
+import r from "./bar-chart.module.js";
+import "react";
+import i from "clsx";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Bar as s, BarChart as c, CartesianGrid as l, Legend as u, Tooltip as d, XAxis as f, YAxis as p } from "recharts";
+//#region packages/react/src/components/BarChart/BarChart.tsx
+var m = ({ data: m, xField: h, series: g, stack: _ = !1, height: v = 300, valueFormatter: y, ariaLabel: b, className: x }) => {
+	let S = { fill: "var(--stitch-text-secondary)" }, C = y ? (e) => y(e) : void 0, w = (e) => {
+		let { active: t, label: r, payload: i } = e, o = i?.map((e) => ({
+			name: e.name,
+			value: y && typeof e.value == "number" ? y(e.value) : e.value,
+			color: e.color
+		}));
+		return /* @__PURE__ */ a(n, {
+			active: t,
+			label: r,
+			payload: o
+		});
+	}, T = _ ? "stack" : void 0, E = g.length > 1;
+	return /* @__PURE__ */ a(t, {
+		ariaLabel: b,
+		height: v,
+		className: i(r.chart, x),
+		children: /* @__PURE__ */ o(c, {
+			data: m,
+			margin: {
+				top: 8,
+				right: 8,
+				bottom: 4,
+				left: 4
+			},
+			children: [
+				/* @__PURE__ */ a(l, {
+					stroke: "var(--stitch-border)",
+					vertical: !1
+				}),
+				/* @__PURE__ */ a(f, {
+					dataKey: h,
+					stroke: "var(--stitch-border)",
+					tick: S,
+					tickLine: !1
+				}),
+				/* @__PURE__ */ a(p, {
+					stroke: "var(--stitch-border)",
+					tick: S,
+					tickLine: !1,
+					tickFormatter: C
+				}),
+				/* @__PURE__ */ a(d, {
+					content: w,
+					cursor: { fill: "color-mix(in srgb, var(--stitch-text-primary), transparent 92%)" }
+				}),
+				E && /* @__PURE__ */ a(u, { wrapperStyle: { color: "var(--stitch-text-primary)" } }),
+				g.map((t, n) => /* @__PURE__ */ a(s, {
+					dataKey: t.dataKey,
+					name: t.name ?? t.dataKey,
+					fill: e(n),
+					stackId: T,
+					radius: 0,
+					isAnimationActive: !1
+				}, t.dataKey))
+			]
+		})
+	});
+};
+m.displayName = "BarChart";
+//#endregion
+export { m as BarChart };

package/dist/components/BarChart/bar-chart.module.js

@@ -0,0 +1,4 @@
+//#region packages/react/src/components/BarChart/bar-chart.module.less
+var e = "_chart_1sb8f_1", t = { chart: e };
+//#endregion
+export { e as chart, t as default };

package/dist/components/BarChart/index.d.ts

@@ -0,0 +1,2 @@
+export { BarChart } from './BarChart';
+export type { BarChartProps, BarChartSeries } from './BarChart';

package/dist/components/Calendar/Calendar.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+export type CalendarMode = 'single' | 'range';
+/** 顶部年月区形态：`'label'` 静态标题；`'dropdown'` 月/年可点下拉（快速跳月跳年） */
+export type CalendarCaptionLayout = 'label' | 'dropdown';
+/** 日期范围：`from` 起点、`to` 终点（range 模式的取值形态） */
+export interface DateRange {
+    from?: Date;
+    to?: Date;
+}
+/**
+ * 内联日历网格（react-day-picker 引擎）：一次支持 `mode="single"`（单选）与 `mode="range"`
+ * （范围）；月份网格、方向键导航、ARIA grid（`role="grid"`、日按钮可及名、翻月按钮可及名）
+ * 全由引擎兜底，上皮只读角色变量随换肤变化。
+ *
+ * 跨-prop 注意事项：
+ * - **取值随 `mode` 变形**：`single` 下 `value`/`defaultValue` 是 `Date`、`onChange` 收
+ *   `Date | undefined`；`range` 下它们是 {@link DateRange}（`{from,to}`）、`onChange` 收
+ *   `DateRange | undefined`。切 mode 时同步换掉取值形态。
+ * - **受控/非受控双模式**：给 `value` 由父管（配 `onChange` 回写），只给 `defaultValue`
+ *   组件自管；两者互斥优先取 `value`。
+ * - **禁用某些日期**用 `disabledDate(date) => boolean`（Ant 语义），命中的日按钮 `disabled`、
+ *   键盘与点击都跳过；整块只读用 `disabled`（把所有日期禁掉）。
+ * - **面 = 角色变量**：选中日 `--stitch-accent` + `--stitch-accent-text`，范围中段
+ *   `--stitch-bg-accent`（日按钮铺满整格，底色与端点框边到边对齐、不出头），今天描
+ *   `--stitch-border-strong`、hover 落 `--stitch-bg-card`、禁用走 `--stitch-text-disabled`；
+ *   翻月箭头一律经 `<Icon>`（`chevron-left`/`chevron-right`），无裸 svg / Unicode 符号。
+ * - **`captionLayout="dropdown"`（默认）** 顶部月/年为可点下拉，快速跳月跳年（原生 `<select>`
+ *   兜键盘与可及名）；传 `'label'` 退回静态标题。年份范围默认「今年往前 100 年」，用
+ *   `startMonth`/`endMonth` 收窄。
+ */
+export interface CalendarProps {
+    /** 选择模式：单日或范围 @default 'single' */
+    mode?: CalendarMode;
+    /** 受控选中值（`single`→`Date`，`range`→`DateRange`） */
+    value?: Date | DateRange;
+    /** 非受控初始选中值（`single`→`Date`，`range`→`DateRange`） */
+    defaultValue?: Date | DateRange;
+    /** 选中变化回调（`single`→`Date | undefined`，`range`→`DateRange | undefined`） */
+    onChange?: (value: Date | DateRange | undefined) => void;
+    /** 逐日禁用判定：返回 `true` 的日期不可选 */
+    disabledDate?: (date: Date) => boolean;
+    /** 整块禁用（所有日期不可选） @default false */
+    disabled?: boolean;
+    /** 首屏展示的月份（不给则据选中值 / 当月） */
+    defaultMonth?: Date;
+    /** 顶部年月区形态：`'dropdown'` 可点选月 / 年，`'label'` 静态标题 @default 'dropdown' */
+    captionLayout?: CalendarCaptionLayout;
+    /** dropdown 年份下限（不给默认今年往前 100 年） */
+    startMonth?: Date;
+    /** dropdown 年份上限（不给默认今年年底） */
+    endMonth?: Date;
+    /** 日历网格的可访问名 */
+    'aria-label'?: string;
+    /** 自定义类名（挂到日历根节点） */
+    className?: string;
+}
+export declare const Calendar: React.FC<CalendarProps>;

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,83 @@
+import { Icon as e } from "../Icon/Icon.js";
+import { Select as t } from "../Select/Select.js";
+import n from "./calendar.module.js";
+import { useCallback as r, useState as i } from "react";
+import a from "clsx";
+import { jsx as o } from "react/jsx-runtime";
+import { DayPicker as s } from "react-day-picker";
+//#region packages/react/src/components/Calendar/Calendar.tsx
+var c = ({ orientation: t }) => /* @__PURE__ */ o(e, {
+	name: t === "left" ? "chevron-left" : t === "right" ? "chevron-right" : "chevron-down",
+	size: 18
+}), l = ({ options: e, value: r, onChange: i, disabled: s, "aria-label": c }) => {
+	let l = typeof c == "string" && /year/i.test(c);
+	return /* @__PURE__ */ o(t, {
+		size: "small",
+		className: a(n.captionSelect, l && n.captionYear),
+		options: (e ?? []).map((e) => ({
+			label: e.label,
+			value: e.value,
+			disabled: e.disabled
+		})),
+		value: r == null ? void 0 : Number(r),
+		onChange: (e) => i?.({ target: { value: String(e) } }),
+		disabled: s,
+		"aria-label": typeof c == "string" ? c : void 0
+	});
+}, u = {
+	root: n.root,
+	months: n.months,
+	month: n.month,
+	month_caption: n.caption,
+	caption_label: n.captionLabel,
+	nav: n.nav,
+	button_previous: n.navButton,
+	button_next: n.navButton,
+	dropdowns: n.dropdowns,
+	month_grid: n.grid,
+	weekdays: n.weekdays,
+	weekday: n.weekday,
+	week: n.week,
+	day: n.day,
+	day_button: n.dayButton,
+	today: n.today,
+	selected: n.selected,
+	range_start: n.rangeStart,
+	range_middle: n.rangeMiddle,
+	range_end: n.rangeEnd,
+	outside: n.outside,
+	disabled: n.disabled,
+	hidden: n.hidden,
+	focused: n.focused
+}, d = ({ mode: e = "single", value: t, defaultValue: n, onChange: d, disabledDate: f, disabled: p = !1, defaultMonth: m, captionLayout: h = "dropdown", startMonth: g, endMonth: _, className: v, "aria-label": y }) => {
+	let b = t !== void 0, [x, S] = i(n), C = b ? t : x, w = r((e) => {
+		b || S(e), d?.(e);
+	}, [b, d]), T = (/* @__PURE__ */ new Date()).getFullYear(), E = h === "dropdown" ? g ?? new Date(T - 100, 0, 1) : g, D = h === "dropdown" ? _ ?? new Date(T + 10, 11, 31) : _, O = {
+		classNames: u,
+		components: {
+			Chevron: c,
+			Dropdown: l
+		},
+		disabled: p ? !0 : f,
+		defaultMonth: m,
+		captionLayout: h,
+		startMonth: E,
+		endMonth: D,
+		"aria-label": y,
+		className: a(v)
+	};
+	return e === "range" ? /* @__PURE__ */ o(s, {
+		mode: "range",
+		selected: C,
+		onSelect: (e) => w(e ?? void 0),
+		...O
+	}) : /* @__PURE__ */ o(s, {
+		mode: "single",
+		selected: C,
+		onSelect: (e) => w(e ?? void 0),
+		...O
+	});
+};
+d.displayName = "Calendar";
+//#endregion
+export { d as Calendar };

package/dist/components/Calendar/calendar.module.js

@@ -0,0 +1,26 @@
+//#region packages/react/src/components/Calendar/calendar.module.less
+var e = "_root_de6fy_1", t = "_months_de6fy_11", n = "_caption_de6fy_14", r = "_captionLabel_de6fy_21", i = "_nav_de6fy_25", a = "_navButton_de6fy_34", o = "_dropdowns_de6fy_60", s = "_captionSelect_de6fy_66", c = "_captionYear_de6fy_69", l = "_grid_de6fy_72", u = "_weekday_de6fy_75", d = "_day_de6fy_83", f = "_dayButton_de6fy_90", p = "_today_de6fy_116", m = "_selected_de6fy_116", h = "_rangeStart_de6fy_116", g = "_rangeEnd_de6fy_116", _ = "_outside_de6fy_120", v = "_disabled_de6fy_123", y = "_hidden_de6fy_130", b = "_rangeMiddle_de6fy_140", x = {
+	root: e,
+	months: t,
+	caption: n,
+	captionLabel: r,
+	nav: i,
+	navButton: a,
+	dropdowns: o,
+	captionSelect: s,
+	captionYear: c,
+	grid: l,
+	weekday: u,
+	day: d,
+	dayButton: f,
+	today: p,
+	selected: m,
+	rangeStart: h,
+	rangeEnd: g,
+	outside: _,
+	disabled: v,
+	hidden: y,
+	rangeMiddle: b
+};
+//#endregion
+export { n as caption, r as captionLabel, s as captionSelect, c as captionYear, d as day, f as dayButton, x as default, v as disabled, o as dropdowns, l as grid, y as hidden, t as months, i as nav, a as navButton, _ as outside, g as rangeEnd, b as rangeMiddle, h as rangeStart, e as root, m as selected, p as today, u as weekday };

package/dist/components/Calendar/index.d.ts

@@ -0,0 +1,2 @@
+export { Calendar } from './Calendar';
+export type { CalendarProps, CalendarMode, CalendarCaptionLayout, DateRange, } from './Calendar';

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import { type CalendarMode, type CalendarCaptionLayout, type DateRange } from '../Calendar';
+export type DatePickerSize = 'small' | 'middle' | 'large';
+/**
+ * 日期选择器（Ant `DatePicker` / `RangePicker` 语义）：字段触发器 + 复用现有
+ * {@link Popover} 弹出内联 {@link Calendar}（不另造浮层）。`mode="single"` 单日、
+ * `mode="range"` 范围（`Jul 28 – Aug 26` 的范围触发器）。
+ *
+ * 跨-prop 注意事项：
+ * - **取值随 `mode` 变形**（同 Calendar）：`single`→`Date`；`range`→{@link DateRange}
+ *   （`{from,to}`）。`onChange` 同步收对应形态或 `undefined`（清除时）。
+ * - **受控/非受控双开关**：取值 `value`/`defaultValue`/`onChange`（Ant v5 取值约定）与浮层
+ *   `open`/`onOpenChange`（Ant v5 气泡约定）各自独立支持受控与非受控。
+ * - **`allowClear`（默认开）** 有值且未禁用时在字段尾部显示清除按钮（走 `<Icon name="close">`、
+ *   原生 `<button>`、`clearAriaLabel` 定可及名）；点击清空且不冒泡打开浮层。
+ * - **`disabledDate(date)`** 透传给内层 Calendar 逐日禁用；`disabled` 禁用整个触发器。
+ * - **面 = 角色变量**：字段结构靠 `--stitch-border` + `--stitch-radius-input`，选中态与范围底色
+ *   由 Calendar 上皮（accent / bg-accent）承载；日历图标与翻月箭头一律经 `<Icon>`，无裸 svg。
+ */
+export interface DatePickerProps {
+    /** 选择模式：单日或范围 @default 'single' */
+    mode?: CalendarMode;
+    /** 受控选中值（`single`→`Date`，`range`→`DateRange`） */
+    value?: Date | DateRange;
+    /** 非受控初始选中值（`single`→`Date`，`range`→`DateRange`） */
+    defaultValue?: Date | DateRange;
+    /** 选中变化回调（含清除时的 `undefined`） */
+    onChange?: (value: Date | DateRange | undefined) => void;
+    /** 逐日禁用判定：返回 `true` 的日期不可选 */
+    disabledDate?: (date: Date) => boolean;
+    /** 首屏展示的月份（Ant `defaultPickerValue`）；不给则据选中值 / 当月 */
+    defaultPickerValue?: Date;
+    /** 弹出日历顶部年月区形态：`'dropdown'` 可点选月 / 年，`'label'` 静态标题 @default 'dropdown' */
+    captionLayout?: CalendarCaptionLayout;
+    /** 禁用整个触发器 @default false */
+    disabled?: boolean;
+    /** 允许一键清除 @default true */
+    allowClear?: boolean;
+    /** 清除按钮的无障碍标签 @default '清除' */
+    clearAriaLabel?: string;
+    /** 占位符（`range` 可传 `[起, 止]` 两段） */
+    placeholder?: string | [string, string];
+    /** 日期展示格式（date-fns 格式串） @default 'yyyy-MM-dd' */
+    format?: string;
+    /** 触发器尺寸 @default 'middle' */
+    size?: DatePickerSize;
+    /** 校验态（error 同时置 `aria-invalid`） */
+    status?: 'error' | 'warning';
+    /** 受控浮层显隐（Ant v5 `open`） */
+    open?: boolean;
+    /** 非受控初始显隐 @default false */
+    defaultOpen?: boolean;
+    /** 显隐变化回调（Ant v5 `onOpenChange`） */
+    onOpenChange?: (open: boolean) => void;
+    /** 触发器的可访问名 */
+    'aria-label'?: string;
+    /** 自定义类名（挂到字段包裹上） */
+    className?: string;
+}
+export declare const DatePicker: React.FC<DatePickerProps>;

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,75 @@
+import { Icon as e } from "../Icon/Icon.js";
+import { Calendar as t } from "../Calendar/Calendar.js";
+import { Popover as n } from "../Popover/Popover.js";
+import r from "./datepicker.module.js";
+import { useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
+import c from "clsx";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { format as d } from "date-fns";
+//#region packages/react/src/components/DatePicker/DatePicker.tsx
+var f = (e) => typeof e == "object" && !!e && !(e instanceof Date), p = ({ mode: p = "single", value: m, defaultValue: h, onChange: g, disabledDate: _, defaultPickerValue: v, captionLayout: y, disabled: b = !1, allowClear: x = !0, clearAriaLabel: S = "清除", placeholder: C, format: w = "yyyy-MM-dd", size: T = "middle", status: E, open: D, defaultOpen: O, onOpenChange: k, className: A, "aria-label": j }) => {
+	let M = m !== void 0, [N, P] = s(h), F = M ? m : N, I = D !== void 0, [L, R] = s(O ?? !1), z = I ? D : L, B = i((e) => {
+		I || R(e), k?.(e);
+	}, [I, k]), V = o(0);
+	a(() => {
+		z && (V.current = 0);
+	}, [z]);
+	let H = i((e) => {
+		M || P(e), g?.(e);
+	}, [M, g]), U = i((e) => {
+		H(e), p === "range" ? (V.current += 1, V.current >= 2 && f(e) && e.from && e.to && B(!1)) : e && B(!1);
+	}, [
+		H,
+		p,
+		B
+	]), W = i((e) => {
+		e.stopPropagation(), H(void 0);
+	}, [H]), G = (e) => e ? d(e, w) : "", K = "", q = !1;
+	p === "range" && f(F) ? (q = !!(F.from || F.to), q && (K = `${G(F.from)} – ${G(F.to)}`)) : p === "single" && F instanceof Date && (q = !0, K = G(F));
+	let [J, Y] = Array.isArray(C) ? C : [C, C], X = p === "range" ? `${J ?? "开始日期"} – ${Y ?? "结束日期"}` : J ?? "请选择日期", Z = x && q && !b, Q = c(r.field, r[T], E && r[`status-${E}`], b && r.disabled, A), $ = /* @__PURE__ */ u("button", {
+		type: "button",
+		className: r.trigger,
+		disabled: b,
+		"aria-label": j,
+		"aria-invalid": E === "error" ? "true" : void 0,
+		"aria-haspopup": "dialog",
+		children: [/* @__PURE__ */ l(e, {
+			name: "calendar",
+			size: 16,
+			className: r.calendarIcon
+		}), /* @__PURE__ */ l("span", {
+			className: c(r.text, !q && r.placeholder),
+			children: q ? K : X
+		})]
+	});
+	return /* @__PURE__ */ u("span", {
+		className: Q,
+		children: [/* @__PURE__ */ l(n, {
+			open: z,
+			onOpenChange: B,
+			"aria-label": j ?? X,
+			trigger: $,
+			className: r.panel,
+			children: /* @__PURE__ */ l(t, {
+				mode: p,
+				value: F,
+				onChange: U,
+				disabledDate: _,
+				defaultMonth: v,
+				captionLayout: y
+			})
+		}), Z && /* @__PURE__ */ l("button", {
+			type: "button",
+			className: r.clear,
+			"aria-label": S,
+			onClick: W,
+			children: /* @__PURE__ */ l(e, {
+				name: "close",
+				size: 14
+			})
+		})]
+	});
+};
+p.displayName = "DatePicker";
+//#endregion
+export { p as DatePicker };

package/dist/components/DatePicker/datepicker.module.js

@@ -0,0 +1,17 @@
+//#region packages/react/src/components/DatePicker/datepicker.module.less
+var e = "_field_qa4ee_1", t = "_trigger_qa4ee_7", n = "_calendarIcon_qa4ee_37", r = "_text_qa4ee_41", i = "_placeholder_qa4ee_47", a = "_small_qa4ee_50", o = "_middle_qa4ee_54", s = "_large_qa4ee_57", c = "_clear_qa4ee_73", l = "_panel_qa4ee_94", u = {
+	field: e,
+	trigger: t,
+	calendarIcon: n,
+	text: r,
+	placeholder: i,
+	small: a,
+	middle: o,
+	large: s,
+	"status-error": "_status-error_qa4ee_61",
+	"status-warning": "_status-warning_qa4ee_67",
+	clear: c,
+	panel: l
+};
+//#endregion
+export { n as calendarIcon, c as clear, u as default, e as field, s as large, o as middle, l as panel, i as placeholder, a as small, r as text, t as trigger };

package/dist/components/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+export type { DatePickerProps, DatePickerSize } from './DatePicker';

package/dist/components/Icon/Icon.d.ts

@@ -4,6 +4,8 @@ declare const ICON_PATHS: {
     readonly close: readonly ["M6 6l12 12", "M18 6L6 18"];
     readonly 'chevron-down': readonly ["M5 9l7 7 7-7"];
     readonly 'chevron-right': readonly ["M9 5l7 7-7 7"];
+    readonly 'chevron-left': readonly ["M15 5l-7 7 7 7"];
+    readonly calendar: readonly ["M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z", "M8 3v4", "M16 3v4", "M4 10h16"];
     readonly search: readonly ["M4 11a7 7 0 1 0 14 0a7 7 0 1 0 -14 0z", "M16.5 16.5L21 21"];
     readonly menu: readonly ["M4 7h16", "M4 12h16", "M4 17h16"];
     readonly info: readonly ["M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0z", "M12 11v5", "M12 7.5h0.01"];
@@ -19,6 +21,8 @@ declare const ICON_PATHS: {
     readonly 'align-left': readonly ["M4 6h16", "M4 12h10", "M4 18h13"];
     readonly 'align-center': readonly ["M4 6h16", "M7 12h10", "M6 18h12"];
     readonly 'align-right': readonly ["M4 6h16", "M10 12h10", "M7 18h13"];
+    readonly 'arrow-up-right': readonly ["M7 17L17 7", "M8 7h9v9"];
+    readonly 'arrow-down-right': readonly ["M7 7L17 17", "M17 8v9H8"];
 };
 export type IconName = keyof typeof ICON_PATHS;
 /**
@@ -69,6 +73,12 @@ export declare const ICON_LIST: readonly [{
 }, {
     readonly name: 'chevron-right';
     readonly label: 'Chevron right';
+}, {
+    readonly name: 'chevron-left';
+    readonly label: 'Chevron left';
+}, {
+    readonly name: 'calendar';
+    readonly label: 'Calendar';
 }, {
     readonly name: 'search';
     readonly label: 'Search';
@@ -96,5 +106,11 @@ export declare const ICON_LIST: readonly [{
 }, {
     readonly name: 'eye-off';
     readonly label: 'Eye off';
+}, {
+    readonly name: 'arrow-up-right';
+    readonly label: 'Trend up';
+}, {
+    readonly name: 'arrow-down-right';
+    readonly label: 'Trend down';
 }];
 export {};

package/dist/components/Icon/Icon.js

@@ -8,6 +8,13 @@ var r = {
 	close: ["M6 6l12 12", "M18 6L6 18"],
 	"chevron-down": ["M5 9l7 7 7-7"],
 	"chevron-right": ["M9 5l7 7-7 7"],
+	"chevron-left": ["M15 5l-7 7 7 7"],
+	calendar: [
+		"M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z",
+		"M8 3v4",
+		"M16 3v4",
+		"M4 10h16"
+	],
 	search: ["M4 11a7 7 0 1 0 14 0a7 7 0 1 0 -14 0z", "M16.5 16.5L21 21"],
 	menu: [
 		"M4 7h16",
@@ -59,7 +66,9 @@ var r = {
 		"M4 6h16",
 		"M10 12h10",
 		"M7 18h13"
-	]
+	],
+	"arrow-up-right": ["M7 17L17 7", "M8 7h9v9"],
+	"arrow-down-right": ["M7 7L17 17", "M17 8v9H8"]
 }, i = /* @__PURE__ */ new Set(["dot"]), a = ({ name: a, src: o, size: s = 24, label: c, strokeWidth: l, className: u, style: d, ...f }) => {
 	let p = t(e.icon, u), m = c == null ? { "aria-hidden": !0 } : {
 		role: "img",
@@ -109,6 +118,14 @@ var o = [
 		name: "chevron-right",
 		label: "Chevron right"
 	},
+	{
+		name: "chevron-left",
+		label: "Chevron left"
+	},
+	{
+		name: "calendar",
+		label: "Calendar"
+	},
 	{
 		name: "search",
 		label: "Search"
@@ -144,6 +161,14 @@ var o = [
 	{
 		name: "eye-off",
 		label: "Eye off"
+	},
+	{
+		name: "arrow-up-right",
+		label: "Trend up"
+	},
+	{
+		name: "arrow-down-right",
+		label: "Trend down"
 	}
 ];
 //#endregion

package/dist/components/LineChart/LineChart.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+/** 单条系列：从每行数据里取哪个字段、显示成什么名。 */
+export interface LineChartSeries {
+    /** 该系列在数据项里取值的字段名 */
+    dataKey: string;
+    /** 系列显示名（tooltip / 图例）；缺省用 `dataKey` */
+    name?: string;
+}
+/**
+ * 折线 / 面积图。系列色只从契约分类色槽 `var(--stitch-cat-*)` 取、按序号循环，随站换肤整图跟随；
+ * `area` 开启时线下软填充由同一系列色经 `color-mix()` 派生。多系列不只靠颜色区分——每系列按序
+ * 循环线型（`strokeDasharray`），并在末点旁直接标出系列名（文字走 `var(--stitch-text-primary)`），
+ * 故主题线色偏淡时也能分辨（不依赖颜色，守 a11y）。svg 全由 recharts 出、源码零手写 svg，无 emoji。
+ * 整图作一张图对外——`role="img"` + `aria-label`（缺省兜底非空名）。
+ */
+export interface LineChartProps {
+    /** 数据源，每项一行记录（Ant charts `data` 语义） */
+    data: Record<string, unknown>[];
+    /** x 轴取值字段名（Ant charts `xField` 语义） */
+    xField: string;
+    /** 一条或多条系列（各取一个 y 字段） */
+    series: LineChartSeries[];
+    /**
+     * 平滑曲线（Ant charts `smooth` 语义）
+     * @default false
+     */
+    smooth?: boolean;
+    /**
+     * 折线下渲染派生软填充面积（Ant charts `area` 语义）
+     * @default false
+     */
+    area?: boolean;
+    /**
+     * 图表高度（px）；宽度恒铺满容器
+     * @default 300
+     */
+    height?: number;
+    /** y 值格式化（如货币）；作用于坐标轴刻度与 tooltip 值 */
+    valueFormatter?: (value: number) => string;
+    /** 图表整体可访问名（`role="img"` 的文本替代）；缺省兜底非空名 */
+    ariaLabel?: string;
+    /** 透传外层容器类名 */
+    className?: string;
+}
+/**
+ * 把数据画成折线（可选面积），系列色走契约分类色槽、随站换肤。
+ */
+export declare const LineChart: React.FC<LineChartProps>;