@elvix.is/sdk 0.5.4 → 0.5.6

package/dist/react.d.ts

@@ -1,8 +1,18 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 import { ElvixActionResult } from './index.js';
 export { ElvixUser, ElvixVerifyResult } from './index.js';
 
+/** Size overrides every <Elvix*> component accepts so hosts can fit it to any slot. */
+type ElvixSizeProps = {
+    width?: number | string;
+    height?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+};
+
 /**
  * `<ElvixCard>` — the chrome every nested `<Elvix*>` mutation surface
  * lives in. Brand-tinted border, secured-by-elvix footer, scrollable
@@ -12,13 +22,18 @@ export { ElvixUser, ElvixVerifyResult } from './index.js';
  * components render their own ElvixCard internally. Exported for
  * cases where a host wants to compose multiple components inside one
  * card (e.g. an account page row).
+ *
+ * Accepts `ElvixSizeProps` (width/height/min/max) merged into the root
+ * element so every component built on ElvixCard is sizable by default;
+ * the size props win over the card's maxWidth/width defaults.
  */
-declare function ElvixCard({ title, footer, className, children, }: {
+declare function ElvixCard({ title, footer, className, style, children, width, height, minWidth, maxWidth, minHeight, maxHeight, }: {
     title?: ReactNode;
     footer?: ReactNode;
     className?: string;
+    style?: CSSProperties;
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+} & ElvixSizeProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Editable sign-in copy.
@@ -43,6 +58,8 @@ type ElvixCopy = {
     subtitle?: string;
     /** Google factor button. */
     googleButton?: string;
+    /** Passkey factor button. */
+    passkeyButton?: string;
     /** Email field placeholder. */
     emailPlaceholder?: string;
     /** Email submit button (identify step). */
@@ -186,7 +203,7 @@ declare function ElvixProvider({ clientId, theme, brand, baseUrl, children, clas
  * exposes. Hosts navigate from the callback; this component never
  * calls `router.push` itself.
  */
-declare function ElvixSignIn({ onResult, redirectAfterSignIn, copy: copyProp, className, }: {
+declare function ElvixSignIn({ onResult, redirectAfterSignIn, copy: copyProp, className, width, height, minWidth, maxWidth, minHeight, maxHeight, }: {
     onResult?: (r: ElvixSignInResult) => void;
     /** Default redirect target on success when the server doesn't echo one. */
     redirectAfterSignIn?: string;
@@ -197,7 +214,45 @@ declare function ElvixSignIn({ onResult, redirectAfterSignIn, copy: copyProp, cl
      */
     copy?: Partial<ElvixCopy>;
     className?: string;
-}): react_jsx_runtime.JSX.Element;
+} & ElvixSizeProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * `<ElvixSignInForm>` — the polished, fully-styled sign-in surface a
+ * customer drops onto their own app.
+ *
+ * Where `<ElvixSignIn>` is the bare-bones flow (class-hooked, host paints
+ * it), this is the finished card: rounded logo tile, "Sign in to {app}"
+ * heading, "Continue with Google", an OR divider, the email→code OTP
+ * flow, a legal footer, and a "Secured by elvix" badge. It ships with
+ * **inline styles only** — no host CSS required, so it looks right the
+ * moment it mounts on any origin.
+ *
+ * Cross-origin correct: OTP start/verify pick credentials from
+ * `isSameOrigin(baseUrl)` exactly like `<ElvixSignIn>`; on a third-party
+ * origin the session token comes back in the response body and is stored
+ * via `setElvixToken`. Google is a top-level redirect.
+ *
+ * Reads enabled methods + branding from the Console-configured bootstrap
+ * envelope (`<ElvixProvider clientId>` must be an ancestor). Renders only
+ * the factors the Console turned on; never invents UI it denied.
+ *
+ * `onResult({ ok, ... })` fires on success AND every failure, mirroring
+ * `<ElvixSignIn>`. The component never navigates the host itself.
+ */
+type ElvixSignInFormProps = {
+    /** Fires on every terminal outcome — success and failure — like `<ElvixSignIn>`. */
+    onResult?: (r: ElvixSignInResult) => void;
+    /** Default redirect target on success when the server doesn't echo one. */
+    redirectAfterSignIn?: string;
+    /**
+     * Thin per-embed copy override. The primary way to edit copy is the elvix
+     * Console (served live in the bootstrap `strings`); this prop just lets a
+     * single embed tweak a string or two without a Console change.
+     */
+    copy?: Partial<ElvixCopy>;
+    className?: string;
+} & /** Sizing — applied to the card root inline style (SDK components are sizable). */ ElvixSizeProps;
+declare function ElvixSignInForm({ onResult, redirectAfterSignIn, copy: copyProp, className, minWidth, maxWidth, minHeight, maxHeight, width, height, }: ElvixSignInFormProps): react_jsx_runtime.JSX.Element;
 
 type ElvixSignInButtonSize = "sm" | "md" | "lg";
 type ElvixSignInButtonTheme = "light" | "dark" | "auto";
@@ -224,8 +279,11 @@ type ElvixSignInButtonProps = {
     onClick?: () => void;
     /** Terminal outcome of mode="embed": success (with token) or error. */
     onResult?: (result: ElvixSignInResult) => void;
-};
-declare function ElvixSignInButton({ clientId, baseUrl, returnUrl, type, variant, shape, size, theme, preset, label, className, href, mode, onClick, onResult, }: ElvixSignInButtonProps): react_jsx_runtime.JSX.Element;
+} & /**
+ * Dimensional sizing (width/height/min/max), additive to the `size` preset.
+ * Merged last into the root element so an explicit width/height wins.
+ */ ElvixSizeProps;
+declare function ElvixSignInButton({ clientId, baseUrl, returnUrl, type, variant, shape, size, theme, preset, label, className, href, mode, onClick, onResult, width, height, minWidth, maxWidth, minHeight, maxHeight, }: ElvixSignInButtonProps): react_jsx_runtime.JSX.Element;
 
 type ElvixSecuredBadgeVariant = "white" | "dark" | "outline";
 type ElvixSecuredBadgeSize = "sm" | "md" | "lg";
@@ -240,8 +298,8 @@ type ElvixSecuredBadgeProps = {
     /** Where the badge links. Defaults to elvix. */
     href?: string;
     className?: string;
-};
-declare function ElvixSecuredBadge({ variant, size, theme, accentColor, href, className, }: ElvixSecuredBadgeProps): react_jsx_runtime.JSX.Element;
+} & /** Dimensional sizing, additive to the `size` preset; merged last so it wins. */ ElvixSizeProps;
+declare function ElvixSecuredBadge({ variant, size, theme, accentColor, href, className, width, height, minWidth, maxWidth, minHeight, maxHeight, }: ElvixSecuredBadgeProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Session token store for cross-origin SDK use.
@@ -290,111 +348,111 @@ declare function ElvixLifecycleWatcher({ baseUrl, pollMs, onSignedOut, }: {
  * current Application. PATCH /api/account/apps/<appId>/username.
  * Render a single in-frame card with two panes: edit + done.
  */
-declare function ElvixUsername({ onResult, }: {
+declare function ElvixUsername({ onResult, width, height, minWidth, maxWidth, minHeight, maxHeight, }: {
     onResult?: (r: ElvixActionResult<{
         username: string;
     }>) => void;
-}): react_jsx_runtime.JSX.Element;
+} & ElvixSizeProps): react_jsx_runtime.JSX.Element;
 
 /**
  * `<ElvixAvatar>` — upload / replace the end-user's avatar for this
  * Application. Reads file → base64 → PATCH /api/account/apps/<appId>/avatar.
  */
-declare function ElvixAvatar({ onResult, }: {
+declare function ElvixAvatar({ onResult, width, height, minWidth, maxWidth, minHeight, maxHeight, }: {
     onResult?: (r: ElvixActionResult<{
         avatarUrl: string;
     }>) => void;
-}): react_jsx_runtime.JSX.Element;
+} & ElvixSizeProps): react_jsx_runtime.JSX.Element;
 
 /**
  * `<ElvixBanner>` — upload / replace the end-user's profile banner
  * (16:9 cover image) for this Application.
  */
-declare function ElvixBanner({ onResult, }: {
+declare function ElvixBanner({ onResult, width, height, minWidth, maxWidth, minHeight, maxHeight, }: {
     onResult?: (r: ElvixActionResult<{
         bannerUrl: string;
     }>) => void;
-}): react_jsx_runtime.JSX.Element;
+} & ElvixSizeProps): react_jsx_runtime.JSX.Element;
 
 /**
  * `<ElvixIdentityForm>` — edit the end-user's display name + bio for
  * the current Application. Lightweight per-app profile fields.
  */
-declare function ElvixIdentityForm({ initialName, initialBio, onResult, }: {
+declare function ElvixIdentityForm({ initialName, initialBio, onResult, width, height, minWidth, maxWidth, minHeight, maxHeight, }: {
     initialName?: string;
     initialBio?: string;
     onResult?: (r: ElvixActionResult<{
         name: string;
         bio: string;
     }>) => void;
-}): react_jsx_runtime.JSX.Element;
+} & ElvixSizeProps): react_jsx_runtime.JSX.Element;
 
 /**
  * `<ElvixRegion>` — set the end-user's region (ISO 3166-1 alpha-2
  * country code + timezone). Used by elvix for data-residency hints
  * and locale defaults.
  */
-declare function ElvixRegion({ initialCountry, initialTimezone, onResult, }: {
+declare function ElvixRegion({ initialCountry, initialTimezone, onResult, width, height, minWidth, maxWidth, minHeight, maxHeight, }: {
     initialCountry?: string;
     initialTimezone?: string;
     onResult?: (r: ElvixActionResult<{
         country: string;
         timezone: string;
     }>) => void;
-}): react_jsx_runtime.JSX.Element;
+} & ElvixSizeProps): react_jsx_runtime.JSX.Element;
 
 /**
  * `<ElvixLanguages>` — set the end-user's preferred languages (BCP-47
  * tag list, ordered by preference). The first entry drives UI locale.
  */
-declare function ElvixLanguages({ initial, onResult, }: {
+declare function ElvixLanguages({ initial, onResult, width, height, minWidth, maxWidth, minHeight, maxHeight, }: {
     initial?: string[];
     onResult?: (r: ElvixActionResult<{
         languages: string[];
     }>) => void;
-}): react_jsx_runtime.JSX.Element;
+} & ElvixSizeProps): react_jsx_runtime.JSX.Element;
 
-declare function ElvixSessions({ onResult, }: {
+declare function ElvixSessions({ onResult, width, height, minWidth, maxWidth, minHeight, maxHeight, }: {
     onResult?: (r: ElvixActionResult<{
         revoked: number;
     }>) => void;
-}): react_jsx_runtime.JSX.Element;
+} & ElvixSizeProps): react_jsx_runtime.JSX.Element;
 
 /**
  * `<ElvixExport>` — GDPR Art. 15 data-export request. Triggers an
  * async server-side zip + emails a single-use download link to the
  * end-user's bound email address.
  */
-declare function ElvixExport({ onResult, }: {
+declare function ElvixExport({ onResult, width, height, minWidth, maxWidth, minHeight, maxHeight, }: {
     onResult?: (r: ElvixActionResult<{
         requestId: string;
     }>) => void;
-}): react_jsx_runtime.JSX.Element;
+} & ElvixSizeProps): react_jsx_runtime.JSX.Element;
 
-declare function ElvixDeactivate({ onResult, }: {
+declare function ElvixDeactivate({ onResult, width, height, minWidth, maxWidth, minHeight, maxHeight, }: {
     onResult?: (r: ElvixActionResult) => void;
-}): react_jsx_runtime.JSX.Element;
+} & ElvixSizeProps): react_jsx_runtime.JSX.Element;
 
-declare function ElvixLeave({ onResult, }: {
+declare function ElvixLeave({ onResult, width, height, minWidth, maxWidth, minHeight, maxHeight, }: {
     onResult?: (r: ElvixActionResult) => void;
-}): react_jsx_runtime.JSX.Element;
+} & ElvixSizeProps): react_jsx_runtime.JSX.Element;
 
 /**
  * `<ElvixAddressBook>` — list / add / remove the end-user's addresses
  * on this Application. Read uses GET /api/account/apps/<appId>/addresses;
  * mutations POST + DELETE on the same path.
  */
-declare function ElvixAddressBook({ onResult, }: {
+declare function ElvixAddressBook({ onResult, width, height, minWidth, maxWidth, minHeight, maxHeight, }: {
     onResult?: (r: ElvixActionResult) => void;
-}): react_jsx_runtime.JSX.Element;
+} & ElvixSizeProps): react_jsx_runtime.JSX.Element;
 
 /**
  * `<ElvixLegalEntities>` — list / add / remove the end-user's legal
  * entities (company names + tax IDs) on this Application. Useful for
  * B2B apps that bill at the entity level.
  */
-declare function ElvixLegalEntities({ onResult, }: {
+declare function ElvixLegalEntities({ onResult, width, height, minWidth, maxWidth, minHeight, maxHeight, }: {
     onResult?: (r: ElvixActionResult) => void;
-}): react_jsx_runtime.JSX.Element;
+} & ElvixSizeProps): react_jsx_runtime.JSX.Element;
 
-export { DEFAULT_COPY, ElvixActionResult, ElvixAddressBook, ElvixAvatar, ElvixBanner, type ElvixBootstrapEnvelope, type ElvixBrand, ElvixCard, type ElvixCopy, ElvixDeactivate, ElvixExport, ElvixIdentityForm, ElvixLanguages, ElvixLeave, ElvixLegalEntities, ElvixLifecycleWatcher, ElvixProvider, ElvixRegion, ElvixSecuredBadge, ElvixSessions, ElvixSignIn, ElvixSignInButton, type ElvixSignInMethod, type ElvixSignInResult, type ElvixSignInResultErr, type ElvixSignInResultOk, type ElvixTheme, ElvixUsername, type UseUserListResult, getElvixToken, setElvixToken, useElvixApp, useElvixContext, useUserMemberships, useUserRoles, useUserScopes };
+export { DEFAULT_COPY, ElvixActionResult, ElvixAddressBook, ElvixAvatar, ElvixBanner, type ElvixBootstrapEnvelope, type ElvixBrand, ElvixCard, type ElvixCopy, ElvixDeactivate, ElvixExport, ElvixIdentityForm, ElvixLanguages, ElvixLeave, ElvixLegalEntities, ElvixLifecycleWatcher, ElvixProvider, ElvixRegion, ElvixSecuredBadge, ElvixSessions, ElvixSignIn, ElvixSignInButton, ElvixSignInForm, type ElvixSignInMethod, type ElvixSignInResult, type ElvixSignInResultErr, type ElvixSignInResultOk, type ElvixSizeProps, type ElvixTheme, ElvixUsername, type UseUserListResult, getElvixToken, setElvixToken, useElvixApp, useElvixContext, useUserMemberships, useUserRoles, useUserScopes };