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

package/api-report/elements-react.api.md

@@ -4,6 +4,7 @@
 
 ```ts
 
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import { ComponentPropsWithoutRef } from 'react';
 import { ComponentType } from 'react';
 import { ConfigurationParameters } from '@ory/client-fetch';
@@ -35,6 +36,7 @@ import { UpdateRecoveryFlowBody } from '@ory/client-fetch';
 import { UpdateRegistrationFlowBody } from '@ory/client-fetch';
 import { UpdateSettingsFlowBody } from '@ory/client-fetch';
 import { UpdateVerificationFlowBody } from '@ory/client-fetch';
+import { VariantProps } from 'class-variance-authority';
 import { VerificationFlow } from '@ory/client-fetch';
 
 // Warning: (ae-forgotten-export) The symbol "OryFlow" needs to be exported by the entry point index.d.ts
@@ -53,6 +55,9 @@ export type FlowContextValue = OryFlowContainer & {
 // @public
 export type FormValues = Record<string, string | boolean | number | undefined>;
 
+// @public (undocumented)
+export const HeadlessPageHeader: () => react_jsx_runtime.JSX.Element;
+
 // Warning: (ae-forgotten-export) The symbol "IntlContextProps" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -169,23 +174,34 @@ export type OryFlowComponents = {
         Logo: ComponentType<OryCardLogoProps>;
         Divider: ComponentType<OryCardDividerProps>;
         AuthMethodListItem: ComponentType<OryCardAuthMethodListItemProps>;
+        SettingsSection: ComponentType<OryFormSectionProps>;
+        SettingsSectionContent: ComponentType<OryFormSectionContentProps>;
+        SettingsSectionFooter: ComponentType<OryFormSectionContentProps>;
     };
     Form: {
         Root: ComponentType<OryFormRootProps>;
         OidcRoot: ComponentType<OryFormOidcRootProps>;
         Group: ComponentType<OryFormGroupProps>;
+        OidcSettings: ComponentType<OrySettingsOidcProps>;
+        WebauthnSettings: ComponentType<OrySettingsWebauthnProps>;
+        PasskeySettings: ComponentType<OrySettingsPasskeyProps>;
+        TotpSettings: ComponentType<OrySettingsTotpProps>;
+        RecoveryCodesSettings: ComponentType<OrySettingsRecoveryCodesProps>;
     };
     Message: {
         Root: ComponentType<OryMessageRootProps>;
         Content: ComponentType<OryMessageContentProps>;
     };
+    Page: {
+        Header: ComponentType<OryPageHeaderProps>;
+    };
 };
 
 // @public
 export type OryFlowContainer = LoginFlowContainer | RegistrationFlowContainer | RecoveryFlowContainer | VerificationFlowContainer | SettingsFlowContainer;
 
 // @public (undocumented)
-export function OryForm({ children }: OryFormProps): string | react_jsx_runtime.JSX.Element;
+export function OryForm({ children, onAfterSubmit, nodes }: OryFormProps): string | react_jsx_runtime.JSX.Element;
 
 // @public
 export function OryFormGroupDivider(): react_jsx_runtime.JSX.Element | null;
@@ -215,13 +231,33 @@ export type OryFormOidcRootProps = PropsWithChildren<{
 }>;
 
 // @public (undocumented)
-export type OryFormProps = PropsWithChildren;
+export type OryFormProps = PropsWithChildren<{
+    onAfterSubmit?: (method: string | number | boolean | undefined) => void;
+    nodes?: UiNode[];
+}>;
 
 // @public (undocumented)
 export type OryFormRootProps = ComponentPropsWithoutRef<"form"> & {
     onSubmit: FormEventHandler<HTMLFormElement>;
 };
 
+// @public (undocumented)
+export function OryFormSection({ children, nodes }: OryFormSectionProps): react_jsx_runtime.JSX.Element;
+
+// @public (undocumented)
+export type OryFormSectionContentProps = PropsWithChildren<{
+    title?: string;
+    description?: string;
+}>;
+
+// @public (undocumented)
+export type OryFormSectionFooterProps = PropsWithChildren;
+
+// @public (undocumented)
+export type OryFormSectionProps = PropsWithChildren<{
+    nodes?: UiNode[];
+}>;
+
 // @public (undocumented)
 export function OryFormSocialButtonsForm(): react_jsx_runtime.JSX.Element | null;
 
@@ -244,11 +280,13 @@ export type OryNodeAnchorProps = {
     node: UiNode;
 } & Omit<ComponentPropsWithoutRef<"a">, "children">;
 
+// Warning: (ae-forgotten-export) The symbol "ButtonVariants" needs to be exported by the entry point index.d.ts
+//
 // @public (undocumented)
 export type OryNodeButtonProps = {
     attributes: UiNodeInputAttributes;
     node: UiNode;
-} & Omit<ComponentPropsWithoutRef<"button">, "children">;
+} & Omit<ComponentPropsWithoutRef<"button">, "children"> & ButtonVariants;
 
 // @public (undocumented)
 export type OryNodeImageProps = {
@@ -282,6 +320,9 @@ export type OryNodeTextProps = {
     node: UiNode;
 };
 
+// @public (undocumented)
+export type OryPageHeaderProps = Record<never, never>;
+
 // @public (undocumented)
 export function OryProvider({ children, components: Components, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
 
@@ -290,6 +331,48 @@ export type OryProviderProps = {
     components: OryFlowComponents;
 } & OryFlowContainer & PropsWithChildren;
 
+// @public (undocumented)
+export function OrySettingsCard(): react_jsx_runtime.JSX.Element;
+
+// @public (undocumented)
+export type OrySettingsOidcProps = {
+    linkButtons: UiNode[];
+    unlinkButtons: UiNode[];
+};
+
+// @public (undocumented)
+export type OrySettingsPasskeyProps = {
+    triggerButton: UiNode & {
+        onClick: () => void;
+    };
+    removeButtons: UiNode[];
+};
+
+// @public (undocumented)
+export type OrySettingsRecoveryCodesProps = {
+    codes: string[];
+    regnerateButton?: UiNode;
+    revealButton?: UiNode;
+};
+
+// @public (undocumented)
+export type OrySettingsTotpProps = {
+    totpImage: UiNode;
+    totpSecret: UiNode;
+    totpInput: UiNode;
+} | {
+    totpUnlink: UiNode;
+};
+
+// @public (undocumented)
+export type OrySettingsWebauthnProps = {
+    nameInput: UiNode;
+    triggerButton: UiNode & {
+        onClick: () => void;
+    };
+    removeButtons: UiNode[];
+};
+
 // @public (undocumented)
 export function OryTwoStepCard(): react_jsx_runtime.JSX.Element;
 

package/api-report/temp/elements-react-theme.api.md

@@ -25,6 +25,7 @@ import { UiNodeImageAttributes } from '@ory/client-fetch';
 import { UiNodeInputAttributes } from '@ory/client-fetch';
 import { UiNodeTextAttributes } from '@ory/client-fetch';
 import { UiText } from '@ory/client-fetch';
+import { VariantProps } from 'class-variance-authority';
 import { VerificationFlow } from '@ory/client-fetch';
 
 // Warning: (ae-forgotten-export) The symbol "OryCardRootProps" needs to be exported by the entry point index.d.ts

package/api-report/temp/elements-react.api.md

@@ -4,6 +4,7 @@
 
 ```ts
 
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import { ComponentPropsWithoutRef } from 'react';
 import { ComponentType } from 'react';
 import { ConfigurationParameters } from '@ory/client-fetch';
