@clerk/react 6.9.0 → 6.9.1-canary.v20260610190754

package/dist/experimental.cjs

@@ -0,0 +1,270 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_hooks = require('./hooks-CBghYU21.cjs');
+let react = require("react");
+react = require_hooks.__toESM(react);
+let _clerk_shared_react = require("@clerk/shared/react");
+
+//#region src/components/CheckoutButton.tsx
+/**
+* A button component that opens the Clerk Checkout drawer when clicked. Render only when the user is signed in (e.g., wrap with `<Show when="signed-in">`).
+*
+* @example
+* ```tsx
+* import { Show } from '@clerk/react';
+* import { CheckoutButton } from '@clerk/react/experimental';
+*
+* // Basic usage with default "Checkout" text
+* function BasicCheckout() {
+*   return (
+*     <Show when="signed-in">
+*       <CheckoutButton planId="plan_123" />
+*     </Show>
+*   );
+* }
+*
+* // Custom button with organization subscription
+* function OrganizationCheckout() {
+*   return (
+*     <Show when="signed-in">
+*       <CheckoutButton
+*         planId="plan_123"
+*         planPeriod="month"
+*         for="organization"
+*         onSubscriptionComplete={() => console.log('Subscription completed!')}
+*       >
+*         <button className="custom-button">Subscribe Now</button>
+*       </CheckoutButton>
+*     </Show>
+*   );
+* }
+* ```
+*
+* @throws {Error} When rendered while the user is signed out
+* @throws {Error} When `for="organization"` is used without an active organization context
+*
+* @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
+*/
+const CheckoutButton = require_hooks.withClerk(({ clerk, children, ...props }) => {
+	const { planId, planPeriod, seatsQuantity, priceId, for: _for, onSubscriptionComplete, newSubscriptionRedirectUrl, checkoutProps, getContainer, component, ...rest } = props;
+	const { userId, orgId } = require_hooks.useAuth();
+	if (userId === null) throw new Error("Clerk: Ensure that `<CheckoutButton />` is rendered only when the user is signed in (wrap with `<Show when=\"signed-in\">` or guard with `useAuth()`).");
+	if (orgId === null && _for === "organization") throw new Error("Clerk: Wrap `<CheckoutButton for=\"organization\" />` with a check for an active organization. Retrieve `orgId` from `useAuth()` and confirm it is defined. For SSR, see: https://clerk.com/docs/reference/backend/types/auth-object#how-to-access-the-auth-object");
+	children = require_hooks.normalizeWithDefaultValue(children, "Checkout");
+	const child = require_hooks.assertSingleChild(children)("CheckoutButton");
+	const clickHandler = () => {
+		if (!clerk) return;
+		return clerk.__internal_openCheckout({
+			planId,
+			planPeriod,
+			seatsQuantity,
+			priceId,
+			for: _for,
+			onSubscriptionComplete,
+			newSubscriptionRedirectUrl,
+			...checkoutProps
+		});
+	};
+	const wrappedChildClickHandler = async (e) => {
+		if (child && typeof child === "object" && "props" in child) await require_hooks.safeExecute(child.props.onClick)(e);
+		return clickHandler();
+	};
+	const childProps = {
+		...rest,
+		onClick: wrappedChildClickHandler
+	};
+	return react.default.cloneElement(child, childProps);
+}, {
+	component: "CheckoutButton",
+	renderWhileLoading: true
+});
+
+//#endregion
+//#region src/components/PlanDetailsButton.tsx
+/**
+* A button component that opens the Clerk Plan Details drawer when clicked. This component is part of
+* Clerk's Billing feature which is available under a public beta.
+*
+* @example
+* ```tsx
+* import { Show } from '@clerk/react';
+* import { PlanDetailsButton } from '@clerk/react/experimental';
+*
+* // Basic usage with default "Plan details" text
+* function BasicPlanDetails() {
+*   return <PlanDetailsButton planId="plan_123" />;
+* }
+*
+* // Custom button with custom text
+* function CustomPlanDetails() {
+*   return (
+*     <Show when="signed-in">
+*       <PlanDetailsButton planId="plan_123">
+*         <button>View Plan Details</button>
+*       </PlanDetailsButton>
+*     </Show>
+*   );
+* }
+* ```
+*
+* @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
+*/
+const PlanDetailsButton = require_hooks.withClerk(({ clerk, children, ...props }) => {
+	const { plan, planId, initialPlanPeriod, planDetailsProps, getContainer, component, ...rest } = props;
+	children = require_hooks.normalizeWithDefaultValue(children, "Plan details");
+	const child = require_hooks.assertSingleChild(children)("PlanDetailsButton");
+	const clickHandler = () => {
+		if (!clerk) return;
+		return clerk.__internal_openPlanDetails({
+			plan,
+			planId,
+			initialPlanPeriod,
+			...planDetailsProps
+		});
+	};
+	const wrappedChildClickHandler = async (e) => {
+		if (child && typeof child === "object" && "props" in child) await require_hooks.safeExecute(child.props.onClick)(e);
+		return clickHandler();
+	};
+	const childProps = {
+		...rest,
+		onClick: wrappedChildClickHandler
+	};
+	return react.default.cloneElement(child, childProps);
+}, {
+	component: "PlanDetailsButton",
+	renderWhileLoading: true
+});
+
+//#endregion
+//#region src/components/SubscriptionDetailsButton.tsx
+/**
+* A button component that opens the Clerk Subscription Details drawer when clicked. Render only when the user is signed in (e.g., wrap with `<Show when="signed-in">`).
+*
+* @example
+* ```tsx
+* import { Show } from '@clerk/react';
+* import { SubscriptionDetailsButton } from '@clerk/react/experimental';
+*
+* // Basic usage with default "Subscription details" text
+* function BasicSubscriptionDetails() {
+*   return (
+*     <Show when="signed-in">
+*       <SubscriptionDetailsButton />
+*     </Show>
+*   );
+* }
+*
+* // Custom button with Organization Subscription
+* function OrganizationSubscriptionDetails() {
+*   return (
+*     <Show when="signed-in">
+*       <SubscriptionDetailsButton
+*         for="organization"
+*         onSubscriptionCancel={() => console.log('Subscription canceled')}
+*       >
+*         <button>View Organization Subscription</button>
+*       </SubscriptionDetailsButton>
+*     </Show>
+*   );
+* }
+* ```
+*
+* @throws {Error} When rendered while the user is signed out
+* @throws {Error} When `for="organization"` is used without an Active Organization context
+*
+* @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
+*/
+const SubscriptionDetailsButton = require_hooks.withClerk(({ clerk, children, ...props }) => {
+	const { for: _for, subscriptionDetailsProps, onSubscriptionCancel, getContainer, component, ...rest } = props;
+	children = require_hooks.normalizeWithDefaultValue(children, "Subscription details");
+	const child = require_hooks.assertSingleChild(children)("SubscriptionDetailsButton");
+	const { userId, orgId } = require_hooks.useAuth();
+	if (userId === null) throw new Error("Clerk: Ensure that `<SubscriptionDetailsButton />` is rendered only when the user is signed in (wrap with `<Show when=\"signed-in\">` or guard with `useAuth()`).");
+	if (orgId === null && _for === "organization") throw new Error("Clerk: Wrap `<SubscriptionDetailsButton for=\"organization\" />` with a check for an active organization. Retrieve `orgId` from `useAuth()` and confirm it is defined. For SSR, see: https://clerk.com/docs/reference/backend/types/auth-object#how-to-access-the-auth-object");
+	const clickHandler = () => {
+		if (!clerk) return;
+		return clerk.__internal_openSubscriptionDetails({
+			for: _for,
+			onSubscriptionCancel,
+			...subscriptionDetailsProps
+		});
+	};
+	const wrappedChildClickHandler = async (e) => {
+		if (child && typeof child === "object" && "props" in child) await require_hooks.safeExecute(child.props.onClick)(e);
+		return clickHandler();
+	};
+	const childProps = {
+		...rest,
+		onClick: wrappedChildClickHandler
+	};
+	return react.default.cloneElement(child, childProps);
+}, {
+	component: "SubscriptionDetailsButton",
+	renderWhileLoading: true
+});
+
+//#endregion
+exports.CheckoutButton = CheckoutButton;
+Object.defineProperty(exports, 'CheckoutProvider', {
+  enumerable: true,
+  get: function () {
+    return _clerk_shared_react.__experimental_CheckoutProvider;
+  }
+});
+Object.defineProperty(exports, 'PaymentElement', {
+  enumerable: true,
+  get: function () {
+    return _clerk_shared_react.__experimental_PaymentElement;
+  }
+});
+Object.defineProperty(exports, 'PaymentElementProvider', {
+  enumerable: true,
+  get: function () {
+    return _clerk_shared_react.__experimental_PaymentElementProvider;
+  }
+});
+exports.PlanDetailsButton = PlanDetailsButton;
+exports.SubscriptionDetailsButton = SubscriptionDetailsButton;
+Object.defineProperty(exports, 'useCheckout', {
+  enumerable: true,
+  get: function () {
+    return _clerk_shared_react.__experimental_useCheckout;
+  }
+});
+Object.defineProperty(exports, 'usePaymentAttempts', {
+  enumerable: true,
+  get: function () {
+    return _clerk_shared_react.__experimental_usePaymentAttempts;
+  }
+});
+Object.defineProperty(exports, 'usePaymentElement', {
+  enumerable: true,
+  get: function () {
+    return _clerk_shared_react.__experimental_usePaymentElement;
+  }
+});
+Object.defineProperty(exports, 'usePaymentMethods', {
+  enumerable: true,
+  get: function () {
+    return _clerk_shared_react.__experimental_usePaymentMethods;
+  }
+});
+Object.defineProperty(exports, 'usePlans', {
+  enumerable: true,
+  get: function () {
+    return _clerk_shared_react.__experimental_usePlans;
+  }
+});
+Object.defineProperty(exports, 'useStatements', {
+  enumerable: true,
+  get: function () {
+    return _clerk_shared_react.__experimental_useStatements;
+  }
+});
+Object.defineProperty(exports, 'useSubscription', {
+  enumerable: true,
+  get: function () {
+    return _clerk_shared_react.__experimental_useSubscription;
+  }
+});
+//# sourceMappingURL=experimental.cjs.map

