one-design-next 0.0.4-alpha.100

package/dist/empty/style/index.css

@@ -0,0 +1,80 @@
+html {
+  --odn-empty-gap: 8px;
+  --odn-empty-large-image-size: 120px;
+  --odn-empty-medium-image-size: 80px;
+  --odn-empty-small-image-size: 60px;
+  --odn-empty-large-title-font-size: 16px;
+  --odn-empty-medium-title-font-size: 14px;
+  --odn-empty-small-title-font-size: 13px;
+  --odn-empty-title-color: var(--odn-color-black-9);
+  --odn-empty-title-font-weight: 600;
+  --odn-empty-title-line-height: 1.5;
+  --odn-empty-description-font-size: 12px;
+  --odn-empty-description-color: var(--odn-color-black-9);
+  --odn-empty-description-line-height: 1.5;
+  --odn-empty-content-gap: 4px;
+  --odn-empty-extra-gap: 8px;
+}
+
+@layer components {
+  [data-odn-empty] {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--odn-empty-gap);
+  }
+  [data-odn-empty-image] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  [data-odn-empty-image] img,
+  [data-odn-empty-image] svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+  [data-odn-empty-size=large] [data-odn-empty-image] {
+    width: var(--odn-empty-large-image-size);
+  }
+  [data-odn-empty-size=large] [data-odn-empty-title] {
+    font-size: var(--odn-empty-large-title-font-size);
+  }
+  [data-odn-empty-size=medium] [data-odn-empty-image] {
+    width: var(--odn-empty-medium-image-size);
+  }
+  [data-odn-empty-size=medium] [data-odn-empty-title] {
+    font-size: var(--odn-empty-medium-title-font-size);
+  }
+  [data-odn-empty-size=small] [data-odn-empty-image] {
+    width: var(--odn-empty-small-image-size);
+  }
+  [data-odn-empty-size=small] [data-odn-empty-title] {
+    font-size: var(--odn-empty-small-title-font-size);
+  }
+  [data-odn-empty-content] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--odn-empty-content-gap);
+  }
+  [data-odn-empty-title] {
+    line-height: var(--odn-empty-title-line-height);
+    font-weight: var(--odn-empty-title-font-weight);
+    color: var(--odn-empty-title-color);
+    text-align: center;
+  }
+  [data-odn-empty-description] {
+    font-size: var(--odn-empty-description-font-size);
+    line-height: var(--odn-empty-description-line-height);
+    color: var(--odn-empty-description-color);
+    text-align: center;
+  }
+  [data-odn-empty-extra] {
+    margin-top: var(--odn-empty-extra-gap);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/dist/empty/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';

package/dist/empty/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.css";

package/dist/form/index.d.ts

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import './style';
+export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+    /**
+     * @description 表单验证模式
+     * @default 'onSubmit'
+     */
+    validationMode?: 'onSubmit' | 'onBlur' | 'onChange';
+    /**
+     * @description 外部错误信息
+     */
+    errors?: Record<string, string | string[]>;
+    /**
+     * @description 表单提交回调
+     */
+    onFormSubmit?: (formValues: Record<string, any>, eventDetails: any) => void;
+    /**
+     * @description 标签宽度（单位 em），设置后所有 Form.Item 的 label 统一使用该宽度。不设置则自动计算最长 label 的宽度
+     */
+    labelSize?: number;
+    /**
+     * @description 标签对齐方式，统一设置所有 Form.Item 的标签对齐
+     * @default 'left'
+     */
+    labelAlign?: 'left' | 'right';
+    children?: React.ReactNode;
+}
+export interface FormItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * @description 字段名称
+     */
+    name?: string;
+    /**
+     * @description 标签文本
+     */
+    label?: React.ReactNode;
+    /**
+     * @description 标签对齐方式，优先级高于 Form 的 labelAlign
+     */
+    labelAlign?: 'left' | 'right';
+    /**
+     * @description 标签宽度，用于固定宽度对齐，优先级高于 Form 的 labelSize
+     */
+    labelWidth?: number | string;
+    /**
+     * @description 标签单行最大字符数（超出换行）
+     */
+    labelMaxChars?: number;
+    /**
+     * @description 是否必填
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * @description 提示信息（显示为问号图标 Tooltip）
+     */
+    tooltip?: React.ReactNode;
+    /**
+     * @description 帮助信息（显示在控件下方）
+     */
+    help?: React.ReactNode;
+    /**
+     * @description 错误信息（显示在控件下方）
+     */
+    error?: React.ReactNode;
+    /**
+     * @description 自定义验证函数
+     */
+    validate?: (value: unknown) => string | string[] | null | Promise<string | string[] | null>;
+    /**
+     * @description 验证模式
+     */
+    validationMode?: 'onSubmit' | 'onBlur' | 'onChange';
+    /**
+     * @description 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * @description 纯数据展示模式
+     * @default false
+     */
+    display?: boolean;
+    children?: React.ReactNode;
+}
+export interface FormDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    children?: React.ReactNode;
+}
+/**
+ * Form 表单
+ */
+declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
+/**
+ * Form.Item 表单项
+ */
+declare const FormItem: React.ForwardRefExoticComponent<FormItemProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Form.Description 表单描述
+ */
+declare const FormDescription: React.ForwardRefExoticComponent<FormDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+type FormComponent = typeof Form & {
+    Item: typeof FormItem;
+    Description: typeof FormDescription;
+};
+declare const FormWithSub: FormComponent;
+export default FormWithSub;

