@pisell/materials 1.0.1034 → 1.0.1035

package/lib/components/filter/components/FilterButton/index.js

@@ -10,7 +10,7 @@ let _pisell_icon_es_FilterLines = require("@pisell/icon/es/FilterLines");
 _pisell_icon_es_FilterLines = require_rolldown_runtime.__toESM(_pisell_icon_es_FilterLines);
 
 //#region src/components/filter/components/FilterButton/index.tsx
-const Filter = ({ value, hiddenQuickFilter, hiddenOtherFilter, onChange, quickFilterMaxLength, formFiltersPrefix, renderItem, placement }) => {
+const Filter = ({ value, hiddenQuickFilter, hiddenOtherFilter, onChange, quickFilterMaxLength, formFiltersPrefix, renderItem, placement, size = "large", buttonClassName }) => {
 	const ref = (0, react.useRef)(null);
 	const [open, setOpen] = (0, react.useState)(false);
 	const [dateRangeOpen, setDateRangeOpen] = (0, react.useState)(false);
@@ -58,8 +58,9 @@ const Filter = ({ value, hiddenQuickFilter, hiddenOtherFilter, onChange, quickFi
 		},
 		placement
 	}, /* @__PURE__ */ react.default.createElement(antd.Button, {
+		className: buttonClassName,
 		icon: /* @__PURE__ */ react.default.createElement(_pisell_icon_es_FilterLines.default, null),
-		size: "large"
+		size
 	}, isMobileBool ? null : require_index.getText("table-action-filter-button"))));
 };
 var FilterButton_default = Filter;

package/lib/components/filter/components/FilterButton/types.d.ts

@@ -4,7 +4,8 @@ import { FilterItemProps } from "../../types.js";
 //#region src/components/filter/components/FilterButton/types.d.ts
 type FilterValueType = {
   quickFilter: FilterItemProps[];
-  otherFilter: FilterItemProps[];
+  otherFilter: FilterItemProps[]; /** 筛选项表单值，字段名 -> 值，与 Form 的 values 一致 */
+  values?: Record<string, any>;
 };
 type FilterListProps = {
   value?: FilterValueType;
@@ -14,7 +15,9 @@ type FilterListProps = {
   quickFilterMaxLength: number;
   formFiltersPrefix: string;
   renderItem?: (item: any, otherProps?: any) => React.ReactNode;
-  placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+  placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom'; /** 筛选按钮尺寸，与 antd Button size 一致 */
+  size?: 'small' | 'middle' | 'large'; /** 筛选触发按钮的 className，用于定制样式（如与设计系统对齐） */
+  buttonClassName?: string;
 };
 //#endregion
 export { FilterListProps };

package/lib/components/filter/components/FilterItem/AsyncOptionsSelectWrapper.js

@@ -0,0 +1,69 @@
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.js');
+const require_objectSpread2 = require('../../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectSpread2.js');
+const require_objectWithoutProperties = require('../../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectWithoutProperties.js');
+const require_PisellSingleSelect = require('../../../pisellSingleSelect/PisellSingleSelect.js');
+const require_PisellMultipleSelect = require('../../../pisellMultipleSelect/PisellMultipleSelect.js');
+let antd = require("antd");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/components/filter/components/FilterItem/AsyncOptionsSelectWrapper.tsx
+/**
+* 筛选项中 singleSelect/multipleSelect 的异步 options 包装器。
+* 当列配置传入 getOptions（同步或异步）时，先解析再渲染 PisellSingleSelect/PisellMultipleSelect。
+*/
+const _excluded = [
+	"getOptions",
+	"fieldType",
+	"value",
+	"onChange"
+];
+function normalizeOptions(list) {
+	if (!Array.isArray(list)) return [];
+	return list.map((item) => item && typeof item === "object" && "label" in item && "value" in item ? {
+		label: String(item.label),
+		value: item.value
+	} : {
+		label: String(item),
+		value: item
+	});
+}
+const AsyncOptionsSelectWrapper = (props) => {
+	const { getOptions, fieldType, value, onChange } = props, rest = require_objectWithoutProperties._objectWithoutProperties(props, _excluded);
+	const [options, setOptions] = (0, react.useState)([]);
+	const [loading, setLoading] = (0, react.useState)(true);
+	(0, react.useEffect)(() => {
+		setLoading(true);
+		const result = getOptions();
+		Promise.resolve(result).then((list) => {
+			setOptions(normalizeOptions(list));
+		}).finally(() => {
+			setLoading(false);
+		});
+	}, [getOptions]);
+	const commonProps = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, rest), {}, {
+		options,
+		mode: "edit"
+	});
+	if (loading) return /* @__PURE__ */ react.default.createElement(antd.Spin, {
+		spinning: true,
+		size: "small"
+	}, /* @__PURE__ */ react.default.createElement("span", { style: {
+		display: "inline-block",
+		minWidth: 120,
+		minHeight: 32
+	} }));
+	if (fieldType === "multipleSelect") return /* @__PURE__ */ react.default.createElement(require_PisellMultipleSelect.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, commonProps), {}, {
+		value,
+		onChange
+	}));
+	return /* @__PURE__ */ react.default.createElement(require_PisellSingleSelect.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, commonProps), {}, {
+		value,
+		onChange
+	}));
+};
+AsyncOptionsSelectWrapper.displayName = "AsyncOptionsSelectWrapper";
+var AsyncOptionsSelectWrapper_default = AsyncOptionsSelectWrapper;
+
+//#endregion
+exports.default = AsyncOptionsSelectWrapper_default;