package/dist/experimental.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"experimental.cjs","names":["withClerk","useAuth","normalizeWithDefaultValue","assertSingleChild","safeExecute","React","withClerk","normalizeWithDefaultValue","assertSingleChild","safeExecute","React","withClerk","normalizeWithDefaultValue","assertSingleChild","useAuth","safeExecute","React"],"sources":["../src/components/CheckoutButton.tsx","../src/components/PlanDetailsButton.tsx","../src/components/SubscriptionDetailsButton.tsx"],"sourcesContent":["import type { __experimental_CheckoutButtonProps } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { useAuth } from '../hooks';\nimport type { WithClerkProp } from '../types';\nimport { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';\nimport { withClerk } from './withClerk';\n\n/**\n * A button component that opens the Clerk Checkout drawer when clicked. Render only when the user is signed in (e.g., wrap with `<Show when=\"signed-in\">`).\n *\n * @example\n * ```tsx\n * import { Show } from '@clerk/react';\n * import { CheckoutButton } from '@clerk/react/experimental';\n *\n * // Basic usage with default \"Checkout\" text\n * function BasicCheckout() {\n *   return (\n *     <Show when=\"signed-in\">\n *       <CheckoutButton planId=\"plan_123\" />\n *     </Show>\n *   );\n * }\n *\n * // Custom button with organization subscription\n * function OrganizationCheckout() {\n *   return (\n *     <Show when=\"signed-in\">\n *       <CheckoutButton\n *         planId=\"plan_123\"\n *         planPeriod=\"month\"\n *         for=\"organization\"\n *         onSubscriptionComplete={() => console.log('Subscription completed!')}\n *       >\n *         <button className=\"custom-button\">Subscribe Now</button>\n *       </CheckoutButton>\n *     </Show>\n *   );\n * }\n * ```\n *\n * @throws {Error} When rendered while the user is signed out\n * @throws {Error} When `for=\"organization\"` is used without an active organization context\n *\n * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.\n */\nexport const CheckoutButton = withClerk(\n  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_CheckoutButtonProps>>) => {\n    const {\n      planId,\n      planPeriod,\n      seatsQuantity,\n      priceId,\n      for: _for,\n      onSubscriptionComplete,\n      newSubscriptionRedirectUrl,\n      checkoutProps,\n      getContainer,\n      component,\n      ...rest\n    } = props;\n\n    const { userId, orgId } = useAuth();\n\n    if (userId === null) {\n      throw new Error(\n        'Clerk: Ensure that `<CheckoutButton />` is rendered only when the user is signed in (wrap with `<Show when=\"signed-in\">` or guard with `useAuth()`).',\n      );\n    }\n\n    if (orgId === null && _for === 'organization') {\n      throw new Error(\n        'Clerk: Wrap `<CheckoutButton for=\"organization\" />` with a check for an active organization. Retrieve `orgId` from `useAuth()` and confirm it is defined. For SSR, see: https://clerk.com/docs/reference/backend/types/auth-object#how-to-access-the-auth-object',\n      );\n    }\n\n    children = normalizeWithDefaultValue(children, 'Checkout');\n    const child = assertSingleChild(children)('CheckoutButton');\n\n    const clickHandler = () => {\n      if (!clerk) {\n        return;\n      }\n\n      return clerk.__internal_openCheckout({\n        planId,\n        planPeriod,\n        seatsQuantity,\n        priceId,\n        for: _for,\n        onSubscriptionComplete,\n        newSubscriptionRedirectUrl,\n        ...checkoutProps,\n      });\n    };\n\n    const wrappedChildClickHandler: React.MouseEventHandler = async e => {\n      if (child && typeof child === 'object' && 'props' in child) {\n        await safeExecute(child.props.onClick)(e);\n      }\n      return clickHandler();\n    };\n\n    const childProps = { ...rest, onClick: wrappedChildClickHandler };\n    return React.cloneElement(child as React.ReactElement<unknown>, childProps);\n  },\n  { component: 'CheckoutButton', renderWhileLoading: true },\n);\n","import type { __experimental_PlanDetailsButtonProps } from '@clerk/shared/types';\nimport React from 'react';\n\nimport type { WithClerkProp } from '../types';\nimport { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';\nimport { withClerk } from './withClerk';\n\n/**\n * A button component that opens the Clerk Plan Details drawer when clicked. This component is part of\n * Clerk's Billing feature which is available under a public beta.\n *\n * @example\n * ```tsx\n * import { Show } from '@clerk/react';\n * import { PlanDetailsButton } from '@clerk/react/experimental';\n *\n * // Basic usage with default \"Plan details\" text\n * function BasicPlanDetails() {\n *   return <PlanDetailsButton planId=\"plan_123\" />;\n * }\n *\n * // Custom button with custom text\n * function CustomPlanDetails() {\n *   return (\n *     <Show when=\"signed-in\">\n *       <PlanDetailsButton planId=\"plan_123\">\n *         <button>View Plan Details</button>\n *       </PlanDetailsButton>\n *     </Show>\n *   );\n * }\n * ```\n *\n * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.\n */\nexport const PlanDetailsButton = withClerk(\n  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>) => {\n    const { plan, planId, initialPlanPeriod, planDetailsProps, getContainer, component, ...rest } = props;\n\n    children = normalizeWithDefaultValue(children, 'Plan details');\n    const child = assertSingleChild(children)('PlanDetailsButton');\n\n    const clickHandler = () => {\n      if (!clerk) {\n        return;\n      }\n\n      return clerk.__internal_openPlanDetails({\n        plan,\n        planId,\n        initialPlanPeriod,\n        ...planDetailsProps,\n      } as __experimental_PlanDetailsButtonProps);\n    };\n\n    const wrappedChildClickHandler: React.MouseEventHandler = async e => {\n      if (child && typeof child === 'object' && 'props' in child) {\n        await safeExecute(child.props.onClick)(e);\n      }\n      return clickHandler();\n    };\n\n    const childProps = { ...rest, onClick: wrappedChildClickHandler };\n    return React.cloneElement(child as React.ReactElement<unknown>, childProps);\n  },\n  { component: 'PlanDetailsButton', renderWhileLoading: true },\n);\n","import type { __experimental_SubscriptionDetailsButtonProps } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { useAuth } from '../hooks';\nimport type { WithClerkProp } from '../types';\nimport { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';\nimport { withClerk } from './withClerk';\n\n/**\n * A button component that opens the Clerk Subscription Details drawer when clicked. Render only when the user is signed in (e.g., wrap with `<Show when=\"signed-in\">`).\n *\n * @example\n * ```tsx\n * import { Show } from '@clerk/react';\n * import { SubscriptionDetailsButton } from '@clerk/react/experimental';\n *\n * // Basic usage with default \"Subscription details\" text\n * function BasicSubscriptionDetails() {\n *   return (\n *     <Show when=\"signed-in\">\n *       <SubscriptionDetailsButton />\n *     </Show>\n *   );\n * }\n *\n * // Custom button with Organization Subscription\n * function OrganizationSubscriptionDetails() {\n *   return (\n *     <Show when=\"signed-in\">\n *       <SubscriptionDetailsButton\n *         for=\"organization\"\n *         onSubscriptionCancel={() => console.log('Subscription canceled')}\n *       >\n *         <button>View Organization Subscription</button>\n *       </SubscriptionDetailsButton>\n *     </Show>\n *   );\n * }\n * ```\n *\n * @throws {Error} When rendered while the user is signed out\n * @throws {Error} When `for=\"organization\"` is used without an Active Organization context\n *\n * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.\n */\nexport const SubscriptionDetailsButton = withClerk(\n  ({\n    clerk,\n    children,\n    ...props\n  }: WithClerkProp<React.PropsWithChildren<__experimental_SubscriptionDetailsButtonProps>>) => {\n    const { for: _for, subscriptionDetailsProps, onSubscriptionCancel, getContainer, component, ...rest } = props;\n    children = normalizeWithDefaultValue(children, 'Subscription details');\n    const child = assertSingleChild(children)('SubscriptionDetailsButton');\n\n    const { userId, orgId } = useAuth();\n\n    if (userId === null) {\n      throw new Error(\n        'Clerk: Ensure that `<SubscriptionDetailsButton />` is rendered only when the user is signed in (wrap with `<Show when=\"signed-in\">` or guard with `useAuth()`).',\n      );\n    }\n\n    if (orgId === null && _for === 'organization') {\n      throw new Error(\n        'Clerk: Wrap `<SubscriptionDetailsButton for=\"organization\" />` with a check for an active organization. Retrieve `orgId` from `useAuth()` and confirm it is defined. For SSR, see: https://clerk.com/docs/reference/backend/types/auth-object#how-to-access-the-auth-object',\n      );\n    }\n\n    const clickHandler = () => {\n      if (!clerk) {\n        return;\n      }\n\n      return clerk.__internal_openSubscriptionDetails({\n        for: _for,\n        onSubscriptionCancel,\n        ...subscriptionDetailsProps,\n      });\n    };\n\n    const wrappedChildClickHandler: React.MouseEventHandler = async e => {\n      if (child && typeof child === 'object' && 'props' in child) {\n        await safeExecute(child.props.onClick)(e);\n      }\n      return clickHandler();\n    };\n\n    const childProps = { ...rest, onClick: wrappedChildClickHandler };\n    return React.cloneElement(child as React.ReactElement<unknown>, childProps);\n  },\n  { component: 'SubscriptionDetailsButton', renderWhileLoading: true },\n);\n"],"mappings":"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"}

