@octohirono/stitch-design-system 0.1.0

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,54 @@
+import { Icon as e } from "../Icon/Icon.js";
+import t from "./dropdown-menu.module.js";
+import "react";
+import n from "clsx";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { DropdownMenu as o } from "radix-ui";
+//#region packages/react/src/components/DropdownMenu/DropdownMenu.tsx
+function s(c, l = "") {
+	return c.map((c, u) => {
+		let d = `${l}${u}`, f = /* @__PURE__ */ a(r, { children: [c.icon && /* @__PURE__ */ i(e, {
+			name: c.icon,
+			size: "1em",
+			className: t.itemIcon
+		}), /* @__PURE__ */ i("span", {
+			className: t.itemLabel,
+			children: c.label
+		})] });
+		return c.children && c.children.length > 0 ? /* @__PURE__ */ a(o.Sub, { children: [/* @__PURE__ */ a(o.SubTrigger, {
+			className: n(t.item, c.danger && t.danger),
+			disabled: c.disabled,
+			children: [f, /* @__PURE__ */ i(e, {
+				name: "chevron-right",
+				size: "1em",
+				className: t.subArrow
+			})]
+		}), /* @__PURE__ */ i(o.Portal, { children: /* @__PURE__ */ i(o.SubContent, {
+			className: t.content,
+			sideOffset: 8,
+			children: s(c.children, `${d}-`)
+		}) })] }, d) : /* @__PURE__ */ i(o.Item, {
+			className: n(t.item, c.danger && t.danger),
+			disabled: c.disabled,
+			onSelect: c.onClick,
+			children: f
+		}, d);
+	});
+}
+var c = ({ trigger: e, items: r, open: c, defaultOpen: l, onOpenChange: u, sideOffset: d = 8, className: f, "aria-label": p }) => /* @__PURE__ */ a(o.Root, {
+	open: c,
+	defaultOpen: l,
+	onOpenChange: u,
+	children: [/* @__PURE__ */ i(o.Trigger, {
+		asChild: !0,
+		"aria-label": p,
+		children: e
+	}), /* @__PURE__ */ i(o.Portal, { children: /* @__PURE__ */ i(o.Content, {
+		className: n(t.content, f),
+		sideOffset: d,
+		children: s(r)
+	}) })]
+});
+c.displayName = "DropdownMenu";
+//#endregion
+export { c as DropdownMenu };

package/dist/components/DropdownMenu/dropdown-menu.module.js

@@ -0,0 +1,13 @@
+//#region packages/react/src/components/DropdownMenu/dropdown-menu.module.less
+var e = "_content_5l6nu_1", t = "_item_5l6nu_21", n = "_danger_5l6nu_41", r = "_itemIcon_5l6nu_48", i = "_itemLabel_5l6nu_52", a = "_subArrow_5l6nu_55", o = {
+	content: e,
+	"stitch-dropdown-in": "_stitch-dropdown-in_5l6nu_1",
+	"stitch-dropdown-out": "_stitch-dropdown-out_5l6nu_1",
+	item: t,
+	danger: n,
+	itemIcon: r,
+	itemLabel: i,
+	subArrow: a
+};
+//#endregion
+export { e as content, n as danger, o as default, t as item, r as itemIcon, i as itemLabel, a as subArrow };

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

@@ -0,0 +1,2 @@
+export { DropdownMenu } from './DropdownMenu';
+export type { DropdownMenuProps, DropdownMenuItem } from './DropdownMenu';

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useForm } from './useForm';
+import { FormItem } from './FormItem';
+import type { FormInstance, FormProps } from './types';
+type FormComponent = ((props: FormProps<Record<string, unknown>> & {
+    ref?: React.Ref<HTMLFormElement>;
+}) => React.ReactElement) & {
+    Item: typeof FormItem;
+    useForm: typeof useForm;
+    Provider: typeof FormProvider;
+    displayName?: string;
+};
+/** 透传 ref 渲染 <form> 的主组件 */
+export declare const Form: FormComponent;
+export interface FormProviderProps {
+    form: FormInstance;
+    children: React.ReactNode;
+}
+declare const FormProvider: React.FC<FormProviderProps>;
+export default Form;

