@vizejs/composable 0.426.2 → 0.427.0

package/dist/use-number-format.d.mts

@@ -0,0 +1,73 @@
+import { ComputedRef, MaybeRefOrGetter } from "vue";
+
+//#region src/use-number-format.d.ts
+/** Numeric values accepted by `Intl.NumberFormat`. */
+type FormattableNumber = number | bigint;
+/** Options for {@link useNumberFormat}. */
+interface UseNumberFormatOptions extends Intl.NumberFormatOptions {
+  /**
+   * Locale used for formatting. Pass it explicitly for server rendering:
+   * without it the server falls back to `"en"` while the browser detects
+   * `navigator.language`, which can make hydration mismatch.
+   *
+   * @default the browser language, otherwise "en"
+   */
+  readonly locale?: string | Intl.Locale;
+}
+/** Reactive number formatting returned by {@link useNumberFormat}. */
+interface NumberFormatControls {
+  /** Canonical locale in use. */
+  readonly locale: ComputedRef<string>;
+  /** Cached formatter for the current locale and options. */
+  readonly formatter: ComputedRef<Intl.NumberFormat>;
+  /** Formatted `value`, or `""` while the value is `null`/`undefined`. */
+  readonly formatted: ComputedRef<string>;
+  /**
+   * Format any number with the current formatter.
+   *
+   * @param value Number to format.
+   * @returns The formatted string.
+   */
+  readonly format: (value: FormattableNumber) => string;
+  /**
+   * Format any number into locale-aware parts.
+   *
+   * @param value Number to format.
+   * @returns The formatted parts.
+   */
+  readonly formatToParts: (value: FormattableNumber) => Intl.NumberFormatPart[];
+  /**
+   * Format a numeric range (for example `"3–5"`).
+   *
+   * @param start Range start.
+   * @param end Range end.
+   * @returns The formatted range.
+   */
+  readonly formatRange: (start: FormattableNumber, end: FormattableNumber) => string;
+}
+/**
+ * Format numbers reactively with `Intl.NumberFormat`.
+ *
+ * The formatter follows the reactive options (including `locale`) and is
+ * cached per locale and option set through {@link useLocale}. Without an
+ * explicit locale the browser language is used, falling back to `"en"`
+ * (always the case on the server). Invalid options surface as the
+ * platform's `RangeError`/`TypeError` on first read. No listeners or timers
+ * are created, so nothing needs cleanup.
+ *
+ * @example
+ * ```ts
+ * const price = ref(1234.5);
+ * const { formatted } = useNumberFormat(price, { locale: "de-DE", style: "currency", currency: "EUR" });
+ * formatted.value; // "1.234,50 €"
+ * ```
+ *
+ * @param value Reactive number; `null`/`undefined` format as `""`.
+ * @param options Reactive locale and `Intl.NumberFormat` options.
+ * @default value undefined
+ * @default options {}
+ * @returns Reactive formatted output and formatter helpers.
+ */
+declare function useNumberFormat(value?: MaybeRefOrGetter<FormattableNumber | null | undefined>, options?: MaybeRefOrGetter<UseNumberFormatOptions>): NumberFormatControls;
+//#endregion
+export { FormattableNumber, NumberFormatControls, UseNumberFormatOptions, useNumberFormat };

package/dist/use-number-format.mjs