package/dist/{experimental.d.ts → experimental.d.cts}

@@ -1,12 +1,9 @@
-import * as _clerk_shared_types from '@clerk/shared/types';
-import { __experimental_CheckoutButtonProps, __experimental_PlanDetailsButtonProps, __experimental_SubscriptionDetailsButtonProps } from '@clerk/shared/types';
-export { __experimental_CheckoutButtonProps as CheckoutButtonProps, __experimental_PlanDetailsButtonProps as PlanDetailsButtonProps, __experimental_SubscriptionDetailsButtonProps as SubscriptionDetailsButtonProps } from '@clerk/shared/types';
-import React from 'react';
-import { WithClerkProp } from './types.js';
-export { __experimental_CheckoutProvider as CheckoutProvider, __experimental_PaymentElement as PaymentElement, __experimental_PaymentElementProvider as PaymentElementProvider, __experimental_useCheckout as useCheckout, __experimental_usePaymentAttempts as usePaymentAttempts, __experimental_usePaymentElement as usePaymentElement, __experimental_usePaymentMethods as usePaymentMethods, __experimental_usePlans as usePlans, __experimental_useStatements as useStatements, __experimental_useSubscription as useSubscription } from '@clerk/shared/react';
-import '@clerk/shared/ui';
-import '@clerk/ui/internal';
+import { g as WithClerkProp } from "./types-Bwenmt7y.cjs";
+import { __experimental_CheckoutButtonProps, __experimental_CheckoutButtonProps as CheckoutButtonProps, __experimental_PlanDetailsButtonProps, __experimental_PlanDetailsButtonProps as PlanDetailsButtonProps, __experimental_SubscriptionDetailsButtonProps, __experimental_SubscriptionDetailsButtonProps as SubscriptionDetailsButtonProps } from "@clerk/shared/types";
+import React from "react";
+import { __experimental_CheckoutProvider as CheckoutProvider, __experimental_PaymentElement as PaymentElement, __experimental_PaymentElementProvider as PaymentElementProvider, __experimental_useCheckout as useCheckout, __experimental_usePaymentAttempts as usePaymentAttempts, __experimental_usePaymentElement as usePaymentElement, __experimental_usePaymentMethods as usePaymentMethods, __experimental_usePlans as usePlans, __experimental_useStatements as useStatements, __experimental_useSubscription as useSubscription } from "@clerk/shared/react";
 
