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

package/dist/index.mjs

@@ -1,10 +1,11 @@
-import React, { forwardRef, useRef, useState, useEffect, useId, useMemo, createContext, useCallback, useContext, useLayoutEffect, Children, isValidElement, Fragment as Fragment$1 } from 'react';
+import React, { forwardRef, useRef, useState, useEffect, useId, useMemo, createContext, useContext, useLayoutEffect, Children, isValidElement, useCallback, Fragment as Fragment$1 } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as ContextMenu from '@radix-ui/react-context-menu';
 import * as DropdownMenu3 from '@radix-ui/react-dropdown-menu';
 import { useSensors, useSensor, PointerSensor, DndContext, DragOverlay, useDroppable, useDraggable } from '@dnd-kit/core';
 import '@dnd-kit/sortable';
 import '@dnd-kit/utilities';
+import 'react-dom';
 import { toast as toast$1, Toaster } from 'sonner';
 import * as Tooltip from '@radix-ui/react-tooltip';
 
@@ -20519,6 +20520,7 @@ function LoginPage({
   onMethodChange,
   externalLabel,
   externalMethods = [],
+  externalPanel,
   callout
 }) {
   const availableMethods = useMemo(() => methods.filter((method) => !method.hidden), [methods]);
@@ -20671,7 +20673,24 @@ function LoginPage({
                   method.id
                 );
               }) }) : null,
