one-design-next 0.0.4-alpha.57

package/dist/alert/style/index.css

@@ -0,0 +1,199 @@
+html {
+  --alert-border-width: 1px;
+  --alert-title-font-weight: 500;
+  --alert-expand-button-color: var(--odn-color-blue-6);
+  --alert-expand-button-hover-color: var(--odn-color-blue-7);
+  --alert-padding-block-small: 5px;
+  --alert-padding-inline-small: 12px;
+  --alert-icon-size-small: 16px;
+  --alert-icon-gap-small: 8px;
+  --alert-font-size-small: 12px;
+  --alert-line-height-small: 1.66666667;
+  --alert-title-margin-block-end-small: 4px;
+  --alert-border-radius-small: 6px;
+  --alert-padding-block-medium: 7px;
+  --alert-padding-inline-medium: 12px;
+  --alert-icon-size-medium: 16px;
+  --alert-icon-gap-medium: 8px;
+  --alert-font-size-medium: 14px;
+  --alert-line-height-medium: 1.57142857;
+  --alert-title-margin-block-end-medium: 4px;
+  --alert-border-radius-medium: 6px;
+  --alert-padding-block-large: 8px;
+  --alert-padding-inline-large: 12px;
+  --alert-icon-size-large: 16px;
+  --alert-icon-gap-large: 8px;
+  --alert-font-size-large: 16px;
+  --alert-line-height-large: 1.5;
+  --alert-title-margin-block-end-large: 4px;
+  --alert-border-radius-large: 6px;
+  --alert-background-info: var(--odn-color-blue-1);
+  --alert-border-color-info: var(--odn-color-blue-2);
+  --alert-icon-color-info: var(--odn-color-blue-6);
+  --alert-background-danger: var(--odn-color-red-1);
+  --alert-border-color-danger: var(--odn-color-red-2);
+  --alert-icon-color-danger: var(--odn-color-red-6);
+  --alert-background-success: var(--odn-color-green-1);
+  --alert-border-color-success: var(--odn-color-green-2);
+  --alert-icon-color-success: var(--odn-color-green-6);
+  --alert-background-warning: var(--odn-color-orange-1);
+  --alert-border-color-warning: var(--odn-color-orange-2);
+  --alert-icon-color-warning: var(--odn-color-orange-6);
+}
+
+[data-odn-alert] {
+  display: flex;
+  transition: all 300ms cubic-bezier(0.32, 0.72, 0, 1) 50ms, opacity 200ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-odn-alert-title] {
+  font-weight: var(--alert-title-font-weight);
+}
+
+[data-odn-alert-icon-wrapper],
+[data-odn-alert-close-icon-wrapper] {
+  position: relative;
+  height: fit-content;
+  white-space: nowrap;
+}
+
+[data-odn-alert-close-icon-wrapper] {
+  cursor: pointer;
+}
+[data-odn-alert-close-icon-wrapper]:hover [data-odn-alert-close-icon] {
+  color: var(--odn-color-black-10);
+}
+
+[data-odn-alert-icon-placeholder] {
+  color: transparent;
+  opacity: 0;
+}
+
+[data-odn-alert-icon],
+[data-odn-alert-close-icon] {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+}
+
+[data-odn-alert-right] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  user-select: none;
+}
+
+[data-odn-alert-content] {
+  flex: 1;
+}
+
+[data-odn-alert-close-icon] {
+  color: var(--odn-color-black-9);
+}
+
+[data-odn-alert-expand-content] {
+  overflow: hidden;
+  transition: all 300ms cubic-bezier(0.32, 0.72, 0, 1) 50ms, opacity 200ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-odn-alert-expand-button] {
+  color: var(--alert-expand-button-color);
+  cursor: pointer;
+}
+[data-odn-alert-expand-button]:hover {
+  color: var(--alert-expand-button-hover-color);
+}
+
+[data-odn-alert-size=small] {
+  gap: var(--alert-icon-gap-small);
+  padding: var(--alert-padding-block-small) var(--alert-padding-inline-small);
+  font-size: var(--alert-font-size-small);
+  line-height: var(--alert-line-height-small);
+  border-radius: var(--alert-border-radius-small);
+}
+[data-odn-alert-size=small] [data-odn-alert-title] {
+  margin-block-end: var(--alert-title-margin-block-end-small);
+}
+[data-odn-alert-size=small] [data-odn-alert-icon-wrapper],
+[data-odn-alert-size=small] [data-odn-alert-close-icon-wrapper] {
+  min-width: var(--alert-icon-size-small);
+}
+[data-odn-alert-size=small] [data-odn-alert-icon],
+[data-odn-alert-size=small] [data-odn-alert-close-icon] {
+  width: var(--alert-icon-size-small);
+  height: var(--alert-icon-size-small);
+}
+
+[data-odn-alert-size=medium] {
+  gap: var(--alert-icon-gap-medium);
+  padding: var(--alert-padding-block-medium) var(--alert-padding-inline-medium);
+  font-size: var(--alert-font-size-medium);
+  line-height: var(--alert-line-height-medium);
+  border-radius: var(--alert-border-radius-medium);
+}
+[data-odn-alert-size=medium] [data-odn-alert-title] {
+  margin-block-end: var(--alert-title-margin-block-end-medium);
+}
+[data-odn-alert-size=medium] [data-odn-alert-icon-wrapper],
+[data-odn-alert-size=medium] [data-odn-alert-close-icon-wrapper] {
+  min-width: var(--alert-icon-size-medium);
+}
+[data-odn-alert-size=medium] [data-odn-alert-icon],
+[data-odn-alert-size=medium] [data-odn-alert-close-icon] {
+  width: var(--alert-icon-size-medium);
+  height: var(--alert-icon-size-medium);
+}
+
+[data-odn-alert-size=large] {
+  gap: var(--alert-icon-gap-large);
+  padding: var(--alert-padding-block-large) var(--alert-padding-inline-large);
+  font-size: var(--alert-font-size-large);
+  line-height: var(--alert-line-height-large);
+  border-radius: var(--alert-border-radius-large);
+}
+[data-odn-alert-size=large] [data-odn-alert-title] {
+  margin-block-end: var(--alert-title-margin-block-end-large);
+}
+[data-odn-alert-size=large] [data-odn-alert-icon-wrapper],
+[data-odn-alert-size=large] [data-odn-alert-close-icon-wrapper] {
+  min-width: var(--alert-icon-size-large);
+}
+[data-odn-alert-size=large] [data-odn-alert-icon],
+[data-odn-alert-size=large] [data-odn-alert-close-icon] {
+  width: var(--alert-icon-size-large);
+  height: var(--alert-icon-size-large);
+}
+
+[data-odn-alert-intent=info] {
+  background: var(--alert-background-info);
+  box-shadow: 0 0 0 var(--alert-border-width) var(--alert-border-color-info);
+}
+[data-odn-alert-intent=info] [data-odn-alert-icon] {
+  color: var(--alert-icon-color-info);
+}
+
+[data-odn-alert-intent=danger] {
+  background: var(--alert-background-danger);
+  box-shadow: 0 0 0 var(--alert-border-width) var(--alert-border-color-danger);
+}
+[data-odn-alert-intent=danger] [data-odn-alert-icon] {
+  color: var(--alert-icon-color-danger);
+}
+
+[data-odn-alert-intent=success] {
+  background: var(--alert-background-success);
+  box-shadow: 0 0 0 var(--alert-border-width) var(--alert-border-color-success);
+}
+[data-odn-alert-intent=success] [data-odn-alert-icon] {
+  color: var(--alert-icon-color-success);
+}
+
+[data-odn-alert-intent=warning] {
+  background: var(--alert-background-warning);
+  box-shadow: 0 0 0 var(--alert-border-width) var(--alert-border-color-warning);
+}
+[data-odn-alert-intent=warning] [data-odn-alert-icon] {
+  color: var(--alert-icon-color-warning);
+}

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

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