package/lib/components/filter/components/FilterItem/index.js

@@ -1,22 +1,122 @@
 const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.js');
 const require_objectSpread2 = require('../../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectSpread2.js');
-const require_index = require('../../../table/Table/fields/index.js');
+const require_objectWithoutProperties = require('../../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectWithoutProperties.js');
+const require_index = require('../../../../locales/index.js');
+const require_index$1 = require('../../../table/Table/fields/index.js');
+const require_PisellSingleLineText = require('../../../pisellSingleLineText/PisellSingleLineText.js');
+const require_PisellLongText = require('../../../pisellLongText/PisellLongText.js');
+const require_PisellEmail = require('../../../pisellEmail/PisellEmail.js');
+const require_PisellPhone = require('../../../pisellPhone/PisellPhone.js');
+const require_PisellUrl = require('../../../pisellUrl/PisellUrl.js');
+const require_PisellNumber = require('../../../pisellNumber/PisellNumber.js');
+const require_PisellCurrency = require('../../../pisellCurrency/PisellCurrency.js');
+const require_PisellPercent = require('../../../pisellPercent/PisellPercent.js');
+const require_PisellRating = require('../../../pisellRating/PisellRating.js');
+const require_PisellSingleSelect = require('../../../pisellSingleSelect/PisellSingleSelect.js');
+const require_PisellMultipleSelect = require('../../../pisellMultipleSelect/PisellMultipleSelect.js');
+const require_AsyncOptionsSelectWrapper = require('./AsyncOptionsSelectWrapper.js');
 let antd = require("antd");
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
+let dayjs = require("dayjs");
+dayjs = require_rolldown_runtime.__toESM(dayjs);
 require("./index.less");
 
 //#region src/components/filter/components/FilterItem/index.tsx
