@pisell/materials 1.8.7 → 1.8.9

package/es/theme/tokens.js

@@ -71,9 +71,10 @@ export function getComponentsToken() {
     Dropdown: {
       borderRadiusLG: 8,
       controlHeight: 42,
-      fontSize: 14,
-      // 下拉框阴影（Figma: Shadow/lg）
-      boxShadowSecondary: '0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)'
+      fontSize: 14
+      // // 下拉框阴影（Figma: Shadow/lg）
+      // boxShadowSecondary:
+      //   '0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)',
     },
     DatePicker: {
       borderRadius: 8,
@@ -84,138 +85,117 @@ export function getComponentsToken() {
       colorTextDisabled: '#98A2B3'
     },
     Input: {
-      // 基础样式（基于 Figma 设计规范）
-      fontSizeIcon: 16,
-      fontSize: 16,
-      lineHeight: 1.5,
-      // 24px / 16px = 1.5
-      addonBg: '#fff',
-      // 边框和圆角
-      borderRadius: 8,
-      colorBorder: '#D0D5DD',
-      // Gray/300
-
-      // 内边距（Figma: 16px 12px）
-      paddingBlock: 12,
-      paddingInline: 16,
-      controlHeight: 48,
-      // 12px + 24px + 12px = 48px
-
-      // 颜色
-      colorText: '#101828',
-      // Gray/900 - 输入文本
-      colorTextPlaceholder: '#667085',
-      // Gray/500 - 占位符
-      colorBgContainer: '#FFFFFF',
-      // 背景色
-
-      // 禁用态
-      colorBgContainerDisabled: '#F9FAFB',
-      // Gray/50
-      colorTextDisabled: '#98A2B3' // Gray/400
-
-      // 注意：TextArea 的水平内边距比 Input 小2px (14px vs 16px)
-      // 在各组件的 Less 文件中单独设置
+      // // 基础样式（基于 Figma 设计规范）
+      // fontSizeIcon: 16,
+      // fontSize: 16,
+      // lineHeight: 1.5, // 24px / 16px = 1.5
+      // addonBg: '#fff',
+      //
+      // // 边框和圆角
+      // borderRadius: 8,
+      // colorBorder: '#D0D5DD', // Gray/300
+      //
+      // // 内边距（Figma: 16px 12px）
+      // paddingBlock: 12,
+      // paddingInline: 16,
+      // controlHeight: 48, // 12px + 24px + 12px = 48px
+      //
+      // // 颜色
+      // colorText: '#101828', // Gray/900 - 输入文本
+      // colorTextPlaceholder: '#667085', // Gray/500 - 占位符
+      // colorBgContainer: '#FFFFFF', // 背景色
+      //
+      // // 禁用态
+      // colorBgContainerDisabled: '#F9FAFB', // Gray/50
+      // colorTextDisabled: '#98A2B3', // Gray/400
+      //
+      // // 注意：TextArea 的水平内边距比 Input 小2px (14px vs 16px)
+      // // 在各组件的 Less 文件中单独设置
     },
     InputNumber: {
-      // 基础样式（与 Input 保持一致，基于 Figma 设计规范）
-      fontSize: 16,
-      lineHeight: 1.5,
-      // 24px / 16px = 1.5
-
-      // 边框和圆角
-      borderRadius: 8,
-      colorBorder: '#D0D5DD',
-      // Gray/300
-
-      // 内边距（Figma: 16px 12px）
-      paddingBlock: 12,
-      paddingInline: 16,
-      controlHeight: 48,
-      // 12px + 24px + 12px = 48px
-
-      // 颜色
-      colorText: '#101828',
-      // Gray/900 - 输入文本
-      colorTextPlaceholder: '#667085',
-      // Gray/500 - 占位符
-      colorBgContainer: '#FFFFFF',
-      // 背景色
-
-      // 禁用态
-      colorBgContainerDisabled: '#F9FAFB',
-      // Gray/50
-      colorTextDisabled: '#98A2B3',
-      // Gray/400
-
-      // 控制按钮（步进器）
-      handleVisible: true,
-      // 显示增减按钮
-      handleBg: '#FFFFFF',
-      handleHoverColor: '#7F56DA',
-      // 悬停颜色使用主色
-      handleBorderColor: '#D0D5DD'
+      // // 基础样式（与 Input 保持一致，基于 Figma 设计规范）
+      // fontSize: 16,
+      // lineHeight: 1.5, // 24px / 16px = 1.5
+      //
+      // // 边框和圆角
+      // borderRadius: 8,
+      // colorBorder: '#D0D5DD', // Gray/300
+      //
+      // // 内边距（Figma: 16px 12px）
+      // paddingBlock: 12,
+      // paddingInline: 16,
+      // controlHeight: 48, // 12px + 24px + 12px = 48px
+      //
+      // // 颜色
+      // colorText: '#101828', // Gray/900 - 输入文本
+      // colorTextPlaceholder: '#667085', // Gray/500 - 占位符
+      // colorBgContainer: '#FFFFFF', // 背景色
+      //
+      // // 禁用态
+      // colorBgContainerDisabled: '#F9FAFB', // Gray/50
+      // colorTextDisabled: '#98A2B3', // Gray/400
+      //
+      // // 控制按钮（步进器）
+      // handleVisible: true, // 显示增减按钮
+      // handleBg: '#FFFFFF',
+      // handleHoverColor: '#7F56DA', // 悬停颜色使用主色
+      // handleBorderColor: '#D0D5DD',
     },
     Select: {
-      // 基础样式（Figma 设计规范）
-      fontSizeIcon: 16,
-      fontSize: 16,
-      lineHeight: 1.5,
-      // 边框和圆角（Figma: 8px 圆角，#D0D5DD 边框）
-      borderRadius: 8,
-      colorBorder: '#D0D5DD',
-      // Gray/300
-
-      // 高度和内边距（Figma: 48px 高度，16px 水平内边距）
-      controlHeight: 48,
-      controlPaddingHorizontal: 16,
-      // 颜色（Figma 设计规范）
-      colorText: '#101828',
-      // Gray/900 - 选中文本
-      colorTextPlaceholder: '#667085',
-      // Gray/500 - 占位符
-      colorBgContainer: '#FFFFFF',
-      // Base/White - 背景
-
-      // 禁用态
-      colorBgContainerDisabled: '#F9FAFB',
-      // Gray/50
-      colorTextDisabled: '#98A2B3',
-      // Gray/400
-
-      // 聚焦态（Figma: Primary/300 边框，Primary/100 阴影）
-      colorPrimaryBorder: '#D6BBFB',
-      // Primary/300
-      controlOutline: '#F4EBFF',
-      // Primary/100
-      controlOutlineWidth: 4,
-      // 下拉箭头和清空按钮颜色
-      colorIcon: '#667085',
-      // Gray/500
-      colorIconHover: '#344054',
-      // Gray/700
-
-      // 选择框阴影（Figma: Shadow/xs）
-      boxShadowSecondary: '0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)',
-      // 多选标签样式（Figma: Gray/200 背景）
-      multipleItemBg: '#EAECF0',
-      // Gray/200
-      multipleItemBorderColor: 'transparent',
-      multipleItemHeight: 36,
-      // 选项样式
-      optionFontSize: 16,
-      optionLineHeight: 1.5,
-      optionPadding: '10px 8px',
-      optionSelectedBg: '#F4EBFF',
-      // Primary/100 - 选中项背景（浅紫色）
-      optionActiveBg: '#F9FAFB' // Gray/50 - hover 背景
+      // // 基础样式（Figma 设计规范）
+      // fontSizeIcon: 16,
+      // fontSize: 16,
+      // lineHeight: 1.5,
+      //
+      // // 边框和圆角（Figma: 8px 圆角，#D0D5DD 边框）
+      // borderRadius: 8,
+      // colorBorder: '#D0D5DD', // Gray/300
+      //
+      // // 高度和内边距（Figma: 48px 高度，16px 水平内边距）
+      // controlHeight: 48,
+      // controlPaddingHorizontal: 16,
+      //
+      // // 颜色（Figma 设计规范）
+      // colorText: '#101828', // Gray/900 - 选中文本
+      // colorTextPlaceholder: '#667085', // Gray/500 - 占位符
+      // colorBgContainer: '#FFFFFF', // Base/White - 背景
+      //
+      // // 禁用态
+      // colorBgContainerDisabled: '#F9FAFB', // Gray/50
+      // colorTextDisabled: '#98A2B3', // Gray/400
+      //
+      // // 聚焦态（Figma: Primary/300 边框，Primary/100 阴影）
+      // colorPrimaryBorder: '#D6BBFB', // Primary/300
+      // controlOutline: '#F4EBFF', // Primary/100
+      // controlOutlineWidth: 4,
+      //
+      // // 下拉箭头和清空按钮颜色
+      // colorIcon: '#667085', // Gray/500
+      // colorIconHover: '#344054', // Gray/700
+      //
+      // // 选择框阴影（Figma: Shadow/xs）
+      // boxShadowSecondary:
+      //   '0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)',
+      //
+      // // 多选标签样式（Figma: Gray/200 背景）
+      // multipleItemBg: '#EAECF0', // Gray/200
+      // multipleItemBorderColor: 'transparent',
+      // multipleItemHeight: 36,
+      //
+      // // 选项样式
+      // optionFontSize: 16,
+      // optionLineHeight: 1.5,
+      // optionPadding: '10px 8px',
+      // optionSelectedBg: '#F4EBFF', // Primary/100 - 选中项背景（浅紫色）
+      // optionActiveBg: '#F9FAFB', // Gray/50 - hover 背景
     },
     Menu: {
       itemSelectedColor: '#9976e3'
     },
     Popover: {
       // 下拉框阴影（Figma: Shadow/lg）
-      boxShadowSecondary: '0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)'
+      // boxShadowSecondary:
+      //   '0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)',
     },
     Typography: {
       colorText: '#101828',

package/lib/components/PisellSuperTabs/PisellSuperTabs.js

@@ -32,13 +32,13 @@ __export(PisellSuperTabs_exports, {
   default: () => PisellSuperTabs_default
 });
 module.exports = __toCommonJS(PisellSuperTabs_exports);
-var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
-var import_hooks = require("./hooks");
-var import_utils = require("./utils");
+var import_react = __toESM(require("react"));
 var import_PisellBasicGrid = __toESM(require("../PisellBasicGrid"));
 var import_PisellScrollView = __toESM(require("../PisellScrollView"));
 var import_PisellSuperTabs = require("./PisellSuperTabs.less");
+var import_hooks = require("./hooks");
+var import_utils = require("./utils");
 var PisellSuperTabs = (props, ref) => {
   const {
     // 基础属性
@@ -70,13 +70,15 @@ var PisellSuperTabs = (props, ref) => {
     slotRightStyle,
     slotTopStyle,
     slotBottomStyle,
+    isControlled = true,
     __designMode
   } = props;
   const containerRef = (0, import_react.useRef)(null);
   const { activeKey, handleTabChange } = (0, import_hooks.useTabsState)({
     value,
     defaultValue,
-    onChange
+    onChange,
+    isControlled: isControlled ?? false
   });
   const scrollItemByRowKey = (key) => {
     const item = document.querySelector(`.pisell-super-tabs-item-${id}-${key}`);

package/lib/components/PisellSuperTabs/hooks/useTabsState.js

@@ -24,11 +24,10 @@ __export(useTabsState_exports, {
 module.exports = __toCommonJS(useTabsState_exports);
 var import_react = require("react");
 var useTabsState = (params) => {
-  const { value, defaultValue, onChange } = params;
+  const { value, defaultValue, onChange, isControlled } = params;
   const [innerValue, setInnerValue] = (0, import_react.useState)(
     defaultValue
   );
-  const isControlled = (0, import_react.useMemo)(() => value !== void 0, [value]);
   const activeKey = isControlled ? value : innerValue;
   const handleTabChange = (0, import_react.useCallback)(
     (key, item) => {