+//#region src/components/CheckoutButton.d.ts
 /**
  * A button component that opens the Clerk Checkout drawer when clicked. Render only when the user is signed in (e.g., wrap with `<Show when="signed-in">`).
  *
@@ -47,10 +44,11 @@ import '@clerk/ui/internal';
  * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
  */
 declare const CheckoutButton: {
-    (props: _clerk_shared_types.Without<WithClerkProp<React.PropsWithChildren<__experimental_CheckoutButtonProps>>, "clerk">): React.JSX.Element | null;
-    displayName: string;
+  (props: import("@clerk/shared/types").Without<WithClerkProp<React.PropsWithChildren<__experimental_CheckoutButtonProps>>, "clerk">): React.JSX.Element | null;
+  displayName: string;
 };
-
+//#endregion
+//#region src/components/PlanDetailsButton.d.ts
 /**
  * A button component that opens the Clerk Plan Details drawer when clicked. This component is part of
  * Clerk's Billing feature which is available under a public beta.
@@ -80,10 +78,11 @@ declare const CheckoutButton: {
  * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
  */
 declare const PlanDetailsButton: {
-    (props: _clerk_shared_types.Without<WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>, "clerk">): React.JSX.Element | null;
-    displayName: string;
+  (props: import("@clerk/shared/types").Without<WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>, "clerk">): React.JSX.Element | null;
+  displayName: string;
 };