package/dist/alert/style/index.js

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

package/dist/auto-complete/index.d.ts

@@ -0,0 +1,51 @@
+import type { BaseSelectRef, SelectProps as RcSelectProps } from 'rc-select';
+import type { BaseOptionType, DefaultOptionType } from 'rc-select/lib/Select';
+import React from 'react';
+import '../select/style';
+type RawValue = string | number;
+export interface LabeledValue {
+    key?: string;
+    value: RawValue;
+    label: React.ReactNode;
+}
+export type AutoCompleteValue = RawValue | LabeledValue | undefined;
+export interface AutoCompleteProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'mode'> {
+    rootClassName?: string;
+    prefix?: React.ReactNode;
+    suffixIcon?: React.ReactNode;
+    size?: 'small' | 'middle' | 'large';
+    disabled?: boolean;
+    /** @deprecated Use `variant` instead. */
+    bordered?: boolean;
+    /**
+     * @deprecated `showArrow` is deprecated which will be removed in next major version. It will be a
+     *   default behavior, you can hide it by setting `suffixIcon` to null.
+     */
+    showArrow?: boolean;
+    /**
+     * 自定义输入框，默认使用 Input 组件
+     */
+    getInputElement?: () => React.ReactElement;
+    /**
+     * 无匹配内容时的显示内容
+     */
+    notFoundContent?: React.ReactNode;
+    /**
+     * 自动完成的数据源
+     */
+    options?: OptionType[];
+    /**
+     * 输入框占位符
+     */
+    placeholder?: string;
+    /**
+     * 搜索时的回调
+     */
+    onSearch?: (value: string) => void;
+}
+export interface AutoCompleteComponent {
+    <ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<AutoCompleteProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>): React.ReactElement;
+    displayName?: string;
+}
+declare const AutoComplete: AutoCompleteComponent;
+export default AutoComplete;

