@primer-io/primer-js 1.0.9 → 1.1.0

package/dist/jsx/index.d.ts

@@ -83,16 +83,12 @@ This is used to control the CSS-only loader visibility */
   /**  */
   sdkContextController?: SDKContextController;
   /**  */
-  sdkStateController?: SdkStateController;
-  /**  */
   primerEventsController?: PrimerEventsController;
   /**  */
   styleProcessingController?: StyleProcessingController;
   /**  */
   vaultManagerController?: VaultManagerController;
   /**  */
-  achPaymentEventsController?: AchPaymentEventsController;
-  /**  */
   headlessSdkController?: HeadlessSdkController;
 };
 
@@ -154,6 +150,15 @@ export type DialogComponentProps = {
   "onprimer:dialog-close"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+export type PrimerIconComponentProps = {
+  /**  */
+  color?: string;
+  /**  */
+  size?: "lg" | "md" | "sm";
+  /** The name of the icon to draw - available names can be found under library.ts file */
+  name?: IconName | undefined;
+};
+
 export type ErrorMessageComponentProps = {
   /** The error message text to display */
   message?: string;
@@ -165,15 +170,6 @@ export type ErrorMessageComponentProps = {
   role?: string;
 };
 
-export type PrimerIconComponentProps = {
-  /**  */
-  color?: string;
-  /**  */
-  size?: "lg" | "md" | "sm";
-  /** The name of the icon to draw - available names can be found under library.ts file */
-  name?: IconName | undefined;
-};
-
 export type InputComponentProps = {
   /**  */
   value?: string;
@@ -242,13 +238,6 @@ export type InputWrapperComponentProps = {
   "has-error"?: boolean;
 };
 
-export type PortalComponentProps = {
-  /**  */
-  id?: string;
-  /**  */
-  oneventName?: (e: CustomEvent<CustomEvent>) => void;
-};
-
 export type SelectComponentProps = {
   /** The name attribute for the select element */
   name?: string;
@@ -286,32 +275,18 @@ Useful when embedding in inputs */
   compact?: boolean;
 };
 
-export type AchPaymentComponentProps = {
-  /**  */
+export type AdyenKlarnaComponentProps = {
+  /** The payment method from context */
   paymentMethod?: InitializedPaymentMethod | undefined;
+  /** Whether the component is disabled */
+  disabled?: boolean;
   /**  */
-  paymentManagers?: InitializedManagersMap;
-  /**  */
-  sdkState?: SdkStateContextType | undefined;
-  /**  */
-  clientOptions?: ClientOptionsContextType | undefined;
-  /**  */
-  screen?: "form" | "mandate";
-  /**  */
-  "onprimer-ach-error"?: (e: CustomEvent<CustomEvent>) => void;
-  /**  */
-  "onprimer-ach-bank-details-collected"?: (e: CustomEvent<CustomEvent>) => void;
-  /**  */
-  "onprimer-ach-mandate-confirmed"?: (e: CustomEvent<CustomEvent>) => void;
-  /**  */
-  "onprimer-ach-mandate-declined"?: (e: CustomEvent<CustomEvent>) => void;
+  primerContext?: ContextType | undefined;
 };
 
 export type BillingAddressComponentProps = {
-  /** Configuration from SDK Core containing checkoutModules configuration */
-  configuration?: ConfigurationContextType;
-  /** Headless SDK utilities for API methods like setBillingAddress */
-  headlessUtils?: HeadlessUtilsContextType;
+  /**  */
+  primerContext?: ContextType | undefined;
   /** Fired when form data changes */
   "onprimer-billing-address-change"?: (e: CustomEvent<CustomEvent>) => void;
   /** Fired when form is submitted */
@@ -323,8 +298,7 @@ export type BlikComponentProps = {
   paymentMethod?: InitializedPaymentMethod;
   /** Disables component interaction when true */
   disabled?: boolean;
-  /**  */
-  paymentManagers?: InitializedManagersMap;
+
   /** Dispatched on successful payment */
   "onprimer-payment-success"?: (e: CustomEvent<never>) => void;
   /** Dispatched on payment error */
@@ -336,16 +310,8 @@ export type CardFormComponentProps = {
   "hide-labels"?: boolean;
   /**  */
   disabled?: boolean;
-  /** Payment managers injected from context */
-  paymentManagers?: InitializedManagersMap;
-  /** Client options for configuration */
-  clientOptions?: ClientOptionsContextType;
-  /** Headless utils for accessing server configuration */
-  headlessUtils?: HeadlessUtilsContextType;
-  /** Analytics utils for sending analytics events */
-  analyticsUtils?: AnalyticsContextType;
-  /** Events controller from context for receiving forwarded events */
-  contextEventsController?: EventsContextType;
+  /**  */
+  primerContext?: ContextType | undefined;
   /** Determines whether to show the cardholder name field
 Uses client configuration with fallback to default (true) */
   shouldShowCardholderName?: boolean;
@@ -354,48 +320,54 @@ Uses client configuration with fallback to default (false) */
   shouldRequireCardholderName?: boolean;
 };
 
-export type DynamicPaymentComponentProps = {
-  /**  */
-  paymentMethod?: InitializedPaymentMethod | undefined;
-  /**  */
-  paymentManagers?: InitializedManagersMap;
-  /**  */
-  sdkState?: SdkStateContextType;
-  /**  */
-  headlessUtils?: HeadlessUtilsContextType;
-  /**  */
-  open?: boolean;
-};
-
 export type ErrorMessageContainerComponentProps = {
   /**  */
   "show-processing-errors"?: boolean;
+  /** Consume the unified context
+This automatically subscribes to changes in the SDK state */
+  primerContext?: ContextType | undefined;
 };
 
 export type PrimerKlarnaComponentProps = {
   /**  */
-  paymentManagers?: InitializedManagersMap;
+  disabled?: boolean;
+  /**  */
+  primerContext?: ContextType | undefined;
+};
+
+export type PaymentMethodComponentProps = {
+  /**  */
+  type?: PaymentMethodType | undefined;
   /**  */
-  sdkState?: SdkStateContextType;
+  disabled?: boolean;
   /**  */
-  headlessUtils?: HeadlessUtilsContextType;
+  primerContext?: ContextType | undefined;
+};
+
+export type PaymentMethodAccordionComponentProps = {
   /**  */
-  klarnaCategories?: KlarnaCategoriesContextType | null;
+  type?: PaymentMethodType | undefined;
   /**  */
   disabled?: boolean;
   /**  */
-  toggleExpand?: string;
+  expanded?: boolean;
+  /** When true, suppresses auto-collapse on window blur.
+Used when payment flows open external popups (e.g. Klarna). */
+  "suppress-blur-collapse"?: boolean;
+
+  /**  */
+  "onexpanded-change"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-export type PaymentMethodComponentProps = {
+export type PaymentMethodButtonComponentProps = {
   /**  */
   type?: PaymentMethodType | undefined;
   /**  */
   disabled?: boolean;
   /**  */
-  paymentMethods?: PaymentMethodsContextType;
-  /** Analytics utils for sending analytics events */
-  analyticsUtils?: AnalyticsContextType;
+  primerContext?: ContextType | undefined;
+  /**  */
+  "onpayment-method-click"?: (e: CustomEvent<Event>) => void;
 };
 
 export type PaymentMethodContainerComponentProps = {
@@ -406,9 +378,7 @@ export type PaymentMethodContainerComponentProps = {
   /**  */
   disabled?: boolean;
   /**  */
-  paymentMethods?: PaymentMethodsContextType;
-  /**  */
-  clientOptions?: ClientOptionsContextType;
+  primerContext?: ContextType | undefined;
 };
 
 export type PortalDialogComponentProps = {
@@ -438,38 +408,24 @@ export type PrimerCheckoutCompleteComponentProps = {};
 
 export type PrimerCheckoutErrorComponentProps = {
   /**  */
-  sdkState?: SdkStateContextType;
+  primerContext?: ContextType | undefined;
 };
 
 export type PrimerMainComponentProps = {
   /**  */
-  paymentMethods?: PaymentMethodsContextType;
-  /**  */
-  sdkState?: SdkStateContextType;
-  /**  */
-  clientOptions?: ClientOptionsContextType;
+  primerContext?: ContextType | undefined;
 };
 
 export type RedirectPaymentComponentProps = {
   /**  */
-  paymentMethod?: InitializedPaymentMethod | undefined;
+  paymentMethod?: RedirectPaymentMethod | undefined;
   /**  */
   disabled?: boolean;
-  /**  */
-  paymentManagers?: InitializedManagersMap;
-  /**  */
-  sdkState?: SdkStateContextType;
-  /**  */
-  headlessUtils?: HeadlessUtilsContextType;
-  /**  */
-  clientOptions?: ClientOptionsContextType | undefined;
 };
 
 export type ShowOtherPaymentsComponentProps = {
-  /** Consume the vault manager context to interact with vault state */
-  vaultManager?: VaultManagerContextType;
-  /** Consume the events context for external control */
-  contextEventsController?: EventsContextType;
+  /**  */
+  primerContext?: ContextType | undefined;
   /**  */
   "onprimer:show-other-payments-toggled"?: (e: CustomEvent<CustomEvent>) => void;
 };
@@ -490,15 +446,19 @@ export type VaultManagerComponentProps = {
     options?: boolean | AddEventListenerOptions,
   ) => void;
   /**  */
-  vaultManagerContext?: VaultManagerContextType;
+  primerContext?: ContextType | undefined;
   /**  */
-  vaultItemContext?: VaultItemContextType;
+  "onprimer-vault-payment-error"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+export type PaymentMethodAccordionConfirmButtonComponentProps = {
   /**  */
-  headlessUtils?: HeadlessUtilsContextType;
+  disabled?: boolean;
   /**  */
-  contextEventsController?: EventsContextType;
+  loading?: boolean;
+
   /**  */
-  "onprimer-vault-payment-error"?: (e: CustomEvent<CustomEvent>) => void;
+  onconfirm?: (e: CustomEvent<Event>) => void;
 };
 
 export type CardFormSubmitComponentProps = {
@@ -506,35 +466,23 @@ export type CardFormSubmitComponentProps = {
 Falls back to localized default if not explicitly set. */
   buttonText?: string;
   /**  */
-  headlessUtils?: HeadlessUtilsContextType;
-  /**  */
-  clientOptions?: ClientOptionsContextType;
-  /**  */
-  sdkState?: SdkStateContextType;
-  /**  */
   cardFormContext?: CardFormContext | null;
   /** The button variant to use. */
   variant?: string;
   /** Whether the button is disabled. */
   disabled?: boolean;
   /**  */
-  analyticsUtils?: AnalyticsContextType;
-  /**  */
-  contextEventsController?: EventsContextType;
+  primerContext?: ContextType | undefined;
 };
 
 export type CardNetworkSelectorComponentProps = {
-  /** Card networks context from provider */
-  cardNetworks?: CardNetworksContextType;
   /**  */
-  headlessUtils?: HeadlessUtilsContextType;
+  primerContext?: ContextType | undefined;
   /** Dispatched when a network is selected with the network name as detail */
   "onnetwork-selected"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type InputCardExpiryComponentProps = {
-  /**  */
-  computedStyles?: CSSStyleDeclaration | null;
   /** The input label text.
 Falls back to localized default if not explicitly set. */
   label?: string;
@@ -547,11 +495,11 @@ Falls back to localized default if not explicitly set. */
   "aria-label"?: string;
   /**  */
   cardFormContext?: CardFormContext | null;
+  /**  */
+  primerContext?: ContextType | undefined;
 };
 
 export type InputCardHolderNameComponentProps = {
-  /**  */
-  computedStyles?: CSSStyleDeclaration | null;
   /** The input label text.
 Falls back to localized default if not explicitly set. */
   label?: string;
@@ -564,11 +512,11 @@ Falls back to localized default if not explicitly set. */
   "aria-label"?: string;
   /**  */
   cardFormContext?: CardFormContext | null;
+  /**  */
+  primerContext?: ContextType | undefined;
 };
 
 export type InputCardNumberComponentProps = {
-  /**  */
-  computedStyles?: CSSStyleDeclaration | null;
   /** The input label text.
 Falls back to localized default if not explicitly set. */
   label?: string;
@@ -581,11 +529,11 @@ Falls back to localized default if not explicitly set. */
   "aria-label"?: string;
   /**  */
   cardFormContext?: CardFormContext | null;
+  /**  */
+  primerContext?: ContextType | undefined;
 };
 
 export type InputCvvComponentProps = {
-  /**  */
-  computedStyles?: CSSStyleDeclaration | null;
   /** The input label text.
 Falls back to localized default if not explicitly set. */
   label?: string;
@@ -598,33 +546,35 @@ Falls back to localized default if not explicitly set. */
   "aria-label"?: string;
   /**  */
   cardFormContext?: CardFormContext | null;
+  /**  */
+  primerContext?: ContextType | undefined;
 };
 
 export type ApplePayComponentProps = {
   /**  */
-  paymentMethod?: InitializedPaymentMethod | undefined;
-  /**  */
-  paymentManagers?: InitializedManagersMap;
+  paymentMethod?: NativePaymentMethod | undefined;
   /**  */
   disabled?: boolean;
+  /**  */
+  primerContext?: ContextType | undefined;
 };
 
 export type GooglePayComponentProps = {
   /**  */
-  paymentMethod?: InitializedPaymentMethod | undefined;
-  /**  */
-  paymentManagers?: InitializedManagersMap;
+  paymentMethod?: NativePaymentMethod | undefined;
   /**  */
   disabled?: boolean;
+  /**  */
+  primerContext?: ContextType | undefined;
 };
 
 export type PayPalComponentProps = {
   /**  */
-  paymentMethod?: InitializedPaymentMethod | undefined;
-  /**  */
-  paymentManagers?: InitializedManagersMap;
+  paymentMethod?: NativePaymentMethod | undefined;
   /**  */
   disabled?: boolean;
+  /**  */
+  primerContext?: ContextType | undefined;
 };
 
 export type PaymentMethodContentComponentProps = {
@@ -633,15 +583,10 @@ export type PaymentMethodContentComponentProps = {
 };
 
 export type VaultCvvInputComponentProps = {
-  /**  */
-  computedStyles?: CSSStyleDeclaration | null;
   /**  */
   paymentMethod?: PaymentCardVaultedMethod | null;
-  /** Form context for checking form dirty state */
-  vaultManagerFormContext?: VaultManagerContextType;
-  /** CVV-specific context for dedicated CVV handling
-Separated to minimize re-renders on frequent CVV input changes */
-  vaultManagerCvvContext?: VaultItemContextType;
+  /**  */
+  primerContext?: ContextType | undefined;
 };
 
 export type VaultDeleteConfirmationComponentProps = {
@@ -663,8 +608,6 @@ export type VaultDeleteConfirmationComponentProps = {
     listener: (ev: VaultManagerEventMap[K]) => void,
     options?: boolean | AddEventListenerOptions,
   ) => void;
-  /** Consume the vault manager context to access payment method info */
-  vaultManager?: VaultManagerContextType;
 };
 
 export type VaultEmptyStateComponentProps = {};
@@ -706,8 +649,6 @@ export type VaultManagerHeaderComponentProps = {
 };
 
 export type VaultPaymentMethodItemComponentProps = {
-  /**  */
-  headlessUtils?: HeadlessUtilsContextType;
   /** Whether the component is in edit mode */
   isEditMode?: boolean;
   /** Strongly typed event declarations */
@@ -722,22 +663,16 @@ export type VaultPaymentMethodItemComponentProps = {
     listener: (ev: VaultManagerEventMap[K]) => void,
     options?: boolean | AddEventListenerOptions,
   ) => void;
-  /** Consume the vault manager context */
-  vaultManagerContext?: VaultManagerContextType;
   /**  */
-  vaultItemContext?: VaultItemContextType;
+  primerContext?: ContextType | undefined;
   /** The payment method to display */
-  paymentMethod?: VaultedPaymentMethod | null;
+  paymentMethod?: VaultedPaymentMethod | undefined;
 };
 
 export type VaultPaymentSubmitComponentProps = {
   /** The button text to display.
 Falls back to localized default if not explicitly set. */
   buttonText?: string;
-  /**  */
-  headlessInstance?: HeadlessUtilsContextType;
-  /**  */
-  sdkState?: SdkStateContextType;
   /** The button variant to use. */
   variant?: string;
   /** Whether the button is disabled.
@@ -745,11 +680,7 @@ This property allows external disabling of the button
 regardless of the context state. */
   disabled?: boolean;
   /**  */
-  vaultItemContext?: VaultItemContextType;
-  /**  */
-  vaultManager?: VaultManagerContextType;
-  /**  */
-  clientOptions?: PrimerCheckoutOptions | null;
+  primerContext?: ContextType | undefined;
 };
 
 export type CustomElements = {
@@ -809,6 +740,13 @@ export type CustomElements = {
    */
   "primer-dialog": Partial<DialogComponentProps & BaseProps & BaseEvents>;
 
+  /**
+   *
+   * ---
+   *
+   */
+  "primer-icon": Partial<PrimerIconComponentProps & BaseProps & BaseEvents>;
+
   /**
    * A reusable atomic error message component that displays error information
    * with appropriate styling and accessibility attributes.
@@ -825,13 +763,6 @@ export type CustomElements = {
    */
   "primer-error-message": Partial<ErrorMessageComponentProps & BaseProps & BaseEvents>;
 
-  /**
-   *
-   * ---
-   *
-   */
-  "primer-icon": Partial<PrimerIconComponentProps & BaseProps & BaseEvents>;
-
   /**
    * A fully type-safe input component that wraps the native HTML input element
    * while providing additional functionality and styling.
@@ -894,16 +825,6 @@ export type CustomElements = {
    */
   "primer-input-wrapper": Partial<InputWrapperComponentProps & BaseProps & BaseEvents>;
 
-  /**
-   *
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **eventName**
-   */
-  "primer-portal": Partial<PortalComponentProps & BaseProps & BaseEvents>;
-
   /**
    * A native select dropdown component
    * ---
@@ -929,14 +850,8 @@ export type CustomElements = {
    *
    * ---
    *
-   *
-   * ### **Events:**
-   *  - **primer-ach-error**
-   * - **primer-ach-bank-details-collected**
-   * - **primer-ach-mandate-confirmed**
-   * - **primer-ach-mandate-declined**
    */
-  "primer-ach-payment": Partial<AchPaymentComponentProps & BaseProps & BaseEvents>;
+  "primer-adyen-klarna": Partial<AdyenKlarnaComponentProps & BaseProps & BaseEvents>;
 
   /**
    * BillingAddressComponent provides a form for collecting billing address information.
@@ -985,13 +900,6 @@ export type CustomElements = {
    */
   "primer-card-form": Partial<CardFormComponentProps & BaseProps & BaseEvents>;
 
-  /**
-   *
-   * ---
-   *
-   */
-  "primer-dynamic-payment": Partial<DynamicPaymentComponentProps & BaseProps & BaseEvents>;
-
   /**
    * A container component that connects to the SDK state context
    * and displays appropriate error messages based on error state.
@@ -1024,6 +932,26 @@ export type CustomElements = {
    */
   "primer-payment-method": Partial<PaymentMethodComponentProps & BaseProps & BaseEvents>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **expanded-change**
+   */
+  "primer-payment-method-accordion": Partial<PaymentMethodAccordionComponentProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **payment-method-click**
+   */
+  "primer-payment-method-button": Partial<PaymentMethodButtonComponentProps & BaseProps & BaseEvents>;
+
   /**
    *
    * ---
@@ -1096,6 +1024,18 @@ export type CustomElements = {
    */
   "primer-vault-manager": Partial<VaultManagerComponentProps & BaseProps & BaseEvents>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **confirm**
+   */
+  "primer-payment-method-accordion-confirm-button": Partial<
+    PaymentMethodAccordionConfirmButtonComponentProps & BaseProps & BaseEvents
+  >;
+
   /**
    * A form submit button component for card forms.
    *