@clerk/expo-native-components 0.0.0-stage → 0.0.1

package/dist/UserButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserButton.js","names":["NativeClerkUserButtonView","isNativeSupported","UserProfileCustomPageHosts","StyleSheet"],"sources":["../src/UserButton.tsx"],"sourcesContent":["import type { ComponentProps, ComponentType, JSX, Ref } from 'react';\nimport { useMemo, useRef } from 'react';\nimport type { NativeSyntheticEvent } from 'react-native';\nimport { StyleSheet, useWindowDimensions } from 'react-native';\n\nimport NativeClerkUserButtonView from './specs/NativeClerkUserButtonView';\nimport type {\n  NativeUserProfileNavigationHandle,\n  UserProfileCustomDestination,\n  UserProfileCustomPage,\n  UserProfileCustomPageEvent,\n} from './UserProfileCustomPages';\nimport {\n  serializeUserProfileCustomPages,\n  UserProfileCustomPageHosts,\n  useUserProfileCustomPages,\n} from './UserProfileCustomPages';\nimport { isNativeSupported } from './utils/native-module';\n\ntype CustomizableNativeUserButtonProps = ComponentProps<NonNullable<typeof NativeClerkUserButtonView>> & {\n  customPages?: string;\n  onCustomPageEvent?: (event: NativeSyntheticEvent<UserProfileCustomPageEvent>) => void;\n  ref?: Ref<NativeUserProfileNavigationHandle>;\n};\n\nconst CustomizableNativeClerkUserButtonView =\n  NativeClerkUserButtonView as ComponentType<CustomizableNativeUserButtonProps> | null;\n\nexport interface UserButtonUserProfileProps {\n  /** Custom pages displayed as rows in the user profile. */\n  customPages?: UserProfileCustomPage[];\n\n  /** Custom destinations that can be pushed from a custom page without creating a profile row. */\n  customDestinations?: UserProfileCustomDestination[];\n}\n\nexport interface UserButtonProps {\n  /** Configuration passed to the user profile opened by the button. */\n  userProfileProps?: UserButtonUserProfileProps;\n}\n\n/**\n * A pre-built button component that displays the user's avatar.\n *\n * `UserButton` renders the platform-native Clerk user button. Tapping it opens\n * the native user profile surface, matching Clerk's iOS and Android SDKs.\n *\n * @example\n * ```tsx\n * import { UserButton } from '@clerk/expo-native-components';\n *\n * export default function Home() {\n *   return (\n *     <UserButton\n *       userProfileProps={{\n *         customPages: [{ path: 'api-keys', label: 'API keys', icon: 'key', content: <APIKeysView /> }],\n *       }}\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link UserProfileView} The profile view to render in your own presentation surface\n * @see {@link https://clerk.com/docs/components/user/user-button} Clerk UserButton Documentation\n */\nexport function UserButton({ userProfileProps }: UserButtonProps): JSX.Element | null {\n  const nativeViewRef = useRef<NativeUserProfileNavigationHandle>(null);\n  const customPages = userProfileProps?.customPages;\n  const customDestinations = userProfileProps?.customDestinations;\n  const customRoutes = useMemo(\n    () => [...(customPages ?? []), ...(customDestinations ?? [])],\n    [customDestinations, customPages],\n  );\n  const { navigation, presentedPaths, onCustomPageEvent } = useUserProfileCustomPages(customRoutes, nativeViewRef);\n  const { width, height } = useWindowDimensions();\n\n  if (!isNativeSupported || !CustomizableNativeClerkUserButtonView) {\n    return null;\n  }\n\n  return (\n    <CustomizableNativeClerkUserButtonView\n      ref={nativeViewRef}\n      style={styles.host}\n      customPages={serializeUserProfileCustomPages(customPages ?? [], customDestinations ?? [])}\n      onCustomPageEvent={onCustomPageEvent}\n    >\n      <UserProfileCustomPageHosts\n        customRoutes={customRoutes}\n        presentedPaths={presentedPaths}\n        navigation={navigation}\n        style={{ width, height }}\n      />\n    </CustomizableNativeClerkUserButtonView>\n  );\n}\n\nconst styles = StyleSheet.create({\n  // React Native/Yoga does not infer the intrinsic size of this native host view.\n  host: {\n    width: 36,\n    height: 36,\n  },\n});\n"],"mappings":";;;;;;;;;;;AAyBA,MAAM,wCACJA;;;;;;;;;;;;;;;;;;;;;;;;;AAuCF,SAAgB,WAAW,EAAE,oBAAyD;CACpF,MAAM,kCAA0D,IAAI;CACpE,MAAM,cAAc,kBAAkB;CACtC,MAAM,qBAAqB,kBAAkB;CAC7C,MAAM,wCACE,CAAC,GAAI,eAAe,CAAC,GAAI,GAAI,sBAAsB,CAAC,CAAE,GAC5D,CAAC,oBAAoB,WAAW,CAClC;CACA,MAAM,EAAE,YAAY,gBAAgB,gFAAgD,cAAc,aAAa;CAC/G,MAAM,EAAE,OAAO,iDAA+B;CAE9C,IAAI,CAACC,6CAAqB,CAAC,uCACzB,OAAO;CAGT,OACE,2CAAC,uCAAD;EACE,KAAK;EACL,OAAO,OAAO;EACd,6EAA6C,eAAe,CAAC,GAAG,sBAAsB,CAAC,CAAC;EACrE;YAEnB,2CAACC,uDAAD;GACgB;GACE;GACJ;GACZ,OAAO;IAAE;IAAO;GAAO;EACxB;CACoC;AAE3C;AAEA,MAAM,SAASC,wBAAW,OAAO,EAE/B,MAAM;CACJ,OAAO;CACP,QAAQ;AACV,EACF,CAAC"}

package/dist/UserProfileCustomPages.d.ts

@@ -0,0 +1,81 @@
+import type { ReactNode, RefObject } from 'react';
+import type { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
+export type UserProfileCustomPageIcon = 'user' | 'profile' | 'security' | 'settings' | 'billing' | 'key' | 'lock' | 'email' | 'phone' | 'add' | 'switch' | 'users' | 'warning' | 'info' | 'globe' | 'folder' | 'book';
+export type UserProfileSection = 'profile' | 'account';
+export type UserProfileRow = 'manageAccount' | 'security' | 'switchAccount' | 'addAccount' | 'signOut';
+export type UserProfileCustomPagePlacement = {
+    type: 'sectionStart';
+    section: UserProfileSection;
+} | {
+    type: 'sectionEnd';
+    section: UserProfileSection;
+} | {
+    type: 'before';
+    row: UserProfileRow;
+} | {
+    type: 'after';
+    row: UserProfileRow;
+};
+interface UserProfileCustomDestinationBase {
+    /** Unique path used to identify and navigate to the page. */
+    path: string;
+    /** Text displayed in the native navigation title and, for root pages, the profile row. */
+    label: string;
+}
+interface UserProfileCustomPageBase extends UserProfileCustomDestinationBase {
+    /** Icon displayed in the native user profile row. */
+    icon?: UserProfileCustomPageIcon;
+    /** Where the row is inserted relative to Clerk's built-in rows. */
+    placement?: UserProfileCustomPagePlacement;
+}
+/** A custom page rendered from the root of the native user profile. */
+export type UserProfileCustomPage = UserProfileCustomPageBase & ({
+    /** React Native content rendered when the row is selected. */
+    content: ReactNode;
+    href?: never;
+} | {
+    /** URL opened when the row is selected. */
+    href: string;
+    content?: never;
+});
+/** A custom destination reached by pushing from another custom user profile page. */
+export type UserProfileCustomDestination = UserProfileCustomDestinationBase & {
+    /** React Native content rendered when the destination is pushed. */
+    content: ReactNode;
+};
+type UserProfileCustomRoute = UserProfileCustomPage | UserProfileCustomDestination;
+export type UserProfileCustomPageEvent = Readonly<{
+    type: 'presented' | 'dismissed';
+    path: string;
+}>;
+/** Navigation available to content rendered by a custom user profile page. */
+export interface UserProfileCustomPageNavigation {
+    /** Navigates back one screen in the native user profile. */
+    navigateBack: () => Promise<void>;
+    /** Returns to the root user profile screen. */
+    popToRoot: () => Promise<void>;
+    /**
+     * Pushes another registered custom page or custom destination by path.
+     * Rejects when that path is already active in the navigation stack.
+     */
+    push: (path: string) => Promise<void>;
+}
+export interface NativeUserProfileNavigationHandle {
+    navigateCustomPage: (action: 'back' | 'popToRoot' | 'push', path?: string) => Promise<void>;
+}
+/** Returns navigation actions for the currently rendered custom user profile destination. */
+export declare function useUserProfileCustomPageNavigation(): UserProfileCustomPageNavigation;
+export declare function serializeUserProfileCustomPages(customPages: UserProfileCustomPage[], customDestinations?: UserProfileCustomDestination[]): string;
+export declare function useUserProfileCustomPages(customRoutes: UserProfileCustomRoute[], navigationHandleRef: RefObject<NativeUserProfileNavigationHandle | null>): {
+    navigation: UserProfileCustomPageNavigation;
+    presentedPaths: ReadonlySet<string>;
+    onCustomPageEvent: (event: NativeSyntheticEvent<UserProfileCustomPageEvent>) => void;
+};
+export declare function UserProfileCustomPageHosts({ customRoutes, presentedPaths, navigation, style, }: {
+    customRoutes: UserProfileCustomRoute[];
+    presentedPaths: ReadonlySet<string>;
+    navigation: UserProfileCustomPageNavigation;
+    style?: StyleProp<ViewStyle>;
+}): import("react/jsx-runtime").JSX.Element[];
+export {};
+//# sourceMappingURL=UserProfileCustomPages.d.ts.map

package/dist/UserProfileCustomPages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserProfileCustomPages.d.ts","sourceRoot":"","sources":["../src/UserProfileCustomPages.tsx"],"names":[],"mappings":"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"}

package/dist/UserProfileCustomPages.js

@@ -0,0 +1,140 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+let react = require("react");
+let react_native = require("react-native");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/UserProfileCustomPages.tsx
+const UserProfileCustomPageNavigationContext = (0, react.createContext)(null);
+/** Returns navigation actions for the currently rendered custom user profile destination. */
+function useUserProfileCustomPageNavigation() {
+	const navigation = (0, react.useContext)(UserProfileCustomPageNavigationContext);
+	if (!navigation) throw new Error("useUserProfileCustomPageNavigation must be used inside a custom user profile page.");
+	return navigation;
+}
+function serializeUserProfileCustomPages(customPages, customDestinations = []) {
+	const paths = /* @__PURE__ */ new Set();
+	for (const { path } of [...customPages, ...customDestinations]) {
+		if (paths.has(path)) throw new Error(`User profile custom page path "${path}" must be unique.`);
+		paths.add(path);
+	}
+	return JSON.stringify([...customPages.map((page) => ({
+		path: page.path,
+		label: page.label,
+		icon: page.icon ?? "settings",
+		placement: page.placement ?? {
+			type: "sectionEnd",
+			section: "profile"
+		}
+	})), ...customDestinations.map((destination) => ({
+		path: destination.path,
+		label: destination.label,
+		icon: "settings",
+		placement: {
+			type: "sectionEnd",
+			section: "profile"
+		},
+		showAsRow: false
+	}))]);
+}
+function useUserProfileCustomPages(customRoutes, navigationHandleRef) {
+	const [presentedPaths, setPresentedPaths] = (0, react.useState)(() => /* @__PURE__ */ new Set());
+	const presentedPathStack = (0, react.useRef)([]);
+	const isPoppingToRoot = (0, react.useRef)(false);
+	const openingPaths = (0, react.useRef)(/* @__PURE__ */ new Set());
+	const updatePresentedPaths = (0, react.useCallback)((update) => {
+		const currentPaths = presentedPathStack.current;
+		const nextPaths = update(currentPaths);
+		if (nextPaths === currentPaths) return;
+		presentedPathStack.current = nextPaths;
+		setPresentedPaths(new Set(nextPaths));
+	}, []);
+	const onCustomPageEvent = (0, react.useCallback)((event) => {
+		const { path, type } = event.nativeEvent;
+		if (type === "dismissed") {
+			updatePresentedPaths((currentPaths) => {
+				const pathIndex = currentPaths.lastIndexOf(path);
+				if (pathIndex === -1) return currentPaths;
+				if (isPoppingToRoot.current) {
+					isPoppingToRoot.current = false;
+					return [];
+				}
+				if (pathIndex !== currentPaths.length - 1) return currentPaths;
+				return currentPaths.slice(0, pathIndex);
+			});
+			return;
+		}
+		const page = customRoutes.find((candidate) => candidate.path === path);
+		if (!page) return;
+		updatePresentedPaths((currentPaths) => currentPaths.includes(path) ? currentPaths : [...currentPaths, path]);
+		if ("href" in page && page.href) {
+			if (openingPaths.current.has(path)) return;
+			openingPaths.current.add(path);
+			react_native.Linking.openURL(page.href).catch((error) => {
+				console.warn(`Could not open custom user profile page "${path}".`, error);
+			}).finally(() => {
+				openingPaths.current.delete(path);
+				navigationHandleRef.current?.navigateCustomPage("back");
+			});
+			return;
+		}
+	}, [
+		customRoutes,
+		navigationHandleRef,
+		updatePresentedPaths
+	]);
+	return {
+		navigation: (0, react.useMemo)(() => ({
+			navigateBack: () => navigationHandleRef.current?.navigateCustomPage("back") ?? Promise.resolve(),
+			popToRoot: () => {
+				const navigationHandle = navigationHandleRef.current;
+				if (!navigationHandle) return Promise.resolve();
+				isPoppingToRoot.current = presentedPathStack.current.length > 0;
+				return navigationHandle.navigateCustomPage("popToRoot").catch((error) => {
+					isPoppingToRoot.current = false;
+					throw error;
+				});
+			},
+			push: (path) => {
+				const navigationHandle = navigationHandleRef.current;
+				if (!navigationHandle) return Promise.resolve();
+				if (!customRoutes.some((route) => route.path === path)) return Promise.reject(/* @__PURE__ */ new Error(`No custom user profile page or destination is registered for path "${path}".`));
+				if (presentedPathStack.current.includes(path)) return Promise.reject(/* @__PURE__ */ new Error(`Custom user profile page or destination "${path}" is already in the navigation stack.`));
+				updatePresentedPaths((currentPaths) => [...currentPaths, path]);
+				return navigationHandle.navigateCustomPage("push", path).catch((error) => {
+					updatePresentedPaths((currentPaths) => currentPaths[currentPaths.length - 1] === path ? currentPaths.slice(0, -1) : currentPaths);
+					throw error;
+				});
+			}
+		}), [
+			customRoutes,
+			navigationHandleRef,
+			updatePresentedPaths
+		]),
+		presentedPaths,
+		onCustomPageEvent
+	};
+}
+function UserProfileCustomPageHosts({ customRoutes, presentedPaths, navigation, style }) {
+	return customRoutes.map((page) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+		collapsable: false,
+		style: [styles.destination, style],
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UserProfileCustomPageNavigationContext.Provider, {
+			value: navigation,
+			children: presentedPaths.has(page.path) && "content" in page ? page.content : null
+		})
+	}, page.path));
+}
+const styles = react_native.StyleSheet.create({ destination: {
+	position: "absolute",
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0
+} });
+
+//#endregion
+exports.UserProfileCustomPageHosts = UserProfileCustomPageHosts;
+exports.serializeUserProfileCustomPages = serializeUserProfileCustomPages;
+exports.useUserProfileCustomPageNavigation = useUserProfileCustomPageNavigation;
+exports.useUserProfileCustomPages = useUserProfileCustomPages;
+//# sourceMappingURL=UserProfileCustomPages.js.map