+const _excluded = ["value", "onChange"], _excluded2 = ["getOptions"];
+const { RangePicker } = antd.DatePicker;
+/** 列 type（RecordBoardFieldType）对应 Pisell 组件，用于筛选项编辑态；与 RecordBoard 列 type 一致 */
+const PISELL_FIELD_TYPE_MAP = {
+	singleLineText: require_PisellSingleLineText.default,
+	longText: require_PisellLongText.default,
+	email: require_PisellEmail.default,
+	phone: require_PisellPhone.default,
+	url: require_PisellUrl.default,
+	number: require_PisellNumber.default,
+	currency: require_PisellCurrency.default,
+	percent: require_PisellPercent.default,
+	rating: require_PisellRating.default,
+	singleSelect: require_PisellSingleSelect.default,
+	multipleSelect: require_PisellMultipleSelect.default
+};
+/** 筛选类型到 table field 类型的映射（table fields 无 single/input，用 select/text） */
+const FILTER_TYPE_TO_FIELD = {
+	single: "select",
+	input: "text",
+	datePicker: "date",
+	rangePicker: "rangePicker",
+	search: "search"
+};
+/** 将 form 中可能为 string[] 或 dayjs[] 的值转为 RangePicker 需要的 [Dayjs, Dayjs] | null */
+function toRangePickerValue(val) {
+	if (val == null) return null;
+	if (Array.isArray(val) && val.length >= 2) {
+		const start = val[0] ? dayjs.default.isDayjs(val[0]) ? val[0] : (0, dayjs.default)(val[0]) : null;
+		const end = val[1] ? dayjs.default.isDayjs(val[1]) ? val[1] : (0, dayjs.default)(val[1]) : null;
+		if (start && end) return [start, end];
+	}
+	return null;
+}
+/** 使用 antd RangePicker，仅做 value 归一化以兼容 form 里存的 string[] */
+const AntdRangePickerWithValue = react.default.forwardRef(function AntdRangePickerWithValue(_ref, ref) {
+	let { value, onChange } = _ref, rest = require_objectWithoutProperties._objectWithoutProperties(_ref, _excluded);
+	const normalized = toRangePickerValue(value);
+	return /* @__PURE__ */ react.default.createElement(RangePicker, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, rest), {}, {
+		ref,
+		placeholder: [require_index.getText("table-action-range-picker-placeholder-start"), require_index.getText("table-action-range-picker-placeholder-end")],
+		value: normalized,
+		onChange: (dates) => onChange === null || onChange === void 0 ? void 0 : onChange(dates !== null && dates !== void 0 ? dates : void 0)
+	}));
+});
 const FilterItem = (props) => {
-	const { label, type, name, other, isHidden } = props;
+	var _componentProps$getOp;
+	const { label, type, name, other, isHidden, props: itemProps } = props;
+	const fieldTypeFromColumn = other === null || other === void 0 ? void 0 : other.fieldType;
+	const PisellCom = fieldTypeFromColumn ? PISELL_FIELD_TYPE_MAP[fieldTypeFromColumn] : void 0;
+	if (type === "custom") {
+		const CustomComponent = other === null || other === void 0 ? void 0 : other.component;
+		if (!CustomComponent) return null;
+		const componentProps$1 = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, itemProps || {}), other || {});
+		delete componentProps$1.component;
+		return /* @__PURE__ */ react.default.createElement(antd.Form.Item, require_objectSpread2._objectSpread2({
+			label,
+			name,
+			hidden: isHidden
+		}, (other === null || other === void 0 ? void 0 : other.formItemProps) || {}), /* @__PURE__ */ react.default.createElement(CustomComponent, componentProps$1));
+	}
+	if (type === "rangePicker") {
+		const componentProps$1 = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, itemProps || {}), other || {}), {}, { prefixCls: "pisell-lowcode" });
+		return /* @__PURE__ */ react.default.createElement(antd.Form.Item, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({
+			label,
+			name
+		}, (other === null || other === void 0 ? void 0 : other.formItemProps) || {}), {}, {
+			hidden: isHidden,
+			className: "pisell-lowcode-range-picker-wrap"
+		}), /* @__PURE__ */ react.default.createElement(AntdRangePickerWithValue, componentProps$1));
+	}
 	const Com = (0, react.useMemo)(() => {
-		var _fieldMaps;
-		return (_fieldMaps = require_index.fieldMaps[type]) === null || _fieldMaps === void 0 ? void 0 : _fieldMaps.edit;
-	}, [type]);
+		var _FILTER_TYPE_TO_FIELD, _fieldMaps;
+		if (PisellCom) return PisellCom;
+		return (_fieldMaps = require_index$1.fieldMaps[(_FILTER_TYPE_TO_FIELD = FILTER_TYPE_TO_FIELD[type]) !== null && _FILTER_TYPE_TO_FIELD !== void 0 ? _FILTER_TYPE_TO_FIELD : type]) === null || _fieldMaps === void 0 ? void 0 : _fieldMaps.edit;
+	}, [type, PisellCom]);
+	if (!Com) return null;
+	const isPisell = Boolean(PisellCom);
+	const componentProps = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, itemProps || {}), other || {}), isPisell ? { mode: "edit" } : {});
+	const getOptions = (_componentProps$getOp = componentProps.getOptions) !== null && _componentProps$getOp !== void 0 ? _componentProps$getOp : other === null || other === void 0 ? void 0 : other.getOptions;
+	if (isPisell && typeof getOptions === "function" && (fieldTypeFromColumn === "singleSelect" || fieldTypeFromColumn === "multipleSelect") && fieldTypeFromColumn) {
+		const { getOptions: _go } = componentProps, restProps = require_objectWithoutProperties._objectWithoutProperties(componentProps, _excluded2);
+		return /* @__PURE__ */ react.default.createElement(antd.Form.Item, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({
+			label,
+			name
+		}, (other === null || other === void 0 ? void 0 : other.formItemProps) || {}), {}, { hidden: isHidden }), /* @__PURE__ */ react.default.createElement(require_AsyncOptionsSelectWrapper.default, require_objectSpread2._objectSpread2({
+			getOptions,
+			fieldType: fieldTypeFromColumn
+		}, restProps)));
+	}
 	return /* @__PURE__ */ react.default.createElement(antd.Form.Item, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({
 		label,
 		name
-	}, (other === null || other === void 0 ? void 0 : other.formItemProps) || {}), {}, { hidden: isHidden }), /* @__PURE__ */ react.default.createElement(Com, other));
+	}, (other === null || other === void 0 ? void 0 : other.formItemProps) || {}), {}, { hidden: isHidden }), /* @__PURE__ */ react.default.createElement(Com, componentProps));
 };
 var FilterItem_default = FilterItem;
 