package/dist/components/Form/Form.js

@@ -0,0 +1,105 @@
+import e from "./form.module.js";
+import { FormContext as t } from "./context.js";
+import { useForm as n } from "./useForm.js";
+import { FormItem as r } from "./FormItem.js";
+import i, { useEffect as a, useMemo as o, useRef as s } from "react";
+import c from "clsx";
+import { jsx as l } from "react/jsx-runtime";
+//#region packages/react/src/components/Form/Form.tsx
+function u(r, i) {
+	let { form: u, initialValues: d, layout: f = "horizontal", labelAlign: p = f === "horizontal" ? "right" : "left", labelCol: m, wrapperCol: h, size: g = "middle", disabled: _ = !1, colon: v = !0, requiredMark: y = !1, onFinish: b, onFinishFailed: x, onValuesChange: S, onReset: C, className: w, children: T, ...E } = r, D = u !== void 0, [O] = n(), k = D ? u : O, A = s({
+		onFinish: b,
+		onFinishFailed: x,
+		onValuesChange: S
+	});
+	a(() => {
+		A.current = {
+			onFinish: b,
+			onFinishFailed: x,
+			onValuesChange: S
+		};
+	}, [
+		b,
+		x,
+		S
+	]), a(() => {
+		let e = k;
+		typeof e.__bindCallbacks == "function" && e.__bindCallbacks(A.current);
+	}, [
+		k,
+		b,
+		x,
+		S
+	]);
+	let j = s(void 0);
+	a(() => {
+		if (!d) return;
+		let e = JSON.stringify(d);
+		e !== j.current && (j.current = e, k.setFieldsValue(d));
+	}, [d, k]);
+	let M = o(() => ({
+		form: k,
+		layout: f,
+		labelAlign: p,
+		labelCol: m,
+		wrapperCol: h,
+		size: g,
+		disabled: _,
+		colon: v,
+		requiredMark: y
+	}), [
+		k,
+		f,
+		p,
+		m,
+		h,
+		g,
+		_,
+		v,
+		y
+	]), N = (e) => {
+		e.preventDefault(), e.stopPropagation(), k.validateFields().then((e) => {
+			A.current.onFinish?.(e);
+		}, (e) => {
+			e && Array.isArray(e.errorFields) && A.current.onFinishFailed?.({
+				values: e.values ?? {},
+				errorFields: e.errorFields,
+				outOfDate: !1
+			});
+		});
+	}, P = (e) => {
+		e.preventDefault(), k.resetFields(), C?.(e);
+	}, F = c(e.form, e[f], e[g], { [e.disabled]: _ }, w);
+	return /* @__PURE__ */ l(t.Provider, {
+		value: M,
+		children: /* @__PURE__ */ l("form", {
+			ref: i,
+			className: F,
+			onSubmit: N,
+			onReset: P,
+			...E,
+			children: T
+		})
+	});
+}
+var d = i.forwardRef(u);
+d.displayName = "Form", d.useForm = n;
+function f({ form: e, children: n }) {
+	let r = o(() => ({
+		form: e,
+		layout: "vertical",
+		labelAlign: "left",
+		size: "middle",
+		disabled: !1,
+		colon: !0,
+		requiredMark: !1
+	}), [e]);
+	return /* @__PURE__ */ l(t.Provider, {
+		value: r,
+		children: n
+	});
+}
+var p = f;
+p.displayName = "FormProvider", d.Item = r, d.Provider = p;
+//#endregion
+export { d as Form, d as default };

package/dist/components/Form/FormItem.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { FormItemProps } from './types';
+export declare const FormItem: React.FC<FormItemProps>;

package/dist/components/Form/FormItem.js