-
+//#endregion
+//#region src/components/SubscriptionDetailsButton.d.ts
 /**
  * A button component that opens the Clerk Subscription Details drawer when clicked. Render only when the user is signed in (e.g., wrap with `<Show when="signed-in">`).
  *
@@ -122,8 +121,9 @@ declare const PlanDetailsButton: {
  * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
  */
 declare const SubscriptionDetailsButton: {
-    (props: _clerk_shared_types.Without<WithClerkProp<React.PropsWithChildren<__experimental_SubscriptionDetailsButtonProps>>, "clerk">): React.JSX.Element | null;
-    displayName: string;
+  (props: import("@clerk/shared/types").Without<WithClerkProp<React.PropsWithChildren<__experimental_SubscriptionDetailsButtonProps>>, "clerk">): React.JSX.Element | null;
+  displayName: string;
 };
-
-export { CheckoutButton, PlanDetailsButton, SubscriptionDetailsButton };
+//#endregion
+export { CheckoutButton, type CheckoutButtonProps, CheckoutProvider, PaymentElement, PaymentElementProvider, PlanDetailsButton, type PlanDetailsButtonProps, SubscriptionDetailsButton, type SubscriptionDetailsButtonProps, useCheckout, usePaymentAttempts, usePaymentElement, usePaymentMethods, usePlans, useStatements, useSubscription };
+//# sourceMappingURL=experimental.d.cts.map