package/lib/components/filter/components/FilterItem/index.less

@@ -0,0 +1,90 @@
+/**
+ * FilterItem 样式
+ * RangePicker 按 Figma Pisell 2.0 Component Library (node-id=13586-90520)
+ * 使用 pisell-lowcode- 前缀（RangePicker 传入 prefixCls="pisell-lowcode"）
+ * - Border: Gray/300 #D0D5DD, 1px
+ * - Background: Base/White #FFFFFF
+ * - Text/Icon: Gray/500 #667085
+ * - Typography: Text md/Regular - Inter 16px, weight 400, line-height 24px
+ * - Shadow: Shadow/xs 0 1px 2px rgba(16, 24, 40, 0.05)
+ * - Border radius: 8px
+ */
+
+.pisell-lowcode-range-picker-wrap {
+  width: 257px;
+
+  .pisell-lowcode-range {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0;
+    color: #667085;
+    border-radius: 8px;
+    border: 1px solid #d0d5dd;
+    background: #ffffff;
+    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
+    width: 100%;
+    height: 48px;
+    min-height: 48px;
+    padding: 6px 11px;
+
+    .pisell-lowcode-picker-input {
+      height: 36px;
+
+      > input {
+        font-family: inherit;
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 24px;
+        color: #667085;
+
+        &::placeholder {
+          color: #667085;
+          opacity: 0.6;
+        }
+      }
+    }
+
+    .pisell-lowcode-picker-separator {
+      color: #667085;
+    }
+
+    .pisell-lowcode-picker-suffix,
+    .pisell-lowcode-picker-clear {
+      color: #667085;
+    }
+
+    &:hover {
+      border-color: #d0d5dd;
+    }
+
+    &.pisell-lowcode-picker-focused {
+      border-color: #d0d5dd;
+      box-shadow: 0 0 0 2px rgba(16, 24, 40, 0.05);
+    }
+
+    &.pisell-lowcode-picker-large {
+      height: 48px;
+      min-height: 48px;
+      padding: 6px 11px;
+
+      .pisell-lowcode-picker-input {
+        height: 36px;
+      }
+    }
+
+    &.pisell-lowcode-picker-small {
+      min-height: 32px;
+      padding: 2px 7px;
+
+      .pisell-lowcode-picker-input {
+        height: 24px;
+      }
+
+      .pisell-lowcode-picker-input > input {
+        font-size: 14px;
+      }
+    }
+  }
+}

package/lib/components/filter/types.d.ts

