@inf-monkeys-tech/monkeys-design 0.4.42 → 0.4.44

package/dist/components/login/index.d.mts

@@ -83,6 +83,16 @@ interface LoginPageCalloutConfig {
         onClick: () => void;
     };
 }
+interface LoginPageExternalPanelConfig {
+    title?: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    content: React__default.ReactNode;
+    footer?: React__default.ReactNode;
+    backAction?: {
+        label: React__default.ReactNode;
+        onClick: () => void;
+    };
+}
 interface LoginPageProps {
     className?: string;
     style?: React__default.CSSProperties;
@@ -104,96 +114,10 @@ interface LoginPageProps {
     onMethodChange?: (methodId: string) => void;
     externalLabel?: React__default.ReactNode;
     externalMethods?: LoginPageExternalMethodConfig[];
+    externalPanel?: LoginPageExternalPanelConfig;
     callout?: LoginPageCalloutConfig;
 }
-interface LoginLayoutProps {
-    className?: string;
-    style?: React__default.CSSProperties;
-    children?: React__default.ReactNode;
-    /** Logo element or image URL */
-    logo?: React__default.ReactNode | string;
-    /** Title text */
-    title?: string;
-    /** Subtitle text */
-    subtitle?: string;
-    /** Footer text */
-    footer?: string;
-}
-interface EmailAuthProps {
-    className?: string;
-    /** Controlled email value */
-    email: string;
-    onEmailChange: (value: string) => void;
-    /** Controlled password value */
-    password: string;
-    onPasswordChange: (value: string) => void;
-    /** Submit handler */
-    onSubmit: () => void;
-    /** Loading state */
-    isLoading?: boolean;
-    /** Disable the form */
-    disabled?: boolean;
-    /** Labels */
-    emailLabel?: string;
-    emailPlaceholder?: string;
-    passwordLabel?: string;
-    passwordPlaceholder?: string;
-    submitText?: string;
-    loadingText?: string;
-    /** Error message to display */
-    error?: string;
-}
-interface OIDCButtonProps {
-    className?: string;
-    /** Button label */
-    label?: string;
-    /** Click handler - should redirect to OIDC login URL */
-    onClick: () => void;
-    /** Optional icon */
-    icon?: React__default.ReactNode;
-}
-interface OAuthButtonProps {
-    className?: string;
-    /** Provider name for display */
-    providerName: string;
-    /** Provider type identifier */
-    providerType: 'feishu' | 'dingtalk' | 'wework' | string;
-    /** Click handler */
-    onClick: () => void;
-    /** Optional icon */
-    icon?: React__default.ReactNode;
-}
-interface AuthDividerProps {
-    className?: string;
-    /** Text to show in the divider */
-    text?: string;
-}
-interface PendingApprovalProps {
-    className?: string;
-    /** Icon to display */
-    icon?: React__default.ReactNode;
-    /** Title text */
-    title?: string;
-    /** Description text */
-    description?: string;
-    /** Back button text */
-    backText?: string;
-    /** Back button handler */
-    onBack?: () => void;
-}
-
-declare function LoginPage({ className, style, background, logo, primaryColor, radius, customCss, toolbar, title, backAction, methods, activeMethodId, defaultMethodId, onMethodChange, externalLabel, externalMethods, callout, }: LoginPageProps): react_jsx_runtime.JSX.Element;
-
-declare const LoginLayout: React__default.FC<LoginLayoutProps>;
-
-declare const EmailAuth: React__default.ForwardRefExoticComponent<EmailAuthProps & React__default.RefAttributes<HTMLFormElement>>;
-
-declare const OIDCButton: React__default.ForwardRefExoticComponent<OIDCButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
-
-declare const OAuthButton: React__default.ForwardRefExoticComponent<OAuthButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
-
-declare const AuthDivider: React__default.FC<AuthDividerProps>;
 
-declare const PendingApproval: React__default.FC<PendingApprovalProps>;
+declare function LoginPage({ className, style, background, logo, primaryColor, radius, customCss, toolbar, title, backAction, methods, activeMethodId, defaultMethodId, onMethodChange, externalLabel, externalMethods, externalPanel, callout, }: LoginPageProps): react_jsx_runtime.JSX.Element;
 
-export { AuthDivider, type AuthDividerProps, EmailAuth, type EmailAuthProps, LoginLayout, type LoginLayoutProps, LoginPage, type LoginPageBackgroundConfig, type LoginPageCalloutConfig, type LoginPageCheckboxConfig, type LoginPageExternalMethodConfig, type LoginPageFieldConfig, type LoginPageLogoConfig, type LoginPageLogoLocation, type LoginPageMethodConfig, type LoginPageProps, OAuthButton, type OAuthButtonProps, OIDCButton, type OIDCButtonProps, PendingApproval, type PendingApprovalProps };
+export { LoginPage, type LoginPageBackgroundConfig, type LoginPageCalloutConfig, type LoginPageCheckboxConfig, type LoginPageExternalMethodConfig, type LoginPageExternalPanelConfig, type LoginPageFieldConfig, type LoginPageLogoConfig, type LoginPageLogoLocation, type LoginPageMethodConfig, type LoginPageProps };

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

@@ -83,6 +83,16 @@ interface LoginPageCalloutConfig {
         onClick: () => void;
     };
 }