@@ -35,6 +36,7 @@ import { UpdateRecoveryFlowBody } from '@ory/client-fetch';
 import { UpdateRegistrationFlowBody } from '@ory/client-fetch';
 import { UpdateSettingsFlowBody } from '@ory/client-fetch';
 import { UpdateVerificationFlowBody } from '@ory/client-fetch';
+import { VariantProps } from 'class-variance-authority';
 import { VerificationFlow } from '@ory/client-fetch';
 
 // Warning: (ae-forgotten-export) The symbol "OryFlow" needs to be exported by the entry point index.d.ts
@@ -53,6 +55,9 @@ export type FlowContextValue = OryFlowContainer & {
 // @public
 export type FormValues = Record<string, string | boolean | number | undefined>;
 
+// @public (undocumented)
+export const HeadlessPageHeader: () => react_jsx_runtime.JSX.Element;
+
 // Warning: (ae-forgotten-export) The symbol "IntlContextProps" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -169,23 +174,34 @@ export type OryFlowComponents = {
         Logo: ComponentType<OryCardLogoProps>;
         Divider: ComponentType<OryCardDividerProps>;
         AuthMethodListItem: ComponentType<OryCardAuthMethodListItemProps>;
+        SettingsSection: ComponentType<OryFormSectionProps>;
+        SettingsSectionContent: ComponentType<OryFormSectionContentProps>;
+        SettingsSectionFooter: ComponentType<OryFormSectionContentProps>;
     };
     Form: {
         Root: ComponentType<OryFormRootProps>;
         OidcRoot: ComponentType<OryFormOidcRootProps>;
         Group: ComponentType<OryFormGroupProps>;
+        OidcSettings: ComponentType<OrySettingsOidcProps>;
+        WebauthnSettings: ComponentType<OrySettingsWebauthnProps>;
+        PasskeySettings: ComponentType<OrySettingsPasskeyProps>;
+        TotpSettings: ComponentType<OrySettingsTotpProps>;
+        RecoveryCodesSettings: ComponentType<OrySettingsRecoveryCodesProps>;
     };
     Message: {
         Root: ComponentType<OryMessageRootProps>;
         Content: ComponentType<OryMessageContentProps>;
     };
