@ory/elements-react 1.0.0-next.11 → 1.0.0-next.13

package/dist/client/useSession.d.ts

@@ -0,0 +1,41 @@
+import * as zustand from 'zustand';
+import { Session } from '@ory/client-fetch';
+
+type SessionStore = {
+    setIsLoading: (loading: boolean) => void;
+    setSession: (session: Session) => void;
+    isLoading: boolean;
+    session: Session | undefined;
+    error: string | undefined;
+    setError: (error: string | undefined) => void;
+};
+declare const sessionStore: zustand.UseBoundStore<Omit<zustand.StoreApi<SessionStore>, "subscribe"> & {
+    subscribe: {
+        (listener: (selectedState: SessionStore, previousSelectedState: SessionStore) => void): () => void;
+        <U>(selector: (state: SessionStore) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+            equalityFn?: ((a: U, b: U) => boolean) | undefined;
+            fireImmediately?: boolean | undefined;
+        } | undefined): () => void;
+    };
+}>;
+/**
+ * A hook to get the current session from the Ory Network.
+ *
+ * Usage:
+ * ```ts
+ * const { session, error, isLoading } = useSession()
+ * ```
+ *
+ * @returns The current session, error and loading state.
+ */
+declare const useSession: (config?: {
+    sdk: {
+        url: string;
+    };
+}) => {
+    session: Session | undefined;
+    error: string | undefined;
+    isLoading: boolean;
+};
+
+export { sessionStore, useSession };

package/dist/client/useSession.js

