@inf-monkeys-tech/monkeys-design 0.4.38 → 0.4.40

package/dist/index.js

@@ -20375,6 +20375,117 @@ registerTheme(
     version: "1.0.0"
   }
 );
+var FEISHU_ICON_URL = "https://p1-hera.feishucdn.com/tos-cn-i-jbbdkfciu3/84a9f036fe2b44f99b899fff4beeb963~tplv-jbbdkfciu3-image:0:0.image";
+var FeishuIcon = ({
+  alt = "feishu",
+  width = 16,
+  height = 16,
+  style,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "img",
+  {
+    src: FEISHU_ICON_URL,
+    alt,
+    width,
+    height,
+    style: { display: "block", ...style },
+    ...props
+  }
+);
+var WeWorkIcon = ({
+  width = 16,
+  height = 16,
+  style,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width,
+    height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: { display: "block", ...style },
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M13.9 5.25c-4.45 0-8.05 2.84-8.05 6.35 0 1.89 1.06 3.6 2.72 4.76l-.45 2.01c-.1.45.38.8.78.57l2.42-1.38c.82.25 1.69.39 2.58.39 4.45 0 8.05-2.84 8.05-6.35s-3.6-6.35-8.05-6.35Z",
+          fill: "#1683FF"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M10.15 3.7c-4.5 0-8.15 2.86-8.15 6.4 0 1.78.94 3.39 2.45 4.55l-.36 1.88c-.08.43.36.75.75.55l2.18-1.15c.7.18 1.44.27 2.2.27 4.5 0 8.15-2.86 8.15-6.4s-3.65-6.1-7.22-6.1Z",
+          fill: "#07C160"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7.2", cy: "9.75", r: "1.05", fill: "#FFFFFF" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11.1", cy: "9.75", r: "1.05", fill: "#FFFFFF" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15.8", cy: "11.9", r: "0.95", fill: "#FFFFFF" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "19", cy: "11.9", r: "0.95", fill: "#FFFFFF" })
+    ]
+  }
+);
+var DingtalkIcon = ({
+  className,
+  width = 16,
+  height = 16,
+  style,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width,
+    height,
+    viewBox: "64 64 896 896",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    style: { display: "block", ...style },
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M573.7 252.5C422.5 197.4 201.3 96.7 201.3 96.7c-15.7-4.1-17.9 11.1-17.9 11.1-5 61.1 33.6 160.5 53.6 182.8 19.9 22.3 319.1 113.7 319.1 113.7S326 357.9 270.5 341.9c-55.6-16-37.9 17.8-37.9 17.8 11.4 61.7 64.9 131.8 107.2 138.4 42.2 6.6 220.1 4 220.1 4s-35.5 4.1-93.2 11.9c-42.7 5.8-97 12.5-111.1 17.8-33.1 12.5 24 62.6 24 62.6 84.7 76.8 129.7 50.5 129.7 50.5 33.3-10.7 61.4-18.5 85.2-24.2L565 743.1h84.6L603 928l205.3-271.9H700.8l22.3-38.7c.3.5.4.8.4.8S799.8 496.1 829 433.8l.6-1h-.1c5-10.8 8.6-19.7 10-25.8 17-71.3-114.5-99.4-265.8-154.5z",
+        fill: "#1683FF"
+      }
+    )
+  }
+);
+var SSOIcon = ({ width = 16, height = 16, style, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width,
+    height,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: { display: "block", ...style },
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M12 2.65 5.35 5.4v5.2c0 4.75 2.85 8.98 6.65 10.75 3.8-1.77 6.65-6 6.65-10.75V5.4L12 2.65Z",
+          fill: "#2563EB"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M12 4.65 7.15 6.62v4.02c0 3.5 2 6.72 4.85 8.28 2.85-1.56 4.85-4.78 4.85-8.28V6.62L12 4.65Z",
+          fill: "#38BDF8"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "10.1", r: "2.15", fill: "#FFFFFF" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 12.25v3.3", stroke: "#FFFFFF", strokeWidth: "1.8", strokeLinecap: "round" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 15.05h2.2", stroke: "#FFFFFF", strokeWidth: "1.8", strokeLinecap: "round" })
+    ]
+  }
+);
 var LOGIN_LOGO_POSITIONS = ["top", "middle", "bottom"];
 var normalizeCssValue = (value) => {
   const trimmed = value?.trim();
@@ -20387,6 +20498,37 @@ var createBackgroundImage = (gradient, imageUrl) => {
 };
 var normalizeLogoPosition = (position) => position && LOGIN_LOGO_POSITIONS.includes(position) ? position : "bottom";
 var normalizeLogoScale = (scale) => typeof scale === "number" && Number.isFinite(scale) && scale > 0 ? scale : void 0;
+var resolveLogoUrls = (logo) => {
+  const url = normalizeCssValue(logo?.url);
+  const lightUrl = normalizeCssValue(logo?.lightUrl) || url;
+  const darkUrl = normalizeCssValue(logo?.darkUrl) || url || lightUrl;
+  return { lightUrl, darkUrl };
+};
+var normalizeProviderType = (value) => normalizeCssValue(value)?.toLowerCase().replace(/^oauth[-_:]/, "").replace(/[\s_]+/g, "-");
+var getDefaultExternalMethodIcon = (method) => {
+  const providerType = normalizeProviderType(method.providerType) ?? normalizeProviderType(method.id);
+  switch (providerType) {
+    case "dingtalk":
+    case "ding-talk":
+    case "dingding":
+      return /* @__PURE__ */ jsxRuntime.jsx(DingtalkIcon, { "aria-hidden": "true" });
+    case "feishu":
+    case "lark":
+      return /* @__PURE__ */ jsxRuntime.jsx(FeishuIcon, { alt: "", "aria-hidden": "true" });
+    case "wework":
+    case "wecom":
+    case "wechat-work":
+    case "wechatwork":
+      return /* @__PURE__ */ jsxRuntime.jsx(WeWorkIcon, { "aria-hidden": "true" });
+    case "oidc":
+    case "sso":
+    case "saml":
+    case "saml-sso":
+      return /* @__PURE__ */ jsxRuntime.jsx(SSOIcon, { "aria-hidden": "true" });
+    default:
+      return null;
+  }
+};
 function LoginPage({
   className,
   style,
@@ -20416,6 +20558,9 @@ function LoginPage({
   const backgroundMode = backgroundImage ? "custom" : "default";
   const logoPosition = normalizeLogoPosition(logo?.position);
   const logoScale = normalizeLogoScale(logo?.scale);
+  const { lightUrl: logoLightUrl, darkUrl: logoDarkUrl } = resolveLogoUrls(logo);
+  const hasLogo = Boolean(logoLightUrl || logoDarkUrl);
+  const usesSeparateModeLogos = Boolean(logoLightUrl && logoDarkUrl && logoLightUrl !== logoDarkUrl);
   React.useEffect(() => {
     if (!availableMethods.length) {
       setInternalMethodId(void 0);
@@ -20440,6 +20585,7 @@ function LoginPage({
     onMethodChange?.(methodId);
   };
   const renderExternalMethod = (method) => {
+    const icon = method.icon === void 0 ? getDefaultExternalMethodIcon(method) : method.icon;
     const button = /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -20450,7 +20596,7 @@ function LoginPage({
         onClick: method.onClick,
         disabled: method.disabled,
         children: [
-          method.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "login-page__oauth-icon", "data-login-part": "external-icon", children: method.icon }) : null,
+          icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "login-page__oauth-icon", "data-login-part": "external-icon", children: icon }) : null,
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: method.label })
         ]
       }
@@ -20478,19 +20624,42 @@ function LoginPage({
           }
         ),
         toolbar ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__toolbar", "data-login-part": "toolbar", children: toolbar }) : null,
-        logo?.url ? /* @__PURE__ */ jsxRuntime.jsx(
+        hasLogo ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: `login-page__logo login-page__logo--${logoPosition}`,
             "data-login-part": "logo",
             "data-logo-position": logoPosition,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
+            children: usesSeparateModeLogos ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  className: "login-page__logo-image login-page__logo-image--light",
+                  "data-login-part": "logo-image",
+                  "data-login-logo-mode": "light",
+                  src: logoLightUrl,
+                  alt: logo?.alt ?? "",
+                  style: logoScale ? { transform: `scale(${logoScale})` } : void 0
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  className: "login-page__logo-image login-page__logo-image--dark",
+                  "data-login-part": "logo-image",
+                  "data-login-logo-mode": "dark",
+                  src: logoDarkUrl,
+                  alt: logo?.alt ?? "",
+                  style: logoScale ? { transform: `scale(${logoScale})` } : void 0
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx(
               "img",
               {
                 className: "login-page__logo-image",
                 "data-login-part": "logo-image",
-                src: logo.url,
-                alt: logo.alt ?? "",
+                src: logoLightUrl || logoDarkUrl,
+                alt: logo?.alt ?? "",
                 style: logoScale ? { transform: `scale(${logoScale})` } : void 0
               }
             )
@@ -20523,7 +20692,7 @@ function LoginPage({
                     onClick: () => handleMethodChange(method.id),
                     children: [
                       method.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "login-page__tab-icon", "data-login-part": "tab-icon", children: method.icon }) : null,
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: method.label })
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "login-page__tab-label", children: method.label })
                     ]
                   },
                   method.id