-              activeMethod ? /* @__PURE__ */ jsxs(
+              externalPanel ? /* @__PURE__ */ jsxs("div", { className: "login-page__external-panel", "data-login-part": "external-panel", children: [
+                externalPanel.title ? /* @__PURE__ */ jsx("div", { className: "login-page__external-panel-title", "data-login-part": "external-panel-title", children: externalPanel.title }) : null,
+                externalPanel.description ? /* @__PURE__ */ jsx("p", { className: "login-page__external-panel-description", "data-login-part": "external-panel-description", children: externalPanel.description }) : null,
+                /* @__PURE__ */ jsx("div", { className: "login-page__external-panel-content", "data-login-part": "external-panel-content", children: externalPanel.content }),
+                externalPanel.footer || externalPanel.backAction ? /* @__PURE__ */ jsxs("div", { className: "login-page__external-panel-footer", "data-login-part": "external-panel-footer", children: [
+                  externalPanel.footer,
+                  externalPanel.backAction ? /* @__PURE__ */ 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__ */ jsxs(
                 "form",
                 {
                   className: "login-page__form-fields",
@@ -20765,7 +20784,7 @@ function LoginPage({
                   ]
                 }
               ) : null,
-              externalMethods.length ? /* @__PURE__ */ jsxs("div", { className: "login-page__oauth-section", "data-login-part": "external-methods", children: [
+              !externalPanel && externalMethods.length ? /* @__PURE__ */ jsxs("div", { className: "login-page__oauth-section", "data-login-part": "external-methods", children: [
                 externalLabel ? /* @__PURE__ */ jsx("div", { className: "login-page__oauth-label", "data-login-part": "external-label", children: externalLabel }) : null,
                 /* @__PURE__ */ jsx("div", { className: "login-page__oauth-list", "data-login-part": "external-list", children: externalMethods.map(renderExternalMethod) })
               ] }) : null
@@ -20776,302 +20795,6 @@ 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__ */ jsx("div", { style: logoContainerStyle, children: /* @__PURE__ */ jsx("img", { src: logo, alt: title || "Logo", style: logoImageStyle }) });
-    }
-    return /* @__PURE__ */ jsx("div", { style: logoContainerStyle, children: logo });
-  };
-  return /* @__PURE__ */ jsx("div", { className, style: { ...containerStyle, ...style }, children: /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
-    renderLogo(),
-    title && /* @__PURE__ */ jsx("h1", { style: titleStyle, children: title }),
-    subtitle && /* @__PURE__ */ jsx("p", { style: subtitleStyle, children: subtitle }),
-    children,
-    footer && /* @__PURE__ */ 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.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 = useCallback(
-      (e) => {
-        e.preventDefault();
-        if (!isLoading && !disabled) {
-          onSubmit();
-        }
-      },
-      [onSubmit, isLoading, disabled]
-    );
-    const isDisabled = isLoading || disabled;
-    return /* @__PURE__ */ jsxs("form", { ref, className, style: formStyle, onSubmit: handleSubmit, children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { style: labelStyle, children: emailLabel }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "email",
-            value: email,
-            onChange: (e) => onEmailChange(e.target.value),
-            placeholder: emailPlaceholder,
-            disabled: isDisabled,
-            required: true,
-            autoComplete: "email",
-            style: inputStyle
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { style: labelStyle, children: passwordLabel }),
-        /* @__PURE__ */ 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__ */ jsx("p", { style: errorStyle, children: error }),
-      /* @__PURE__ */ 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.forwardRef(
-  ({ className, label = "Sign in with SSO", onClick, icon }, ref) => {
-    return /* @__PURE__ */ jsxs("button", { ref, type: "button", className, style: buttonStyle2, onClick, children: [
-      icon && /* @__PURE__ */ 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.forwardRef(
-  ({ className, providerName, onClick, icon }, ref) => {
-    return /* @__PURE__ */ jsxs("button", { ref, type: "button", className, style: buttonStyle3, onClick, children: [
-      icon && /* @__PURE__ */ 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__ */ jsxs("div", { className, style: containerStyle2, children: [
-    /* @__PURE__ */ jsx("div", { style: lineStyle }),
-    /* @__PURE__ */ jsx("span", { style: textStyle, children: text }),
-    /* @__PURE__ */ 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__ */ jsxs("div", { className, style: containerStyle3, children: [
-    icon,
-    /* @__PURE__ */ jsx("h2", { style: titleStyle2, children: title }),
-    /* @__PURE__ */ jsx("p", { style: descriptionStyle, children: description }),
-    onBack && /* @__PURE__ */ jsx("button", { type: "button", style: backButtonStyle, onClick: onBack, children: backText })
-  ] });
-};
 function cn3(...inputs) {
   return inputs.filter(Boolean).join(" ");
 }
@@ -25546,6 +25269,6 @@ lodash/lodash.js:
    *)
 */
 
-export { ARTIST_CONFIG, ARTIST_DEFAULT_QUICK_ACTIONS, AppHeader, AppLayout, AppSidebar, ArtistLandingPage, AuthDivider, BSD_CONFIG, BSD_DEFAULT_FEATURE_CARDS, BaseAccordion, BaseAvatar, BaseBadge, BaseBreadcrumb, BaseButton, BaseCheckbox, BaseContextMenu, BaseContextMenuCheckboxItem, BaseContextMenuContent, BaseContextMenuItem, BaseContextMenuLabel, BaseContextMenuRadioGroup, BaseContextMenuRadioItem, BaseContextMenuSeparator, BaseContextMenuSub, BaseContextMenuSubContent, BaseContextMenuSubTrigger, BaseContextMenuTrigger, BaseDescriptionList, BaseDialog, BaseDivider, BaseDropdownMenu, BaseEmptyState, BaseField, BaseInput, BaseLayout, BaseLayoutPane, BaseLayoutResizeHandle, BaseLayoutSplit, BaseLoadingState, BaseMultiSelect, BaseNotice, BasePagination, BasePanel, BaseProgress, BaseRadioGroup, BaseSectionHeader, BaseSegmentedControl, BaseSelect, BaseSkeleton, BaseSwitch, BaseTable, BaseTableBody, BaseTableCaption, BaseTableCell, BaseTableContainer, BaseTableEmpty, BaseTableFooter, BaseTableFooterBar, BaseTableHead, BaseTableHeader, BaseTableLoading, BaseTableRow, BaseTabs, BaseTextarea, BaseToolbar, BaseTooltip, BsdLandingPage, BsdToolboxPanel, CONCEPT_CONFIG, CONCEPT_DEFAULT_QUICK_ACTIONS, ConceptDesignLandingPage, DarkModeSelector, DarkModeSubMenu, DataExplorerActionBar, DataExplorerButton, DataExplorerCheckbox, DataExplorerCollectionFooter, DataExplorerDetailField, DataExplorerDetailSection, DataExplorerDetailShell, DataExplorerDisplayActionMenu, DataExplorerDisplayCard, DataExplorerDisplayCollectionView, DataExplorerDisplayListItem, DataExplorerDisplayMedia, DataExplorerImagePreview, DataExplorerPage, DataExplorerRecordCard, DataExplorerSelect, DataExplorerToolbarActions, DataExplorerToolbarShell, DataExplorerTree, DataExplorerTreeShell, DataExplorerView, DataExplorerViewCollection, DataExplorerViewItem, DataExplorerViewItemShell, DataExplorerViewShell, DataExplorerViewTree, DefaultLandingPage, DynamicComponent, EmailAuth, I18nSelector, InteractiveTable, InteractiveTableEditableTextCell, InteractiveTableReadonlyCell, InteractiveTableSelectCell, LoginLayout, LoginPage, MonkeysToastProvider, MonkeysToaster, NavButton, OAuthButton, OIDCButton, PendingApproval, MonkeysToastProvider as ToastProvider, MonkeysToaster as Toaster, WorkbenchContentPane, WorkbenchContentToolbar, WorkbenchDetailSidebar, WorkbenchGalleryCard, WorkbenchGallerySettingsButton, WorkbenchGallerySettingsPanel, WorkbenchGalleryView, WorkbenchLaneView, WorkbenchMasonryLayout, WorkbenchResizableSidebar, WorkbenchTableView, applyMonkeysTheme, calculateHue, calculateLightness, calculateSaturation, clearRegistry, cn3 as cn, createSolidColorScale, extractToastMessage, genTailwindTheme, getBaseBadgeToneClassName, getBaseButtonToneClassName, getBaseMenuItemToneClassName, getBaseNoticeToneClassName, getDataExplorerActionToneClassName, getDataExplorerMenuItemToneClassName, getRegisteredComponents, getRegisteredThemes, getThemeConfig, hasCustomComponent, markDarkColor, registerComponent, registerTheme, resolveBaseAppearance, resolveComponent, resolveDataExplorerAppearance, resolveMonkeysTheme, resolveToastVariantForMessage, setNeocardTheme, setTailwindTheme, toast, useDarkMode, useToastFeed, useToastOnValue };
+export { ARTIST_CONFIG, ARTIST_DEFAULT_QUICK_ACTIONS, AppHeader, AppLayout, AppSidebar, ArtistLandingPage, BSD_CONFIG, BSD_DEFAULT_FEATURE_CARDS, BaseAccordion, BaseAvatar, BaseBadge, BaseBreadcrumb, BaseButton, BaseCheckbox, BaseContextMenu, BaseContextMenuCheckboxItem, BaseContextMenuContent, BaseContextMenuItem, BaseContextMenuLabel, BaseContextMenuRadioGroup, BaseContextMenuRadioItem, BaseContextMenuSeparator, BaseContextMenuSub, BaseContextMenuSubContent, BaseContextMenuSubTrigger, BaseContextMenuTrigger, BaseDescriptionList, BaseDialog, BaseDivider, BaseDropdownMenu, BaseEmptyState, BaseField, BaseInput, BaseLayout, BaseLayoutPane, BaseLayoutResizeHandle, BaseLayoutSplit, BaseLoadingState, BaseMultiSelect, BaseNotice, BasePagination, BasePanel, BaseProgress, BaseRadioGroup, BaseSectionHeader, BaseSegmentedControl, BaseSelect, BaseSkeleton, BaseSwitch, BaseTable, BaseTableBody, BaseTableCaption, BaseTableCell, BaseTableContainer, BaseTableEmpty, BaseTableFooter, BaseTableFooterBar, BaseTableHead, BaseTableHeader, BaseTableLoading, BaseTableRow, BaseTabs, BaseTextarea, BaseToolbar, BaseTooltip, BsdLandingPage, BsdToolboxPanel, CONCEPT_CONFIG, CONCEPT_DEFAULT_QUICK_ACTIONS, ConceptDesignLandingPage, DarkModeSelector, DarkModeSubMenu, DataExplorerActionBar, DataExplorerButton, DataExplorerCheckbox, DataExplorerCollectionFooter, DataExplorerDetailField, DataExplorerDetailSection, DataExplorerDetailShell, DataExplorerDisplayActionMenu, DataExplorerDisplayCard, DataExplorerDisplayCollectionView, DataExplorerDisplayListItem, DataExplorerDisplayMedia, DataExplorerImagePreview, DataExplorerPage, DataExplorerRecordCard, DataExplorerSelect, DataExplorerToolbarActions, DataExplorerToolbarShell, DataExplorerTree, DataExplorerTreeShell, DataExplorerView, DataExplorerViewCollection, DataExplorerViewItem, DataExplorerViewItemShell, DataExplorerViewShell, DataExplorerViewTree, DefaultLandingPage, DynamicComponent, I18nSelector, InteractiveTable, InteractiveTableEditableTextCell, InteractiveTableReadonlyCell, InteractiveTableSelectCell, LoginPage, MonkeysToastProvider, MonkeysToaster, NavButton, MonkeysToastProvider as ToastProvider, MonkeysToaster as Toaster, WorkbenchContentPane, WorkbenchContentToolbar, WorkbenchDetailSidebar, WorkbenchGalleryCard, WorkbenchGallerySettingsButton, WorkbenchGallerySettingsPanel, WorkbenchGalleryView, WorkbenchLaneView, WorkbenchMasonryLayout, WorkbenchResizableSidebar, WorkbenchTableView, applyMonkeysTheme, calculateHue, calculateLightness, calculateSaturation, clearRegistry, cn3 as cn, createSolidColorScale, extractToastMessage, genTailwindTheme, getBaseBadgeToneClassName, getBaseButtonToneClassName, getBaseMenuItemToneClassName, getBaseNoticeToneClassName, getDataExplorerActionToneClassName, getDataExplorerMenuItemToneClassName, getRegisteredComponents, getRegisteredThemes, getThemeConfig, hasCustomComponent, markDarkColor, registerComponent, registerTheme, resolveBaseAppearance, resolveComponent, resolveDataExplorerAppearance, resolveMonkeysTheme, resolveToastVariantForMessage, setNeocardTheme, setTailwindTheme, toast, useDarkMode, useToastFeed, useToastOnValue };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map