@@ -15,12 +15,14 @@ type FilterType = {
 };
 /**
  * 筛选列表项配置
+ * - type 为 single/input/rangePicker 等时使用内置或映射组件
+ * - type 为 "custom" 时使用 other.component，组件接收 value/onChange（由 Form 注入）
  */
 type FilterItemProps = {
-  type: "single" | "input" | "datePicker" | "rangePicker" | "search";
+  type: "single" | "input" | "datePicker" | "rangePicker" | "search" | "custom";
   name?: string | string[];
   key: string;
-  props: object;
+  props?: object;
   label?: string;
   sort?: boolean;
   localFilter?: boolean;

package/lib/components/input/index.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import { InputProps, InputRef } from "antd";
-import * as react4 from "react";
+import * as react3 from "react";
 import * as antd_es_input0 from "antd/es/input";
 import * as antd_es_input_TextArea0 from "antd/es/input/TextArea";
 
 //#region src/components/input/index.d.ts
-declare const OriginalGroup: react4.FC<antd_es_input0.GroupProps>, OriginalTextArea: react4.ForwardRefExoticComponent<antd_es_input0.TextAreaProps & react4.RefAttributes<antd_es_input_TextArea0.TextAreaRef>>, OriginalPassword: react4.ForwardRefExoticComponent<antd_es_input0.PasswordProps & react4.RefAttributes<InputRef>>, OriginalSearch: react4.ForwardRefExoticComponent<antd_es_input0.SearchProps & react4.RefAttributes<InputRef>>;
+declare const OriginalGroup: react3.FC<antd_es_input0.GroupProps>, OriginalTextArea: react3.ForwardRefExoticComponent<antd_es_input0.TextAreaProps & react3.RefAttributes<antd_es_input_TextArea0.TextAreaRef>>, OriginalPassword: react3.ForwardRefExoticComponent<antd_es_input0.PasswordProps & react3.RefAttributes<InputRef>>, OriginalSearch: react3.ForwardRefExoticComponent<antd_es_input0.SearchProps & react3.RefAttributes<InputRef>>;
 type CompoundedComponent = React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>> & {
   Group: typeof OriginalGroup;
   Search: typeof OriginalSearch;

package/lib/components/pisell-config-provider/context.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import * as react3 from "react";
+import * as react10 from "react";
 
 //#region src/components/pisell-config-provider/context.d.ts
 interface PisellContextType {
@@ -11,7 +11,7 @@ interface PisellContextType {
   /** 获取货币符号 */
   getSymbolic?: () => string;
 }
-declare const PisellContext: react3.Context<PisellContextType>;
+declare const PisellContext: react10.Context<PisellContextType>;
 /**
  * provider外获取当前全局配置
  */

package/lib/components/pisellCurrency/PisellCurrency.less

@@ -1,43 +1,181 @@
-// PisellCurrency 组件样式
+/**
+ * PisellCurrency 组件样式
+ * 基于 Figma 设计规范，与 PisellNumber / SingleLineText 设计体系一致，覆盖时使用 pisell-lowcode-xxx
+ */
 
 .pisell-currency {
-  // 基础样式
   display: inline-block;
+  width: 100%;
 
-  // 只读态样式
-  &-read {
-    color: rgba(0, 0, 0, 0.85);
-    line-height: 1.5715;
-    
-    // 货币数值可以加粗显示（可选）
-    font-weight: 500;
-  }
-
-  // 编辑态样式
   &-edit {
     position: relative;
+    width: 100%;
+
+    // InputNumber 外层（Figma 设计规范，无边框避免双边框）
+    .pisell-lowcode-input-number {
+      width: 100% !important;
+      font-size: 16px !important;
+      line-height: 24px !important;
+      border-radius: 8px !important;
+      border: none !important;
+      color: #101828 !important; // Gray/900
+      background-color: #ffffff !important;
+
+      // 内层 input
+      .pisell-lowcode-input-number-input {
+        height: 46px !important; // 48 - 2px border
+        padding: 12px 16px !important;
+        font-size: 16px !important;
+        line-height: 24px !important;
+        color: #101828 !important;
+        background: transparent !important;
+        border: none !important;
+
+        &::placeholder {
+          color: #667085 !important; // Gray/500
+        }
+      }
+
+      // 聚焦态
+      &.pisell-lowcode-input-number-focused,
+      &:focus,
+      &:focus-within {
+        border-color: #d6bbfb !important; // Primary/300
+        box-shadow: 0 0 0 4px #f4ebff !important; // Primary/100
+        outline: none !important;
+      }
+
+      // Hover 态
+      &:hover:not(.pisell-lowcode-input-number-disabled):not(.pisell-lowcode-input-number-focused) {
+        border-color: #b692f6 !important; // Primary/400
+      }
+
+      // 禁用态
+      &.pisell-lowcode-input-number-disabled {
+        background-color: #f9fafb !important; // Gray/50
+        border-color: #d0d5dd !important;
+        cursor: not-allowed !important;
+
+        .pisell-lowcode-input-number-input {
+          color: #98a2b3 !important; // Gray/400
+          cursor: not-allowed !important;
+        }
+      }
+
+      // 货币符号：前缀
+      .pisell-lowcode-input-number-prefix {
+        margin-right: 8px;
+        margin-left: 16px;
+        color: #667085; // Gray/500
+        font-size: 16px;
+      }
+
+      // 货币符号：后置（addonAfter）
+      .pisell-lowcode-input-number-suffix {
+        margin-left: 8px;
+        margin-right: 16px;
+        color: #667085;
+        font-size: 16px;
+      }
+
+      // addonBefore / addonAfter 包裹（InputNumber 后置符号可能用 addon 渲染）
+      .pisell-lowcode-input-number-group-addon {
+        background-color: #ffffff !important;
+        border: 1px solid #d0d5dd !important;
+        color: #344054; // Gray/700
+        font-size: 16px !important;
+        padding: 12px 16px !important;
+
+        &:first-child {
+          border-right: none !important;
+          border-radius: 8px 0 0 8px !important;
+        }
+
+        &:last-child {
+          border-left: none !important;
+          border-radius: 0 8px 8px 0 !important;
+        }
+      }
+
+      // 步进器按钮（controls）
+      .pisell-lowcode-input-number-handler-wrap {
+        border-left: 1px solid #d0d5dd !important;
+        background: #ffffff !important;
 
-    // 错误提示
-    .pisell-currency-error {
-      margin-top: 4px;
-      color: #ff4d4f;
-      font-size: 14px;
-      line-height: 1.5;
+        .pisell-lowcode-input-number-handler {
+          color: #667085;
+          border-color: #d0d5dd;
+
+          &:hover {
+            color: #344054;
+          }
+
+          &.pisell-lowcode-input-number-handler-up-disabled,
+          &.pisell-lowcode-input-number-handler-down-disabled {
+            color: #98a2b3;
+            cursor: not-allowed;
+          }
+        }
+      }
+
+      // 错误状态
+      &.pisell-lowcode-input-number-status-error {
+        border-color: #fda29b !important; // Error/300
+
+        &.pisell-lowcode-input-number-focused,
+        &:focus-within {
+          border-color: #f97066 !important; // Error/400
+          box-shadow: 0 0 0 4px #fee4e2 !important; // Error/100
+        }
+
+        &:hover:not(:focus-within) {
+          border-color: #f97066 !important;
+        }
+      }
     }
   }
 
-  // 禁用态样式
+  // 错误提示（与设计体系一致）
+  &-error {
+    margin-top: 4px;
+    font-size: 12px;
+    color: #d92d20; // Error/600
+    line-height: 1.5;
+    animation: pisell-currency-fadeIn 0.3s ease-in-out;
+  }
+
+  // 只读态（Figma: Gray/900, 16px, Medium, line-height 24px）
+  &-read {
+    color: #101828; // Gray/900
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0;
+  }
+
   &-disabled {
-    // 继承 Ant Design InputNumber 的禁用样式
+    opacity: 0.4;
+    cursor: not-allowed;
   }
-  
-  // 负数显示为红色（可选）
+
+  // 负数显示（与设计体系 Error 色一致）
   &.negative {
-    color: #ff4d4f;
+    color: #d92d20; // Error/600
   }
-  
-  // 正数显示为绿色（可选，用于收益场景）
+
+  // 正数高亮（收益等场景）
   &.positive {
     color: #52c41a;
   }
 }
+
+@keyframes pisell-currency-fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/lib/components/pisellDatePicker/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import * as react21 from "react";
+import * as react16 from "react";
 
 //#region src/components/pisellDatePicker/index.d.ts
-declare const PisellDatePicker: (props: any) => react21.JSX.Element;
+declare const PisellDatePicker: (props: any) => react16.JSX.Element;
 //#endregion
 export { PisellDatePicker };