@@ -0,0 +1,96 @@
+import { Icon as e } from "../Icon/Icon.js";
+import t from "./form.module.js";
+import { FormContext as n } from "./context.js";
+import { stringifyNamePath as r } from "./types.js";
+import i, { useCallback as a, useContext as o, useEffect as s, useMemo as ee, useState as c } from "react";
+import l from "clsx";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region packages/react/src/components/Form/FormItem.tsx
+function p(e) {
+	if (typeof e != "object" || !e) return e;
+	let t = e.target;
+	if (t && typeof t == "object") {
+		if ((t.type === "checkbox" || t.type === "radio") && "checked" in t) return t.checked;
+		if ("value" in t && t.value !== void 0) return t.value;
+	}
+	return "value" in e ? e.value : e;
+}
+var m = (m) => {
+	let { name: h, label: g, rules: _ = [], required: v = !1, valuePropName: y = "value", trigger: b = "onChange", getValueFromEvent: x = p, normalize: S, hidden: te = !1, hasFeedback: ne = !1, validateStatus: re, help: ie, noStyle: ae = !1, labelCol: oe, wrapperCol: se, colon: ce, requiredMark: le, layout: ue, className: C, children: w } = m, T = o(n);
+	if (!T) throw Error("Form.Item must be used inside <Form> or <Form.Provider>");
+	let { form: E, layout: D, labelAlign: O, labelCol: k, wrapperCol: A, size: j, disabled: M, colon: N, requiredMark: P } = T, F = ee(() => h === void 0 ? null : r(h), [h]), [, I] = c(0), L = a(() => I((e) => e + 1), []);
+	if (s(() => {
+		if (!F) return;
+		let e = E.__store;
+		if (e) return e.registerField(h, _, void 0, L), () => e.unregisterField(F);
+	}, [
+		E,
+		F,
+		h,
+		L
+	]), s(() => {
+		F && E.__store?.updateRules?.(F, _);
+	}, [
+		_,
+		F,
+		E
+	]), te) return null;
+	let R = F ? E.getFieldValue(h) : void 0, z = F ? E.getFieldError(h) : void 0, B = F ? E.isFieldValidating(h) : !1, V = F ? E.isFieldTouched(h) : !1, H = re ?? (B ? "validating" : z?.[0] ? "error" : ""), U = (V && z?.[0] ? z[0] : void 0) ?? ie, de = le ?? P, W = (v || _.some((e) => typeof e == "object" && e.required)) && de !== !1, G = i.isValidElement(w), K = G ? { ...w.props } : {};
+	if (F && G) {
+		K[y] = R;
+		let e = K[b];
+		K[b] = (t) => {
+			typeof e == "function" && e(t);
+			let n = x(t), r = E.getFieldValue(h), i = S ? S(n, r, E.getFieldsValue(!0)) : n;
+			E.setFieldValue(h, i);
+		}, K.id === void 0 && (K.id = F);
+	}
+	let q = F ? `${F}_help` : void 0;
+	q && G && K["aria-errormessage"] === void 0 && (K["aria-errormessage"] = H === "error" ? q : void 0), M && K.disabled === void 0 && (K.disabled = !0), K.size === void 0 && (K.size = j), K.status === void 0 && (H === "error" || H === "warning") && (K.status = H);
+	let J = F && G ? i.cloneElement(w, K) : w, Y = ue ?? D, fe = Y === "inline" ? "vertical" : Y, X = oe ?? k, pe = se ?? A, me = ce ?? N, Z = (e, t = 1) => {
+		if (!e) return {};
+		let n = e.span ?? 24;
+		return { gridColumn: `${t + (e.offset ?? 0)} / span ${n}` };
+	}, he = (X?.span ?? 0) + (X?.offset ?? 0), ge = Z(X, 1), _e = Z(pe, he + 1), Q = l(t.item, t[`item-${fe}`], t[`item-${j}`], {
+		[t["item-has-error"]]: H === "error",
+		[t["item-has-warning"]]: H === "warning",
+		[t["item-has-success"]]: H === "success",
+		[t["item-is-validating"]]: H === "validating",
+		[t["item-required"]]: W
+	}, C), ve = g === void 0 ? null : /* @__PURE__ */ d("label", {
+		htmlFor: F ?? void 0,
+		className: l(t["item-label"], {
+			[t["item-label-required"]]: W,
+			[t["item-label-colon"]]: me && g !== ""
+		}),
+		style: {
+			...ge,
+			textAlign: O
+		},
+		children: g
+	}), $ = U === void 0 ? null : /* @__PURE__ */ f("div", {
+		id: q,
+		role: H === "error" ? "alert" : void 0,
+		className: l(t["item-explain"], { [t["item-explain-error"]]: H === "error" }),
+		children: [ne && H === "error" ? /* @__PURE__ */ d(e, {
+			name: "close",
+			size: 14,
+			className: t["item-feedback-icon"]
+		}) : null, U]
+	});
+	return ae ? /* @__PURE__ */ f(u, { children: [J, $] }) : /* @__PURE__ */ f("div", {
+		className: Q,
+		"data-field-name": F ?? void 0,
+		children: [ve, /* @__PURE__ */ f("div", {
+			className: t["item-control"],
+			style: _e,
+			children: [/* @__PURE__ */ d("div", {
+				className: t["item-control-input"],
+				children: J
+			}), $]
+		})]
+	});
+};
+m.displayName = "FormItem";
+//#endregion
+export { m as FormItem };

