@frank-auth/react/dist/esm/components/auth/user-profile/user-profile-modal.js

Flexible and customizable React UI components for Frank Authentication

'use client';
import { jsx as e, jsxs as o, Fragment as T } from "react/jsx-runtime";
import s from "react";
import { useDisclosure as ee, Modal as ae, ModalContent as he, ModalHeader as pe, ModalBody as ue, ModalFooter as ie, Button as S } from "@heroui/react";
import { useConfig as me } from "../../../hooks/use-config.js";
import { UserProfile as Me } from "./user-profile.js";
function Ne({
  trigger: l,
  isOpen: f,
  onOpenChange: P,
  modalSize: g = "lg",
  placement: x = "center",
  backdrop: C = "opaque",
  isDismissable: O = !0,
  closeOnOutsideClick: le = !0,
  hideCloseButton: N = !1,
  modalClassName: U = "",
  title: d = "Profile Settings",
  subtitle: a = "Manage your account settings and preferences",
  customHeaderContent: h,
  footerActions: p,
  showDefaultFooter: k = !1,
  saveButtonText: t = "Save Changes",
  cancelButtonText: j = "Cancel",
  onSave: r,
  onCancel: u,
  onClose: i,
  isSaveLoading: m = !1,
  isSaveDisabled: q = !1,
  scrollBehavior: y = "inside",
  isKeyboardDismissDisabled: R = !1,
  portalContainer: B,
  autoFocus: re = !0,
  defaultActiveTab: E,
  // UserProfile props
  defaultTab: F,
  tabs: G,
  hideTabs: J,
  showOrganizationSettings: Q,
  showSecuritySettings: V,
  showMFASettings: W,
  showPasskeySettings: X,
  className: Y,
  variant: Z = "flat",
  orientation: _ = "horizontal",
  tabPlacement: $ = "top",
  footerContent: z,
  onProfileUpdate: H,
  onSuccess: M,
  onError: K,
  isLoading: I,
  isDisabled: L,
  size: D = "md",
  customTabs: b
}) {
  const { components: ne } = me(), A = ee(), se = f !== void 0 ? f : A.isOpen, c = P || A.onOpenChange, v = ne.UserProfileModal;
  if (v)
    return /* @__PURE__ */ e(v, { trigger: l, isOpen: f, onOpenChange: P, modalSize: g, placement: x, backdrop: C, isDismissable: O, closeOnOutsideClick: le, hideCloseButton: N, modalClassName: U, title: d, subtitle: a, customHeaderContent: h, footerActions: p, showDefaultFooter: k, saveButtonText: t, cancelButtonText: j, onSave: r, onCancel: u, onClose: i, isSaveLoading: m, isSaveDisabled: q, scrollBehavior: y, isKeyboardDismissDisabled: R, portalContainer: B, autoFocus: re, defaultActiveTab: E, defaultTab: F, tabs: G, hideTabs: J, showOrganizationSettings: Q, showSecuritySettings: V, showMFASettings: W, showPasskeySettings: X, className: Y, variant: Z, orientation: _, tabPlacement: $, footerContent: z, onProfileUpdate: H, onSuccess: M, onError: K, isLoading: I, isDisabled: L, size: D, customTabs: b });
  const n = s.useCallback(() => {
    i?.(), c(!1);
  }, [i, c]), ce = s.useCallback(() => {
    u?.(), n();
  }, [u, n]), oe = s.useCallback(() => {
    r?.();
  }, [r]), fe = s.useCallback((w) => {
    M?.(w), !r && n();
  }, [M, r, n]), de = l && s.cloneElement(l, {
    onPress: () => c(!0)
  });
  return /* @__PURE__ */ o(T, { children: [
    de,
    /* @__PURE__ */ e(
      ae,
      {
        isOpen: se,
        onOpenChange: c,
        size: g,
        placement: x,
        backdrop: C,
        isDismissable: O,
        hideCloseButton: N,
        scrollBehavior: y,
        isKeyboardDismissDisabled: R,
        portalContainer: B,
        shouldBlockScroll: !0,
        className: U,
        classNames: {
          base: "max-h-[90vh]",
          body: "p-0"
        },
        children: /* @__PURE__ */ e(he, { children: (w) => /* @__PURE__ */ o(T, { children: [
          (h || d) && /* @__PURE__ */ e(pe, { className: "flex flex-col gap-1", children: h || /* @__PURE__ */ o("div", { children: [
            /* @__PURE__ */ e("h3", { className: "text-lg font-semibold", children: d }),
            a && /* @__PURE__ */ e("p", { className: "text-sm text-default-500 font-normal", children: a })
          ] }) }),
          /* @__PURE__ */ e(ue, { children: /* @__PURE__ */ e(
            Me,
            {
              defaultTab: E || F,
              tabs: G,
              hideTabs: J,
              showOrganizationSettings: Q,
              showSecuritySettings: V,
              showMFASettings: W,
              showPasskeySettings: X,
              className: Y,
              variant: Z,
              orientation: _,
              tabPlacement: $,
              footerContent: z,
              onProfileUpdate: H,
              onSuccess: fe,
              onError: K,
              onClose: n,
              isLoading: I,
              isDisabled: L,
              size: D,
              customTabs: b
            }
          ) }),
          (p || k) && /* @__PURE__ */ e(ie, { children: p || /* @__PURE__ */ o("div", { className: "flex gap-2", children: [
            /* @__PURE__ */ e(
              S,
              {
                variant: "light",
                onPress: ce,
                isDisabled: m,
                children: j
              }
            ),
            r && /* @__PURE__ */ e(
              S,
              {
                color: "primary",
                onPress: oe,
                isLoading: m,
                isDisabled: q,
                children: t
              }
            )
          ] }) })
        ] }) })
      }
    )
  ] });
}
function Ue() {
  const l = ee();
  return {
    ...l,
    openProfile: l.onOpen,
    closeProfile: l.onClose,
    toggleProfile: () => l.onOpenChange(!l.isOpen)
  };
}
export {
  Ne as UserProfileModal,
  Ue as useUserProfileModal
};
//# sourceMappingURL=user-profile-modal.js.map