+interface LoginPageExternalPanelConfig {
+    title?: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    content: React__default.ReactNode;
+    footer?: React__default.ReactNode;
+    backAction?: {
+        label: React__default.ReactNode;
+        onClick: () => void;
+    };
+}
 interface LoginPageProps {
     className?: string;
     style?: React__default.CSSProperties;
@@ -104,96 +114,10 @@ interface LoginPageProps {
     onMethodChange?: (methodId: string) => void;
     externalLabel?: React__default.ReactNode;
     externalMethods?: LoginPageExternalMethodConfig[];
+    externalPanel?: LoginPageExternalPanelConfig;
     callout?: LoginPageCalloutConfig;
 }
-interface LoginLayoutProps {
-    className?: string;
-    style?: React__default.CSSProperties;
-    children?: React__default.ReactNode;
-    /** Logo element or image URL */
-    logo?: React__default.ReactNode | string;
-    /** Title text */
-    title?: string;
-    /** Subtitle text */
-    subtitle?: string;
-    /** Footer text */
-    footer?: string;
-}
-interface EmailAuthProps {
-    className?: string;
-    /** Controlled email value */
-    email: string;
-    onEmailChange: (value: string) => void;
-    /** Controlled password value */
-    password: string;
-    onPasswordChange: (value: string) => void;
-    /** Submit handler */
-    onSubmit: () => void;
-    /** Loading state */
-    isLoading?: boolean;
-    /** Disable the form */
-    disabled?: boolean;
-    /** Labels */
-    emailLabel?: string;
-    emailPlaceholder?: string;
-    passwordLabel?: string;
-    passwordPlaceholder?: string;
-    submitText?: string;
-    loadingText?: string;
-    /** Error message to display */
-    error?: string;
-}
-interface OIDCButtonProps {
-    className?: string;
-    /** Button label */
-    label?: string;
-    /** Click handler - should redirect to OIDC login URL */
-    onClick: () => void;
-    /** Optional icon */
-    icon?: React__default.ReactNode;
-}
-interface OAuthButtonProps {
-    className?: string;
-    /** Provider name for display */
-    providerName: string;
-    /** Provider type identifier */
-    providerType: 'feishu' | 'dingtalk' | 'wework' | string;
-    /** Click handler */
-    onClick: () => void;
-    /** Optional icon */
-    icon?: React__default.ReactNode;
-}
-interface AuthDividerProps {
-    className?: string;
-    /** Text to show in the divider */
-    text?: string;
-}
-interface PendingApprovalProps {
-    className?: string;
-    /** Icon to display */
-    icon?: React__default.ReactNode;
-    /** Title text */
-    title?: string;
-    /** Description text */
-    description?: string;
-    /** Back button text */
-    backText?: string;
-    /** Back button handler */
-    onBack?: () => void;
-}
-
-declare function LoginPage({ className, style, background, logo, primaryColor, radius, customCss, toolbar, title, backAction, methods, activeMethodId, defaultMethodId, onMethodChange, externalLabel, externalMethods, callout, }: LoginPageProps): react_jsx_runtime.JSX.Element;
-
-declare const LoginLayout: React__default.FC<LoginLayoutProps>;
-
-declare const EmailAuth: React__default.ForwardRefExoticComponent<EmailAuthProps & React__default.RefAttributes<HTMLFormElement>>;
-
-declare const OIDCButton: React__default.ForwardRefExoticComponent<OIDCButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
-
-declare const OAuthButton: React__default.ForwardRefExoticComponent<OAuthButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
-
-declare const AuthDivider: React__default.FC<AuthDividerProps>;
 
-declare const PendingApproval: React__default.FC<PendingApprovalProps>;
+declare function LoginPage({ className, style, background, logo, primaryColor, radius, customCss, toolbar, title, backAction, methods, activeMethodId, defaultMethodId, onMethodChange, externalLabel, externalMethods, externalPanel, callout, }: LoginPageProps): react_jsx_runtime.JSX.Element;
 
-export { AuthDivider, type AuthDividerProps, EmailAuth, type EmailAuthProps, LoginLayout, type LoginLayoutProps, LoginPage, type LoginPageBackgroundConfig, type LoginPageCalloutConfig, type LoginPageCheckboxConfig, type LoginPageExternalMethodConfig, type LoginPageFieldConfig, type LoginPageLogoConfig, type LoginPageLogoLocation, type LoginPageMethodConfig, type LoginPageProps, OAuthButton, type OAuthButtonProps, OIDCButton, type OIDCButtonProps, PendingApproval, type PendingApprovalProps };
+export { LoginPage, type LoginPageBackgroundConfig, type LoginPageCalloutConfig, type LoginPageCheckboxConfig, type LoginPageExternalMethodConfig, type LoginPageExternalPanelConfig, type LoginPageFieldConfig, type LoginPageLogoConfig, type LoginPageLogoLocation, type LoginPageMethodConfig, type LoginPageProps };

package/dist/components/login/index.js

@@ -179,6 +179,7 @@ function LoginPage({
   onMethodChange,
   externalLabel,
   externalMethods = [],
+  externalPanel,
   callout
 }) {
   const availableMethods = React.useMemo(() => methods.filter((method) => !method.hidden), [methods]);
@@ -331,7 +332,24 @@ function LoginPage({
                   method.id
                 );
               }) }) : null,