package/dist/UserProfileCustomPages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserProfileCustomPages.js","names":["Linking","View","StyleSheet"],"sources":["../src/UserProfileCustomPages.tsx"],"sourcesContent":["import type { ReactNode, RefObject } from 'react';\nimport { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';\nimport type { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';\nimport { Linking, StyleSheet, View } from 'react-native';\n\nexport type UserProfileCustomPageIcon =\n  | 'user'\n  | 'profile'\n  | 'security'\n  | 'settings'\n  | 'billing'\n  | 'key'\n  | 'lock'\n  | 'email'\n  | 'phone'\n  | 'add'\n  | 'switch'\n  | 'users'\n  | 'warning'\n  | 'info'\n  | 'globe'\n  | 'folder'\n  | 'book';\n\nexport type UserProfileSection = 'profile' | 'account';\n\nexport type UserProfileRow = 'manageAccount' | 'security' | 'switchAccount' | 'addAccount' | 'signOut';\n\nexport type UserProfileCustomPagePlacement =\n  | { type: 'sectionStart'; section: UserProfileSection }\n  | { type: 'sectionEnd'; section: UserProfileSection }\n  | { type: 'before'; row: UserProfileRow }\n  | { type: 'after'; row: UserProfileRow };\n\ninterface UserProfileCustomDestinationBase {\n  /** Unique path used to identify and navigate to the page. */\n  path: string;\n\n  /** Text displayed in the native navigation title and, for root pages, the profile row. */\n  label: string;\n}\n\ninterface UserProfileCustomPageBase extends UserProfileCustomDestinationBase {\n  /** Icon displayed in the native user profile row. */\n  icon?: UserProfileCustomPageIcon;\n\n  /** Where the row is inserted relative to Clerk's built-in rows. */\n  placement?: UserProfileCustomPagePlacement;\n}\n\n/** A custom page rendered from the root of the native user profile. */\nexport type UserProfileCustomPage = UserProfileCustomPageBase &\n  (\n    | {\n        /** React Native content rendered when the row is selected. */\n        content: ReactNode;\n        href?: never;\n      }\n    | {\n        /** URL opened when the row is selected. */\n        href: string;\n        content?: never;\n      }\n  );\n\n/** A custom destination reached by pushing from another custom user profile page. */\nexport type UserProfileCustomDestination = UserProfileCustomDestinationBase & {\n  /** React Native content rendered when the destination is pushed. */\n  content: ReactNode;\n};\n\ntype UserProfileCustomRoute = UserProfileCustomPage | UserProfileCustomDestination;\n\nexport type UserProfileCustomPageEvent = Readonly<{\n  type: 'presented' | 'dismissed';\n  path: string;\n}>;\n\n/** Navigation available to content rendered by a custom user profile page. */\nexport interface UserProfileCustomPageNavigation {\n  /** Navigates back one screen in the native user profile. */\n  navigateBack: () => Promise<void>;\n\n  /** Returns to the root user profile screen. */\n  popToRoot: () => Promise<void>;\n\n  /**\n   * Pushes another registered custom page or custom destination by path.\n   * Rejects when that path is already active in the navigation stack.\n   */\n  push: (path: string) => Promise<void>;\n}\n\nexport interface NativeUserProfileNavigationHandle {\n  navigateCustomPage: (action: 'back' | 'popToRoot' | 'push', path?: string) => Promise<void>;\n}\n\nconst UserProfileCustomPageNavigationContext = createContext<UserProfileCustomPageNavigation | null>(null);\n\n/** Returns navigation actions for the currently rendered custom user profile destination. */\nexport function useUserProfileCustomPageNavigation(): UserProfileCustomPageNavigation {\n  const navigation = useContext(UserProfileCustomPageNavigationContext);\n\n  if (!navigation) {\n    throw new Error('useUserProfileCustomPageNavigation must be used inside a custom user profile page.');\n  }\n\n  return navigation;\n}\n\nexport function serializeUserProfileCustomPages(\n  customPages: UserProfileCustomPage[],\n  customDestinations: UserProfileCustomDestination[] = [],\n): string {\n  const paths = new Set<string>();\n\n  for (const { path } of [...customPages, ...customDestinations]) {\n    if (paths.has(path)) {\n      throw new Error(`User profile custom page path \"${path}\" must be unique.`);\n    }\n\n    paths.add(path);\n  }\n\n  return JSON.stringify([\n    ...customPages.map(page => ({\n      path: page.path,\n      label: page.label,\n      icon: page.icon ?? 'settings',\n      placement: page.placement ?? { type: 'sectionEnd', section: 'profile' },\n    })),\n    ...customDestinations.map(destination => ({\n      path: destination.path,\n      label: destination.label,\n      icon: 'settings',\n      placement: { type: 'sectionEnd', section: 'profile' },\n      showAsRow: false,\n    })),\n  ]);\n}\n\nexport function useUserProfileCustomPages(\n  customRoutes: UserProfileCustomRoute[],\n  navigationHandleRef: RefObject<NativeUserProfileNavigationHandle | null>,\n) {\n  const [presentedPaths, setPresentedPaths] = useState<ReadonlySet<string>>(() => new Set());\n  const presentedPathStack = useRef<string[]>([]);\n  const isPoppingToRoot = useRef(false);\n  const openingPaths = useRef(new Set<string>());\n\n  const updatePresentedPaths = useCallback((update: (paths: string[]) => string[]) => {\n    const currentPaths = presentedPathStack.current;\n    const nextPaths = update(currentPaths);\n\n    if (nextPaths === currentPaths) {\n      return;\n    }\n\n    presentedPathStack.current = nextPaths;\n    setPresentedPaths(new Set(nextPaths));\n  }, []);\n\n  const onCustomPageEvent = useCallback(\n    (event: NativeSyntheticEvent<UserProfileCustomPageEvent>) => {\n      const { path, type } = event.nativeEvent;\n\n      if (type === 'dismissed') {\n        updatePresentedPaths(currentPaths => {\n          const pathIndex = currentPaths.lastIndexOf(path);\n          if (pathIndex === -1) {\n            return currentPaths;\n          }\n\n          if (isPoppingToRoot.current) {\n            isPoppingToRoot.current = false;\n            return [];\n          }\n\n          // Native navigation stops rendering pages that are covered by a push. Keep\n          // those pages mounted until they are actually removed from the back stack.\n          if (pathIndex !== currentPaths.length - 1) {\n            return currentPaths;\n          }\n\n          return currentPaths.slice(0, pathIndex);\n        });\n        return;\n      }\n\n      const page = customRoutes.find(candidate => candidate.path === path);\n      if (!page) {\n        return;\n      }\n\n      updatePresentedPaths(currentPaths => (currentPaths.includes(path) ? currentPaths : [...currentPaths, path]));\n\n      if ('href' in page && page.href) {\n        if (openingPaths.current.has(path)) {\n          return;\n        }\n\n        openingPaths.current.add(path);\n        void Linking.openURL(page.href)\n          .catch(error => {\n            console.warn(`Could not open custom user profile page \"${path}\".`, error);\n          })\n          .finally(() => {\n            openingPaths.current.delete(path);\n            void navigationHandleRef.current?.navigateCustomPage('back');\n          });\n        return;\n      }\n    },\n    [customRoutes, navigationHandleRef, updatePresentedPaths],\n  );\n\n  const navigation = useMemo<UserProfileCustomPageNavigation>(\n    () => ({\n      navigateBack: () => navigationHandleRef.current?.navigateCustomPage('back') ?? Promise.resolve(),\n      popToRoot: () => {\n        const navigationHandle = navigationHandleRef.current;\n        if (!navigationHandle) {\n          return Promise.resolve();\n        }\n\n        isPoppingToRoot.current = presentedPathStack.current.length > 0;\n        return navigationHandle.navigateCustomPage('popToRoot').catch(error => {\n          isPoppingToRoot.current = false;\n          throw error;\n        });\n      },\n      push: path => {\n        const navigationHandle = navigationHandleRef.current;\n        if (!navigationHandle) {\n          return Promise.resolve();\n        }\n\n        if (!customRoutes.some(route => route.path === path)) {\n          return Promise.reject(\n            new Error(`No custom user profile page or destination is registered for path \"${path}\".`),\n          );\n        }\n\n        if (presentedPathStack.current.includes(path)) {\n          return Promise.reject(\n            new Error(`Custom user profile page or destination \"${path}\" is already in the navigation stack.`),\n          );\n        }\n\n        updatePresentedPaths(currentPaths => [...currentPaths, path]);\n\n        return navigationHandle.navigateCustomPage('push', path).catch(error => {\n          updatePresentedPaths(currentPaths =>\n            currentPaths[currentPaths.length - 1] === path ? currentPaths.slice(0, -1) : currentPaths,\n          );\n          throw error;\n        });\n      },\n    }),\n    [customRoutes, navigationHandleRef, updatePresentedPaths],\n  );\n\n  return { navigation, presentedPaths, onCustomPageEvent };\n}\n\nexport function UserProfileCustomPageHosts({\n  customRoutes,\n  presentedPaths,\n  navigation,\n  style,\n}: {\n  customRoutes: UserProfileCustomRoute[];\n  presentedPaths: ReadonlySet<string>;\n  navigation: UserProfileCustomPageNavigation;\n  style?: StyleProp<ViewStyle>;\n}) {\n  return customRoutes.map(page => (\n    <View\n      key={page.path}\n      collapsable={false}\n      style={[styles.destination, style]}\n    >\n      <UserProfileCustomPageNavigationContext.Provider value={navigation}>\n        {presentedPaths.has(page.path) && 'content' in page ? page.content : null}\n      </UserProfileCustomPageNavigationContext.Provider>\n    </View>\n  ));\n}\n\nconst styles = StyleSheet.create({\n  destination: {\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n  },\n});\n"],"mappings":"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"}

package/dist/UserProfileView.d.ts

@@ -0,0 +1,76 @@
+import type { JSX } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { EmbeddedNavigationProps } from './EmbeddedNavigation.types';
+import type { UserProfileCustomDestination, UserProfileCustomPage } from './UserProfileCustomPages';
+/**
+ * Props for the UserProfileView component.
+ */
+export interface UserProfileViewProps extends EmbeddedNavigationProps {
+    /**
+     * Whether the inline profile view shows a dismiss button.
+     *
+     * This controls the native view's built-in dismiss button. It does not present
+     * a modal; render `UserProfileView` inside your own `Modal`, sheet, or route.
+     *
+     * @default true
+     */
+    isDismissible?: boolean;
+    /**
+     * Style applied to the container view.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Called when the user dismisses the native profile view.
+     */
+    onDismiss?: () => void;
+    /** Custom pages displayed as rows in the root profile screen. */
+    customPages?: UserProfileCustomPage[];
+    /** Custom destinations that can be pushed from a custom page without creating a root profile row. */
+    customDestinations?: UserProfileCustomDestination[];
+}
+/**
+ * A pre-built native component for managing the user's profile and account settings.
+ *
+ * `UserProfileView` renders inline within your React Native view hierarchy, powered by:
+ * - **iOS**: clerk-ios (SwiftUI) - https://github.com/clerk/clerk-ios
+ * - **Android**: clerk-android (Jetpack Compose) - https://github.com/clerk/clerk-android
+ *
+ * To present the profile, render it inside your own `Modal`, sheet, or route.
+ *
+ * To push the profile onto your own navigation stack, hide the route's header and
+ * pass `onHostBack` so Clerk's own chrome takes over.
+ *
+ * Sign-out is detected automatically and synced with the JS SDK. Use `useAuth()` in a
+ * `useEffect` to react to sign-out.
+ *
+ * @example
+ * ```tsx
+ * import { UserProfileView } from '@clerk/expo-native-components';
+ * import { useAuth } from '@clerk/expo';
+ *
+ * export default function ProfileScreen() {
+ *   const { isSignedIn } = useAuth();
+ *
+ *   useEffect(() => {
+ *     if (!isSignedIn) router.replace('/sign-in');
+ *   }, [isSignedIn]);
+ *
+ *   return (
+ *     <UserProfileView
+ *       style={{ flex: 1 }}
+ *       customPages={[
+ *         { path: 'billing', label: 'Billing', icon: 'billing', content: <BillingView /> },
+ *         { path: 'docs', label: 'Docs', icon: 'book', href: 'https://clerk.com/docs' },
+ *       ]}
+ *       customDestinations={[
+ *         { path: 'invoice-details', label: 'Invoice details', content: <InvoiceDetailsView /> },
+ *       ]}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link https://clerk.com/docs/components/user/user-profile} Clerk UserProfile Documentation
+ */
+export declare function UserProfileView({ isDismissible, style, onDismiss, onHostBack, customPages, customDestinations, }: UserProfileViewProps): JSX.Element;
+//# sourceMappingURL=UserProfileView.d.ts.map

package/dist/UserProfileView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserProfileView.d.ts","sourceRoot":"","sources":["../src/UserProfileView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiC,GAAG,EAAO,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAwB,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG/E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAE1E,OAAO,KAAK,EAEV,4BAA4B,EAC5B,qBAAqB,EAEtB,MAAM,0BAA0B,CAAC;AAiBlC;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,uBAAuB;IACnE;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,iEAAiE;IACjE,WAAW,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAEtC,qGAAqG;IACrG,kBAAkB,CAAC,EAAE,4BAA4B,EAAE,CAAC;CACrD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,wBAAgB,eAAe,CAAC,EAC9B,aAAoB,EACpB,KAAK,EACL,SAAS,EACT,UAAU,EACV,WAAgB,EAChB,kBAAuB,GACxB,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CA2CpC"}

package/dist/UserProfileView.js

@@ -0,0 +1,101 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('./_virtual/_rolldown/runtime.js');
+let react = require("react");
+let react_native = require("react-native");
+let src_utils_native_module = require("./utils/native-module");
+let react_jsx_runtime = require("react/jsx-runtime");
+let src_UserProfileCustomPages = require("./UserProfileCustomPages");
+let src_specs_NativeClerkUserProfileView = require("./specs/NativeClerkUserProfileView");
+src_specs_NativeClerkUserProfileView = require_runtime.__toESM(src_specs_NativeClerkUserProfileView);
+
+//#region src/UserProfileView.tsx
+const CustomizableNativeClerkUserProfileView = src_specs_NativeClerkUserProfileView.default;
+/**
+* A pre-built native component for managing the user's profile and account settings.
+*
+* `UserProfileView` renders inline within your React Native view hierarchy, powered by:
+* - **iOS**: clerk-ios (SwiftUI) - https://github.com/clerk/clerk-ios
+* - **Android**: clerk-android (Jetpack Compose) - https://github.com/clerk/clerk-android
+*
+* To present the profile, render it inside your own `Modal`, sheet, or route.
+*
+* To push the profile onto your own navigation stack, hide the route's header and
+* pass `onHostBack` so Clerk's own chrome takes over.
+*
+* Sign-out is detected automatically and synced with the JS SDK. Use `useAuth()` in a
+* `useEffect` to react to sign-out.
+*
+* @example
+* ```tsx
+* import { UserProfileView } from '@clerk/expo-native-components';
+* import { useAuth } from '@clerk/expo';
+*
+* export default function ProfileScreen() {
+*   const { isSignedIn } = useAuth();
+*
+*   useEffect(() => {
+*     if (!isSignedIn) router.replace('/sign-in');
+*   }, [isSignedIn]);
+*
+*   return (
+*     <UserProfileView
+*       style={{ flex: 1 }}
+*       customPages={[
+*         { path: 'billing', label: 'Billing', icon: 'billing', content: <BillingView /> },
+*         { path: 'docs', label: 'Docs', icon: 'book', href: 'https://clerk.com/docs' },
+*       ]}
+*       customDestinations={[
+*         { path: 'invoice-details', label: 'Invoice details', content: <InvoiceDetailsView /> },
+*       ]}
+*     />
+*   );
+* }
+* ```
+*
+* @see {@link https://clerk.com/docs/components/user/user-profile} Clerk UserProfile Documentation
+*/
+function UserProfileView({ isDismissible = true, style, onDismiss, onHostBack, customPages = [], customDestinations = [] }) {
+	const nativeViewRef = (0, react.useRef)(null);
+	const customRoutes = (0, react.useMemo)(() => [...customPages, ...customDestinations], [customDestinations, customPages]);
+	const { navigation, presentedPaths, onCustomPageEvent } = (0, src_UserProfileCustomPages.useUserProfileCustomPages)(customRoutes, nativeViewRef);
+	const handleProfileEvent = (0, react.useCallback)((event) => {
+		if (event.nativeEvent.type === "dismissed") onDismiss?.();
+	}, [onDismiss]);
+	if (!src_utils_native_module.isNativeSupported || !CustomizableNativeClerkUserProfileView) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+		style: [styles.container, style],
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+			style: styles.text,
+			children: !src_utils_native_module.isNativeSupported ? "Native UserProfileView is only available on iOS and Android" : "Native UserProfileView requires a development build with the @clerk/expo-native-components config plugin. Add \"@clerk/expo-native-components\" to your app.json plugins array and rebuild your native app."
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomizableNativeClerkUserProfileView, {
+		ref: nativeViewRef,
+		style: [styles.container, style],
+		isDismissible,
+		hostBackButton: !!onHostBack,
+		customPages: (0, src_UserProfileCustomPages.serializeUserProfileCustomPages)(customPages, customDestinations),
+		onProfileEvent: handleProfileEvent,
+		onCustomPageEvent,
+		onHostBack: onHostBack ? () => onHostBack() : void 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(src_UserProfileCustomPages.UserProfileCustomPageHosts, {
+			customRoutes,
+			presentedPaths,
+			navigation
+		})
+	});
+}
+const styles = react_native.StyleSheet.create({
+	container: {
+		flex: 1,
+		justifyContent: "center",
+		alignItems: "center"
+	},
+	text: {
+		fontSize: 16,
+		color: "#666"
+	}
+});
+
+//#endregion
+exports.UserProfileView = UserProfileView;
+//# sourceMappingURL=UserProfileView.js.map

package/dist/UserProfileView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserProfileView.js","names":["NativeClerkUserProfileView","isNativeSupported","View","Text","UserProfileCustomPageHosts","StyleSheet"],"sources":["../src/UserProfileView.tsx"],"sourcesContent":["import type { ComponentProps, ComponentType, JSX, Ref } from 'react';\nimport { useCallback, useMemo, useRef } from 'react';\nimport type { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';\nimport { StyleSheet, Text, View } from 'react-native';\n\nimport type { EmbeddedNavigationProps } from './EmbeddedNavigation.types';\nimport NativeClerkUserProfileView from './specs/NativeClerkUserProfileView';\nimport type {\n  NativeUserProfileNavigationHandle,\n  UserProfileCustomDestination,\n  UserProfileCustomPage,\n  UserProfileCustomPageEvent,\n} from './UserProfileCustomPages';\nimport {\n  serializeUserProfileCustomPages,\n  UserProfileCustomPageHosts,\n  useUserProfileCustomPages,\n} from './UserProfileCustomPages';\nimport { isNativeSupported } from './utils/native-module';\n\ntype CustomizableNativeUserProfileProps = ComponentProps<NonNullable<typeof NativeClerkUserProfileView>> & {\n  customPages?: string;\n  onCustomPageEvent?: (event: NativeSyntheticEvent<UserProfileCustomPageEvent>) => void;\n  ref?: Ref<NativeUserProfileNavigationHandle>;\n};\n\nconst CustomizableNativeClerkUserProfileView =\n  NativeClerkUserProfileView as ComponentType<CustomizableNativeUserProfileProps> | null;\n\n/**\n * Props for the UserProfileView component.\n */\nexport interface UserProfileViewProps extends EmbeddedNavigationProps {\n  /**\n   * Whether the inline profile view shows a dismiss button.\n   *\n   * This controls the native view's built-in dismiss button. It does not present\n   * a modal; render `UserProfileView` inside your own `Modal`, sheet, or route.\n   *\n   * @default true\n   */\n  isDismissible?: boolean;\n\n  /**\n   * Style applied to the container view.\n   */\n  style?: StyleProp<ViewStyle>;\n\n  /**\n   * Called when the user dismisses the native profile view.\n   */\n  onDismiss?: () => void;\n\n  /** Custom pages displayed as rows in the root profile screen. */\n  customPages?: UserProfileCustomPage[];\n\n  /** Custom destinations that can be pushed from a custom page without creating a root profile row. */\n  customDestinations?: UserProfileCustomDestination[];\n}\n\n/**\n * A pre-built native component for managing the user's profile and account settings.\n *\n * `UserProfileView` renders inline within your React Native view hierarchy, powered by:\n * - **iOS**: clerk-ios (SwiftUI) - https://github.com/clerk/clerk-ios\n * - **Android**: clerk-android (Jetpack Compose) - https://github.com/clerk/clerk-android\n *\n * To present the profile, render it inside your own `Modal`, sheet, or route.\n *\n * To push the profile onto your own navigation stack, hide the route's header and\n * pass `onHostBack` so Clerk's own chrome takes over.\n *\n * Sign-out is detected automatically and synced with the JS SDK. Use `useAuth()` in a\n * `useEffect` to react to sign-out.\n *\n * @example\n * ```tsx\n * import { UserProfileView } from '@clerk/expo-native-components';\n * import { useAuth } from '@clerk/expo';\n *\n * export default function ProfileScreen() {\n *   const { isSignedIn } = useAuth();\n *\n *   useEffect(() => {\n *     if (!isSignedIn) router.replace('/sign-in');\n *   }, [isSignedIn]);\n *\n *   return (\n *     <UserProfileView\n *       style={{ flex: 1 }}\n *       customPages={[\n *         { path: 'billing', label: 'Billing', icon: 'billing', content: <BillingView /> },\n *         { path: 'docs', label: 'Docs', icon: 'book', href: 'https://clerk.com/docs' },\n *       ]}\n *       customDestinations={[\n *         { path: 'invoice-details', label: 'Invoice details', content: <InvoiceDetailsView /> },\n *       ]}\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link https://clerk.com/docs/components/user/user-profile} Clerk UserProfile Documentation\n */\nexport function UserProfileView({\n  isDismissible = true,\n  style,\n  onDismiss,\n  onHostBack,\n  customPages = [],\n  customDestinations = [],\n}: UserProfileViewProps): JSX.Element {\n  const nativeViewRef = useRef<NativeUserProfileNavigationHandle>(null);\n  const customRoutes = useMemo(() => [...customPages, ...customDestinations], [customDestinations, customPages]);\n  const { navigation, presentedPaths, onCustomPageEvent } = useUserProfileCustomPages(customRoutes, nativeViewRef);\n  const handleProfileEvent = useCallback(\n    (event: { nativeEvent: { type: string } }) => {\n      if (event.nativeEvent.type === 'dismissed') {\n        onDismiss?.();\n      }\n    },\n    [onDismiss],\n  );\n\n  if (!isNativeSupported || !CustomizableNativeClerkUserProfileView) {\n    return (\n      <View style={[styles.container, style]}>\n        <Text style={styles.text}>\n          {!isNativeSupported\n            ? 'Native UserProfileView is only available on iOS and Android'\n            : 'Native UserProfileView requires a development build with the @clerk/expo-native-components config plugin. Add \"@clerk/expo-native-components\" to your app.json plugins array and rebuild your native app.'}\n        </Text>\n      </View>\n    );\n  }\n\n  return (\n    <CustomizableNativeClerkUserProfileView\n      ref={nativeViewRef}\n      style={[styles.container, style]}\n      isDismissible={isDismissible}\n      hostBackButton={!!onHostBack}\n      customPages={serializeUserProfileCustomPages(customPages, customDestinations)}\n      onProfileEvent={handleProfileEvent}\n      onCustomPageEvent={onCustomPageEvent}\n      onHostBack={onHostBack ? () => onHostBack() : undefined}\n    >\n      <UserProfileCustomPageHosts\n        customRoutes={customRoutes}\n        presentedPaths={presentedPaths}\n        navigation={navigation}\n      />\n    </CustomizableNativeClerkUserProfileView>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  text: {\n    fontSize: 16,\n    color: '#666',\n  },\n});\n"],"mappings":";;;;;;;;;;;AA0BA,MAAM,yCACJA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EF,SAAgB,gBAAgB,EAC9B,gBAAgB,MAChB,OACA,WACA,YACA,cAAc,CAAC,GACf,qBAAqB,CAAC,KACc;CACpC,MAAM,kCAA0D,IAAI;CACpE,MAAM,wCAA6B,CAAC,GAAG,aAAa,GAAG,kBAAkB,GAAG,CAAC,oBAAoB,WAAW,CAAC;CAC7G,MAAM,EAAE,YAAY,gBAAgB,gFAAgD,cAAc,aAAa;CAC/G,MAAM,6CACH,UAA6C;EAC5C,IAAI,MAAM,YAAY,SAAS,aAC7B,YAAY;CAEhB,GACA,CAAC,SAAS,CACZ;CAEA,IAAI,CAACC,6CAAqB,CAAC,wCACzB,OACE,2CAACC,mBAAD;EAAM,OAAO,CAAC,OAAO,WAAW,KAAK;YACnC,2CAACC,mBAAD;GAAM,OAAO,OAAO;aACjB,CAACF,4CACE,gEACA;EACA;CACF;CAIV,OACE,2CAAC,wCAAD;EACE,KAAK;EACL,OAAO,CAAC,OAAO,WAAW,KAAK;EAChB;EACf,gBAAgB,CAAC,CAAC;EAClB,6EAA6C,aAAa,kBAAkB;EAC5E,gBAAgB;EACG;EACnB,YAAY,mBAAmB,WAAW,IAAI;YAE9C,2CAACG,uDAAD;GACgB;GACE;GACJ;EACb;CACqC;AAE5C;AAEA,MAAM,SAASC,wBAAW,OAAO;CAC/B,WAAW;EACT,MAAM;EACN,gBAAgB;EAChB,YAAY;CACd;CACA,MAAM;EACJ,UAAU;EACV,OAAO;CACT;AACF,CAAC"}

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,29 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+
+exports.__toESM = __toESM;

package/dist/index.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Native UI components for Clerk authentication in Expo apps.
+ *
+ * These components provide pre-built, native authentication experiences powered by:
+ * - **iOS**: clerk-ios (SwiftUI) - https://github.com/clerk/clerk-ios
+ * - **Android**: clerk-android (Jetpack Compose) - https://github.com/clerk/clerk-android
+ *
+ * ## Installation
+ *
+ * Native components require the `@clerk/expo-native-components` config plugin in your `app.json`, alongside `@clerk/expo`:
+ *
+ * ```json
+ * {
+ *   "expo": {
+ *     "plugins": ["@clerk/expo", "@clerk/expo-native-components"]
+ *   }
+ * }
+ * ```
+ *
+ * Then run `npx expo prebuild` to generate native code.
+ *
+ * ## Components
+ *
+ * - {@link AuthView} - Authentication flow (sign-in/sign-up), renders inline
+ * - {@link UserProfileView} - User profile and account management, renders inline
+ * - {@link UserButton} - Avatar button that opens the native user profile
+ *
+ * @module @clerk/expo-native-components
+ */
+export { AuthView } from './AuthView';
+export type { AuthViewProps, AuthViewMode } from './AuthView.types';
+export type { EmbeddedNavigationProps } from './EmbeddedNavigation.types';
+export { useAuthViewState } from './useAuthViewState';
+export type { UseAuthViewStateReturn } from './useAuthViewState';
+export { UserButton } from './UserButton';
+export type { UserButtonProps, UserButtonUserProfileProps } from './UserButton';
+export { useUserProfileCustomPageNavigation } from './UserProfileCustomPages';
+export type { UserProfileCustomPageNavigation, UserProfileCustomDestination, UserProfileCustomPage, UserProfileCustomPageIcon, UserProfileCustomPagePlacement, UserProfileRow, UserProfileSection, } from './UserProfileCustomPages';
+export { UserProfileView } from './UserProfileView';
+export type { UserProfileViewProps } from './UserProfileView';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACpE,YAAY,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,EAAE,kCAAkC,EAAE,MAAM,0BAA0B,CAAC;AAC9E,YAAY,EACV,+BAA+B,EAC/B,4BAA4B,EAC5B,qBAAqB,EACrB,yBAAyB,EACzB,8BAA8B,EAC9B,cAAc,EACd,kBAAkB,GACnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,37 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+let src_UserProfileCustomPages = require("./UserProfileCustomPages");
+let src_AuthView = require("./AuthView");
+let src_useAuthViewState = require("./useAuthViewState");
+let src_UserButton = require("./UserButton");
+let src_UserProfileView = require("./UserProfileView");
+
+Object.defineProperty(exports, 'AuthView', {
+  enumerable: true,
+  get: function () {
+    return src_AuthView.AuthView;
+  }
+});
+Object.defineProperty(exports, 'UserButton', {
+  enumerable: true,
+  get: function () {
+    return src_UserButton.UserButton;
+  }
+});
+Object.defineProperty(exports, 'UserProfileView', {
+  enumerable: true,
+  get: function () {
+    return src_UserProfileView.UserProfileView;
+  }
+});
+Object.defineProperty(exports, 'useAuthViewState', {
+  enumerable: true,
+  get: function () {
+    return src_useAuthViewState.useAuthViewState;
+  }
+});
+Object.defineProperty(exports, 'useUserProfileCustomPageNavigation', {
+  enumerable: true,
+  get: function () {
+    return src_UserProfileCustomPages.useUserProfileCustomPageNavigation;
+  }
+});

package/dist/specs/NativeClerkAuthView.android.d.ts

@@ -0,0 +1,15 @@
+import type { NativeSyntheticEvent, ViewProps } from 'react-native';
+type AuthEvent = Readonly<{
+    type: string;
+}>;
+interface NativeProps extends ViewProps {
+    mode?: string;
+    isDismissible?: boolean;
+    logoMaxHeight?: number;
+    hostBackButton?: boolean;
+    onAuthEvent?: (event: NativeSyntheticEvent<AuthEvent>) => void;
+    onHostBack?: (event: NativeSyntheticEvent<object>) => void;
+}
+declare const _default: import("react").ComponentType<NativeProps>;
+export default _default;
+//# sourceMappingURL=NativeClerkAuthView.android.d.ts.map

package/dist/specs/NativeClerkAuthView.android.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeClerkAuthView.android.d.ts","sourceRoot":"","sources":["../../src/specs/NativeClerkAuthView.android.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE,KAAK,SAAS,GAAG,QAAQ,CAAC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE5C,UAAU,WAAY,SAAQ,SAAS;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;IAC/D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;CAC5D;;AAED,wBAA+D"}

package/dist/specs/NativeClerkAuthView.android.js

@@ -0,0 +1,8 @@
+let expo = require("expo");
+
+//#region src/specs/NativeClerkAuthView.android.ts
+var NativeClerkAuthView_android_default = (0, expo.requireNativeView)("ClerkAuthView");
+
+//#endregion
+module.exports = NativeClerkAuthView_android_default;
+//# sourceMappingURL=NativeClerkAuthView.android.js.map

package/dist/specs/NativeClerkAuthView.android.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeClerkAuthView.android.js","names":[],"sources":["../../src/specs/NativeClerkAuthView.android.ts"],"sourcesContent":["import { requireNativeView } from 'expo';\nimport type { NativeSyntheticEvent, ViewProps } from 'react-native';\n\ntype AuthEvent = Readonly<{ type: string }>;\n\ninterface NativeProps extends ViewProps {\n  mode?: string;\n  isDismissible?: boolean;\n  logoMaxHeight?: number;\n  hostBackButton?: boolean;\n  onAuthEvent?: (event: NativeSyntheticEvent<AuthEvent>) => void;\n  onHostBack?: (event: NativeSyntheticEvent<object>) => void;\n}\n\nexport default requireNativeView<NativeProps>('ClerkAuthView');\n"],"mappings":";;;AAcA,sEAA8C,eAAe"}

package/dist/specs/NativeClerkAuthView.d.ts

@@ -0,0 +1,15 @@
+import type { NativeSyntheticEvent, ViewProps } from 'react-native';
+type AuthEvent = Readonly<{
+    type: string;
+}>;
+interface NativeProps extends ViewProps {
+    mode?: string;
+    isDismissible?: boolean;
+    logoMaxHeight?: number;
+    hostBackButton?: boolean;
+    onAuthEvent?: (event: NativeSyntheticEvent<AuthEvent>) => void;
+    onHostBack?: (event: NativeSyntheticEvent<object>) => void;
+}
+declare const NativeClerkAuthView: import("react").ComponentType<NativeProps> | null;
+export default NativeClerkAuthView;
+//# sourceMappingURL=NativeClerkAuthView.d.ts.map

package/dist/specs/NativeClerkAuthView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeClerkAuthView.d.ts","sourceRoot":"","sources":["../../src/specs/NativeClerkAuthView.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,KAAK,SAAS,GAAG,QAAQ,CAAC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE5C,UAAU,WAAY,SAAQ,SAAS;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;IAC/D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,QAAA,MAAM,mBAAmB,mDACoF,CAAC;AAE9G,eAAe,mBAAmB,CAAC"}