package/dist/form/index.js

@@ -0,0 +1,272 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["validationMode", "errors", "onFormSubmit", "labelSize", "labelAlign", "children", "className"],
+  _excluded2 = ["name", "label", "labelAlign", "labelWidth", "labelMaxChars", "required", "tooltip", "help", "error", "validate", "validationMode", "disabled", "display", "children", "className", "style"],
+  _excluded3 = ["children"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import * as React from 'react';
+import { Form as BaseForm } from '@base-ui/react/form';
+import { Field as BaseField } from '@base-ui/react/field';
+import Tooltip from "../tooltip";
+import Icon from "../icon";
+import "./style";
+
+// ---- Context ----
+
+var FormContext = /*#__PURE__*/React.createContext(null);
+function useFormContext() {
+  return React.useContext(FormContext);
+}
+
+/**
+ * 计算字符串的显示宽度（中文 1em，英文/数字约 0.6em）
+ */
+function measureLabelWidth(text) {
+  var width = 0;
+  var _iterator = _createForOfIteratorHelper(text),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var char = _step.value;
+      // CJK characters are approximately 1em wide
+      if (/[\u4e00-\u9fff\u3000-\u303f\uff00-\uffef]/.test(char)) {
+        width += 1;
+      } else {
+        width += 0.6;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return width;
+}
+
+// ---- Props ----
+
+// ---- Form ----
+
+/**
+ * Form 表单
+ */
+var Form = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$validationMode = _ref.validationMode,
+    validationMode = _ref$validationMode === void 0 ? 'onSubmit' : _ref$validationMode,
+    errors = _ref.errors,
+    onFormSubmit = _ref.onFormSubmit,
+    labelSize = _ref.labelSize,
+    labelAlign = _ref.labelAlign,
+    children = _ref.children,
+    className = _ref.className,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var _React$useState = React.useState({}),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    labelMap = _React$useState2[0],
+    setLabelMap = _React$useState2[1];
+  var registerLabel = React.useCallback(function (id, text) {
+    setLabelMap(function (prev) {
+      if (prev[id] === text) return prev;
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, id, text));
+    });
+  }, []);
+  var unregisterLabel = React.useCallback(function (id) {
+    setLabelMap(function (prev) {
+      if (!(id in prev)) return prev;
+      var next = _objectSpread({}, prev);
+      delete next[id];
+      return next;
+    });
+  }, []);
+
+  // Auto-calculate: find the max label width from all registered labels
+  var autoLabelSize = React.useMemo(function () {
+    var texts = Object.values(labelMap);
+    if (texts.length === 0) return 0;
+    return Math.ceil(Math.max.apply(Math, _toConsumableArray(texts.map(measureLabelWidth))));
+  }, [labelMap]);
+  var contextValue = React.useMemo(function () {
+    return {
+      labelSize: labelSize,
+      labelAlign: labelAlign,
+      registerLabel: registerLabel,
+      unregisterLabel: unregisterLabel,
+      autoLabelSize: autoLabelSize
+    };
+  }, [labelSize, labelAlign, registerLabel, unregisterLabel, autoLabelSize]);
+  return /*#__PURE__*/React.createElement(FormContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(BaseForm, _extends({
+    ref: ref,
+    className: className,
+    "data-odn-form": "",
+    validationMode: validationMode,
+    errors: errors,
+    onFormSubmit: onFormSubmit
+  }, otherProps), children));
+});
+Form.displayName = 'Form';
+
+// ---- Form.Item ----
+
+var formItemIdCounter = 0;
+
+/**
+ * Form.Item 表单项
+ */
+var FormItem = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var _ref3;
+  var name = _ref2.name,
+    label = _ref2.label,
+    labelAlignProp = _ref2.labelAlign,
+    labelWidth = _ref2.labelWidth,
+    labelMaxChars = _ref2.labelMaxChars,
+    required = _ref2.required,
+    tooltip = _ref2.tooltip,
+    help = _ref2.help,
+    error = _ref2.error,
+    validate = _ref2.validate,
+    validationMode = _ref2.validationMode,
+    disabled = _ref2.disabled,
+    display = _ref2.display,
+    children = _ref2.children,
+    className = _ref2.className,
+    styleProp = _ref2.style,
+    otherProps = _objectWithoutProperties(_ref2, _excluded2);
+  var formCtx = useFormContext();
+
+  // Register label text for auto-calculation
+  var idRef = React.useRef('');
+  if (!idRef.current) {
+    idRef.current = "form-item-".concat(++formItemIdCounter);
+  }
+  var labelText = typeof label === 'string' ? label : typeof label === 'number' ? String(label) : '';
+  React.useEffect(function () {
+    if (formCtx && labelText) {
+      formCtx.registerLabel(idRef.current, labelText);
+    }
+    return function () {
+      if (formCtx) {
+        formCtx.unregisterLabel(idRef.current);
+      }
+    };
+  }, [formCtx, labelText]);
+
+  // Resolve label align: item prop > form prop > default
+  var labelAlign = (_ref3 = labelAlignProp !== null && labelAlignProp !== void 0 ? labelAlignProp : formCtx === null || formCtx === void 0 ? void 0 : formCtx.labelAlign) !== null && _ref3 !== void 0 ? _ref3 : 'left';
+
+  // Resolve label width: item labelWidth > form labelSize > auto-calculated
+  var labelStyle = {};
+  if (labelWidth) {
+    var w = typeof labelWidth === 'number' ? "".concat(labelWidth, "px") : labelWidth;
+    labelStyle.width = w;
+    labelStyle.minWidth = w;
+  } else if (formCtx) {
+    var _formCtx$labelSize;
+    var size = (_formCtx$labelSize = formCtx.labelSize) !== null && _formCtx$labelSize !== void 0 ? _formCtx$labelSize : formCtx.autoLabelSize;
+    if (size > 0) {
+      labelStyle.width = "".concat(size, "em");
+      labelStyle.minWidth = "".concat(size, "em");
+    }
+  }
+  if (labelMaxChars) {
+    labelStyle.maxWidth = "".concat(labelMaxChars, "em");
+  }
+
+  // Extra width for tooltip icon
+  var hasTooltip = !!tooltip;
+  if (display) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      ref: ref,
+      "data-odn-form-item": "",
+      "data-odn-form-item-display": "true",
+      "data-odn-form-item-label-align": labelAlign,
+      className: className,
+      style: styleProp
+    }, otherProps), label !== undefined && /*#__PURE__*/React.createElement("div", {
+      "data-odn-form-item-label": "",
+      style: labelStyle
+    }, /*#__PURE__*/React.createElement("span", {
+      "data-odn-form-item-label-text": ""
+    }, label)), /*#__PURE__*/React.createElement("div", {
+      "data-odn-form-item-content": ""
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-odn-form-item-control": ""
+    }, children)));
+  }
+  return /*#__PURE__*/React.createElement(BaseField.Root, _extends({
+    ref: ref,
+    name: name,
+    disabled: disabled,
+    validate: validate,
+    validationMode: validationMode,
+    "data-odn-form-item": "",
+    "data-odn-form-item-label-align": labelAlign,
+    className: className,
+    style: styleProp
+  }, otherProps), label !== undefined && /*#__PURE__*/React.createElement(BaseField.Label, {
+    "data-odn-form-item-label": "",
+    "data-odn-form-item-label-has-tooltip": hasTooltip || undefined,
+    style: labelStyle
+  }, required && /*#__PURE__*/React.createElement("span", {
+    "data-odn-form-item-required": ""
+  }, "*"), /*#__PURE__*/React.createElement("span", {
+    "data-odn-form-item-label-text": ""
+  }, label), tooltip && /*#__PURE__*/React.createElement(Tooltip, {
+    popup: tooltip,
+    placement: "top"
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-form-item-tooltip": ""
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "help-circle"
+  })))), /*#__PURE__*/React.createElement("div", {
+    "data-odn-form-item-content": ""
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-form-item-control": ""
+  }, children), error && /*#__PURE__*/React.createElement("div", {
+    "data-odn-form-item-error": ""
+  }, error), !error && /*#__PURE__*/React.createElement(BaseField.Error, {
+    "data-odn-form-item-error": ""
+  }), help && /*#__PURE__*/React.createElement("div", {
+    "data-odn-form-item-help": ""
+  }, help)));
+});
+FormItem.displayName = 'Form.Item';
+
+// ---- Form.Description ----
+
+/**
+ * Form.Description 表单描述
+ */
+var FormDescription = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
+  var children = _ref4.children,
+    otherProps = _objectWithoutProperties(_ref4, _excluded3);
+  return /*#__PURE__*/React.createElement(BaseField.Description, _extends({
+    ref: ref
+  }, otherProps), children);
+});
+FormDescription.displayName = 'Form.Description';
+
+// ---- Compose ----
+
+var FormWithSub = Form;
+FormWithSub.Item = FormItem;
+FormWithSub.Description = FormDescription;
+export default FormWithSub;

