@primer-io/primer-js 0.2.0 → 0.3.0

package/dist/jsx/index.d.ts

@@ -62,14 +62,16 @@ type BaseEvents = {};
 
 export type PrimerCheckoutComponentProps = {
   /**  */
-  customStyles?: string;
+  "custom-styles"?: string;
   /**  */
-  clientToken?: string;
+  "client-token"?: string;
   /**  */
   options?: PrimerCheckoutOptions;
+  /**  */
+  "loader-disabled"?: boolean;
   /** Whether the component has completed initialization and loading
 This is used to control the CSS-only loader visibility */
-  _jsInitialized?: boolean;
+  "js-initialized"?: boolean;
   /**  */
   jsInitialized?: boolean;
   /**  */
@@ -108,9 +110,8 @@ When true, the button will display a spinner and be disabled */
   selectionState?: ButtonSelectionState;
   /** Indicates if this button is selectable/checkable */
   selectable?: boolean;
-
-  /**  */
-  "onselection-change"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Indicates if wraps the slot in a flex container */
+  flex?: boolean;
 };
 
 export type PrimerCheckoutStateComponentProps = {
@@ -138,18 +139,16 @@ export type CollapsableComponentProps = {
   "onexpanded-changed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-export type DialogComponentProps = {
-  /**  */
-  "onprimer-dialog-close"?: (e: CustomEvent<CustomEvent>) => void;
-};
+export type DialogComponentProps = {};
 
 export type ErrorMessageComponentProps = {
   /** The error message text to display */
   message?: string;
   /** Whether the error message is visible */
   visible?: boolean;
-  /** Accessibility role for the error message
-Defaults to "alert" for proper screen reader announcements */
+  /** Accessibility role (defaults to "alert") */
+  role?: string;
+  /**  */
   role?: string;
 };
 
@@ -197,16 +196,16 @@ export type InputComponentProps = {
   validity?: ValidityState;
   /** Get the validation message of the input element */
   validationMessage?: string;
-  /** Fired when the input receives focus */
-  onfocus?: (e: CustomEvent<FocusEvent>) => void;
-  /** Fired when the input loses focus */
-  onblur?: (e: CustomEvent<FocusEvent>) => void;
-  /** Fired when the input fails validation */
-  oninvalid?: (e: CustomEvent<Event>) => void;
   /** Fired when the input value changes */
   oninput?: (e: CustomEvent<never>) => void;
   /** Fired when the input value is committed */
   onchange?: (e: CustomEvent<never>) => void;
+  /** Fired when the input receives focus */
+  onfocus?: (e: CustomEvent<never>) => void;
+  /** Fired when the input loses focus */
+  onblur?: (e: CustomEvent<never>) => void;
+  /** Fired when the input fails validation */
+  oninvalid?: (e: CustomEvent<never>) => void;
 };
 
 export type InputErrorComponentProps = {
@@ -228,9 +227,6 @@ export type InputWrapperComponentProps = {
   focusWithin?: boolean;
   /**  */
   "has-error"?: boolean;
-
-  /**  */
-  "onwrapper-click"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type PortalComponentProps = {
@@ -246,7 +242,7 @@ Defaults to the design system loader color */
   color?: string;
   /** Size of the spinner
 Available values: 'small', 'medium', 'large' or a custom number as string */
-  size?: SpinnerSize | string;
+  size?: SpinnerSize;
   /** Whether to use compact mode (minimal margins)
 Useful when embedding in inputs */
   compact?: boolean;
@@ -258,9 +254,9 @@ export type AchPaymentComponentProps = {
   /**  */
   paymentManagers?: InitializedManagersMap;
   /**  */
-  sdkState?: SdkStateContext | undefined;
+  sdkState?: SdkStateContextType | undefined;
   /**  */
-  clientOptions?: ClientOptionsContext | undefined;
+  clientOptions?: ClientOptionsContextType | undefined;
   /**  */
   screen?: "form" | "mandate";
   /**  */
@@ -276,6 +272,8 @@ export type AchPaymentComponentProps = {
 export type CardFormComponentProps = {
   /**  */
   "hide-labels"?: boolean;
+  /**  */
+  disabled?: boolean;
   /** Payment managers injected from context */
   paymentManagers?: InitializedManagersMap;
 };
@@ -286,9 +284,9 @@ export type DynamicPaymentComponentProps = {
   /**  */
   paymentManagers?: InitializedManagersMap;
   /**  */
-  sdkState?: SdkStateContext;
+  sdkState?: SdkStateContextType;
   /**  */
-  headlessUtils?: HeadlessUnitilsContext;
+  headlessUtils?: HeadlessUnitilsContextType;
   /**  */
   open?: boolean;
 };
@@ -302,11 +300,15 @@ export type PrimerKlarnaComponentProps = {
   /**  */
   paymentManagers?: InitializedManagersMap;
   /**  */
-  sdkState?: SdkStateContext;
+  sdkState?: SdkStateContextType;
+  /**  */
+  headlessUtils?: HeadlessUnitilsContextType;
+  /**  */
+  klarnaCategories?: KlarnaCategoriesContextType | null;
   /**  */
-  headlessUtils?: HeadlessUnitilsContext;
+  disabled?: boolean;
   /**  */
-  klarnaCategories?: KlarnaCategoriesContext | null;
+  toggleExpand?: string;
 };
 
 export type NativePaymentComponentProps = {
@@ -316,43 +318,51 @@ export type NativePaymentComponentProps = {
   paymentManagers?: InitializedManagersMap;
   /**  */
   computedStyles?: CSSStyleDeclaration | null;
+  /**  */
+  disabled?: boolean;
 };
 
 export type PaymentMethodComponentProps = {
   /**  */
   type?: PaymentMethodType | undefined;
   /**  */
-  paymentMethods?: PaymentMethodsContext;
+  disabled?: boolean;
+  /**  */
+  paymentMethods?: PaymentMethodsContextType;
 };
 
 export type PrimerCheckoutCompleteComponentProps = {};
 
 export type PrimerCheckoutErrorComponentProps = {
   /**  */
-  sdkState?: SdkStateContext;
+  sdkState?: SdkStateContextType;
 };
 
 export type PrimerMainComponentProps = {
   /**  */
-  paymentMethods?: PaymentMethodsContext;
+  paymentMethods?: PaymentMethodsContextType;
+  /**  */
+  sdkState?: SdkStateContextType;
   /**  */
-  sdkState?: SdkStateContext;
+  clientOptions?: ClientOptionsContextType;
 };
 
 export type RedirectPaymentComponentProps = {
   /**  */
   paymentMethod?: InitializedPaymentMethod | undefined;
   /**  */
+  disabled?: boolean;
+  /**  */
   paymentManagers?: InitializedManagersMap;
   /**  */
-  sdkState?: SdkStateContext;
+  sdkState?: SdkStateContextType;
   /**  */
-  headlessUtils?: HeadlessUnitilsContext;
+  headlessUtils?: HeadlessUnitilsContextType;
 };
 
 export type ShowOtherPaymentsComponentProps = {
   /** Consume the vault manager context to interact with vault state */
-  vaultManager?: VaultManagerContext;
+  vaultManager?: VaultManagerContextType;
 };
 
 export type VaultManagerComponentProps = {
@@ -371,7 +381,11 @@ export type VaultManagerComponentProps = {
     options?: boolean | AddEventListenerOptions,
   ) => void;
   /**  */
-  vaultManagerContext?: VaultManagerContext;
+  vaultManagerContext?: VaultManagerContextType;
+  /**  */
+  vaultItemContext?: VaultItemContextType;
+  /**  */
+  headlessUtils?: HeadlessUnitilsContextType;
 };
 
 export type CardFormSubmitComponentProps = {
@@ -379,11 +393,13 @@ export type CardFormSubmitComponentProps = {
 Falls back to localized default if not explicitly set. */
   buttonText?: string;
   /**  */
-  headlessInstance?: HeadlessUnitilsContext;
+  headlessInstance?: HeadlessUnitilsContextType;
+  /**  */
+  clientOptions?: ClientOptionsContextType;
   /**  */
-  clientOptions?: ClientOptionsContext;
+  sdkState?: SdkStateContextType;
   /**  */
-  sdkState?: SdkStateContext;
+  cardFormContext?: CardFormContext | null;
   /** The button variant to use. */
   variant?: string;
   /** Whether the button is disabled. */
@@ -392,9 +408,9 @@ Falls back to localized default if not explicitly set. */
 
 export type CardNetworkSelectorComponentProps = {
   /** Card networks context from provider */
-  cardNetworks?: CardNetworksContext;
+  cardNetworks?: CardNetworksContextType;
   /**  */
-  headlessUtils?: HeadlessUnitilsContext;
+  headlessUtils?: HeadlessUnitilsContextType;
   /** Dispatched when a network is selected with the network name as detail */
   "onnetwork-selected"?: (e: CustomEvent<CustomEvent>) => void;
 };
@@ -467,16 +483,21 @@ Falls back to localized default if not explicitly set. */
   cardFormContext?: CardFormContext | null;
 };
 
+export type PaymentMethodContentComponentProps = {
+  /** The asset configuration containing icon and display data */
+  assetConfig?: AssetConfig | null;
+};
+
 export type VaultCvvInputComponentProps = {
   /**  */
   computedStyles?: CSSStyleDeclaration | null;
   /**  */
   paymentMethod?: PaymentCardVaultedMethod | null;
   /** Form context for checking form dirty state */
-  vaultManagerFormContext?: VaultManagerContext;
+  vaultManagerFormContext?: VaultManagerContextType;
   /** CVV-specific context for dedicated CVV handling
 Separated to minimize re-renders on frequent CVV input changes */
-  vaultManagerCvvContext?: VaultItemContext;
+  vaultManagerCvvContext?: VaultItemContextType;
 };
 
 export type VaultDeleteConfirmationComponentProps = {
@@ -499,11 +520,7 @@ export type VaultDeleteConfirmationComponentProps = {
     options?: boolean | AddEventListenerOptions,
   ) => void;
   /** Consume the vault manager context to access payment method info */
-  vaultManager?: VaultManagerContext;
-  /**  */
-  "onconfirm-delete"?: (e: CustomEvent<CustomEvent>) => void;
-  /**  */
-  "oncancel-delete"?: (e: CustomEvent<CustomEvent>) => void;
+  vaultManager?: VaultManagerContextType;
 };
 
 export type VaultEmptyStateComponentProps = {};
@@ -523,8 +540,6 @@ export type VaultErrorMessageComponentProps = {
     listener: (ev: VaultManagerEventMap[K]) => void,
     options?: boolean | AddEventListenerOptions,
   ) => void;
-  /**  */
-  "onclose-error"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type VaultManagerHeaderComponentProps = {
@@ -544,13 +559,11 @@ export type VaultManagerHeaderComponentProps = {
     listener: (ev: VaultManagerEventMap[K]) => void,
     options?: boolean | AddEventListenerOptions,
   ) => void;
-  /**  */
-  "ontoggle-edit-mode"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type VaultPaymentMethodItemComponentProps = {
   /**  */
-  headlessUtils?: HeadlessUnitilsContext;
+  headlessUtils?: HeadlessUnitilsContextType;
   /** Whether the component is in edit mode */
   isEditMode?: boolean;
   /** Strongly typed event declarations */
@@ -566,13 +579,11 @@ export type VaultPaymentMethodItemComponentProps = {
     options?: boolean | AddEventListenerOptions,
   ) => void;
   /** Consume the vault manager context */
-  vaultManagerContext?: VaultManagerContext;
+  vaultManagerContext?: VaultManagerContextType;
   /**  */
-  vaultItemContext?: VaultItemContext;
+  vaultItemContext?: VaultItemContextType;
   /** The payment method to display */
   paymentMethod?: VaultedPaymentMethod | null;
-  /**  */
-  "ondelete-payment-method"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type VaultPaymentSubmitComponentProps = {
@@ -580,9 +591,9 @@ export type VaultPaymentSubmitComponentProps = {
 Falls back to localized default if not explicitly set. */
   buttonText?: string;
   /**  */
-  headlessInstance?: HeadlessUnitilsContext;
+  headlessInstance?: HeadlessUnitilsContextType;
   /**  */
-  sdkState?: SdkStateContext;
+  sdkState?: SdkStateContextType;
   /** The button variant to use. */
   variant?: string;
   /** Whether the button is disabled.
@@ -590,9 +601,9 @@ This property allows external disabling of the button
 regardless of the context state. */
   disabled?: boolean;
   /**  */
-  vaultItemContext?: VaultItemContext;
+  vaultItemContext?: VaultItemContextType;
   /**  */
-  vaultManager?: VaultManagerContext;
+  vaultManager?: VaultManagerContextType;
   /**  */
   clientOptions?: PrimerCheckoutOptions | null;
 };
@@ -615,9 +626,6 @@ export type CustomElements = {
    *
    * ---
    *
-   *
-   * ### **Events:**
-   *  - **selection-change**
    */
   "primer-button": Partial<ButtonComponentProps & BaseProps & BaseEvents>;
 
@@ -647,9 +655,6 @@ export type CustomElements = {
    *
    * ---
    *
-   *
-   * ### **Events:**
-   *  - **primer-dialog-close**
    */
   "primer-dialog": Partial<DialogComponentProps & BaseProps & BaseEvents>;
 
@@ -683,11 +688,11 @@ export type CustomElements = {
    *
    *
    * ### **Events:**
-   *  - **focus** - Fired when the input receives focus
+   *  - **input** - Fired when the input value changes
+   * - **change** - Fired when the input value is committed
+   * - **focus** - Fired when the input receives focus
    * - **blur** - Fired when the input loses focus
    * - **invalid** - Fired when the input fails validation
-   * - **input** - Fired when the input value changes
-   * - **change** - Fired when the input value is committed
    *
    * ### **Methods:**
    *  - **focus(options: _FocusOptions_): _void_** - Focus the input element
@@ -735,9 +740,6 @@ export type CustomElements = {
    * - Sets proper cursor styling to indicate text input functionality
    * ---
    *
-   *
-   * ### **Events:**
-   *  - **wrapper-click**
    */
   "primer-input-wrapper": Partial<InputWrapperComponentProps & BaseProps & BaseEvents>;
 
@@ -949,6 +951,15 @@ export type CustomElements = {
    */
   "primer-input-cvv": Partial<InputCvvComponentProps & BaseProps & BaseEvents>;
 
+  /**
+   * PaymentMethodContentComponent - renders payment method information with icon and details
+   * This component encapsulates the display logic and styles for payment method content
+   * so it can be reused across different containers without style conflicts
+   * ---
+   *
+   */
+  "primer-payment-method-content": Partial<PaymentMethodContentComponentProps & BaseProps & BaseEvents>;
+
   /**
    * CVV Input component for vault payment methods
    * Renders a secure iframe for CVV input when required by the selected payment method
@@ -965,10 +976,6 @@ export type CustomElements = {
    * VaultDeleteConfirmationComponent - displays confirmation UI for deleting a payment method
    * ---
    *
-   *
-   * ### **Events:**
-   *  - **confirm-delete**
-   * - **cancel-delete**
    */
   "primer-vault-delete-confirmation": Partial<VaultDeleteConfirmationComponentProps & BaseProps & BaseEvents>;
 
@@ -983,9 +990,6 @@ export type CustomElements = {
    * VaultErrorMessageComponent - displays error messages with improved visuals
    * ---
    *
-   *
-   * ### **Events:**
-   *  - **close-error**
    */
   "primer-vault-error-message": Partial<VaultErrorMessageComponentProps & BaseProps & BaseEvents>;
 
@@ -993,9 +997,6 @@ export type CustomElements = {
    * VaultManagerHeaderComponent - displays the header for the vault manager
    * ---
    *
-   *
-   * ### **Events:**
-   *  - **toggle-edit-mode**
    */
   "primer-vault-manager-header": Partial<VaultManagerHeaderComponentProps & BaseProps & BaseEvents>;
 
@@ -1007,9 +1008,6 @@ export type CustomElements = {
    * Always renders the primer-button for consistent UI and improved accessibility
    * ---
    *
-   *
-   * ### **Events:**
-   *  - **delete-payment-method**
    */
   "primer-vault-payment-method-item": Partial<VaultPaymentMethodItemComponentProps & BaseProps & BaseEvents>;