@@ -0,0 +1,58 @@
+import { useLocale } from "./locale.mjs";
+import { computed, toValue } from "vue";
+//#region src/use-number-format.ts
+function formatRangeWith(formatter, start, end) {
+	const native = Reflect.get(formatter, "formatRange");
+	if (typeof native === "function") {
+		const result = Reflect.apply(native, formatter, [start, end]);
+		if (typeof result === "string") return result;
+	}
+	return `${formatter.format(start)}\u2013${formatter.format(end)}`;
+}
+function browserLanguage() {
+	return typeof window === "undefined" ? void 0 : window.navigator.language;
+}
+/**
+* Format numbers reactively with `Intl.NumberFormat`.
+*
+* The formatter follows the reactive options (including `locale`) and is
+* cached per locale and option set through {@link useLocale}. Without an
+* explicit locale the browser language is used, falling back to `"en"`
+* (always the case on the server). Invalid options surface as the
+* platform's `RangeError`/`TypeError` on first read. No listeners or timers
+* are created, so nothing needs cleanup.
+*
+* @example
+* ```ts
+* const price = ref(1234.5);
+* const { formatted } = useNumberFormat(price, { locale: "de-DE", style: "currency", currency: "EUR" });
+* formatted.value; // "1.234,50 €"
+* ```
+*
+* @param value Reactive number; `null`/`undefined` format as `""`.
+* @param options Reactive locale and `Intl.NumberFormat` options.
+* @default value undefined
+* @default options {}
+* @returns Reactive formatted output and formatter helpers.
+*/
+function useNumberFormat(value, options = {}) {
+	const localeControls = useLocale(() => toValue(options).locale, { detect: browserLanguage });
+	const formatter = computed(() => {
+		const { locale: _locale, ...formatOptions } = toValue(options);
+		return localeControls.number(formatOptions);
+	});
+	const formatted = computed(() => {
+		const current = value === void 0 ? void 0 : toValue(value);
+		return current === null || current === void 0 ? "" : formatter.value.format(current);
+	});
+	return {
+		locale: localeControls.locale,
+		formatter,
+		formatted,
+		format: (input) => formatter.value.format(input),
+		formatToParts: (input) => formatter.value.formatToParts(input),
+		formatRange: (start, end) => formatRangeWith(formatter.value, start, end)
+	};
+}
+//#endregion
+export { useNumberFormat };

package/dist/use-object-url.d.mts

@@ -0,0 +1,47 @@
+import { MaybeRef, MaybeRefOrGetter, Ref } from "vue";
+
+//#region src/use-object-url.d.ts
+/** Objects accepted by `URL.createObjectURL`. */
+type ObjectUrlSource = Blob | MediaSource;
+/** Minimal object-URL capability (the `URL` constructor's static methods). */
+interface ObjectUrlHost {
+  /** Create a URL referencing `object`. */
+  createObjectURL(object: ObjectUrlSource): string;
+  /** Release a URL previously returned by `createObjectURL`. */
+  revokeObjectURL(url: string): void;
+}
+/** Options for {@link useObjectUrl}. */
+interface UseObjectUrlOptions {
+  /**
+   * Object-URL capability for alternate runtimes and tests. A ref (not a
+   * getter) because the default host, `URL`, is itself a constructor.
+   *
+   * @default window.URL when a browser window exists
+   */
+  readonly host?: MaybeRef<ObjectUrlHost | null | undefined>;
+}
+/**
+ * Create a reactive object URL for a `Blob`, `File`, or `MediaSource`.
+ *
+ * A new URL is created whenever the reactive object changes and the
+ * previous one is revoked immediately, so memory held by the old object is
+ * released. The last URL is revoked when the owning reactive scope stops.
+ * Outside a scope, the caller owns the last URL (it lives until unload).
+ *
+ * Server rendering: no URL is created and the ref stays `undefined`.
+ *
+ * @example
+ * ```ts
+ * const file = shallowRef<File>();
+ * const preview = useObjectUrl(file);
+ * // <img :src="preview">
+ * ```
+ *
+ * @param object Reactive object to reference; `null`/`undefined` clears the URL.
+ * @param options Object-URL capability.
+ * @default options {}
+ * @returns Readonly ref holding the current object URL.
+ */
+declare function useObjectUrl(object: MaybeRefOrGetter<ObjectUrlSource | null | undefined>, options?: UseObjectUrlOptions): Readonly<Ref<string | undefined>>;
+//#endregion
+export { ObjectUrlHost, ObjectUrlSource, UseObjectUrlOptions, useObjectUrl };

package/dist/use-object-url.mjs