-              activeMethod ? /* @__PURE__ */ jsxRuntime.jsxs(
+              externalPanel ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "login-page__external-panel", "data-login-part": "external-panel", children: [
+                externalPanel.title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__external-panel-title", "data-login-part": "external-panel-title", children: externalPanel.title }) : null,
+                externalPanel.description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "login-page__external-panel-description", "data-login-part": "external-panel-description", children: externalPanel.description }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__external-panel-content", "data-login-part": "external-panel-content", children: externalPanel.content }),
+                externalPanel.footer || externalPanel.backAction ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "login-page__external-panel-footer", "data-login-part": "external-panel-footer", children: [
+                  externalPanel.footer,
+                  externalPanel.backAction ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "login-page__external-panel-back",
+                      "data-login-part": "external-panel-back",
+                      onClick: externalPanel.backAction.onClick,
+                      children: externalPanel.backAction.label
+                    }
+                  ) : null
+                ] }) : null
+              ] }) : activeMethod ? /* @__PURE__ */ jsxRuntime.jsxs(
                 "form",
                 {
                   className: "login-page__form-fields",
@@ -425,7 +443,7 @@ function LoginPage({
                   ]
                 }
               ) : null,
-              externalMethods.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "login-page__oauth-section", "data-login-part": "external-methods", children: [
+              !externalPanel && externalMethods.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "login-page__oauth-section", "data-login-part": "external-methods", children: [
                 externalLabel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__oauth-label", "data-login-part": "external-label", children: externalLabel }) : null,
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__oauth-list", "data-login-part": "external-list", children: externalMethods.map(renderExternalMethod) })
               ] }) : null
@@ -436,309 +454,7 @@ function LoginPage({
     }
   );
 }