package/dist/experimental.d.mts

@@ -1,12 +1,9 @@
-import * as _clerk_shared_types from '@clerk/shared/types';
-import { __experimental_CheckoutButtonProps, __experimental_PlanDetailsButtonProps, __experimental_SubscriptionDetailsButtonProps } from '@clerk/shared/types';
-export { __experimental_CheckoutButtonProps as CheckoutButtonProps, __experimental_PlanDetailsButtonProps as PlanDetailsButtonProps, __experimental_SubscriptionDetailsButtonProps as SubscriptionDetailsButtonProps } from '@clerk/shared/types';
-import React from 'react';
-import { WithClerkProp } from './types.mjs';
-export { __experimental_CheckoutProvider as CheckoutProvider, __experimental_PaymentElement as PaymentElement, __experimental_PaymentElementProvider as PaymentElementProvider, __experimental_useCheckout as useCheckout, __experimental_usePaymentAttempts as usePaymentAttempts, __experimental_usePaymentElement as usePaymentElement, __experimental_usePaymentMethods as usePaymentMethods, __experimental_usePlans as usePlans, __experimental_useStatements as useStatements, __experimental_useSubscription as useSubscription } from '@clerk/shared/react';
-import '@clerk/shared/ui';
-import '@clerk/ui/internal';
+import { g as WithClerkProp } from "./types-CiIhevkA.mjs";
+import React from "react";
+import { __experimental_CheckoutProvider as CheckoutProvider, __experimental_PaymentElement as PaymentElement, __experimental_PaymentElementProvider as PaymentElementProvider, __experimental_useCheckout as useCheckout, __experimental_usePaymentAttempts as usePaymentAttempts, __experimental_usePaymentElement as usePaymentElement, __experimental_usePaymentMethods as usePaymentMethods, __experimental_usePlans as usePlans, __experimental_useStatements as useStatements, __experimental_useSubscription as useSubscription } from "@clerk/shared/react";
+import { __experimental_CheckoutButtonProps, __experimental_CheckoutButtonProps as CheckoutButtonProps, __experimental_PlanDetailsButtonProps, __experimental_PlanDetailsButtonProps as PlanDetailsButtonProps, __experimental_SubscriptionDetailsButtonProps, __experimental_SubscriptionDetailsButtonProps as SubscriptionDetailsButtonProps } from "@clerk/shared/types";
 