@@ -0,0 +1,54 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { readonly, ref, toValue, unref, watch } from "vue";
+//#region src/use-object-url.ts
+function browserObjectUrlHost() {
+	if (typeof window === "undefined") return void 0;
+	const { URL } = window;
+	return typeof URL.createObjectURL === "function" ? URL : void 0;
+}
+/**
+* Create a reactive object URL for a `Blob`, `File`, or `MediaSource`.
+*
+* A new URL is created whenever the reactive object changes and the
+* previous one is revoked immediately, so memory held by the old object is
+* released. The last URL is revoked when the owning reactive scope stops.
+* Outside a scope, the caller owns the last URL (it lives until unload).
+*
+* Server rendering: no URL is created and the ref stays `undefined`.
+*
+* @example
+* ```ts
+* const file = shallowRef<File>();
+* const preview = useObjectUrl(file);
+* // <img :src="preview">
+* ```
+*
+* @param object Reactive object to reference; `null`/`undefined` clears the URL.
+* @param options Object-URL capability.
+* @default options {}
+* @returns Readonly ref holding the current object URL.
+*/
+function useObjectUrl(object, options = {}) {
+	const url = ref(void 0);
+	const resolveHost = () => options.host === void 0 ? browserObjectUrlHost() : unref(options.host) ?? void 0;
+	let revokeCurrent;
+	const release = () => {
+		revokeCurrent?.();
+		revokeCurrent = void 0;
+		url.value = void 0;
+	};
+	watch([() => toValue(object), resolveHost], ([next, host]) => {
+		release();
+		if (!next || !host) return;
+		const created = host.createObjectURL(next);
+		url.value = created;
+		revokeCurrent = () => host.revokeObjectURL(created);
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
+	tryOnScopeDispose(release);
+	return readonly(url);
+}
+//#endregion
+export { useObjectUrl };

package/dist/use-offset-pagination.d.mts

@@ -0,0 +1,91 @@
+import { ComputedRef, MaybeRef, MaybeRefOrGetter, WritableComputedRef } from "vue";
+
+//#region src/use-offset-pagination.d.ts
+/** Page information passed to the {@link useOffsetPagination} callbacks. */
+interface OffsetPaginationInfo {
+  /** One-based current page. */
+  readonly currentPage: number;
+  /** Items per page. */
+  readonly currentPageSize: number;
+  /** Number of pages (at least one). */
+  readonly pageCount: number;
+}
+/** Options for {@link useOffsetPagination}. */
+interface UseOffsetPaginationOptions {
+  /**
+   * Total number of items. Reactive.
+   *
+   * @default Number.POSITIVE_INFINITY
+   */
+  readonly total?: MaybeRefOrGetter<number>;
+  /**
+   * One-based current page. Pass a writable ref for two-way binding.
+   *
+   * @default 1
+   */
+  readonly page?: MaybeRef<number>;
+  /**
+   * Items per page. Pass a writable ref for two-way binding.
+   *
+   * @default 10
+   */
+  readonly pageSize?: MaybeRef<number>;
+  /**
+   * Called after the current page changes.
+   *
+   * @default undefined
+   */
+  readonly onPageChange?: (info: OffsetPaginationInfo) => void;
+  /**
+   * Called after the page size changes.
+   *
+   * @default undefined
+   */
+  readonly onPageSizeChange?: (info: OffsetPaginationInfo) => void;
+  /**
+   * Called after the page count changes.
+   *
+   * @default undefined
+   */
+  readonly onPageCountChange?: (info: OffsetPaginationInfo) => void;
+}
+/** Pagination state and controls returned by {@link useOffsetPagination}. */
+interface OffsetPagination {
+  /** One-based current page, always within `[1, pageCount]`. Writable. */
+  readonly currentPage: WritableComputedRef<number>;
+  /** Items per page, at least one. Writable. */
+  readonly currentPageSize: WritableComputedRef<number>;
+  /** Number of pages (at least one). */
+  readonly pageCount: ComputedRef<number>;
+  /** Zero-based offset of the first item of the current page. */
+  readonly offset: ComputedRef<number>;
+  /** Whether the current page is the first. */
+  readonly isFirstPage: ComputedRef<boolean>;
+  /** Whether the current page is the last. */
+  readonly isLastPage: ComputedRef<boolean>;
+  /** Go to the previous page (no-op on the first). */
+  readonly prev: () => void;
+  /** Go to the next page (no-op on the last). */
+  readonly next: () => void;
+}
+/**
+ * Offset-based pagination state.
+ *
+ * The page is clamped into `[1, pageCount]` on every read and write, so
+ * shrinking `total` or growing `pageSize` never leaves the cursor past the
+ * end. Writable `page`/`pageSize` refs are updated in place for two-way
+ * binding. Callbacks fire after the corresponding value settles.
+ * Synchronous state: SSR-safe; watchers follow the owning scope.
+ *
+ * @example
+ * ```ts
+ * const { currentPage, pageCount, next, offset } = useOffsetPagination({ total, pageSize: 20 });
+ * ```
+ *
+ * @param options Total, page, page size, and change callbacks.
+ * @default options {}
+ * @returns Pagination state and controls.
+ */
+declare function useOffsetPagination(options?: UseOffsetPaginationOptions): OffsetPagination;
+//#endregion
+export { OffsetPagination, OffsetPaginationInfo, UseOffsetPaginationOptions, useOffsetPagination };

package/dist/use-offset-pagination.mjs

@@ -0,0 +1,80 @@
+import { computed, isRef, shallowRef, toValue, watch } from "vue";
+//#region src/use-offset-pagination.ts
+function toWritable(value, fallback) {
+	return isRef(value) ? value : shallowRef(value ?? fallback);
+}
+/**
+* Offset-based pagination state.
+*
+* The page is clamped into `[1, pageCount]` on every read and write, so
+* shrinking `total` or growing `pageSize` never leaves the cursor past the
+* end. Writable `page`/`pageSize` refs are updated in place for two-way
+* binding. Callbacks fire after the corresponding value settles.
+* Synchronous state: SSR-safe; watchers follow the owning scope.
+*
+* @example
+* ```ts
+* const { currentPage, pageCount, next, offset } = useOffsetPagination({ total, pageSize: 20 });
+* ```
+*
+* @param options Total, page, page size, and change callbacks.
+* @default options {}
+* @returns Pagination state and controls.
+*/
+function useOffsetPagination(options = {}) {
+	const page = toWritable(options.page, 1);
+	const size = toWritable(options.pageSize, 10);
+	const currentPageSize = computed({
+		get: () => Math.max(1, Math.trunc(size.value)),
+		set: (value) => {
+			size.value = Math.max(1, Math.trunc(value));
+		}
+	});
+	const pageCount = computed(() => {
+		const total = toValue(options.total ?? Number.POSITIVE_INFINITY);
+		return Math.max(1, Math.ceil(Math.max(0, total) / currentPageSize.value));
+	});
+	const clampPage = (value) => Math.min(pageCount.value, Math.max(1, Number.isNaN(value) ? 1 : Math.trunc(value)));
+	const currentPage = computed({
+		get: () => clampPage(page.value),
+		set: (value) => {
+			page.value = clampPage(value);
+		}
+	});
+	const offset = computed(() => (currentPage.value - 1) * currentPageSize.value);
+	const isFirstPage = computed(() => currentPage.value === 1);
+	const isLastPage = computed(() => currentPage.value === pageCount.value);
+	const info = () => ({
+		currentPage: currentPage.value,
+		currentPageSize: currentPageSize.value,
+		pageCount: pageCount.value
+	});
+	if (options.onPageChange !== void 0) {
+		const callback = options.onPageChange;
+		watch(currentPage, () => callback(info()));
+	}
+	if (options.onPageSizeChange !== void 0) {
+		const callback = options.onPageSizeChange;
+		watch(currentPageSize, () => callback(info()));
+	}
+	if (options.onPageCountChange !== void 0) {
+		const callback = options.onPageCountChange;
+		watch(pageCount, () => callback(info()));
+	}
+	return {
+		currentPage,
+		currentPageSize,
+		pageCount,
+		offset,
+		isFirstPage,
+		isLastPage,
+		prev: () => {
+			currentPage.value -= 1;
+		},
+		next: () => {
+			currentPage.value += 1;
+		}
+	};
+}
+//#endregion
+export { useOffsetPagination };

package/dist/use-payment-request.d.mts

@@ -0,0 +1,239 @@
+import { ComputedRef, MaybeRef, MaybeRefOrGetter, ShallowRef } from "vue";
+
+//#region src/use-payment-request.d.ts
+/** Monetary amount. */
+interface PaymentAmount {
+  /** ISO 4217 currency code. */
+  readonly currency: string;
+  /** Decimal amount, for example `"9.99"`. */
+  readonly value: string;
+}
+/** Line item shown on the payment sheet. */
+interface PaymentLineItem {
+  /** Human-readable label. */
+  readonly label: string;
+  /** Amount. */
+  readonly amount: PaymentAmount;
+  /** Whether the amount is not final yet. */
+  readonly pending?: boolean;
+}
+/** Selectable shipping option. */
+interface PaymentShippingOption {
+  /** Option id reported back in `shippingOption`. */
+  readonly id: string;
+  /** Human-readable label. */
+  readonly label: string;
+  /** Price of the option. */
+  readonly amount: PaymentAmount;
+  /** Whether the option is preselected. */
+  readonly selected?: boolean;
+}
+/** Accepted payment method. */
+interface PaymentMethod {
+  /** Payment method identifier (URL or standardized name). */
+  readonly supportedMethods: string;
+  /** Method-specific data. */
+  readonly data?: unknown;
+}
+/** Initial payment details. */
+interface PaymentDetails {
+  /** Request id. */
+  readonly id?: string;
+  /** Total amount. */
+  readonly total: PaymentLineItem;
+  /** Line items. */
+  readonly displayItems?: readonly PaymentLineItem[];
+  /** Shipping options. */
+  readonly shippingOptions?: readonly PaymentShippingOption[];
+}
+/** Details passed to `updateWith` after a shipping change. */
+interface PaymentDetailsUpdate {
+  /** Updated total. */
+  readonly total?: PaymentLineItem;
+  /** Updated line items. */
+  readonly displayItems?: readonly PaymentLineItem[];
+  /** Updated shipping options (empty to reject the address). */
+  readonly shippingOptions?: readonly PaymentShippingOption[];
+  /** Error message shown to the user. */
+  readonly error?: string;
+  /** Per-field shipping address errors. */
+  readonly shippingAddressErrors?: Readonly<Record<string, string>>;
+}
+/** Shipping category of the request. */
+type PaymentShippingType = "shipping" | "delivery" | "pickup";
+/** Payer information requested from the sheet. */
+interface PaymentRequestOptionsInit {
+  /** Request the payer name. */
+  readonly requestPayerName?: boolean;
+  /** Request the payer email. */
+  readonly requestPayerEmail?: boolean;
+  /** Request the payer phone. */
+  readonly requestPayerPhone?: boolean;
+  /** Request a shipping address. */
+  readonly requestShipping?: boolean;
+  /** Shipping category. */
+  readonly shippingType?: PaymentShippingType;
+}
+/** Outcome passed to {@link PaymentResponseLike.complete}. */
+type PaymentCompletion = "success" | "fail" | "unknown";
+/** Minimal `PaymentResponse`. */
+interface PaymentResponseLike {
+  /** Request id. */
+  readonly requestId: string;
+  /** Method the payer chose. */
+  readonly methodName: string;
+  /** Method-specific response data. */
+  readonly details: unknown;
+  /** Payer name, when requested. */
+  readonly payerName?: string | null;
+  /** Payer email, when requested. */
+  readonly payerEmail?: string | null;
+  /** Payer phone, when requested. */
+  readonly payerPhone?: string | null;
+  /** Shipping address, when requested. */
+  readonly shippingAddress?: unknown;
+  /** Selected shipping option id. */
+  readonly shippingOption?: string | null;
+  /** Close the sheet with an outcome. */
+  complete(result?: PaymentCompletion): Promise<void>;
+}
+/** Minimal `PaymentRequest` instance. */
+interface PaymentRequestLike extends EventTarget {
+  /** Current shipping address. */
+  readonly shippingAddress?: unknown;
+  /** Current shipping option id. */
+  readonly shippingOption?: string | null;
+  /** Whether a method can be used. */
+  canMakePayment(): Promise<boolean>;
+  /** Show the payment sheet (needs user activation). */
+  show(): Promise<PaymentResponseLike>;
+  /** Abort a showing sheet. */
+  abort(): Promise<void>;
+}
+/** Minimal `PaymentRequest` constructor. */
+type PaymentRequestHost = new (methods: PaymentMethod[], details: PaymentDetails, options?: PaymentRequestOptionsInit) => PaymentRequestLike;
+/** Context passed to shipping change hooks. */
+interface PaymentShippingChange {
+  /** Request that fired the change. */
+  readonly request: PaymentRequestLike;
+  /** Current shipping address. */
+  readonly shippingAddress: unknown;
+  /** Current shipping option id. */
+  readonly shippingOption: string | null;
+}
+/**
+ * Shipping change hook. Return (or resolve to) a details update to call
+ * `updateWith`; return `undefined` to leave the sheet unchanged.
+ */
+type PaymentShippingChangeHook = (change: PaymentShippingChange) => PaymentDetailsUpdate | Promise<PaymentDetailsUpdate> | undefined;
+/** Options for {@link usePaymentRequest}. */
+interface UsePaymentRequestOptions {
+  /** Accepted payment methods. Reactive; read when a request is created. */
+  readonly methods: MaybeRefOrGetter<readonly PaymentMethod[]>;
+  /** Payment details. Reactive; read when a request is created. */
+  readonly details: MaybeRefOrGetter<PaymentDetails>;
+  /**
+   * Payer information to request.
+   *
+   * @default {}
+   */
+  readonly paymentOptions?: MaybeRefOrGetter<PaymentRequestOptionsInit>;
+  /**
+   * `PaymentRequest` constructor for alternate runtimes and tests. A ref
+   * (not a getter) because the host is a constructor function.
+   *
+   * @default window.PaymentRequest when it exists
+   */
+  readonly PaymentRequest?: MaybeRef<PaymentRequestHost | null | undefined>;
+  /**
+   * Called on `shippingaddresschange`.
+   *
+   * @default undefined
+   */
+  readonly onShippingAddressChange?: PaymentShippingChangeHook;
+  /**
+   * Called on `shippingoptionchange`.
+   *
+   * @default undefined
+   */
+  readonly onShippingOptionChange?: PaymentShippingChangeHook;
+}
+/** Lifecycle of the payment sheet. */
+type PaymentRequestState = "idle" | "interactive" | "awaiting-complete";
+/** Discriminated outcome of {@link PaymentRequestControls.show}. */
+type PaymentShowResult = {
+  /** The payer authorized the payment; call `complete` next. */readonly status: "completed"; /** Payment response. */
+  readonly response: PaymentResponseLike;
+} | {
+  /**
+   * `aborted`: dismissed or aborted; `unsupported`: no API or no
+   * supported method; `failed`: anything else.
+   */
+  readonly status: "aborted" | "unsupported" | "failed"; /** Error thrown by the host, when one was thrown. */
+  readonly error: unknown;
+};
+/** Reactive state and actions returned by {@link usePaymentRequest}. */
+interface PaymentRequestControls {
+  /** Whether the Payment Request API is available. */
+  readonly supported: ComputedRef<boolean>;
+  /** Sheet lifecycle. */
+  readonly state: Readonly<ShallowRef<PaymentRequestState>>;
+  /** Most recent response, cleared when a new sheet is shown. */
+  readonly response: Readonly<ShallowRef<PaymentResponseLike | undefined>>;
+  /** Most recent failure (not dismissals). */
+  readonly error: Readonly<ShallowRef<unknown>>;
+  /**
+   * Whether the configured methods can be used.
+   *
+   * @returns `false` when unsupported or the check fails.
+   */
+  readonly canMakePayment: () => Promise<boolean>;
+  /**
+   * Show the payment sheet. Aborts a sheet that is still showing.
+   *
+   * @returns The discriminated outcome; never rejects.
+   */
+  readonly show: () => Promise<PaymentShowResult>;
+  /**
+   * Close the sheet after processing the response.
+   *
+   * @param result Processing outcome.
+   * @default result "unknown"
+   * @returns Whether a response was completed.
+   */
+  readonly complete: (result?: PaymentCompletion) => Promise<boolean>;
+  /**
+   * Abort the showing sheet.
+   *
+   * @returns Whether a sheet was aborted.
+   */
+  readonly abort: () => Promise<boolean>;
+}
+/**
+ * Collect payments with a typed Payment Request API wrapper.
+ *
+ * Every `show()` constructs a fresh request from the reactive `methods`,
+ * `details`, and `paymentOptions`, wires the shipping hooks (which call
+ * `updateWith` synchronously when they return an update), and resolves to a
+ * discriminated {@link PaymentShowResult}. Call `complete()` after
+ * processing a `"completed"` result. A showing sheet is aborted when the
+ * owning reactive scope stops; outside a scope call `abort()`.
+ *
+ * Server rendering: nothing is constructed, `supported` is false and
+ * `state` is `"idle"`.
+ * Inside a component `supported` turns true only after mounting, so
+ * hydration renders this server state first.
+ *
+ * @example
+ * ```ts
+ * const payment = usePaymentRequest({ methods, details: { total } });
+ * const result = await payment.show();
+ * if (result.status === "completed") await payment.complete(await charge(result.response));
+ * ```
+ *
+ * @param options Methods, details, hooks, and the constructor host.
+ * @returns Payment state and actions.
+ */
+declare function usePaymentRequest(options: UsePaymentRequestOptions): PaymentRequestControls;
+//#endregion
+export { PaymentAmount, PaymentCompletion, PaymentDetails, PaymentDetailsUpdate, PaymentLineItem, PaymentMethod, PaymentRequestControls, PaymentRequestHost, PaymentRequestLike, PaymentRequestOptionsInit, PaymentRequestState, PaymentResponseLike, PaymentShippingChange, PaymentShippingChangeHook, PaymentShippingOption, PaymentShippingType, PaymentShowResult, UsePaymentRequestOptions, usePaymentRequest };