-var containerStyle = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  minHeight: "100vh",
-  padding: "1rem"
-};
-var cardStyle = {
-  width: "100%",
-  maxWidth: "400px"
-};
-var logoContainerStyle = {
-  display: "flex",
-  justifyContent: "center",
-  marginBottom: "1.5rem"
-};
-var logoImageStyle = {
-  height: "48px",
-  width: "auto"
-};
-var titleStyle = {
-  fontSize: "1.5rem",
-  fontWeight: 700,
-  textAlign: "center",
-  marginBottom: "0.5rem",
-  lineHeight: 1.2
-};
-var subtitleStyle = {
-  fontSize: "0.875rem",
-  textAlign: "center",
-  marginBottom: "1.5rem",
-  opacity: 0.6
-};
-var footerStyle = {
-  fontSize: "0.75rem",
-  textAlign: "center",
-  marginTop: "2rem",
-  opacity: 0.4
-};
-var LoginLayout = ({
-  className,
-  style,
-  children,
-  logo,
-  title,
-  subtitle,
-  footer
-}) => {
-  const renderLogo = () => {
-    if (!logo) return null;
-    if (typeof logo === "string") {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { style: logoContainerStyle, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: title || "Logo", style: logoImageStyle }) });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: logoContainerStyle, children: logo });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...containerStyle, ...style }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardStyle, children: [
-    renderLogo(),
-    title && /* @__PURE__ */ jsxRuntime.jsx("h1", { style: titleStyle, children: title }),
-    subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle, children: subtitle }),
-    children,
-    footer && /* @__PURE__ */ jsxRuntime.jsx("p", { style: footerStyle, children: footer })
-  ] }) });
-};
-var formStyle = {
-  display: "flex",
-  flexDirection: "column",
-  gap: "1rem"
-};
-var labelStyle = {
-  display: "block",
-  fontSize: "0.875rem",
-  fontWeight: 500,
-  marginBottom: "0.375rem"
-};
-var inputStyle = {
-  display: "block",
-  width: "100%",
-  padding: "0.5rem 0.75rem",
-  fontSize: "0.875rem",
-  lineHeight: 1.5,
-  backgroundColor: "transparent",
-  border: "1px solid #d1d5db",
-  borderRadius: "0.375rem",
-  outline: "none",
-  boxSizing: "border-box"
-};
-var buttonStyle = {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "100%",
-  padding: "0.625rem 1rem",
-  fontSize: "0.875rem",
-  fontWeight: 500,
-  color: "#ffffff",
-  backgroundColor: "#111827",
-  border: "none",
-  borderRadius: "0.375rem",
-  cursor: "pointer",
-  lineHeight: 1.5
-};
-var buttonDisabledStyle = {
-  ...buttonStyle,
-  opacity: 0.6,
-  cursor: "not-allowed"
-};
-var errorStyle = {
-  fontSize: "0.875rem",
-  color: "#dc2626",
-  marginTop: "-0.25rem"
-};
-var EmailAuth = React__default.default.forwardRef(
-  ({
-    className,
-    email,
-    onEmailChange,
-    password,
-    onPasswordChange,
-    onSubmit,
-    isLoading = false,
-    disabled = false,
-    emailLabel = "Email",
-    emailPlaceholder = "Enter your email",
-    passwordLabel = "Password",
-    passwordPlaceholder = "Enter your password",
-    submitText = "Sign In",
-    loadingText = "Signing in...",
-    error
-  }, ref) => {
-    const handleSubmit = React.useCallback(
-      (e) => {
-        e.preventDefault();
-        if (!isLoading && !disabled) {
-          onSubmit();
-        }
-      },
-      [onSubmit, isLoading, disabled]
-    );
-    const isDisabled = isLoading || disabled;
-    return /* @__PURE__ */ jsxRuntime.jsxs("form", { ref, className, style: formStyle, onSubmit: handleSubmit, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: emailLabel }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "email",
-            value: email,
-            onChange: (e) => onEmailChange(e.target.value),
-            placeholder: emailPlaceholder,
-            disabled: isDisabled,
-            required: true,
-            autoComplete: "email",
-            style: inputStyle
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle, children: passwordLabel }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "password",
-            value: password,
-            onChange: (e) => onPasswordChange(e.target.value),
-            placeholder: passwordPlaceholder,
-            disabled: isDisabled,
-            required: true,
-            autoComplete: "current-password",
-            style: inputStyle
-          }
-        )
-      ] }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: errorStyle, children: error }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", disabled: isDisabled, style: isDisabled ? buttonDisabledStyle : buttonStyle, children: isLoading ? loadingText : submitText })
-    ] });
-  }
-);
-EmailAuth.displayName = "EmailAuth";
-var buttonStyle2 = {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  gap: "0.5rem",
-  width: "100%",
-  padding: "0.625rem 1rem",
-  fontSize: "0.875rem",
-  fontWeight: 500,
-  backgroundColor: "transparent",
-  border: "1px solid #d1d5db",
-  borderRadius: "0.375rem",
-  cursor: "pointer",
-  lineHeight: 1.5
-};
-var OIDCButton = React__default.default.forwardRef(
-  ({ className, label = "Sign in with SSO", onClick, icon }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs("button", { ref, type: "button", className, style: buttonStyle2, onClick, children: [
-      icon && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", alignItems: "center" }, children: icon }),
-      label
-    ] });
-  }
-);
-OIDCButton.displayName = "OIDCButton";
-var buttonStyle3 = {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  gap: "0.5rem",
-  width: "100%",
-  padding: "0.625rem 1rem",
-  fontSize: "0.875rem",
-  fontWeight: 500,
-  backgroundColor: "transparent",
-  border: "1px solid #d1d5db",
-  borderRadius: "0.375rem",
-  cursor: "pointer",
-  lineHeight: 1.5
-};
-var OAuthButton = React__default.default.forwardRef(
-  ({ className, providerName, onClick, icon }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs("button", { ref, type: "button", className, style: buttonStyle3, onClick, children: [
-      icon && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", alignItems: "center" }, children: icon }),
-      providerName
-    ] });
-  }
-);
-OAuthButton.displayName = "OAuthButton";
-var containerStyle2 = {
-  display: "flex",
-  alignItems: "center",
-  gap: "0.75rem",
-  margin: "1rem 0"
-};
-var lineStyle = {
-  flex: 1,
-  height: "1px",
-  backgroundColor: "#e5e7eb"
-};
-var textStyle = {
-  fontSize: "0.75rem",
-  opacity: 0.5,
-  whiteSpace: "nowrap"
-};
-var AuthDivider = ({ className, text = "or" }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: containerStyle2, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: lineStyle }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: textStyle, children: text }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: lineStyle })
-  ] });
-};
-var containerStyle3 = {
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  textAlign: "center",
-  padding: "1.5rem 0",
-  gap: "1rem"
-};
-var titleStyle2 = {
-  fontSize: "1.125rem",
-  fontWeight: 600,
-  margin: 0
-};
-var descriptionStyle = {
-  fontSize: "0.875rem",
-  opacity: 0.6,
-  lineHeight: 1.5,
-  margin: 0
-};
-var backButtonStyle = {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  padding: "0.5rem 1.5rem",
-  fontSize: "0.875rem",
-  fontWeight: 500,
-  backgroundColor: "transparent",
-  border: "1px solid #d1d5db",
-  borderRadius: "0.375rem",
-  cursor: "pointer",
-  marginTop: "0.5rem"
-};
-var PendingApproval = ({
-  className,
-  icon,
-  title = "Pending Approval",
-  description = "Your account is awaiting administrator approval. Please check back later.",
-  backText = "Go Back",
-  onBack
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: containerStyle3, children: [
-    icon,
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: titleStyle2, children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { style: descriptionStyle, children: description }),
-    onBack && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: backButtonStyle, onClick: onBack, children: backText })
-  ] });
-};
 
-exports.AuthDivider = AuthDivider;
-exports.EmailAuth = EmailAuth;
-exports.LoginLayout = LoginLayout;
 exports.LoginPage = LoginPage;
-exports.OAuthButton = OAuthButton;
-exports.OIDCButton = OIDCButton;
-exports.PendingApproval = PendingApproval;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map