@officesdk/design 0.1.27 → 0.1.28

package/dist/components/esm/index.d.ts

@@ -861,7 +861,7 @@ interface TabItem {
     /**
      * Tab label
      */
-    label: string;
+    label: string | React$1.ReactNode;
     /**
      * Whether the tab is disabled
      */
@@ -904,6 +904,14 @@ interface TabsProps {
      * Custom style
      */
     style?: React$1.CSSProperties;
+    /**
+     * Custom className for tab item
+     */
+    tabItemClassName?: string;
+    /**
+     * Custom style for tab item
+     */
+    tabItemStyle?: React$1.CSSProperties;
 }
 /**
  * Tab Component

package/dist/components/esm/index.js

@@ -734,7 +734,6 @@ var init_Button = __esm({
   justify-content: center;
   cursor: pointer;
   outline: none;
-  border: none;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 
   /* Size variants */
@@ -760,34 +759,44 @@ var init_Button = __esm({
 
   /* Variant and color type styles */
   ${({ $variant, $colorType, $iconBordered, theme: theme3 }) => {
+      const combineShadows = (insetBorder, externalShadow) => {
+        if (!insetBorder) {
+          return externalShadow || "none";
+        }
+        if (externalShadow === "none") {
+          return insetBorder;
+        }
+        return `${insetBorder}, ${externalShadow}`;
+      };
       if ($variant === "icon") {
         const baseVariant = $iconBordered ? "outlined" : "text";
         const styles2 = theme3.components.button[baseVariant]["default"];
+        const borderColor2 = $iconBordered ? styles2.borderColor : "transparent";
+        const borderColorHover2 = $iconBordered ? styles2.borderColorHover : "transparent";
+        const borderColorActive2 = $iconBordered ? styles2.borderColorActive : "transparent";
+        const borderColorDisabled2 = $iconBordered ? styles2.borderColorDisabled : "transparent";
         return `
         background: ${styles2.background};
         color: ${styles2.color};
-        border: 1px solid ${styles2.borderColor};
-        box-shadow: ${styles2.boxShadow};
+        border: none;
+        box-shadow: ${combineShadows(`inset 0 0 0 1px ${borderColor2}`, styles2.boxShadow)};
 
         &:hover:not(:disabled) {
           background: ${styles2.backgroundHover};
           color: ${styles2.colorHover};
-          border-color: ${styles2.borderColorHover};
-          box-shadow: ${styles2.boxShadowHover};
+          box-shadow: ${combineShadows(`inset 0 0 0 1px ${borderColorHover2}`, styles2.boxShadowHover)};
         }
 
         &:active:not(:disabled) {
           background: ${styles2.backgroundActive};
           color: ${styles2.colorActive};
-          border-color: ${styles2.borderColorActive};
-          box-shadow: ${styles2.boxShadowActive};
+          box-shadow: ${combineShadows(`inset 0 0 0 1px ${borderColorActive2}`, styles2.boxShadowActive)};
         }
 
         &:disabled {
           background: ${styles2.backgroundDisabled};
           color: ${styles2.colorDisabled};
-          border-color: ${styles2.borderColorDisabled};
-          box-shadow: ${styles2.boxShadowDisabled};
+          box-shadow: ${combineShadows(`inset 0 0 0 1px ${borderColorDisabled2}`, styles2.boxShadowDisabled)};
           cursor: not-allowed;
         }
       `;
@@ -801,32 +810,48 @@ var init_Button = __esm({
       }
       const effectiveColorType = colorType === "status" && variant !== "text" ? "default" : colorType;
       const styles = theme3.components.button[variant][effectiveColorType];
+      const needsBorder = variant === "outlined";
+      const borderWidth = needsBorder ? "1px" : "0px";
+      const getBorderColor = (state = "normal") => {
+        if (!needsBorder) {
+          return "transparent";
+        }
+        const stateKey = state === "normal" ? "borderColor" : `borderColor${state.charAt(0).toUpperCase() + state.slice(1)}`;
+        return styles[stateKey];
+      };
+      const borderColor = getBorderColor("normal");
+      const borderColorHover = getBorderColor("hover");
+      const borderColorActive = getBorderColor("active");
+      const borderColorDisabled = getBorderColor("disabled");
+      const getInsetBorder = (color) => {
+        if (borderWidth === "0px") {
+          return "";
+        }
+        return `inset 0 0 0 ${borderWidth} ${color}`;
+      };
       return `
       background: ${styles.background};
       color: ${styles.color};
-      border: 1px solid ${styles.borderColor};
-      box-shadow: ${styles.boxShadow};
+      border: none;
+      box-shadow: ${combineShadows(getInsetBorder(borderColor), styles.boxShadow)};
       font-weight: ${styles.fontWeight};
 
       &:hover:not(:disabled) {
         background: ${styles.backgroundHover};
         color: ${styles.colorHover};
-        border-color: ${styles.borderColorHover};
-        box-shadow: ${styles.boxShadowHover};
+        box-shadow: ${combineShadows(getInsetBorder(borderColorHover), styles.boxShadowHover)};
       }
 
       &:active:not(:disabled) {
         background: ${styles.backgroundActive};
         color: ${styles.colorActive};
-        border-color: ${styles.borderColorActive};
-        box-shadow: ${styles.boxShadowActive};
+        box-shadow: ${combineShadows(getInsetBorder(borderColorActive), styles.boxShadowActive)};
       }
 
       &:disabled {
         background: ${styles.backgroundDisabled};
         color: ${styles.colorDisabled};
-        border-color: ${styles.borderColorDisabled};
-        box-shadow: ${styles.boxShadowDisabled};
+        box-shadow: ${combineShadows(getInsetBorder(borderColorDisabled), styles.boxShadowDisabled)};
         cursor: not-allowed;
       }
     `;
@@ -2625,11 +2650,24 @@ init_styled();
 var TabContainer = styled.div`
   display: flex;
   flex-direction: column;
+
+  ${({ $variant, theme: theme3 }) => {
+  const variantConfig = theme3.components.tab[$variant];
+  const sizeConfig = theme3.components.tab.large;
+  return `
+      height: ${sizeConfig.height};
+      border-radius: ${sizeConfig.borderRadius};
+      background-color: ${variantConfig.backgroundColor};
+    `;
+}}
 `;
 var TabList = styled.div`
   display: flex;
   align-items: center;
   position: relative;
+  width: 100%;
+  height: 100%;
+
 
   ${({ $variant, theme: theme3 }) => {
   const variantConfig = theme3.components.tab[$variant];
@@ -2662,8 +2700,7 @@ var TabItem = styled.button`
   ${({ theme: theme3 }) => {
   const sizeConfig = theme3.components.tab.large;
   return `
-      height: ${sizeConfig.height};
-      padding: ${sizeConfig.padding};
+      height: 100%;
       font-size: ${sizeConfig.fontSize};
       line-height: ${sizeConfig.lineHeight};
       border-radius: ${sizeConfig.borderRadius};
@@ -2677,15 +2714,14 @@ var TabItem = styled.button`
   if ($disabled) {
     return `
         background: ${itemConfig.backgroundDisabled};
-        border-color: ${itemConfig.borderColorDisabled};
         color: ${itemConfig.colorDisabled};
       `;
   }
   if ($active) {
     return `
         background: ${itemConfig.backgroundActive};
-        border-color: ${itemConfig.borderColorActive};
         color: ${itemConfig.colorActive};
+        font-weight: 500;
       `;
   }
   return `
@@ -2695,20 +2731,21 @@ var TabItem = styled.button`
     `;
 }}
 
-  ${({ $variant, $disabled, theme: theme3 }) => {
+  ${({ $variant, $disabled, theme: theme3, $active }) => {
   if ($disabled) return "";
   const variantConfig = theme3.components.tab[$variant];
   const itemConfig = variantConfig.item;
+  const isHoverNormal = !$active && !$disabled;
   return `
       &:hover {
-        background: ${itemConfig.backgroundHover};
-        border-color: ${itemConfig.borderColorHover};
-        color: ${itemConfig.colorHover};
+        background: ${isHoverNormal ? itemConfig.backgroundHover : ""};
+        border-color: ${isHoverNormal ? itemConfig.borderColorHover : ""};
+        color: ${isHoverNormal ? itemConfig.colorHover : ""};
       }
     `;
 }}
 
-  ${({ $variant, $active }) => {
+  ${({ $variant, $active, $disabled, theme: theme3 }) => {
   if ($variant === "line" && $active) {
     return `
         &::after {
@@ -2723,16 +2760,41 @@ var TabItem = styled.button`
       `;
   }
   if ($variant === "card") {
+    const variantConfig = theme3.components.tab[$variant];
+    const itemConfig = variantConfig.item;
+    let borderColor;
+    if ($disabled) {
+      borderColor = itemConfig.borderColorDisabled;
+    } else if ($active) {
+      borderColor = itemConfig.borderColorActive;
+    } else {
+      borderColor = itemConfig.borderColor;
+    }
     return `
-        border: 1px solid;
-        ${$active ? `
-          border-bottom-color: transparent;
-          margin-bottom: -1px;
-        ` : ""}
+        box-shadow: inset 0 0 0 1px ${borderColor};
+        flex-grow: 1;
+        flex-shrink: 1;
+        &:hover {
+        }
       `;
   }
   return "";
 }}
+
+  ${({ $variant }) => {
+  if ($variant === "line") {
+    return `
+        max-width: 160px;
+      `;
+  }
+  return "";
+}}
+`;
+var TabItemLabel = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
 `;
 var Tabs = ({
   items,
@@ -2743,7 +2805,9 @@ var Tabs = ({
   size: _size = "large",
   onChange,
   className,
-  style
+  style,
+  tabItemClassName,
+  tabItemStyle
 }) => {
   const [internalActiveKey, setInternalActiveKey] = useState(
     controlledActiveKey ?? defaultActiveKey ?? items[0]?.key ?? ""
@@ -2759,7 +2823,7 @@ var Tabs = ({
     },
     [controlledActiveKey, onChange]
   );
-  return /* @__PURE__ */ React3.createElement(TabContainer, { className, style }, /* @__PURE__ */ React3.createElement(TabList, { $variant: variant, role: "tablist" }, items.map((item) => /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement(TabContainer, { $variant: variant, className, style }, /* @__PURE__ */ React3.createElement(TabList, { $variant: variant, role: "tablist" }, items.map((item) => /* @__PURE__ */ React3.createElement(
     TabItem,
     {
       key: item.key,
@@ -2771,10 +2835,12 @@ var Tabs = ({
       "aria-selected": activeKey === item.key,
       "aria-disabled": item.disabled,
       disabled: item.disabled,
-      type: "button"
+      type: "button",
+      className: tabItemClassName,
+      style: tabItemStyle
     },
-    item.icon && /* @__PURE__ */ React3.createElement("span", null, item.icon),
-    item.label
+    !!item.icon && item.icon,
+    typeof item.label === "string" ? /* @__PURE__ */ React3.createElement(TabItemLabel, null, item.label) : item.label
   ))));
 };
 Tabs.displayName = "Tab";
@@ -3575,6 +3641,7 @@ var DropdownButtonContainer = styled.button`
   box-sizing: border-box;
   transition: all 0.2s ease;
   font-family: 'PingFang SC', sans-serif;
+  width: 100%;
 
   ${({ $size, theme: theme3 }) => {
   const config = theme3.components?.dropdownButton;