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

package/dist/index.mjs

@@ -3,6 +3,8 @@ 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 { toast as toast$1, Toaster } from 'sonner';
 import * as Tooltip from '@radix-ui/react-tooltip';
 
@@ -20346,6 +20348,265 @@ registerTheme(
     version: "1.0.0"
   }
 );
+var LOGIN_LOGO_POSITIONS = ["top", "middle", "bottom"];
+var normalizeCssValue = (value) => {
+  const trimmed = value?.trim();
+  return trimmed || void 0;
+};
+var createBackgroundImage = (gradient, imageUrl) => {
+  const resolvedGradient = normalizeCssValue(gradient);
+  const resolvedImageUrl = normalizeCssValue(imageUrl);
+  return [resolvedGradient, resolvedImageUrl ? `url(${JSON.stringify(resolvedImageUrl)})` : void 0].filter(Boolean).join(", ");
+};
+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;
+function LoginPage({
+  className,
+  style,
+  background,
+  logo,
+  primaryColor,
+  radius,
+  customCss,
+  toolbar,
+  title,
+  backAction,
+  methods,
+  activeMethodId,
+  defaultMethodId,
+  onMethodChange,
+  externalLabel,
+  externalMethods = [],
+  callout
+}) {
+  const availableMethods = useMemo(() => methods.filter((method) => !method.hidden), [methods]);
+  const fallbackMethodId = defaultMethodId ?? availableMethods[0]?.id;
+  const [internalMethodId, setInternalMethodId] = useState(fallbackMethodId);
+  const currentMethodId = activeMethodId ?? internalMethodId;
+  const activeMethod = availableMethods.find((method) => method.id === currentMethodId) ?? availableMethods[0];
+  const hasTabs = availableMethods.length > 1;
+  const backgroundImage = createBackgroundImage(background?.gradient, background?.imageUrl);
+  const backgroundMode = backgroundImage ? "custom" : "default";
+  const logoPosition = normalizeLogoPosition(logo?.position);
+  const logoScale = normalizeLogoScale(logo?.scale);
+  useEffect(() => {
+    if (!availableMethods.length) {
+      setInternalMethodId(void 0);
+      return;
+    }
+    if (!currentMethodId || !availableMethods.some((method) => method.id === currentMethodId)) {
+      setInternalMethodId(fallbackMethodId ?? availableMethods[0]?.id);
+    }
+  }, [availableMethods, currentMethodId, fallbackMethodId]);
+  const rootStyle = useMemo(
+    () => ({
+      ...primaryColor ? { ["--login-page-theme-primary-color"]: primaryColor } : null,
+      ...radius ? { ["--login-page-theme-radius"]: radius } : null,
+      ...style
+    }),
+    [primaryColor, radius, style]
+  );
+  const handleMethodChange = (methodId) => {
+    if (activeMethodId === void 0) {
+      setInternalMethodId(methodId);
+    }
+    onMethodChange?.(methodId);
+  };
+  const renderExternalMethod = (method) => {
+    const button = /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "login-page__oauth-button",
+        "data-login-part": "external-button",
+        "data-login-method-id": method.id,
+        onClick: method.onClick,
+        disabled: method.disabled,
+        children: [
+          method.icon ? /* @__PURE__ */ jsx("span", { className: "login-page__oauth-icon", "data-login-part": "external-icon", children: method.icon }) : null,
+          /* @__PURE__ */ jsx("span", { children: method.label })
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsx(React.Fragment, { children: method.render ? method.render(button) : button }, method.id);
+  };
+  return /* @__PURE__ */ jsxs(
+    "main",
+    {
+      className: ["login-page", className].filter(Boolean).join(" "),
+      "data-login-page": true,
+      "data-login-part": "root",
+      "data-login-background": backgroundMode,
+      style: rootStyle,
+      children: [
+        customCss ? /* @__PURE__ */ jsx("style", { "data-login-page-custom-css": true, children: customCss }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "login-page__background",
+            "data-login-part": "background",
+            "data-login-background": backgroundMode,
+            style: backgroundImage ? { backgroundImage } : void 0,
+            "aria-hidden": "true"
+          }
+        ),
+        toolbar ? /* @__PURE__ */ jsx("div", { className: "login-page__toolbar", "data-login-part": "toolbar", children: toolbar }) : null,
+        logo?.url ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `login-page__logo login-page__logo--${logoPosition}`,
+            "data-login-part": "logo",
+            "data-logo-position": logoPosition,
+            children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                className: "login-page__logo-image",
+                "data-login-part": "logo-image",
+                src: logo.url,
+                alt: logo.alt ?? "",
+                style: logoScale ? { transform: `scale(${logoScale})` } : void 0
+              }
+            )
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          "section",
+          {
+            className: "login-page__form",
+            "data-login-part": "panel",
+            "aria-label": typeof title === "string" ? title : void 0,
+            children: [
+              backAction ? /* @__PURE__ */ jsxs("button", { type: "button", className: "login-page__back", "data-login-part": "back", onClick: backAction.onClick, children: [
+                backAction.icon ? /* @__PURE__ */ jsx("span", { className: "login-page__back-icon", "data-login-part": "back-icon", children: backAction.icon }) : null,
+                /* @__PURE__ */ jsx("span", { children: backAction.label })
+              ] }) : null,
+              title ? /* @__PURE__ */ jsx("h1", { className: "login-page__title", "data-login-part": "title", children: title }) : null,
+              hasTabs ? /* @__PURE__ */ jsx("div", { className: "login-page__tabs", "data-login-part": "tabs", role: "tablist", children: availableMethods.map((method) => {
+                const selected = method.id === activeMethod?.id;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "tab",
+                    "aria-selected": selected,
+                    className: `login-page__tab ${selected ? "login-page__tab--active" : ""}`,
+                    "data-login-part": "tab",
+                    "data-login-method-id": method.id,
+                    "data-active": selected ? "true" : "false",
+                    onClick: () => handleMethodChange(method.id),
+                    children: [
+                      method.icon ? /* @__PURE__ */ jsx("span", { className: "login-page__tab-icon", "data-login-part": "tab-icon", children: method.icon }) : null,
+                      /* @__PURE__ */ jsx("span", { children: method.label })
+                    ]
+                  },
+                  method.id
+                );
+              }) }) : null,
+              activeMethod ? /* @__PURE__ */ jsxs(
+                "form",
+                {
+                  className: "login-page__form-fields",
+                  "data-login-part": "form",
+                  "data-login-method-id": activeMethod.id,
+                  onSubmit: activeMethod.onSubmit,
+                  children: [
+                    activeMethod.fields.map((field) => /* @__PURE__ */ jsx("div", { className: "login-page__field", "data-login-part": "field", "data-login-field-name": field.name, children: /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        id: field.id,
+                        name: field.name,
+                        type: field.type ?? "text",
+                        value: field.value,
+                        placeholder: field.placeholder,
+                        autoComplete: field.autoComplete,
+                        inputMode: field.inputMode,
+                        maxLength: field.maxLength,
+                        pattern: field.pattern,
+                        disabled: activeMethod.disabled || activeMethod.isLoading || field.disabled,
+                        required: field.required,
+                        className: "login-page__input",
+                        "data-login-part": "input",
+                        onChange: (event) => field.onChange(event.target.value)
+                      }
+                    ) }, field.name)),
+                    activeMethod.checkbox ? /* @__PURE__ */ jsxs("label", { className: "login-page__remember", "data-login-part": "checkbox-label", htmlFor: activeMethod.checkbox.id, children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          id: activeMethod.checkbox.id,
+                          type: "checkbox",
+                          className: "login-page__checkbox",
+                          "data-login-part": "checkbox",
+                          checked: activeMethod.checkbox.checked,
+                          disabled: activeMethod.disabled || activeMethod.isLoading || activeMethod.checkbox.disabled,
+                          onChange: (event) => activeMethod.checkbox?.onChange(event.target.checked)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { children: activeMethod.checkbox.label })
+                    ] }) : null,
+                    activeMethod.footer || activeMethod.footerAction ? /* @__PURE__ */ jsxs("div", { className: "login-page__method-footer", "data-login-part": "method-footer", children: [
+                      activeMethod.footer,
+                      activeMethod.footerAction ? /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: "login-page__method-footer-action",
+                          "data-login-part": "method-footer-action",
+                          "data-login-method-id": activeMethod.id,
+                          onClick: activeMethod.footerAction.onClick,
+                          disabled: activeMethod.disabled || activeMethod.isLoading || activeMethod.footerAction.disabled,
+                          children: activeMethod.footerAction.label
+                        }
+                      ) : null
+                    ] }) : null,
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "submit",
+                        className: "login-page__submit",
+                        "data-login-part": "submit-button",
+                        disabled: activeMethod.disabled || activeMethod.isLoading,
+                        children: activeMethod.isLoading && activeMethod.loadingLabel ? activeMethod.loadingLabel : activeMethod.submitLabel
+                      }
+                    )
+                  ]
+                }
+              ) : null,
+              callout ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `login-page__callout login-page__callout--${callout.tone ?? "info"}`,
+                  "data-login-part": "callout",
+                  "data-tone": callout.tone ?? "info",
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "login-page__callout-title", "data-login-part": "callout-title", children: callout.title }),
+                    callout.description ? /* @__PURE__ */ jsx("p", { className: "login-page__callout-description", "data-login-part": "callout-description", children: callout.description }) : null,
+                    callout.detail ? /* @__PURE__ */ jsx("p", { className: "login-page__callout-detail", "data-login-part": "callout-detail", children: callout.detail }) : null,
+                    callout.action ? /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: "login-page__callout-action",
+                        "data-login-part": "callout-action",
+                        onClick: callout.action.onClick,
+                        disabled: callout.action.disabled,
+                        children: callout.action.label
+                      }
+                    ) : null
+                  ]
+                }
+              ) : null,
+              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
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 var containerStyle = {
   display: "flex",
   alignItems: "center",
@@ -25116,6 +25377,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, 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, 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 };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map