@@ -0,0 +1,79 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useSession_exports = {};
+__export(useSession_exports, {
+  sessionStore: () => sessionStore,
+  useSession: () => useSession
+});
+module.exports = __toCommonJS(useSession_exports);
+var import_react = require("react");
+var import_zustand = require("zustand");
+var import_middleware = require("zustand/middleware");
+var import_frontendClient = require("./frontendClient");
+const sessionStore = (0, import_zustand.create)()(
+  (0, import_middleware.subscribeWithSelector)((set) => ({
+    isLoading: false,
+    setIsLoading: (isLoading) => set({ isLoading }),
+    session: void 0,
+    setSession: (session) => set({ session }),
+    error: void 0,
+    setError: (error) => set({ error })
+  }))
+);
+const useSession = (config) => {
+  const store = (0, import_zustand.useStore)(sessionStore);
+  const fetchSession = (0, import_react.useCallback)(async () => {
+    var _a;
+    const { session, isLoading, setSession, setIsLoading, setError } = sessionStore.getState();
+    if (!!session || isLoading) {
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const sessionData = await (0, import_frontendClient.frontendClient)(
+        (_a = config == null ? void 0 : config.sdk.url) != null ? _a : window.location.protocol + "//" + window.location.host
+      ).toSession();
+      setSession(sessionData);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Unknown error occurred");
+      if (!(config == null ? void 0 : config.sdk.url)) {
+        console.error(
+          "Could not fetch session. Make sure you have set the SDK URL in the config."
+        );
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [config == null ? void 0 : config.sdk.url]);
+  (0, import_react.useEffect)(() => {
+    void fetchSession();
+  }, [fetchSession]);
+  return {
+    session: store.session,
+    error: store.error,
+    isLoading: store.isLoading
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  sessionStore,
+  useSession
+});
+//# sourceMappingURL=useSession.js.map

package/dist/client/useSession.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/client/useSession.ts"],"sourcesContent":["// Copyright © 2024 Ory Corp\n// SPDX-License-Identifier: Apache-2.0\n\"use client\"\n\nimport { Session } from \"@ory/client-fetch\"\nimport { useCallback, useEffect } from \"react\"\nimport { create, useStore } from \"zustand\"\nimport { subscribeWithSelector } from \"zustand/middleware\"\nimport { frontendClient } from \"./frontendClient\"\n\ntype SessionStore = {\n  setIsLoading: (loading: boolean) => void\n  setSession: (session: Session) => void\n  isLoading: boolean\n  session: Session | undefined\n  error: string | undefined\n  setError: (error: string | undefined) => void\n}\n\nexport const sessionStore = create<SessionStore>()(\n  subscribeWithSelector((set) => ({\n    isLoading: false,\n    setIsLoading: (isLoading: boolean) => set({ isLoading }),\n    session: undefined,\n    setSession: (session: Session) => set({ session }),\n    error: undefined,\n    setError: (error: string | undefined) => set({ error }),\n  })),\n)\n\n/**\n * A hook to get the current session from the Ory Network.\n *\n * Usage:\n * ```ts\n * const { session, error, isLoading } = useSession()\n * ```\n *\n * @returns The current session, error and loading state.\n */\nexport const useSession = (config?: { sdk: { url: string } }) => {\n  const store = useStore(sessionStore)\n\n  const fetchSession = useCallback(async () => {\n    const { session, isLoading, setSession, setIsLoading, setError } =\n      sessionStore.getState()\n\n    if (!!session || isLoading) {\n      return\n    }\n\n    setIsLoading(true)\n\n    try {\n      const sessionData = await frontendClient(\n        config?.sdk.url ??\n          window.location.protocol + \"//\" + window.location.host,\n      ).toSession()\n      setSession(sessionData)\n    } catch (e) {\n      setError(e instanceof Error ? e.message : \"Unknown error occurred\")\n      if (!config?.sdk.url) {\n        console.error(\n          \"Could not fetch session. Make sure you have set the SDK URL in the config.\",\n        )\n      }\n    } finally {\n      setIsLoading(false)\n    }\n  }, [config?.sdk.url])\n\n  useEffect(() => {\n    void fetchSession()\n  }, [fetchSession])\n\n  return {\n    session: store.session,\n    error: store.error,\n    isLoading: store.isLoading,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,mBAAuC;AACvC,qBAAiC;AACjC,wBAAsC;AACtC,4BAA+B;AAWxB,MAAM,mBAAe,uBAAqB;AAAA,MAC/C,yCAAsB,CAAC,SAAS;AAAA,IAC9B,WAAW;AAAA,IACX,cAAc,CAAC,cAAuB,IAAI,EAAE,UAAU,CAAC;AAAA,IACvD,SAAS;AAAA,IACT,YAAY,CAAC,YAAqB,IAAI,EAAE,QAAQ,CAAC;AAAA,IACjD,OAAO;AAAA,IACP,UAAU,CAAC,UAA8B,IAAI,EAAE,MAAM,CAAC;AAAA,EACxD,EAAE;AACJ;AAYO,MAAM,aAAa,CAAC,WAAsC;AAC/D,QAAM,YAAQ,yBAAS,YAAY;AAEnC,QAAM,mBAAe,0BAAY,YAAY;AA3C/C;AA4CI,UAAM,EAAE,SAAS,WAAW,YAAY,cAAc,SAAS,IAC7D,aAAa,SAAS;AAExB,QAAI,CAAC,CAAC,WAAW,WAAW;AAC1B;AAAA,IACF;AAEA,iBAAa,IAAI;AAEjB,QAAI;AACF,YAAM,cAAc,UAAM;AAAA,SACxB,sCAAQ,IAAI,QAAZ,YACE,OAAO,SAAS,WAAW,OAAO,OAAO,SAAS;AAAA,MACtD,EAAE,UAAU;AACZ,iBAAW,WAAW;AAAA,IACxB,SAAS,GAAG;AACV,eAAS,aAAa,QAAQ,EAAE,UAAU,wBAAwB;AAClE,UAAI,EAAC,iCAAQ,IAAI,MAAK;AACpB,gBAAQ;AAAA,UACN;AAAA,QACF;AAAA,MACF;AAAA,IACF,UAAE;AACA,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,iCAAQ,IAAI,GAAG,CAAC;AAEpB,8BAAU,MAAM;AACd,SAAK,aAAa;AAAA,EACpB,GAAG,CAAC,YAAY,CAAC;AAEjB,SAAO;AAAA,IACL,SAAS,MAAM;AAAA,IACf,OAAO,MAAM;AAAA,IACb,WAAW,MAAM;AAAA,EACnB;AACF;","names":[]}

package/dist/client/useSession.mjs

@@ -0,0 +1,54 @@
+"use client";
+import { useCallback, useEffect } from "react";
+import { create, useStore } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
+import { frontendClient } from "./frontendClient";
+const sessionStore = create()(
+  subscribeWithSelector((set) => ({
+    isLoading: false,
+    setIsLoading: (isLoading) => set({ isLoading }),
+    session: void 0,
+    setSession: (session) => set({ session }),
+    error: void 0,
+    setError: (error) => set({ error })
+  }))
+);
+const useSession = (config) => {
+  const store = useStore(sessionStore);
+  const fetchSession = useCallback(async () => {
+    var _a;
+    const { session, isLoading, setSession, setIsLoading, setError } = sessionStore.getState();
+    if (!!session || isLoading) {
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const sessionData = await frontendClient(
+        (_a = config == null ? void 0 : config.sdk.url) != null ? _a : window.location.protocol + "//" + window.location.host
+      ).toSession();
+      setSession(sessionData);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Unknown error occurred");
+      if (!(config == null ? void 0 : config.sdk.url)) {
+        console.error(
+          "Could not fetch session. Make sure you have set the SDK URL in the config."
+        );
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [config == null ? void 0 : config.sdk.url]);
+  useEffect(() => {
+    void fetchSession();
+  }, [fetchSession]);
+  return {
+    session: store.session,
+    error: store.error,
+    isLoading: store.isLoading
+  };
+};
+export {
+  sessionStore,
+  useSession
+};
+//# sourceMappingURL=useSession.mjs.map

package/dist/client/useSession.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/client/useSession.ts"],"sourcesContent":["// Copyright © 2024 Ory Corp\n// SPDX-License-Identifier: Apache-2.0\n\"use client\"\n\nimport { Session } from \"@ory/client-fetch\"\nimport { useCallback, useEffect } from \"react\"\nimport { create, useStore } from \"zustand\"\nimport { subscribeWithSelector } from \"zustand/middleware\"\nimport { frontendClient } from \"./frontendClient\"\n\ntype SessionStore = {\n  setIsLoading: (loading: boolean) => void\n  setSession: (session: Session) => void\n  isLoading: boolean\n  session: Session | undefined\n  error: string | undefined\n  setError: (error: string | undefined) => void\n}\n\nexport const sessionStore = create<SessionStore>()(\n  subscribeWithSelector((set) => ({\n    isLoading: false,\n    setIsLoading: (isLoading: boolean) => set({ isLoading }),\n    session: undefined,\n    setSession: (session: Session) => set({ session }),\n    error: undefined,\n    setError: (error: string | undefined) => set({ error }),\n  })),\n)\n\n/**\n * A hook to get the current session from the Ory Network.\n *\n * Usage:\n * ```ts\n * const { session, error, isLoading } = useSession()\n * ```\n *\n * @returns The current session, error and loading state.\n */\nexport const useSession = (config?: { sdk: { url: string } }) => {\n  const store = useStore(sessionStore)\n\n  const fetchSession = useCallback(async () => {\n    const { session, isLoading, setSession, setIsLoading, setError } =\n      sessionStore.getState()\n\n    if (!!session || isLoading) {\n      return\n    }\n\n    setIsLoading(true)\n\n    try {\n      const sessionData = await frontendClient(\n        config?.sdk.url ??\n          window.location.protocol + \"//\" + window.location.host,\n      ).toSession()\n      setSession(sessionData)\n    } catch (e) {\n      setError(e instanceof Error ? e.message : \"Unknown error occurred\")\n      if (!config?.sdk.url) {\n        console.error(\n          \"Could not fetch session. Make sure you have set the SDK URL in the config.\",\n        )\n      }\n    } finally {\n      setIsLoading(false)\n    }\n  }, [config?.sdk.url])\n\n  useEffect(() => {\n    void fetchSession()\n  }, [fetchSession])\n\n  return {\n    session: store.session,\n    error: store.error,\n    isLoading: store.isLoading,\n  }\n}\n"],"mappings":";AAKA,SAAS,aAAa,iBAAiB;AACvC,SAAS,QAAQ,gBAAgB;AACjC,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAWxB,MAAM,eAAe,OAAqB;AAAA,EAC/C,sBAAsB,CAAC,SAAS;AAAA,IAC9B,WAAW;AAAA,IACX,cAAc,CAAC,cAAuB,IAAI,EAAE,UAAU,CAAC;AAAA,IACvD,SAAS;AAAA,IACT,YAAY,CAAC,YAAqB,IAAI,EAAE,QAAQ,CAAC;AAAA,IACjD,OAAO;AAAA,IACP,UAAU,CAAC,UAA8B,IAAI,EAAE,MAAM,CAAC;AAAA,EACxD,EAAE;AACJ;AAYO,MAAM,aAAa,CAAC,WAAsC;AAC/D,QAAM,QAAQ,SAAS,YAAY;AAEnC,QAAM,eAAe,YAAY,YAAY;AA3C/C;AA4CI,UAAM,EAAE,SAAS,WAAW,YAAY,cAAc,SAAS,IAC7D,aAAa,SAAS;AAExB,QAAI,CAAC,CAAC,WAAW,WAAW;AAC1B;AAAA,IACF;AAEA,iBAAa,IAAI;AAEjB,QAAI;AACF,YAAM,cAAc,MAAM;AAAA,SACxB,sCAAQ,IAAI,QAAZ,YACE,OAAO,SAAS,WAAW,OAAO,OAAO,SAAS;AAAA,MACtD,EAAE,UAAU;AACZ,iBAAW,WAAW;AAAA,IACxB,SAAS,GAAG;AACV,eAAS,aAAa,QAAQ,EAAE,UAAU,wBAAwB;AAClE,UAAI,EAAC,iCAAQ,IAAI,MAAK;AACpB,gBAAQ;AAAA,UACN;AAAA,QACF;AAAA,MACF;AAAA,IACF,UAAE;AACA,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,iCAAQ,IAAI,GAAG,CAAC;AAEpB,YAAU,MAAM;AACd,SAAK,aAAa;AAAA,EACpB,GAAG,CAAC,YAAY,CAAC;AAEjB,SAAO;AAAA,IACL,SAAS,MAAM;AAAA,IACf,OAAO,MAAM;AAAA,IACb,WAAW,MAAM;AAAA,EACnB;AACF;","names":[]}

package/dist/index.d.mts

@@ -1,12 +1,21 @@
-import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeGroupEnum, UiText, ConfigurationParameters, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, FlowError, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler, Session } from '@ory/client-fetch';
+import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeGroupEnum, UiText, ConfigurationParameters, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, FlowError, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler } from '@ory/client-fetch';
 import { ComponentPropsWithoutRef, FormEventHandler, MouseEventHandler, PropsWithChildren, DetailedHTMLProps, HTMLAttributes, ComponentType, Dispatch } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IntlShape } from 'react-intl';
 
+declare const buttonStyles: (props?: ({
+    intent?: "primary" | "secondary" | null | undefined;
+    size?: "default" | "large" | null | undefined;
+    defaultVariants?: "intent" | "size" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonVariants = VariantProps<typeof buttonStyles>;
+
 type OryNodeButtonProps = {
     attributes: UiNodeInputAttributes;
     node: UiNode;
-} & Omit<ComponentPropsWithoutRef<"button">, "children">;
+} & Omit<ComponentPropsWithoutRef<"button">, "children"> & ButtonVariants;
 type OryCurrentIdentifierProps = {
     attributes: UiNodeInputAttributes;
     node: UiNode;
@@ -50,6 +59,11 @@ type OryNodeInputProps = {
     node: UiNode;
     onClick?: MouseEventHandler;
 };
+type OryFormSectionContentProps = PropsWithChildren<{
+    title?: string;
+    description?: string;
+}>;
+type OryFormSectionFooterProps = PropsWithChildren;
 
 type OryCardHeaderProps = Record<string, never>;
 declare function OryCardHeader(): react_jsx_runtime.JSX.Element;
@@ -130,6 +144,46 @@ type OryNodeOidcButtonProps = {
 declare function OryFormOidcButtons({ children, hideDivider, }: OryFormOidcButtonsProps): react_jsx_runtime.JSX.Element | null;
 declare function OryFormSocialButtonsForm(): react_jsx_runtime.JSX.Element | null;
 
+type OryPageHeaderProps = Record<never, never>;
+declare const HeadlessPageHeader: () => react_jsx_runtime.JSX.Element;
+
+type OryFormSectionProps = PropsWithChildren<{
+    nodes?: UiNode[];
+}>;
+declare function OryFormSection({ children, nodes }: OryFormSectionProps): react_jsx_runtime.JSX.Element;
+
+declare function OrySettingsCard(): react_jsx_runtime.JSX.Element;
+
+type OrySettingsRecoveryCodesProps = {
+    codes: string[];
+    regnerateButton?: UiNode;
+    revealButton?: UiNode;
+};
+type OrySettingsTotpProps = {
+    totpImage: UiNode;
+    totpSecret: UiNode;
+    totpInput: UiNode;
+} | {
+    totpUnlink: UiNode;
+};
+type OrySettingsOidcProps = {
+    linkButtons: UiNode[];
+    unlinkButtons: UiNode[];
+};
+type OrySettingsWebauthnProps = {
+    nameInput: UiNode;
+    triggerButton: UiNode & {
+        onClick: () => void;
+    };
+    removeButtons: UiNode[];
+};
+type OrySettingsPasskeyProps = {
+    triggerButton: UiNode & {
+        onClick: () => void;
+    };
+    removeButtons: UiNode[];
+};
+
 /**
  * A record of all the components that are used in the OryForm component.
  */
@@ -213,6 +267,18 @@ type OryFlowComponents = {
          * This is only used, if login is configured to use identifier_first authentication.
          */
         AuthMethodListItem: ComponentType<OryCardAuthMethodListItemProps>;
+        /**
+         * The SettingsSection component is rendered around each section of the settings.
+         */
+        SettingsSection: ComponentType<OryFormSectionProps>;
+        /**
+         * The SettingsSectionContent component is rendered around the content of each section of the settings.
+         */
+        SettingsSectionContent: ComponentType<OryFormSectionContentProps>;
+        /**
+         * The SettingsSectionFooter component is rendered around the footer of each section of the settings.
+         */
+        SettingsSectionFooter: ComponentType<OryFormSectionContentProps>;
     };
     Form: {
         /**
@@ -235,6 +301,26 @@ type OryFlowComponents = {
          * The FormGroup is rendered around each group of nodes in the UI nodes.
          */
         Group: ComponentType<OryFormGroupProps>;
+        /**
+         * The section on the settings page, rendering the OIDC settings
+         */
+        OidcSettings: ComponentType<OrySettingsOidcProps>;
+        /**
+         * The section on the settings page, rendering the Webauthn settings
+         */
+        WebauthnSettings: ComponentType<OrySettingsWebauthnProps>;
+        /**
+         * The section on the settings page, rendering the Passkey settings
+         */
+        PasskeySettings: ComponentType<OrySettingsPasskeyProps>;
+        /**
+         * The section on the settings page, rendering the TOTP settings
+         */
+        TotpSettings: ComponentType<OrySettingsTotpProps>;
+        /**
+         * The section on the settings page, rendering the recovery code settings
+         */
+        RecoveryCodesSettings: ComponentType<OrySettingsRecoveryCodesProps>;
     };
     Message: {
         /**
@@ -246,6 +332,9 @@ type OryFlowComponents = {
          */
         Content: ComponentType<OryMessageContentProps>;
     };
+    Page: {
+        Header: ComponentType<OryPageHeaderProps>;
+    };
 };
 type DeepPartialTwoLevels<T> = {
     [P in keyof T]?: T[P] extends object ? {
@@ -253,8 +342,11 @@ type DeepPartialTwoLevels<T> = {
     } : T[P];
 };
 type OryFlowComponentOverrides = DeepPartialTwoLevels<OryFlowComponents>;
-type OryFormProps = PropsWithChildren;
-declare function OryForm({ children }: OryFormProps): string | react_jsx_runtime.JSX.Element;
+type OryFormProps = PropsWithChildren<{
+    onAfterSubmit?: (method: string | number | boolean | undefined) => void;
+    nodes?: UiNode[];
+}>;
+declare function OryForm({ children, onAfterSubmit, nodes }: OryFormProps): string | react_jsx_runtime.JSX.Element;
 
 declare function useComponents(): OryFlowComponents;
 declare function useNodeSorter(): (a: UiNode, b: UiNode, ctx: {
@@ -454,20 +546,4 @@ declare function messageTestId(message: UiText): {
     "data-testid": string;
 };
 
-/**
- * A hook to get the current session from the Ory Network.
- *
- * Usage:
- * ```ts
- * const { session, error, isLoading } = useSession()
- * ```
- *
- * @returns The current session, error and loading state.
- */
-declare const useSession: () => {
-    session: Session | undefined;
-    error: string | undefined;
-    isLoading: boolean;
-};
-
-export { type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormValues, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, OryCardValidationMessages, type OryClientConfiguration, type OryCurrentIdentifierProps, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcButtonsProps, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSocialButtonsForm, locales as OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, OryProvider, type OryProviderProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow, useSession };
+export { type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, OryCardValidationMessages, type OryClientConfiguration, type OryCurrentIdentifierProps, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcButtonsProps, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, locales as OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };

package/dist/index.d.ts

@@ -1,12 +1,21 @@
-import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeGroupEnum, UiText, ConfigurationParameters, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, FlowError, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler, Session } from '@ory/client-fetch';
+import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeGroupEnum, UiText, ConfigurationParameters, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, FlowError, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler } from '@ory/client-fetch';
 import { ComponentPropsWithoutRef, FormEventHandler, MouseEventHandler, PropsWithChildren, DetailedHTMLProps, HTMLAttributes, ComponentType, Dispatch } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IntlShape } from 'react-intl';
 
+declare const buttonStyles: (props?: ({
+    intent?: "primary" | "secondary" | null | undefined;
+    size?: "default" | "large" | null | undefined;
+    defaultVariants?: "intent" | "size" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonVariants = VariantProps<typeof buttonStyles>;
+
 type OryNodeButtonProps = {
     attributes: UiNodeInputAttributes;
     node: UiNode;
-} & Omit<ComponentPropsWithoutRef<"button">, "children">;
+} & Omit<ComponentPropsWithoutRef<"button">, "children"> & ButtonVariants;
 type OryCurrentIdentifierProps = {
     attributes: UiNodeInputAttributes;
     node: UiNode;
@@ -50,6 +59,11 @@ type OryNodeInputProps = {
     node: UiNode;
     onClick?: MouseEventHandler;
 };
+type OryFormSectionContentProps = PropsWithChildren<{
+    title?: string;
+    description?: string;
+}>;
+type OryFormSectionFooterProps = PropsWithChildren;
 
 type OryCardHeaderProps = Record<string, never>;
 declare function OryCardHeader(): react_jsx_runtime.JSX.Element;
@@ -130,6 +144,46 @@ type OryNodeOidcButtonProps = {
 declare function OryFormOidcButtons({ children, hideDivider, }: OryFormOidcButtonsProps): react_jsx_runtime.JSX.Element | null;
 declare function OryFormSocialButtonsForm(): react_jsx_runtime.JSX.Element | null;
 
+type OryPageHeaderProps = Record<never, never>;
+declare const HeadlessPageHeader: () => react_jsx_runtime.JSX.Element;
+
+type OryFormSectionProps = PropsWithChildren<{
+    nodes?: UiNode[];
+}>;
+declare function OryFormSection({ children, nodes }: OryFormSectionProps): react_jsx_runtime.JSX.Element;
+
+declare function OrySettingsCard(): react_jsx_runtime.JSX.Element;
+
+type OrySettingsRecoveryCodesProps = {
+    codes: string[];
+    regnerateButton?: UiNode;
+    revealButton?: UiNode;
+};
+type OrySettingsTotpProps = {
+    totpImage: UiNode;
+    totpSecret: UiNode;
+    totpInput: UiNode;
+} | {
+    totpUnlink: UiNode;
+};
+type OrySettingsOidcProps = {
+    linkButtons: UiNode[];
+    unlinkButtons: UiNode[];
+};
+type OrySettingsWebauthnProps = {
+    nameInput: UiNode;
+    triggerButton: UiNode & {
+        onClick: () => void;
+    };
+    removeButtons: UiNode[];
+};
+type OrySettingsPasskeyProps = {
+    triggerButton: UiNode & {
+        onClick: () => void;
+    };
+    removeButtons: UiNode[];
+};
+
 /**
  * A record of all the components that are used in the OryForm component.
  */
@@ -213,6 +267,18 @@ type OryFlowComponents = {
          * This is only used, if login is configured to use identifier_first authentication.
          */
         AuthMethodListItem: ComponentType<OryCardAuthMethodListItemProps>;
+        /**
+         * The SettingsSection component is rendered around each section of the settings.
+         */
+        SettingsSection: ComponentType<OryFormSectionProps>;
+        /**
+         * The SettingsSectionContent component is rendered around the content of each section of the settings.
+         */
+        SettingsSectionContent: ComponentType<OryFormSectionContentProps>;
+        /**
+         * The SettingsSectionFooter component is rendered around the footer of each section of the settings.
+         */
+        SettingsSectionFooter: ComponentType<OryFormSectionContentProps>;
     };
     Form: {
         /**
@@ -235,6 +301,26 @@ type OryFlowComponents = {
          * The FormGroup is rendered around each group of nodes in the UI nodes.
          */
         Group: ComponentType<OryFormGroupProps>;
+        /**
+         * The section on the settings page, rendering the OIDC settings
+         */
+        OidcSettings: ComponentType<OrySettingsOidcProps>;
+        /**
+         * The section on the settings page, rendering the Webauthn settings
+         */
+        WebauthnSettings: ComponentType<OrySettingsWebauthnProps>;
+        /**
+         * The section on the settings page, rendering the Passkey settings
+         */
+        PasskeySettings: ComponentType<OrySettingsPasskeyProps>;
+        /**
+         * The section on the settings page, rendering the TOTP settings
+         */
+        TotpSettings: ComponentType<OrySettingsTotpProps>;
+        /**
+         * The section on the settings page, rendering the recovery code settings
+         */
+        RecoveryCodesSettings: ComponentType<OrySettingsRecoveryCodesProps>;
     };
     Message: {
         /**
@@ -246,6 +332,9 @@ type OryFlowComponents = {
          */
         Content: ComponentType<OryMessageContentProps>;
     };
+    Page: {
+        Header: ComponentType<OryPageHeaderProps>;
+    };
 };
 type DeepPartialTwoLevels<T> = {
     [P in keyof T]?: T[P] extends object ? {
@@ -253,8 +342,11 @@ type DeepPartialTwoLevels<T> = {
     } : T[P];
 };
 type OryFlowComponentOverrides = DeepPartialTwoLevels<OryFlowComponents>;
-type OryFormProps = PropsWithChildren;
-declare function OryForm({ children }: OryFormProps): string | react_jsx_runtime.JSX.Element;
+type OryFormProps = PropsWithChildren<{
+    onAfterSubmit?: (method: string | number | boolean | undefined) => void;
+    nodes?: UiNode[];
+}>;
+declare function OryForm({ children, onAfterSubmit, nodes }: OryFormProps): string | react_jsx_runtime.JSX.Element;
 
 declare function useComponents(): OryFlowComponents;
 declare function useNodeSorter(): (a: UiNode, b: UiNode, ctx: {
@@ -454,20 +546,4 @@ declare function messageTestId(message: UiText): {
     "data-testid": string;
 };
 
-/**
- * A hook to get the current session from the Ory Network.
- *
- * Usage:
- * ```ts
- * const { session, error, isLoading } = useSession()
- * ```
- *
- * @returns The current session, error and loading state.
- */
-declare const useSession: () => {
-    session: Session | undefined;
-    error: string | undefined;
-    isLoading: boolean;
-};
-
-export { type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormValues, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, OryCardValidationMessages, type OryClientConfiguration, type OryCurrentIdentifierProps, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcButtonsProps, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSocialButtonsForm, locales as OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, OryProvider, type OryProviderProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow, useSession };
+export { type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, OryCardValidationMessages, type OryClientConfiguration, type OryCurrentIdentifierProps, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcButtonsProps, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, locales as OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };