@nocobase/plugin-theme-editor 0.11.1-alpha.1

package/lib/client/antd-token-previewer/token-panel/token-card/index.d.ts

@@ -0,0 +1,30 @@
+import type { ThemeConfig } from 'antd/es/config-provider/context';
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { MutableTheme, TokenValue } from '../../interface';
+import type { TokenType } from '../../utils/classifyToken';
+interface TokenCardProps {
+    title: string;
+    icon?: ReactNode;
+    tokenArr: string[];
+    tokenPath: string[];
+    keyword?: string;
+    hideUseless?: boolean;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    activeToken?: string;
+    onActiveTokenChange?: (token: string | undefined) => void;
+    onTokenChange?: (theme: MutableTheme, tokenName: string, value: TokenValue) => void;
+    themes: MutableTheme[];
+    selectedTokens?: string[];
+    onTokenSelect?: (token: string) => void;
+    enableTokenSelect?: boolean;
+    hideUsageCount?: boolean;
+    placeholder?: ReactNode;
+    fallback?: (config: ThemeConfig) => Record<string, TokenValue>;
+}
+export declare const IconMap: Record<TokenType, ReactNode>;
+export declare const TextMap: Record<TokenType, string>;
+declare const _default: ({ title, icon, tokenArr, keyword, hideUseless, defaultOpen, open: customOpen, onOpenChange, activeToken, onActiveTokenChange, onTokenChange, tokenPath, selectedTokens, themes, onTokenSelect, enableTokenSelect, hideUsageCount, fallback, placeholder, }: TokenCardProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export default _default;

package/lib/client/antd-token-previewer/token-panel/token-card/index.js

@@ -0,0 +1,182 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TextMap = exports.IconMap = void 0;
+function _icons() {
+  const data = require("@ant-design/icons");
+  _icons = function _icons() {
+    return data;
+  };
+  return data;
+}
+function _antd() {
+  const data = require("antd");
+  _antd = function _antd() {
+    return data;
+  };
+  return data;
+}
+function _classnames() {
+  const data = _interopRequireDefault(require("classnames"));
+  _classnames = function _classnames() {
+    return data;
+  };
+  return data;
+}
+function _useMergedState3() {
+  const data = _interopRequireDefault(require("rc-util/es/hooks/useMergedState"));
+  _useMergedState3 = function _useMergedState3() {
+    return data;
+  };
+  return data;
+}
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function _react() {
+    return data;
+  };
+  return data;
+}
+var _icons2 = require("../../icons");
+var _makeStyle = _interopRequireDefault(require("../../utils/makeStyle"));
+var _statistic = require("../../utils/statistic");
+var _tokenItem = _interopRequireDefault(require("../token-item"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+const Panel = _antd().Collapse.Panel;
+const IconMap = {
+  seed: _react().default.createElement(_icons().BulbOutlined, null),
+  colorText: _react().default.createElement(_icons().FontColorsOutlined, null),
+  colorBg: _react().default.createElement(_icons().BgColorsOutlined, null),
+  colorSplit: _react().default.createElement(_icons().BorderHorizontalOutlined, null),
+  colorFill: _react().default.createElement(_icons().HighlightOutlined, null),
+  colorCommon: _react().default.createElement(_icons().FormatPainterOutlined, null),
+  space: _react().default.createElement(_icons2.ShapeLine, null),
+  font: _react().default.createElement(_icons().FontSizeOutlined, null),
+  line: _react().default.createElement(_icons().AlignLeftOutlined, null),
+  screen: _react().default.createElement(_icons().TabletOutlined, null),
+  motion: _react().default.createElement(_icons2.Motion, null),
+  radius: _react().default.createElement(_icons().RadiusSettingOutlined, null),
+  control: _react().default.createElement(_icons().ControlOutlined, null),
+  others: _react().default.createElement(_icons().FileUnknownOutlined, null)
+};
+exports.IconMap = IconMap;
+const TextMap = {
+  seed: 'Seed Token',
+  colorCommon: 'Common Color 通用颜色',
+  colorText: 'Text Color 文本颜色',
+  colorBg: 'Background Color 背景颜色',
+  colorFill: 'Fill Color 填充颜色',
+  colorSplit: 'Split Color 分割线颜色',
+  space: 'Space 间距',
+  font: 'Font 文本',
+  line: 'Line 线',
+  screen: 'Screen 屏幕',
+  motion: 'Motion 动画',
+  radius: 'Radius 圆角',
+  control: 'Control 控件',
+  others: 'Others 未分类'
+};
+exports.TextMap = TextMap;
+const useStyle = (0, _makeStyle.default)('TokenCard', token => ({
+  '.token-card': {
+    width: '100%',
+    height: 'auto',
+    borderRadius: token.borderRadiusLG,
+    border: `1px solid rgba(0,0,0,0.09)`,
+    marginBottom: token.marginSM,
+    [`${token.rootCls}-collapse.token-card-collapse`]: {
+      [`> ${token.rootCls}-collapse-item > ${token.rootCls}-collapse-content > ${token.rootCls}-collapse-content-box`]: {
+        padding: {
+          _skip_check_: true,
+          value: `0 ${token.paddingXS}px 12px !important`
+        }
+      }
+    }
+  },
+  [`.token-card ${token.rootCls}-input-group >${token.rootCls}-input:not(:first-child):not(:last-child)`]: {
+    background: 'white',
+    borderRadius: token.borderRadiusLG
+  }
+}));
+var _default = ({
+  title,
+  icon,
+  tokenArr,
+  keyword,
+  hideUseless,
+  defaultOpen,
+  open: customOpen,
+  onOpenChange,
+  activeToken,
+  onActiveTokenChange,
+  onTokenChange,
+  tokenPath,
+  selectedTokens,
+  themes,
+  onTokenSelect,
+  enableTokenSelect,
+  hideUsageCount,
+  fallback,
+  placeholder
+}) => {
+  const _useStyle = useStyle(),
+    _useStyle2 = _slicedToArray(_useStyle, 2),
+    wrapSSR = _useStyle2[0],
+    hashId = _useStyle2[1];
+  const _useMergedState = (0, _useMergedState3().default)(false, {
+      onChange: onOpenChange,
+      defaultValue: defaultOpen,
+      value: customOpen
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    open = _useMergedState2[0],
+    setOpen = _useMergedState2[1];
+  return wrapSSR(_react().default.createElement("div", {
+    className: (0, _classnames().default)('token-card', hashId)
+  }, _react().default.createElement(_antd().Collapse, {
+    ghost: true,
+    expandIcon: ({
+      isActive
+    }) => _react().default.createElement(_icons().CaretRightOutlined, {
+      rotate: isActive ? 450 : 360,
+      style: {
+        fontSize: 12,
+        color: 'rgba(0,0,0,0.45)'
+      }
+    }),
+    expandIconPosition: "right",
+    className: "token-card-collapse",
+    activeKey: open ? '1' : undefined,
+    onChange: keys => {
+      // onOpenChange?.(keys.length > 0);
+      setOpen(keys.length > 0);
+    }
+  }, _react().default.createElement(Panel, {
+    header: _react().default.createElement(_antd().Space, {
+      size: "small"
+    }, _react().default.createElement("span", null, title), _react().default.createElement("span", null, icon)),
+    key: "1"
+  }, tokenArr.filter(tokenName => (!keyword || tokenName.toLowerCase().includes(keyword.toLowerCase())) && (!hideUseless || (0, _statistic.getRelatedComponents)(tokenName).length > 0)).map(tokenName => _react().default.createElement(_tokenItem.default, {
+    tokenPath: tokenPath,
+    onActiveChange: active => onActiveTokenChange === null || onActiveTokenChange === void 0 ? void 0 : onActiveTokenChange(active ? tokenName : undefined),
+    active: activeToken === tokenName,
+    tokenName: tokenName,
+    key: tokenName,
+    onTokenChange: onTokenChange,
+    themes: themes,
+    selectedTokens: selectedTokens,
+    onTokenSelect: onTokenSelect,
+    enableTokenSelect: enableTokenSelect,
+    hideUsageCount: hideUsageCount,
+    fallback: fallback
+  })), tokenArr.length === 0 && placeholder))));
+};
+exports.default = _default;

package/lib/client/antd-token-previewer/token-panel/token-item/index.d.ts

@@ -0,0 +1,19 @@
+import type { ThemeConfig } from 'antd/es/config-provider/context';
+import React from 'react';
+import type { MutableTheme, TokenValue } from '../../interface';
+interface TokenItemProps {
+    tokenName: string;
+    tokenPath: string[];
+    active?: boolean;
+    onActiveChange?: (active: boolean) => void;
+    onTokenChange?: (theme: MutableTheme, tokenName: string, value: TokenValue) => void;
+    themes: MutableTheme[];
+    selectedTokens?: string[];
+    onTokenSelect?: (token: string) => void;
+    enableTokenSelect?: boolean;
+    hideUsageCount?: boolean;
+    fallback?: (config: ThemeConfig) => Record<string, TokenValue>;
+}
+export declare const getTokenItemId: (token: string) => string;
+declare const _default: ({ tokenName, active, onActiveChange, onTokenChange, tokenPath, selectedTokens, themes, onTokenSelect, enableTokenSelect, hideUsageCount, fallback, }: TokenItemProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export default _default;

package/lib/client/antd-token-previewer/token-panel/token-item/index.js

@@ -0,0 +1,301 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTokenItemId = exports.default = void 0;
+function _icons() {
+  const data = require("@ant-design/icons");
+  _icons = function _icons() {
+    return data;
+  };
+  return data;
+}
+function _antd() {
+  const data = require("antd");
+  _antd = function _antd() {
+    return data;
+  };
+  return data;
+}
+function _classnames() {
+  const data = _interopRequireDefault(require("classnames"));
+  _classnames = function _classnames() {
+    return data;
+  };
+  return data;
+}
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function _react() {
+    return data;
+  };
+  return data;
+}
+var _ColorPreview = _interopRequireDefault(require("../../ColorPreview"));
+var _TokenInput = _interopRequireDefault(require("../../TokenInput"));
+var _icons2 = require("../../icons");
+var _getValueByPath3 = _interopRequireDefault(require("../../utils/getValueByPath"));
+var _isColor = _interopRequireDefault(require("../../utils/isColor"));
+var _makeStyle = _interopRequireDefault(require("../../utils/makeStyle"));
+var _statistic = require("../../utils/statistic");
+const _excluded = ["info", "visible", "tokenName", "style", "dark"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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; }
+const Panel = _antd().Collapse.Panel;
+const AdditionInfo = _ref => {
+  let info = _ref.info,
+    visible = _ref.visible,
+    tokenName = _ref.tokenName,
+    style = _ref.style,
+    dark = _ref.dark,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  if (typeof info === 'string' && (0, _isColor.default)(info)) {
+    return _react().default.createElement(_ColorPreview.default, {
+      dark: dark,
+      color: String(info),
+      style: _objectSpread({
+        display: visible ? 'block' : 'none'
+      }, style)
+    });
+  }
+  if (info.toString().length < 6 && String(info) !== '') {
+    return _react().default.createElement("div", _objectSpread({
+      style: _objectSpread({
+        height: 20,
+        overflow: 'hidden',
+        backgroundColor: 'rgba(0,0,0,0.04)',
+        borderRadius: '8px',
+        display: visible ? 'block' : 'none',
+        padding: '0 6px',
+        lineHeight: '20px'
+      }, style)
+    }, rest), info);
+  }
+  return null;
+};
+const ShowUsageButton = ({
+  selected,
+  toggleSelected
+}) => {
+  return _react().default.createElement(_icons2.Pick, {
+    style: {
+      color: selected ? '#1890ff' : undefined,
+      cursor: 'pointer',
+      fontSize: 16,
+      transition: 'color 0.3s',
+      marginInlineStart: 12,
+      verticalAlign: 'middle'
+    },
+    onClick: () => toggleSelected(!selected)
+  });
+};
+const useStyle = (0, _makeStyle.default)('TokenItem', token => ({
+  [`${token.rootCls}-collapse.previewer-token-item-collapse`]: {
+    [`.previewer-token-item${token.rootCls}-collapse-item`]: {
+      transition: `background-color ${token.motionDurationSlow}`,
+      borderRadius: {
+        _skip_check_: true,
+        value: `4px !important`
+      },
+      [`&:not(${token.rootCls}-collapse-item-active):hover`]: {
+        backgroundColor: '#f5f5f5'
+      },
+      [`> ${token.rootCls}-collapse-header`]: {
+        padding: '12px 8px'
+      },
+      [`${token.rootCls}-collapse-header-text`]: {
+        flex: 1,
+        width: 0
+      },
+      [`${token.rootCls}-collapse-content-box`]: {
+        padding: '0 4px'
+      },
+      [`${token.rootCls}-collapse-expand-icon`]: {
+        paddingInlineEnd: `${token.paddingXXS}px !important`
+      },
+      '.previewer-token-count': {
+        height: 16,
+        fontSize: token.fontSizeSM,
+        lineHeight: '16px',
+        borderRadius: 100,
+        paddingInline: token.paddingXXS * 1.5,
+        color: token.colorTextSecondary,
+        backgroundColor: token.colorFillAlter
+      },
+      '.previewer-token-item-name': {
+        transition: 'color 0.3s'
+      },
+      '.previewer-token-item-highlighted.previewer-token-item-name': {
+        color: `${token.colorPrimary} !important`
+      },
+      '&:hover .previewer-token-preview': {
+        '> .previewer-color-preview:not(:last-child)': {
+          transform: 'translateX(-100%)',
+          marginInlineEnd: 4
+        }
+      },
+      '.previewer-token-preview': {
+        display: 'flex',
+        alignItems: 'center',
+        position: 'relative',
+        '> .previewer-color-preview': {
+          position: 'absolute',
+          insetInlineEnd: 0,
+          top: 0,
+          bottom: 0,
+          margin: 'auto'
+        },
+        '> .previewer-color-preview:not(:last-child)': {
+          transform: 'translateX(-50%)',
+          marginInlineEnd: 0,
+          transition: 'transform 0.3s, margin-right 0.3s'
+        },
+        '> *:not(:last-child)': {
+          marginInlineEnd: 4
+        }
+      }
+    }
+  }
+}));
+const getTokenItemId = token => `previewer-token-panel-item-${token}`;
+exports.getTokenItemId = getTokenItemId;
+var _default = ({
+  tokenName,
+  active,
+  onActiveChange,
+  onTokenChange,
+  tokenPath,
+  selectedTokens,
+  themes,
+  onTokenSelect,
+  enableTokenSelect,
+  hideUsageCount,
+  fallback
+}) => {
+  const _React$useState = _react().default.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    infoVisible = _React$useState2[0],
+    setInfoVisible = _React$useState2[1];
+  const _useStyle = useStyle(),
+    _useStyle2 = _slicedToArray(_useStyle, 2),
+    wrapSSR = _useStyle2[0],
+    hashId = _useStyle2[1];
+  (0, _react().useEffect)(() => {
+    if (active) {
+      setInfoVisible(true);
+    }
+  }, [active]);
+  const handleTokenChange = (theme, value) => {
+    onTokenChange === null || onTokenChange === void 0 ? void 0 : onTokenChange(theme, tokenName, value);
+  };
+  const count = (0, _react().useMemo)(() => (0, _statistic.getRelatedComponents)(tokenName).length, [tokenName]);
+  return wrapSSR(_react().default.createElement("div", {
+    onMouseEnter: () => onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(false)
+  }, _react().default.createElement(_antd().Collapse, {
+    collapsible: "header",
+    ghost: true,
+    onChange: key => setInfoVisible(key.length > 0),
+    className: (0, _classnames().default)('previewer-token-item-collapse', hashId),
+    expandIcon: ({
+      isActive
+    }) => _react().default.createElement(_icons().CaretRightOutlined, {
+      rotate: isActive ? 90 : 0,
+      style: {
+        fontSize: 12,
+        cursor: 'pointer'
+      }
+    }),
+    activeKey: infoVisible ? tokenName : undefined
+  }, _react().default.createElement(Panel, {
+    key: tokenName,
+    className: "previewer-token-item",
+    header: _react().default.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8
+      },
+      id: getTokenItemId(tokenName)
+    }, _react().default.createElement("span", {
+      style: {
+        flex: 1,
+        width: 0,
+        display: 'flex',
+        overflow: 'hidden',
+        alignItems: 'center'
+      }
+    }, _react().default.createElement("span", {
+      title: tokenName,
+      className: (0, _classnames().default)('previewer-token-item-name', {
+        'previewer-token-item-highlighted': active
+      }),
+      style: {
+        marginInlineEnd: '5px',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+      }
+    }, tokenName), !hideUsageCount && _react().default.createElement("span", {
+      className: "previewer-token-count"
+    }, count)), !infoVisible && _react().default.createElement("div", {
+      className: "previewer-token-preview",
+      style: {
+        minWidth: themes.length * 20 + (themes.length - 1) * 4
+      }
+    }, themes.map(({
+      config,
+      key
+    }, index) => {
+      var _ref2, _getValueByPath;
+      return _react().default.createElement(AdditionInfo, {
+        key: key,
+        dark: key === 'dark',
+        tokenName: tokenName,
+        info: (_ref2 = (_getValueByPath = (0, _getValueByPath3.default)(config, [...tokenPath, tokenName])) !== null && _getValueByPath !== void 0 ? _getValueByPath : fallback === null || fallback === void 0 ? void 0 : fallback(config)[tokenName]) !== null && _ref2 !== void 0 ? _ref2 : '',
+        visible: !infoVisible,
+        style: {
+          zIndex: 10 - index
+        }
+      });
+    }))),
+    extra: enableTokenSelect ? _react().default.createElement(ShowUsageButton, {
+      selected: !!(selectedTokens !== null && selectedTokens !== void 0 && selectedTokens.includes(tokenName)),
+      toggleSelected: () => {
+        onTokenSelect === null || onTokenSelect === void 0 ? void 0 : onTokenSelect(tokenName);
+      }
+    }) : undefined
+  }, _react().default.createElement(_antd().Space, {
+    direction: "vertical",
+    style: {
+      background: '#fafafa',
+      borderRadius: 4,
+      padding: 8,
+      width: '100%'
+    }
+  }, themes.map(theme => {
+    var _getValueByPath2;
+    return _react().default.createElement("div", {
+      key: theme.key
+    }, _react().default.createElement(_TokenInput.default, {
+      hideTheme: themes.length === 1,
+      theme: theme,
+      onChange: value => handleTokenChange(theme, value),
+      value: (_getValueByPath2 = (0, _getValueByPath3.default)(theme.config, [...tokenPath, tokenName])) !== null && _getValueByPath2 !== void 0 ? _getValueByPath2 : fallback === null || fallback === void 0 ? void 0 : fallback(theme.config)[tokenName]
+    }));
+  }))))));
+};
+exports.default = _default;

package/lib/client/antd-token-previewer/token-panel-pro/AliasPanel.d.ts

@@ -0,0 +1,17 @@
+import type { MutableTheme } from 'antd-token-previewer';
+import type { FC } from 'react';
+import React from 'react';
+import type { SelectedToken } from '../interface';
+export type AliasPanelProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    theme: MutableTheme;
+    activeSeeds?: string[];
+    selectedTokens?: SelectedToken;
+    onTokenSelect?: (token: string, type: keyof SelectedToken) => void;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    description?: string;
+};
+declare const AliasPanel: FC<AliasPanelProps>;
+export default AliasPanel;