package/dist/components/Form/context.d.ts

@@ -0,0 +1,22 @@
+import type { ColProps, FormInstance, FormLabelAlign, FormLayout, FormSize, RequiredMark } from './types';
+export interface FormContextValue {
+    /** Form 实例（提供注册、校验、命令式 API） */
+    form: FormInstance;
+    /** 布局方向 */
+    layout: FormLayout;
+    /** label 对齐 */
+    labelAlign: FormLabelAlign;
+    /** label 网格 */
+    labelCol?: ColProps;
+    /** wrapper 网格 */
+    wrapperCol?: ColProps;
+    /** 全局尺寸 */
+    size: FormSize;
+    /** 全局禁用 */
+    disabled: boolean;
+    /** 是否显示冒号 */
+    colon: boolean;
+    /** 必填星号策略 */
+    requiredMark: RequiredMark;
+}
+export declare const FormContext: import("react").Context<FormContextValue | null>;

package/dist/components/Form/context.js

@@ -0,0 +1,5 @@
+import { createContext as e } from "react";
+//#region packages/react/src/components/Form/context.ts
+var t = e(null);
+//#endregion
+export { t as FormContext };

package/dist/components/Form/form.module.js

@@ -0,0 +1,25 @@
+//#region packages/react/src/components/Form/form.module.less
+var e = "_form_lunb0_1", t = "_horizontal_lunb0_11", n = "_vertical_lunb0_16", r = "_inline_lunb0_21", i = "_item_lunb0_26", a = "_disabled_lunb0_29", o = {
+	form: e,
+	horizontal: t,
+	vertical: n,
+	inline: r,
+	item: i,
+	disabled: a,
+	"item-horizontal": "_item-horizontal_lunb0_39",
+	"item-vertical": "_item-vertical_lunb0_45",
+	"item-label": "_item-label_lunb0_48",
+	"item-label-required": "_item-label-required_lunb0_60",
+	"item-label-colon": "_item-label-colon_lunb0_65",
+	"item-control": "_item-control_lunb0_69",
+	"item-control-input": "_item-control-input_lunb0_72",
+	"item-explain": "_item-explain_lunb0_85",
+	"item-explain-error": "_item-explain-error_lunb0_92",
+	"item-feedback-icon": "_item-feedback-icon_lunb0_95",
+	"item-has-error": "_item-has-error_lunb0_101",
+	"item-has-warning": "_item-has-warning_lunb0_104",
+	"item-has-success": "_item-has-success_lunb0_107",
+	"item-is-validating": "_item-is-validating_lunb0_110"
+};
+//#endregion
+export { o as default, a as disabled, e as form, t as horizontal, r as inline, i as item, n as vertical };

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

@@ -0,0 +1,7 @@
+import Form from './Form';
+export { Form } from './Form';
+export { useForm } from './useForm';
+export { FormItem } from './FormItem';
+export type { FormProviderProps } from './Form';
+export type { ColProps, FieldData, FormInstance, FormItemLayout, FormItemProps, FormLabelAlign, FormLayout, FormProps, FormSize, NamePath, RequiredMark, RuleObject, RuleRender, RuleType, Rules, ScrollOptions, StoreValue, ValidateError, ValidateInfo, ValidateStatus, } from './types';
+export default Form;

package/dist/components/Form/types.d.ts