package/dist/auto-complete/index.js

@@ -0,0 +1,104 @@
+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 = ["className", "size", "disabled", "bordered", "showArrow", "suffixIcon", "rootClassName", "getInputElement", "notFoundContent", "options", "placeholder", "onSearch", "onChange", "value"];
+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 _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 _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; }
+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; }
+import clsx from 'clsx';
+import RcSelect from 'rc-select';
+import React, { forwardRef, useCallback, useEffect, useState } from 'react';
+import Icon from "../icon";
+import Input from "../input";
+import "../select/style";
+var InternalAutoComplete = function InternalAutoComplete(props, ref) {
+  var className = props.className,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'middle' : _props$size,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$bordered = props.bordered,
+    bordered = _props$bordered === void 0 ? true : _props$bordered,
+    _props$showArrow = props.showArrow,
+    showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
+    suffixIcon = props.suffixIcon,
+    rootClassName = props.rootClassName,
+    getInputElement = props.getInputElement,
+    _props$notFoundConten = props.notFoundContent,
+    notFoundContent = _props$notFoundConten === void 0 ? '无匹配结果' : _props$notFoundConten,
+    _props$options = props.options,
+    options = _props$options === void 0 ? [] : _props$options,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? '请输入' : _props$placeholder,
+    onSearch = props.onSearch,
+    onChange = props.onChange,
+    value = props.value,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useState = useState(String(value || '')),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+
+  // 同步外部 value 变化
+  useEffect(function () {
+    if (value !== undefined) {
+      setInputValue(String(value));
+    }
+  }, [value]);
+  var handleInputChange = useCallback(function (e) {
+    var newValue = e.target.value;
+    setInputValue(newValue);
+    onSearch === null || onSearch === void 0 || onSearch(newValue);
+  }, [onSearch]);
+  var handleSelectChange = useCallback(function (selectedValue, option) {
+    var stringValue = String(selectedValue || '');
+    setInputValue(stringValue);
+    // 在 combobox 模式下，onChange 会在每次输入时触发
+    // 我们不在这个回调中调用 onChange，避免重复触发
+  }, []);
+  var handleSelect = useCallback(function (selectedValue, option) {
+    // 这是真正的选择操作
+    var stringValue = String(selectedValue || '');
+    setInputValue(stringValue);
+    onChange === null || onChange === void 0 || onChange(selectedValue, option);
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(RcSelect, _extends({
+    ref: ref,
+    mode: "combobox",
+    prefixCls: "odn-select",
+    className: clsx('odn-select', _defineProperty(_defineProperty(_defineProperty({}, "odn-select-".concat(size), size), 'odn-select-disabled', disabled), 'odn-select-unbordered', !bordered), rootClassName, className),
+    notFoundContent: null,
+    getInputElement: getInputElement || function () {
+      return /*#__PURE__*/React.createElement(Input, {
+        value: inputValue,
+        onChange: handleInputChange,
+        leftElement: /*#__PURE__*/React.createElement(Icon, {
+          name: "search"
+        }),
+        placeholder: placeholder,
+        allowClear: true
+      });
+    },
+    suffixIcon: showArrow ? suffixIcon : null,
+    options: options,
+    value: inputValue,
+    onChange: handleSelectChange,
+    onSelect: handleSelect,
+    filterOption: function filterOption(inputValue, option) {
+      return option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1;
+    }
+  }, rest));
+};
+
+// 明确定义 AutoComplete 组件的类型
+
+var AutoComplete = /*#__PURE__*/forwardRef(InternalAutoComplete);
+AutoComplete.displayName = 'AutoComplete';
+export default AutoComplete;

package/dist/avatar/index.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+import { adqIconNames } from '../icon';
+import './style';
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * @description 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * @description 备选文本
+     * @default undefined
+     */
+    fallback?: React.ReactNode;
+    /**
+     * @description 图像源
+     * @default undefined
+     */
+    src?: string;
+    /**
+     * @description 图标
+     * @default undefined
+     */
+    icon?: (typeof adqIconNames)[number];
+    /**
+     * @description 形状
+     * @default 'circle'
+     */
+    shape?: 'circle' | 'square';
+    /**
+     * @description 是否显示徽标
+     * @default false
+     */
+    badge?: boolean | React.ReactNode;
+    /**
+     * @description 设置宽高
+     * @default 32
+     */
+    size?: number;
+}
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * @description 设置宽高
+     * @default 32
+     */
+    size?: number;
+    /**
+     * @description 设置间距，一般为负数
+     * @default -8
+     */
+    gap?: number;
+    /**
+     * @description 提示
+     * @default undefined
+     */
+    tooltips?: string[];
+}
+declare const Group: {
+    ({ children, gap, size, style, tooltips, ...otherProps }: AvatarGroupProps): React.JSX.Element;
+    displayName: string;
+};
+/**
+ * Avatar 头像
+ */
+declare const Avatar: React.FC<AvatarProps> & {
+    Group: typeof Group;
+};
+export default Avatar;