package/dist/form/style/index.css

@@ -0,0 +1,84 @@
+:root {
+  --odn-form-font-size: 14px;
+  --odn-form-line-height: 22px;
+  --odn-form-label-font-size: 14px;
+  --odn-form-label-line-height: 22px;
+  --odn-form-label-color: var(--odn-color-solid-black-12);
+}
+
+@layer components {
+  [data-odn-form] {
+    display: flex;
+    flex-direction: column;
+  }
+  [data-odn-form-item] {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+    padding: 12px 0;
+    font-size: var(--odn-form-font-size, 14px);
+    line-height: var(--odn-form-line-height, 22px);
+  }
+  [data-odn-form-item-label-align=right] [data-odn-form-item-label] {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  [data-odn-form-item-label] {
+    display: flex;
+    align-items: flex-start;
+    flex-shrink: 0;
+    gap: 2px;
+    padding-top: 7px;
+    font-size: var(--odn-form-label-font-size, 14px);
+    line-height: var(--odn-form-label-line-height, 22px);
+    color: var(--odn-form-label-color, var(--odn-color-solid-black-12));
+  }
+  [data-odn-form-item-required] {
+    color: var(--odn-color-error);
+    margin-right: 2px;
+  }
+  [data-odn-form-item-tooltip] {
+    display: inline-flex;
+    align-items: center;
+    align-self: center;
+    cursor: pointer;
+    color: var(--odn-color-solid-black-9);
+    margin-left: 2px;
+    height: var(--odn-form-label-line-height, 22px);
+  }
+  [data-odn-form-item-tooltip] svg {
+    width: 14px;
+    height: 14px;
+  }
+  [data-odn-form-item-tooltip]:hover {
+    color: var(--odn-color-solid-black-10);
+  }
+  [data-odn-form-item-content] {
+    flex: 1;
+    min-width: 0;
+  }
+  [data-odn-form-item-control] {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  [data-odn-form-item-error] {
+    font-size: 12px;
+    line-height: 20px;
+    color: var(--odn-color-error);
+    margin-top: 2px;
+  }
+  [data-odn-form-item-error]:empty {
+    display: none;
+  }
+  [data-odn-form-item-help] {
+    font-size: 12px;
+    line-height: 20px;
+    color: var(--odn-color-solid-black-9);
+    margin-top: 2px;
+  }
+  [data-odn-form-item-display=true] [data-odn-form-item-control] {
+    color: var(--odn-color-solid-black-12);
+    padding-top: 7px;
+  }
+}

package/dist/form/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';

package/dist/form/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.css";

package/dist/hover-fill/index.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import './style';
+export interface HoverFillProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * @description hover 颜色
+     * @default 'rgba(33, 34, 38, 0.05)'
+     */
+    hoverColor?: string;
+    /**
+     * @description active 颜色
+     * @default 'rgba(33, 34, 38, 0.08)'
+     */
+    activeColor?: string;
+    /**
+     * @description 背景类名，在这里加圆角
+     */
+    bgClassName?: string;
+    /**
+     * @description 背景样式，在这里加圆角
+     */
+    bgStyle?: React.CSSProperties;
+    /**
+     * @description 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * @description hover 时的鼠标样式
+     * @type React.CSSProperties['cursor']
+     * @default 'pointer'
+     */
+    hoverCursor?: React.CSSProperties['cursor'];
+}
+export interface HoverFillState {
+    timer: number;
+    bgVisible: boolean;
+    baseNode?: HTMLDivElement | null;
+    bgNode?: HTMLDivElement | null;
+    bgX: number;
+    bgY: number;
+    bgScale: number;
+}
+declare global {
+    interface Window {
+        odnHoverFillState: HoverFillState;
+        odnHoverFillStateStack: HoverFillState[];
+    }
+}
+declare const HoverFill: React.ForwardRefExoticComponent<HoverFillProps & React.RefAttributes<unknown>>;
+export default HoverFill;