@@ -0,0 +1,164 @@
+import type React from 'react';
+/** 字段名路径 —— 支持点号分隔的嵌套字段（"user.name"）或数组 */
+export type NamePath = string | number | (string | number)[];
+/** 字段值（任意类型） */
+export type StoreValue = unknown;
+/** 内部统一转为字符串 path，便于 Map 存储 */
+export declare function stringifyNamePath(name: NamePath): string;
+export type RuleType = 'string' | 'number' | 'boolean' | 'integer' | 'float' | 'array' | 'object' | 'email' | 'url' | 'date';
+export interface RuleObject {
+    /** 必填 */
+    required?: boolean;
+    /** 提示文本（验证失败时显示） */
+    message?: string;
+    /** 字符串/数组最小长度/最小值 */
+    min?: number;
+    /** 字符串/数组最大长度/最大值 */
+    max?: number;
+    /** 字符串/数组精确长度 */
+    len?: number;
+    /** 正则 */
+    pattern?: RegExp;
+    /** 空白字符也算校验失败（搭配 required） */
+    whitespace?: boolean;
+    /** 值类型 */
+    type?: RuleType;
+    /** 自定义校验器，可返回 Promise（异步） */
+    validator?: (rule: RuleObject, value: unknown) => Promise<void | string> | void | string;
+}
+export type RuleRender = RuleObject | ((form: FormInstance) => RuleObject);
+export type Rules = RuleRender[];
+export interface ValidateError {
+    name: NamePath;
+    errors: string[];
+}
+export interface ValidateInfo {
+    values: Record<string, unknown>;
+    errorFields: ValidateError[];
+    outOfDate: boolean;
+}
+export interface FieldData {
+    name: NamePath;
+    value?: unknown;
+    errors?: string[];
+    touched?: boolean;
+    validating?: boolean;
+}
+export interface FormInstance<T = Record<string, unknown>> {
+    /** 取单个字段值 */
+    getFieldValue: (name: NamePath) => unknown;
+    /** 取所有/指定字段值 */
+    getFieldsValue: (nameList?: NamePath[] | true) => T;
+    /** 设置单个字段值（不触发校验） */
+    setFieldValue: (name: NamePath, value: unknown) => void;
+    /** 批量设置字段值 */
+    setFieldsValue: (values: Partial<T>) => void;
+    /** 重置字段（值回到 initialValues，错误清空） */
+    resetFields: (nameList?: NamePath[]) => void;
+    /** 校验指定字段（默认全部），reject 时为错误信息 */
+    validateFields: (nameList?: NamePath[]) => Promise<T>;
+    /** 提交（先校验，触发 onFinish 或 onFinishFailed） */
+    submit: () => void;
+    /** 批量更新字段状态（错误、值、touched、validating） */
+    setFields: (fields: FieldData[]) => void;
+    /** 是否被用户操作过 */
+    isFieldTouched: (name: NamePath) => boolean;
+    /** 是否正在校验中 */
+    isFieldValidating: (name: NamePath) => boolean;
+    /** 取字段错误 */
+    getFieldError: (name: NamePath) => string[] | undefined;
+    /** 滚动到字段（占位，scrollIntoBehavior 留给消费者） */
+    scrollToField: (name: NamePath, options?: ScrollOptions) => void;
+}
+export interface ScrollOptions {
+    behavior?: 'auto' | 'smooth';
+    block?: 'start' | 'center' | 'end' | 'nearest';
+    inline?: 'start' | 'center' | 'end' | 'nearest';
+}
+export type FormLayout = 'horizontal' | 'vertical' | 'inline';
+export type FormLabelAlign = 'left' | 'right';
+export type FormSize = 'small' | 'middle' | 'large';
+export type RequiredMark = boolean | 'optional';
+export interface ColProps {
+    span?: number;
+    offset?: number;
+}
+export interface FormProps<T = Record<string, unknown>> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'children'> {
+    /** 受控 form 实例（Form.useForm() 产出） */
+    form?: FormInstance<T>;
+    /** 初始值 */
+    initialValues?: Partial<T>;
+    /** 布局方向 */
+    layout?: FormLayout;
+    /** label 对齐 */
+    labelAlign?: FormLabelAlign;
+    /** label 网格 */
+    labelCol?: ColProps;
+    /** 输入控件网格 */
+    wrapperCol?: ColProps;
+    /** 全局尺寸 */
+    size?: FormSize;
+    /** 全局禁用 */
+    disabled?: boolean;
+    /** label 后是否显示冒号 */
+    colon?: boolean;
+    /** 必填星号显示策略 */
+    requiredMark?: RequiredMark;
+    /** 校验通过 */
+    onFinish?: (values: T) => void;
+    /** 校验失败 */
+    onFinishFailed?: (info: ValidateInfo) => void;
+    /** 任意字段值变化 */
+    onValuesChange?: (changedValues: Partial<T>, allValues: T) => void;
+    /** reset 回调 */
+    onReset?: (e: React.FormEvent<HTMLFormElement>) => void;
+    children?: React.ReactNode;
+}
+export type FormItemLayout = 'horizontal' | 'vertical';
+export type ValidateStatus = 'success' | 'warning' | 'error' | 'validating' | '';
+export interface FormItemProps {
+    /** 字段名，必传（无 name 的 FormItem 仅作展示） */
+    name?: NamePath;
+    /** label 文本 */
+    label?: React.ReactNode;
+    /** 校验规则 */
+    rules?: Rules;
+    /** 是否必填（仅显示星号，校验仍以 rules.required 为准） */
+    required?: boolean;
+    /** 关联字段：依赖字段值变化时重置本字段错误 */
+    dependencies?: NamePath[];
+    /** 子节点接收的 value prop 名，默认 'value' */
+    valuePropName?: string;
+    /** 子节点接收的 change 事件 prop 名，默认 'onChange' */
+    trigger?: string;
+    /** 自定义从事件对象取值 */
+    getValueFromEvent?: (event: unknown) => unknown;
+    /** 设置前的标准化处理 */
+    normalize?: (value: unknown, prevValue: unknown, prevAllValues: Record<string, unknown>) => unknown;
+    /** 隐藏字段（不渲染、不参与布局） */
+    hidden?: boolean;
+    /** 显示校验状态图标 */
+    hasFeedback?: boolean;
+    /** 手动指定校验状态（覆盖 rules 推断） */
+    validateStatus?: ValidateStatus;
+    /** 帮助文本（错误时显示错误，否则显示 help） */
+    help?: React.ReactNode;
+    /** 不渲染外层 label/wrapper，仅包 children */
+    noStyle?: boolean;
+    /** 覆盖父级 labelCol */
+    labelCol?: ColProps;
+    /** 覆盖父级 wrapperCol */
+    wrapperCol?: ColProps;
+    /** 覆盖父级 colon */
+    colon?: boolean;
+    /** 覆盖父级 requiredMark */
+    requiredMark?: RequiredMark;
+    /** 覆盖父级 layout */
+    layout?: FormItemLayout;
+    /** 字段初始值（仅在挂载时生效一次） */
+    initialValue?: StoreValue;
+    /** 额外 className */
+    className?: string;
+    /** 子节点：通常是受控控件；无 name 时允许传入纯文本 */
+    children?: React.ReactNode;
+}

package/dist/components/Form/types.js

@@ -0,0 +1,6 @@
+//#region packages/react/src/components/Form/types.ts
+function e(e) {
+	return typeof e == "string" ? e : typeof e == "number" ? String(e) : e.map((e) => String(e)).join(".");
+}
+//#endregion
+export { e as stringifyNamePath };

package/dist/components/Form/useForm.d.ts

@@ -0,0 +1,15 @@
+import type { FormInstance, ValidateError } from './types';
+interface FormOptions {
+    initialValues?: Record<string, unknown>;
+    onValuesChange?: (changed: Record<string, unknown>, all: Record<string, unknown>) => void;
+    onFinish?: (values: Record<string, unknown>) => void;
+    onFinishFailed?: (info: {
+        values: Record<string, unknown>;
+        errorFields: ValidateError[];
+        outOfDate: boolean;
+    }) => void;
+    /** 提交回调：Form 触发 submit 时调用（先校验） */
+    submit: () => void;
+}
+export declare function useForm<T = Record<string, unknown>>(options?: Omit<FormOptions, 'submit'>): [FormInstance<T>];
+export {};