@officesdk/design 0.1.6 → 0.1.9

package/dist/theme/cjs/index.js

@@ -295,20 +295,6 @@ var typography = {
 
 // src/light/components/button.ts
 var button = {
-  icons: {
-    close: {
-      url: "",
-      size: { width: "16px", height: "16px" }
-    },
-    clear: {
-      url: "",
-      size: { width: "16px", height: "16px" }
-    },
-    search: {
-      url: "",
-      size: { width: "16px", height: "16px" }
-    }
-  },
   solid: {
     default: {
       background: `linear-gradient(0deg, ${colors.palettes.gray["120"]} 0%, ${colors.palettes.gray["90"]} 100%)`,
@@ -506,40 +492,72 @@ var button = {
     }
   },
   small: {
-    height: "28px",
-    padding: "4px 12px",
-    fontSize: "13px",
-    lineHeight: "20px",
-    borderRadius: "4px",
-    iconSize: { width: "14px", height: "14px" },
-    iconGap: "4px"
+    withIcon: {
+      height: "24px",
+      padding: "0px 10px",
+      textPadding: "0 2px",
+      fontSize: "12px",
+      lineHeight: "20px",
+      borderRadius: borderRadius.small,
+      iconSize: { width: "16px", height: "16px" },
+      iconGap: "4px"
+    },
+    onlyIcon: {
+      iconSize: { width: "12px", height: "12px" },
+      padding: "6px",
+      borderRadius: borderRadius.small
+    }
   },
   medium: {
-    height: "32px",
-    padding: "6px 16px",
-    fontSize: "14px",
-    lineHeight: "20px",
-    borderRadius: "4px",
-    iconSize: { width: "16px", height: "16px" },
-    iconGap: "6px"
+    withIcon: {
+      height: "28px",
+      padding: "2px 14px",
+      textPadding: "0 2px",
+      fontSize: "13px",
+      lineHeight: "20px",
+      borderRadius: borderRadius.small,
+      iconSize: { width: "16px", height: "16px" },
+      iconGap: "4px"
+    },
+    onlyIcon: {
+      iconSize: { width: "14px", height: "14px" },
+      padding: "7px",
+      borderRadius: borderRadius.small
+    }
   },
   large: {
-    height: "36px",
-    padding: "8px 20px",
-    fontSize: "14px",
-    lineHeight: "20px",
-    borderRadius: "4px",
-    iconSize: { width: "16px", height: "16px" },
-    iconGap: "6px"
+    withIcon: {
+      height: "32px",
+      padding: "0 18px",
+      textPadding: "0 6px",
+      fontSize: "13px",
+      lineHeight: "20px",
+      borderRadius: borderRadius.small,
+      iconSize: { width: "18px", height: "18px" },
+      iconGap: "4px"
+    },
+    onlyIcon: {
+      iconSize: { width: "16px", height: "16px" },
+      padding: "8px",
+      borderRadius: borderRadius.small
+    }
   },
   extraLarge: {
-    height: "40px",
-    padding: "10px 24px",
-    fontSize: "14px",
-    lineHeight: "20px",
-    borderRadius: "4px",
-    iconSize: { width: "16px", height: "16px" },
-    iconGap: "8px"
+    withIcon: {
+      height: "40px",
+      padding: "0px 26px",
+      textPadding: "0px 6px",
+      fontSize: "14px",
+      lineHeight: "24px",
+      borderRadius: borderRadius.small,
+      iconSize: { width: "16px", height: "16px" },
+      iconGap: "4px"
+    },
+    onlyIcon: {
+      iconSize: { width: "20px", height: "20px" },
+      padding: "10px",
+      borderRadius: borderRadius.small
+    }
   }
 };
 
@@ -549,18 +567,16 @@ var toast = {
   borderRadius: "8px",
   fontSize: "14px",
   fontWeight: 500,
+  offset: {
+    vertical: "24px",
+    horizontal: "24px"
+  },
   success: {
     background: colors.palettes.green["1"],
     borderColor: colors.palettes.green["2"],
     icon: {
       url: "",
       size: { width: "20px", height: "20px" }
-    },
-    button: {
-      fontSize: "14px",
-      fontWeight: 500,
-      color: colors.palettes.green["6"],
-      gap: "8px"
     }
   },
   info: {
@@ -569,12 +585,6 @@ var toast = {
     icon: {
       url: "",
       size: { width: "20px", height: "20px" }
-    },
-    button: {
-      fontSize: "14px",
-      fontWeight: 500,
-      color: colors.palettes.blue["6"],
-      gap: "8px"
     }
   },
   error: {
@@ -583,12 +593,6 @@ var toast = {
     icon: {
       url: "",
       size: { width: "20px", height: "20px" }
-    },
-    button: {
-      fontSize: "14px",
-      fontWeight: 500,
-      color: colors.palettes.red["6"],
-      gap: "8px"
     }
   },
   warn: {
@@ -597,28 +601,12 @@ var toast = {
     icon: {
       url: "",
       size: { width: "20px", height: "20px" }
-    },
-    button: {
-      fontSize: "14px",
-      fontWeight: 500,
-      color: colors.palettes.yellow["7"],
-      gap: "8px"
     }
   }
 };
 
 // src/light/components/input.ts
 var input = {
-  icons: {
-    search: {
-      url: "",
-      size: { width: "16px", height: "16px" }
-    },
-    clear: {
-      url: "",
-      size: { width: "16px", height: "16px" }
-    }
-  },
   outlined: {
     state: {
       borderColor: colors.palettes.transparency["10"],
@@ -631,13 +619,22 @@ var input = {
       backgroundHover: colors.palettes.gray["0"],
       backgroundActive: colors.palettes.gray["0"],
       backgroundDisabled: colors.palettes.gray["5"],
-      backgroundReadonly: colors.palettes.gray["2"]
+      backgroundReadonly: colors.palettes.gray["2"],
+      placeholderColorNormal: colors.palettes.transparency["30"],
+      placeholderColorHover: colors.palettes.transparency["30"],
+      textColorNormal: colors.palettes.gray["120"],
+      textColorDisabled: colors.palettes.transparency["30"]
     },
     mini: {
+      height: "20px",
       borderRadius: "4px",
+      padding: "0px 4px",
+      contentPadding: "0px 0",
+      gap: "4px",
       iconSize: { width: "12px", height: "12px" },
-      padding: "2px 4px",
-      height: "20px",
+      clearIcon: {
+        size: { width: "12px", height: "12px" }
+      },
       fontSize: "12px",
       lineHeight: "20px",
       boxShadow: "none",
@@ -646,10 +643,15 @@ var input = {
       boxShadowDisabled: "none"
     },
     small: {
+      height: "24px",
       borderRadius: "4px",
+      padding: "0px 4px",
+      contentPadding: "2px 4px",
+      gap: "4px",
       iconSize: { width: "14px", height: "14px" },
-      padding: "2px 4px",
-      height: "24px",
+      clearIcon: {
+        size: { width: "14px", height: "14px" }
+      },
       fontSize: "12px",
       lineHeight: "20px",
       boxShadow: "none",
@@ -658,22 +660,15 @@ var input = {
       boxShadowDisabled: "none"
     },
     medium: {
-      borderRadius: "4px",
-      iconSize: { width: "18px", height: "18px" },
-      padding: "4px 8px",
       height: "32px",
-      fontSize: "13px",
-      lineHeight: "20px",
-      boxShadow: "none",
-      boxShadowHover: "none",
-      boxShadowActive: "0 2px 8px 0 rgba(0, 0, 0, 0.04)",
-      boxShadowDisabled: "none"
-    },
-    large: {
       borderRadius: "4px",
+      padding: "2px 8px",
+      contentPadding: "4px",
+      gap: "4px",
       iconSize: { width: "18px", height: "18px" },
-      padding: "4px 8px",
-      height: "32px",
+      clearIcon: {
+        size: { width: "18px", height: "18px" }
+      },
       fontSize: "13px",
       lineHeight: "20px",
       boxShadow: "none",
@@ -681,11 +676,16 @@ var input = {
       boxShadowActive: "0 2px 8px 0 rgba(0, 0, 0, 0.04)",
       boxShadowDisabled: "none"
     },
-    extraLarge: {
+    large: {
+      height: "40px",
       borderRadius: "4px",
+      padding: "4px 4px 4px 12px",
+      contentPadding: "4px 8px",
+      gap: "4px",
       iconSize: { width: "20px", height: "20px" },
-      padding: "6px 12px",
-      height: "40px",
+      clearIcon: {
+        size: { width: "20px", height: "20px" }
+      },
       fontSize: "14px",
       lineHeight: "24px",
       boxShadow: "none",
@@ -696,73 +696,85 @@ var input = {
   },
   underlined: {
     state: {
-      borderColor: colors.palettes.transparency["10"],
+      borderColor: "transparent",
       borderColorHover: colors.palettes.transparency["20"],
       borderColorActive: colors.palettes.transparency["30"],
-      borderColorDisabled: colors.palettes.transparency["10"],
+      borderColorDisabled: "transparent",
       borderColorError: colors.palettes.red["6"],
-      borderColorReadonly: colors.palettes.transparency["10"],
+      borderColorReadonly: "transparent",
       background: "transparent",
       backgroundHover: "transparent",
       backgroundActive: "transparent",
       backgroundDisabled: "transparent",
-      backgroundReadonly: "transparent"
+      backgroundReadonly: "transparent",
+      placeholderColorNormal: colors.palettes.transparency["30"],
+      placeholderColorHover: colors.palettes.transparency["30"],
+      textColorNormal: colors.palettes.gray["120"],
+      textColorDisabled: colors.palettes.transparency["30"]
     },
     mini: {
-      borderRadius: "0",
-      iconSize: { width: "12px", height: "12px" },
-      padding: "2px 0",
-      height: "20px",
+      height: "24px",
+      padding: "0 4px",
+      contentPadding: "4px 0 4px 4px",
+      gap: "4px",
       fontSize: "12px",
       lineHeight: "20px",
+      iconSize: { width: "16px", height: "16px" },
+      clearIcon: {
+        size: { width: "16px", height: "16px" }
+      },
+      borderRadius: "4px",
       boxShadow: "none",
       boxShadowHover: "none",
       boxShadowActive: "none",
       boxShadowDisabled: "none"
     },
     small: {
-      borderRadius: "0",
-      iconSize: { width: "14px", height: "14px" },
-      padding: "2px 0",
       height: "24px",
+      padding: "0 4px",
+      contentPadding: "4px 0 4px 4px",
+      gap: "4px",
       fontSize: "12px",
       lineHeight: "20px",
+      iconSize: { width: "16px", height: "16px" },
+      clearIcon: {
+        size: { width: "16px", height: "16px" }
+      },
+      borderRadius: "4px",
       boxShadow: "none",
       boxShadowHover: "none",
       boxShadowActive: "none",
       boxShadowDisabled: "none"
     },
     medium: {
-      borderRadius: "0",
-      iconSize: { width: "18px", height: "18px" },
-      padding: "4px 0",
       height: "32px",
+      padding: "0 8px",
+      contentPadding: "6px 0 6px 4px",
+      gap: "4px",
       fontSize: "13px",
       lineHeight: "20px",
-      boxShadow: "none",
-      boxShadowHover: "none",
-      boxShadowActive: "none",
-      boxShadowDisabled: "none"
-    },
-    large: {
-      borderRadius: "0",
       iconSize: { width: "18px", height: "18px" },
-      padding: "4px 0",
-      height: "32px",
-      fontSize: "13px",
-      lineHeight: "20px",
+      clearIcon: {
+        size: { width: "16px", height: "16px" }
+      },
+      borderRadius: "4px",
       boxShadow: "none",
       boxShadowHover: "none",
       boxShadowActive: "none",
       boxShadowDisabled: "none"
     },
-    extraLarge: {
-      borderRadius: "0",
-      iconSize: { width: "20px", height: "20px" },
-      padding: "6px 0",
+    large: {
       height: "40px",
+      padding: "10px 12px",
+      contentPadding: "0 0 0 4px",
+      gap: "4px",
       fontSize: "14px",
       lineHeight: "24px",
+      iconSize: { width: "20px", height: "20px" },
+      clearIcon: {
+        size: { width: "16px", height: "16px" }
+      },
+      borderRadius: "4px",
       boxShadow: "none",
       boxShadowHover: "none",
       boxShadowActive: "none",
@@ -771,6 +783,14 @@ var input = {
   }
 };
 
+// src/light/components/inputSearch.ts
+var inputSearch = {
+  searchIcon: {
+    url: ""
+    // Empty means use default icon
+  }
+};
+
 // src/light/components/radio.ts
 var radio = {
   unchecked: {
@@ -945,100 +965,6 @@ var switchComponent = {
   }
 };
 
-// src/light/components/dropdown.ts
-var dropdown = {
-  icons: {
-    arrow: {
-      url: "",
-      size: { width: "12px", height: "12px" },
-      expandedRotateAngel: "180deg"
-    },
-    check: {
-      url: "",
-      size: { width: "14px", height: "14px" }
-    }
-  },
-  button: {
-    trigger: {
-      borderColor: colors.palettes.transparency["20"],
-      borderColorHover: colors.palettes.transparency["30"],
-      borderColorActive: colors.palettes.transparency["30"],
-      borderColorDisabled: colors.palettes.transparency["10"],
-      background: colors.palettes.gray["0"],
-      backgroundHover: colors.palettes.gray["0"],
-      backgroundActive: colors.palettes.gray["0"],
-      backgroundDisabled: colors.palettes.gray["5"],
-      color: colors.palettes.brand,
-      colorDisabled: colors.palettes.transparency["30"],
-      boxShadow: "none",
-      boxShadowHover: "none",
-      boxShadowActive: "0 2px 8px 0 rgba(0, 0, 0, 0.04)",
-      boxShadowDisabled: "none"
-    },
-    menu: {
-      background: colors.palettes.gray["0"],
-      borderColor: colors.palettes.transparency["10"],
-      borderRadius: "8px",
-      padding: "4px",
-      boxShadow: "0 8px 18px 0 rgba(0, 0, 0, 0.06)",
-      maxHeight: "280px"
-    },
-    menuItem: {
-      background: "transparent",
-      backgroundHover: colors.palettes.transparency["5"],
-      backgroundDisabled: "transparent",
-      backgroundSelected: colors.palettes.transparency["8"],
-      color: colors.palettes.brand,
-      colorDisabled: colors.palettes.transparency["30"],
-      padding: "8px 12px"
-    }
-  },
-  input: {
-    trigger: {
-      borderColor: colors.palettes.transparency["10"],
-      borderColorHover: colors.palettes.transparency["20"],
-      borderColorActive: colors.palettes.transparency["30"],
-      borderColorDisabled: colors.palettes.transparency["10"],
-      background: colors.palettes.gray["0"],
-      backgroundHover: colors.palettes.gray["0"],
-      backgroundActive: colors.palettes.gray["0"],
-      backgroundDisabled: colors.palettes.gray["5"],
-      color: colors.palettes.brand,
-      colorDisabled: colors.palettes.transparency["30"],
-      boxShadow: "none",
-      boxShadowHover: "none",
-      boxShadowActive: "0 2px 8px 0 rgba(0, 0, 0, 0.04)",
-      boxShadowDisabled: "none"
-    },
-    menu: {
-      background: colors.palettes.gray["0"],
-      borderColor: colors.palettes.transparency["10"],
-      borderRadius: "8px",
-      padding: "4px",
-      boxShadow: "0 8px 18px 0 rgba(0, 0, 0, 0.06)",
-      maxHeight: "280px"
-    },
-    menuItem: {
-      background: "transparent",
-      backgroundHover: colors.palettes.transparency["5"],
-      backgroundDisabled: "transparent",
-      backgroundSelected: colors.palettes.transparency["8"],
-      color: colors.palettes.brand,
-      colorDisabled: colors.palettes.transparency["30"],
-      padding: "8px 12px"
-    }
-  },
-  large: {
-    height: "36px",
-    padding: "8px 12px",
-    fontSize: "14px",
-    lineHeight: "20px",
-    borderRadius: "4px",
-    fontWeight: 400,
-    iconSize: { width: "16px", height: "16px" }
-  }
-};
-
 // src/light/components/tab.ts
 var tab = {
   line: {
@@ -1283,10 +1209,185 @@ var toolbarButton = {
   }
 };
 
+// src/light/components/menu.ts
+var menu = {
+  // Menu item configuration
+  menuItem: {
+    // Background states
+    background: {
+      normal: "transparent",
+      hover: colors.palettes.transparency["5"],
+      active: colors.palettes.transparency["10"],
+      disabled: "transparent"
+    },
+    // Layout
+    layout: {
+      padding: "6px 12px",
+      gap: "8px"
+    },
+    // Icon configuration
+    icon: {
+      size: { width: "18px", height: "18px" }
+    },
+    // Label configuration
+    label: {
+      color: {
+        normal: colors.palettes.gray["100"],
+        hover: colors.palettes.gray["100"],
+        active: colors.palettes.gray["100"],
+        disabled: colors.palettes.transparency["30"]
+      }
+    },
+    // Description configuration
+    description: {
+      color: {
+        normal: colors.palettes.transparency["60"],
+        hover: colors.palettes.transparency["60"],
+        active: colors.palettes.transparency["60"],
+        disabled: colors.palettes.transparency["30"]
+      }
+    },
+    // Active/selected icon (checkmark)
+    activeIcon: {
+      url: ""
+      // Use default checkmark
+    },
+    // Next level icon (arrow for submenu)
+    nextLevelIcon: {
+      url: ""
+      // Use default arrow
+    },
+    // Size configurations
+    size: {
+      // Medium size (S - 28px)
+      medium: {
+        label: {
+          fontSize: "12px",
+          maxWidth: "200px"
+        },
+        description: {
+          fontSize: "10px",
+          maxWidth: "150px"
+        },
+        activeIcon: {
+          size: { width: "16px", height: "16px" }
+        },
+        nextLevelIcon: {
+          size: { width: "16px", height: "16px" }
+        }
+      },
+      // Large size (M - 36px)
+      large: {
+        label: {
+          fontSize: "13px",
+          maxWidth: "250px"
+        },
+        description: {
+          fontSize: "10px",
+          maxWidth: "180px"
+        },
+        activeIcon: {
+          size: { width: "18px", height: "18px" }
+        },
+        nextLevelIcon: {
+          size: { width: "18px", height: "18px" }
+        }
+      }
+    }
+  },
+  // Border configuration
+  border: {
+    color: colors.palettes.transparency["10"],
+    width: "1px",
+    radius: borderRadius.medium
+  },
+  // Divider configuration
+  divider: {
+    background: colors.palettes.transparency["10"],
+    height: "1px",
+    margin: "4px 0"
+  },
+  // Group title configuration
+  groupTitle: {
+    fontSize: "12px",
+    fontWeight: "500",
+    color: colors.palettes.transparency["60"]
+  }
+};
+
+// src/light/components/dropdown.ts
+var dropdown = {
+  borderRadius: borderRadius.medium,
+  border: `1px solid ${colors.palettes.transparency["10"]}`,
+  background: colors.palettes.gray["0"],
+  boxShadow: boxShadow.large,
+  padding: "4px 0"
+};
+var dropdownButton = {
+  // Color states
+  color: {
+    normal: colors.palettes.gray["100"],
+    hover: colors.palettes.gray["100"],
+    active: colors.palettes.gray["100"],
+    disabled: colors.palettes.transparency["30"]
+  },
+  // Background states
+  background: {
+    normal: colors.palettes.gray["0"],
+    hover: colors.palettes.gray["0"],
+    active: colors.palettes.gray["0"],
+    disabled: colors.palettes.gray["5"]
+  },
+  // Icon configuration
+  icon: {
+    size: { width: "18px", height: "18px" },
+    opacity: {
+      normal: "1",
+      hover: "1",
+      active: "1",
+      disabled: "0.3"
+    }
+  },
+  // Indicator (arrow) configuration
+  indicator: {
+    url: "",
+    // Use default arrow
+    size: { width: "18px", height: "18px" },
+    rotate: "90deg",
+    // Arrow points right by default, rotate to point down
+    opacity: {
+      normal: "1",
+      hover: "1",
+      active: "1",
+      disabled: "0.3"
+    }
+  },
+  // Size configurations
+  size: {
+    large: {
+      padding: "10px 16px",
+      fontSize: "13px",
+      height: "40px",
+      gap: "8px",
+      iconSize: { width: "18px", height: "18px" },
+      indicatorSize: { width: "18px", height: "18px" }
+    },
+    medium: {
+      padding: "4px 8px",
+      fontSize: "13px",
+      height: "28px",
+      gap: "8px",
+      iconSize: { width: "18px", height: "18px" },
+      indicatorSize: { width: "18px", height: "18px" }
+    }
+  }
+};
+
 // src/light/components/index.ts
 var components = {
   toast,
   input,
+  inputSearch,
   radio,
   checkbox,
   switch: switchComponent,
@@ -1296,7 +1397,9 @@ var components = {
   slider,
   inputNumber,
   tooltip,
-  toolbarButton
+  toolbarButton,
+  menu,
+  dropdownButton
 };
 
 // src/light/index.ts