package/dist/avatar/index.js

@@ -0,0 +1,177 @@
+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 = ["children", "gap", "size", "style", "tooltips"],
+  _excluded2 = ["fallback", "icon", "src", "shape", "badge", "size", "style", "onMouseEnter", "onMouseLeave"];
+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 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 _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; }
+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; }
+import React, { useState } from 'react';
+import Icon from "../icon";
+import Tooltip from "../tooltip";
+import { AvatarFallback, AvatarImage, AvatarRoot } from "./primitive";
+import "./style";
+
+// 创建 Context
+var AvatarContext = /*#__PURE__*/React.createContext({});
+var Group = function Group(_ref) {
+  var children = _ref.children,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? -8 : _ref$gap,
+    size = _ref.size,
+    style = _ref.style,
+    _ref$tooltips = _ref.tooltips,
+    tooltips = _ref$tooltips === void 0 ? [] : _ref$tooltips,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    hoverIndex = _useState2[0],
+    setHoverIndex = _useState2[1];
+  var timeoutRef = React.useRef(null);
+  var groupRef = React.useRef(null);
+  var handleMouseEnter = function handleMouseEnter(index) {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setHoverIndex(index);
+    updateAvatarTransforms(index);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    timeoutRef.current = setTimeout(function () {
+      setHoverIndex(null);
+      updateAvatarTransforms(null);
+    }, 150);
+  };
+  var updateAvatarTransforms = function updateAvatarTransforms(hoveredIndex) {
+    if (!groupRef.current) return;
+    var avatarElements = groupRef.current.querySelectorAll('[data-odn-avatar-image]');
+    var gapValue = Math.abs(gap) + 2;
+    avatarElements.forEach(function (element, index) {
+      var avatarElement = element;
+      if (hoveredIndex === null) {
+        avatarElement.style.transform = '';
+      } else if (index === hoveredIndex) {
+        avatarElement.style.transform = '';
+      } else if (index < hoveredIndex) {
+        avatarElement.style.transform = "translate3d(-".concat(gapValue, "px, 0, 0)");
+      } else {
+        avatarElement.style.transform = "translate3d(".concat(gapValue, "px, 0, 0)");
+      }
+    });
+  };
+  React.useEffect(function () {
+    return function () {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(AvatarContext.Provider, {
+    value: {
+      size: size,
+      hoverIndex: hoverIndex,
+      gap: gap,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
+    }
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    ref: groupRef,
+    "data-odn-avatar-group": true,
+    "data-odn-avatar-group-gap": gap,
+    style: _objectSpread({
+      '--odn-avatar-group-gap': "".concat(gap, "px")
+    }, style)
+  }, otherProps), (tooltips === null || tooltips === void 0 ? void 0 : tooltips.length) > 0 ? /*#__PURE__*/React.createElement(Tooltip.Group, {
+    placement: "top",
+    as: "div",
+    "data-odn-avatar-group": true,
+    mouseEnterDelay: 0
+  }, React.Children.map(children, function (child, index) {
+    var tooltip = tooltips[index];
+    if (!tooltip) return child;
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      key: index,
+      popup: tooltip
+    }, child);
+  })) : children));
+};
+Group.displayName = 'AvatarGroup';
+
+/**
+ * Avatar 头像
+ */
+var Avatar = function Avatar(_ref2) {
+  var _ref3;
+  var fallback = _ref2.fallback,
+    icon = _ref2.icon,
+    src = _ref2.src,
+    _ref2$shape = _ref2.shape,
+    shape = _ref2$shape === void 0 ? 'circle' : _ref2$shape,
+    badge = _ref2.badge,
+    size = _ref2.size,
+    style = _ref2.style,
+    propOnMouseEnter = _ref2.onMouseEnter,
+    propOnMouseLeave = _ref2.onMouseLeave,
+    otherProps = _objectWithoutProperties(_ref2, _excluded2);
+  // 从 Context 获取 size 和事件处理器
+  var _React$useContext = React.useContext(AvatarContext),
+    contextSize = _React$useContext.size,
+    contextOnMouseEnter = _React$useContext.onMouseEnter,
+    contextOnMouseLeave = _React$useContext.onMouseLeave;
+  var finalSize = (_ref3 = size !== null && size !== void 0 ? size : contextSize) !== null && _ref3 !== void 0 ? _ref3 : 32;
+  var handleMouseEnter = function handleMouseEnter(e) {
+    propOnMouseEnter === null || propOnMouseEnter === void 0 || propOnMouseEnter(e);
+    if (contextOnMouseEnter) {
+      var _e$currentTarget$pare;
+      // 获取当前 Avatar 在 Group 中的索引
+      var avatarElements = (_e$currentTarget$pare = e.currentTarget.parentElement) === null || _e$currentTarget$pare === void 0 ? void 0 : _e$currentTarget$pare.querySelectorAll('[data-odn-avatar]');
+      if (avatarElements) {
+        var _index = Array.from(avatarElements).indexOf(e.currentTarget);
+        if (_index !== -1) {
+          contextOnMouseEnter(_index);
+        }
+      }
+    }
+  };
+  var handleMouseLeave = function handleMouseLeave(e) {
+    propOnMouseLeave === null || propOnMouseLeave === void 0 || propOnMouseLeave(e);
+    contextOnMouseLeave === null || contextOnMouseLeave === void 0 || contextOnMouseLeave();
+  };
+  return /*#__PURE__*/React.createElement(AvatarRoot, _extends({
+    "data-odn-avatar": true,
+    "data-odn-avatar-shape": shape,
+    style: _objectSpread({
+      width: finalSize,
+      height: finalSize,
+      transition: 'transform 0.2s ease'
+    }, style),
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, otherProps), /*#__PURE__*/React.createElement(AvatarImage, {
+    "data-odn-avatar-image": true,
+    src: src
+  }), /*#__PURE__*/React.createElement(AvatarFallback, {
+    "data-odn-avatar-fallback": true
+  }, icon ? /*#__PURE__*/React.createElement(Icon, {
+    "data-odn-avatar-icon": true,
+    name: icon
+  }) : fallback), badge ? /*#__PURE__*/React.createElement(React.Fragment, null, typeof badge === 'boolean' ? /*#__PURE__*/React.createElement("div", {
+    "data-odn-avatar-badge": true,
+    "data-odn-avatar-badge-dot": true
+  }) : /*#__PURE__*/React.createElement("div", {
+    "data-odn-avatar-badge": true,
+    "data-odn-avatar-badge-content": true
+  }, badge)) : null);
+};
+Avatar.Group = Group;
+export default Avatar;

package/dist/avatar/primitive.d.ts

@@ -0,0 +1,6 @@
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as React from 'react';
+declare const AvatarRoot: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare function AvatarImage(props: React.ComponentProps<typeof AvatarPrimitive.Image>): React.JSX.Element;
+declare function AvatarFallback(props: React.ComponentProps<typeof AvatarPrimitive.Fallback>): React.JSX.Element;
+export { AvatarFallback, AvatarImage, AvatarRoot };

package/dist/avatar/primitive.js

@@ -0,0 +1,23 @@
+'use client';
+
+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); }
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as React from 'react';
+var AvatarRoot = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(AvatarPrimitive.Root, _extends({
+    ref: ref,
+    "data-slot": "avatar"
+  }, props));
+});
+AvatarRoot.displayName = 'AvatarRoot';
+function AvatarImage(props) {
+  return /*#__PURE__*/React.createElement(AvatarPrimitive.Image, _extends({
+    "data-slot": "avatar-image"
+  }, props));
+}
+function AvatarFallback(props) {
+  return /*#__PURE__*/React.createElement(AvatarPrimitive.Fallback, _extends({
+    "data-slot": "avatar-fallback"
+  }, props));
+}
+export { AvatarFallback, AvatarImage, AvatarRoot };