+    Page: {
+        Header: ComponentType<OryPageHeaderProps>;
+    };
 };
 
 // @public
 export type OryFlowContainer = LoginFlowContainer | RegistrationFlowContainer | RecoveryFlowContainer | VerificationFlowContainer | SettingsFlowContainer;
 
 // @public (undocumented)
-export function OryForm({ children }: OryFormProps): string | react_jsx_runtime.JSX.Element;
+export function OryForm({ children, onAfterSubmit, nodes }: OryFormProps): string | react_jsx_runtime.JSX.Element;
 
 // @public
 export function OryFormGroupDivider(): react_jsx_runtime.JSX.Element | null;
@@ -215,13 +231,33 @@ export type OryFormOidcRootProps = PropsWithChildren<{
 }>;
 
 // @public (undocumented)
-export type OryFormProps = PropsWithChildren;
+export type OryFormProps = PropsWithChildren<{
+    onAfterSubmit?: (method: string | number | boolean | undefined) => void;
+    nodes?: UiNode[];
+}>;
 
 // @public (undocumented)
 export type OryFormRootProps = ComponentPropsWithoutRef<"form"> & {
     onSubmit: FormEventHandler<HTMLFormElement>;
 };
 
+// @public (undocumented)
+export function OryFormSection({ children, nodes }: OryFormSectionProps): react_jsx_runtime.JSX.Element;
+
+// @public (undocumented)
+export type OryFormSectionContentProps = PropsWithChildren<{
+    title?: string;
+    description?: string;
+}>;
+
+// @public (undocumented)
+export type OryFormSectionFooterProps = PropsWithChildren;
+
+// @public (undocumented)
+export type OryFormSectionProps = PropsWithChildren<{
+    nodes?: UiNode[];
+}>;
+
 // @public (undocumented)
 export function OryFormSocialButtonsForm(): react_jsx_runtime.JSX.Element | null;
 
@@ -244,11 +280,13 @@ export type OryNodeAnchorProps = {
     node: UiNode;
 } & Omit<ComponentPropsWithoutRef<"a">, "children">;
 
+// Warning: (ae-forgotten-export) The symbol "ButtonVariants" needs to be exported by the entry point index.d.ts
+//
 // @public (undocumented)
 export type OryNodeButtonProps = {
     attributes: UiNodeInputAttributes;
     node: UiNode;
-} & Omit<ComponentPropsWithoutRef<"button">, "children">;
+} & Omit<ComponentPropsWithoutRef<"button">, "children"> & ButtonVariants;
 
 // @public (undocumented)
 export type OryNodeImageProps = {
@@ -282,6 +320,9 @@ export type OryNodeTextProps = {
     node: UiNode;
 };
 
+// @public (undocumented)
+export type OryPageHeaderProps = Record<never, never>;
+
 // @public (undocumented)
 export function OryProvider({ children, components: Components, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
 
@@ -290,6 +331,48 @@ export type OryProviderProps = {
     components: OryFlowComponents;
 } & OryFlowContainer & PropsWithChildren;
 
+// @public (undocumented)
+export function OrySettingsCard(): react_jsx_runtime.JSX.Element;
+
+// @public (undocumented)
+export type OrySettingsOidcProps = {
+    linkButtons: UiNode[];
+    unlinkButtons: UiNode[];
+};
+
+// @public (undocumented)
+export type OrySettingsPasskeyProps = {
+    triggerButton: UiNode & {
+        onClick: () => void;
+    };
+    removeButtons: UiNode[];
+};
+
+// @public (undocumented)
+export type OrySettingsRecoveryCodesProps = {
+    codes: string[];
+    regnerateButton?: UiNode;
+    revealButton?: UiNode;
+};
+
+// @public (undocumented)
+export type OrySettingsTotpProps = {
+    totpImage: UiNode;
+    totpSecret: UiNode;
+    totpInput: UiNode;
+} | {
+    totpUnlink: UiNode;
+};
+
+// @public (undocumented)
+export type OrySettingsWebauthnProps = {
+    nameInput: UiNode;
+    triggerButton: UiNode & {
+        onClick: () => void;
+    };
+    removeButtons: UiNode[];
+};
+
 // @public (undocumented)
 export function OryTwoStepCard(): react_jsx_runtime.JSX.Element;
 

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 { 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: {
@@ -470,4 +562,4 @@ declare const useSession: () => {
     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, useSession };

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 { 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: {
@@ -470,4 +562,4 @@ declare const useSession: () => {
     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, useSession };