+//#region src/components/CheckoutButton.d.ts
 /**
  * A button component that opens the Clerk Checkout drawer when clicked. Render only when the user is signed in (e.g., wrap with `<Show when="signed-in">`).
  *
@@ -47,10 +44,11 @@ import '@clerk/ui/internal';
  * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
  */
 declare const CheckoutButton: {
-    (props: _clerk_shared_types.Without<WithClerkProp<React.PropsWithChildren<__experimental_CheckoutButtonProps>>, "clerk">): React.JSX.Element | null;
-    displayName: string;
+  (props: import("@clerk/shared/types").Without<WithClerkProp<React.PropsWithChildren<__experimental_CheckoutButtonProps>>, "clerk">): React.JSX.Element | null;
+  displayName: string;
 };
-
+//#endregion
+//#region src/components/PlanDetailsButton.d.ts
 /**
  * A button component that opens the Clerk Plan Details drawer when clicked. This component is part of
  * Clerk's Billing feature which is available under a public beta.
@@ -80,10 +78,11 @@ declare const CheckoutButton: {
  * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
  */
 declare const PlanDetailsButton: {
-    (props: _clerk_shared_types.Without<WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>, "clerk">): React.JSX.Element | null;
-    displayName: string;
+  (props: import("@clerk/shared/types").Without<WithClerkProp<React.PropsWithChildren<__experimental_PlanDetailsButtonProps>>, "clerk">): React.JSX.Element | null;
+  displayName: string;
 };
-
+//#endregion
+//#region src/components/SubscriptionDetailsButton.d.ts
 /**
  * A button component that opens the Clerk Subscription Details drawer when clicked. Render only when the user is signed in (e.g., wrap with `<Show when="signed-in">`).
  *
@@ -122,8 +121,9 @@ declare const PlanDetailsButton: {
  * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
  */
 declare const SubscriptionDetailsButton: {
-    (props: _clerk_shared_types.Without<WithClerkProp<React.PropsWithChildren<__experimental_SubscriptionDetailsButtonProps>>, "clerk">): React.JSX.Element | null;
-    displayName: string;
+  (props: import("@clerk/shared/types").Without<WithClerkProp<React.PropsWithChildren<__experimental_SubscriptionDetailsButtonProps>>, "clerk">): React.JSX.Element | null;
+  displayName: string;
 };
-
-export { CheckoutButton, PlanDetailsButton, SubscriptionDetailsButton };
+//#endregion
+export { CheckoutButton, type CheckoutButtonProps, CheckoutProvider, PaymentElement, PaymentElementProvider, PlanDetailsButton, type PlanDetailsButtonProps, SubscriptionDetailsButton, type SubscriptionDetailsButtonProps, useCheckout, usePaymentAttempts, usePaymentElement, usePaymentMethods, usePlans, useStatements, useSubscription };
+//# sourceMappingURL=experimental.d.mts.map