@adyen/bento-vue2 1.23.0 → 1.24.0

package/dist/@types/index.d.ts

@@ -2,6 +2,7 @@ import { ComponentOptionsMixin } from 'vue/types/v3-component-options';
 import { ComponentOptionsMixin as ComponentOptionsMixin_2 } from 'vue/types/v3-component-options.js';
 import type { ComponentPublicInstance } from 'vue';
 import { ComputedRef } from 'vue';
+import { DeepReadonly } from 'vue';
 import { default as default_2 } from 'vue-i18n';
 import { DefaultKeys } from 'vue/types/v3-component-props';
 import { DefineComponent } from 'vue';
@@ -25,6 +26,8 @@ declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
 declare type __VLS_NonUndefinedable_2<T> = T extends undefined ? never : T;
 
+declare type __VLS_NonUndefinedable_3<T> = T extends undefined ? never : T;
+
 declare type __VLS_TypePropsToRuntimeProps<T> = {
     [K in keyof T]-?: {} extends Pick<T, K>
         ? {
@@ -47,6 +50,17 @@ declare type __VLS_TypePropsToRuntimeProps_2<T> = {
           };
 };
 
+declare type __VLS_TypePropsToRuntimeProps_3<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K>
+        ? {
+              type: PropType<__VLS_NonUndefinedable_3<T[K]>>;
+          }
+        : {
+              type: PropType<T[K]>;
+              required: true;
+          };
+};
+
 declare type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D
         ? P[K] & {
@@ -55,6 +69,14 @@ declare type __VLS_WithDefaults<P, D> = {
         : P[K];
 };
 
+declare type __VLS_WithDefaults_2<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D
+        ? P[K] & {
+              default: D[K];
+          }
+        : P[K];
+};
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -193,6 +215,12 @@ declare type __VLS_WithTemplateSlots_3<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_30<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 declare type __VLS_WithTemplateSlots_4<T, S> = T & {
     new (): {
         $slots: S;
@@ -1266,9 +1294,9 @@ export declare const BentoCard: DefineComponent<
                     wide: boolean;
                     stronger: boolean;
                     strongest: boolean;
-                    variant: 'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant;
-                    medium: boolean;
                     large: boolean;
+                    medium: boolean;
+                    variant: 'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant;
                 }> &
                     Omit<
                         Readonly<
@@ -1286,34 +1314,39 @@ export declare const BentoCard: DefineComponent<
                                         | 'span'
                                         | BentoTypographyElement
                                     >;
+                                } & {
                                     default: BentoTypographyElement;
-                                    validator: (value: BentoTypographyElement) => boolean;
                                 };
-                                stronger: {
-                                    type: BooleanConstructor;
+                                wide: {
+                                    type: PropType<boolean>;
+                                } & {
                                     default: boolean;
                                 };
-                                strongest: {
-                                    type: BooleanConstructor;
+                                stronger: {
+                                    type: PropType<boolean>;
+                                } & {
                                     default: boolean;
                                 };
-                                variant: {
-                                    type: PropType<'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant>;
-                                    default: BentoTypographyVariant;
-                                    validator: (value: BentoTypographyVariant) => boolean;
-                                };
-                                medium: {
-                                    type: BooleanConstructor;
+                                strongest: {
+                                    type: PropType<boolean>;
+                                } & {
                                     default: boolean;
                                 };
                                 large: {
-                                    type: BooleanConstructor;
+                                    type: PropType<boolean>;
+                                } & {
                                     default: boolean;
                                 };
-                                wide: {
-                                    type: BooleanConstructor;
+                                medium: {
+                                    type: PropType<boolean>;
+                                } & {
                                     default: boolean;
                                 };
+                                variant: {
+                                    type: PropType<'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant>;
+                                } & {
+                                    default: BentoTypographyVariant;
+                                };
                             }>
                         >,
                         DefaultKeys<{
@@ -1330,34 +1363,39 @@ export declare const BentoCard: DefineComponent<
                                     | 'span'
                                     | BentoTypographyElement
                                 >;
+                            } & {
                                 default: BentoTypographyElement;
-                                validator: (value: BentoTypographyElement) => boolean;
                             };
-                            stronger: {
-                                type: BooleanConstructor;
+                            wide: {
+                                type: PropType<boolean>;
+                            } & {
                                 default: boolean;
                             };
-                            strongest: {
-                                type: BooleanConstructor;
+                            stronger: {
+                                type: PropType<boolean>;
+                            } & {
                                 default: boolean;
                             };
-                            variant: {
-                                type: PropType<'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant>;
-                                default: BentoTypographyVariant;
-                                validator: (value: BentoTypographyVariant) => boolean;
-                            };
-                            medium: {
-                                type: BooleanConstructor;
+                            strongest: {
+                                type: PropType<boolean>;
+                            } & {
                                 default: boolean;
                             };
                             large: {
-                                type: BooleanConstructor;
+                                type: PropType<boolean>;
+                            } & {
                                 default: boolean;
                             };
-                            wide: {
-                                type: BooleanConstructor;
+                            medium: {
+                                type: PropType<boolean>;
+                            } & {
                                 default: boolean;
                             };
+                            variant: {
+                                type: PropType<'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant>;
+                            } & {
+                                default: BentoTypographyVariant;
+                            };
                         }>
                     >
             >
@@ -5489,7 +5527,7 @@ export declare enum BentoDatagridStyleState {
  *     `
  * }
  */
-export declare const BentoDataGridTemplate: __VLS_WithTemplateSlots_29<
+export declare const BentoDataGridTemplate: __VLS_WithTemplateSlots_30<
     DefineComponent<
         {
             /**
@@ -10067,7 +10105,11 @@ export declare const BentoInputField: __VLS_WithTemplateSlots_13<
             };
             /**
              * Dropdown props for the small selectable dropdown menu.
-             * @see BentoDropdown
+             * Properties supported:
+             *
+             *  - `value`: Selected value of the dropdown
+             *  - `items`: List of available items
+             *
              */
             dropdown: {
                 type: PropType<BentoInputDropdownProps>;
@@ -10233,7 +10275,11 @@ export declare const BentoInputField: __VLS_WithTemplateSlots_13<
                 };
                 /**
                  * Dropdown props for the small selectable dropdown menu.
-                 * @see BentoDropdown
+                 * Properties supported:
+                 *
+                 *  - `value`: Selected value of the dropdown
+                 *  - `items`: List of available items
+                 *
                  */
                 dropdown: {
                     type: PropType<BentoInputDropdownProps>;
@@ -11198,7 +11244,7 @@ export declare const BentoModal: __VLS_WithTemplateSlots_16<
              * Sets the width of the modal
              */
             size: {
-                type: PropType<'small' | 'medium' | 'large' | BentoModalSize>;
+                type: PropType<'small' | 'large' | 'medium' | BentoModalSize>;
                 default: BentoModalSize;
                 validator: (value: BentoModalSize) => boolean;
             };
@@ -11347,7 +11393,7 @@ export declare const BentoModal: __VLS_WithTemplateSlots_16<
                  * Sets the width of the modal
                  */
                 size: {
-                    type: PropType<'small' | 'medium' | 'large' | BentoModalSize>;
+                    type: PropType<'small' | 'large' | 'medium' | BentoModalSize>;
                     default: BentoModalSize;
                     validator: (value: BentoModalSize) => boolean;
                 };
@@ -11374,7 +11420,7 @@ export declare const BentoModal: __VLS_WithTemplateSlots_16<
             variant: 'default' | 'dialog' | 'BentoModalDefault' | 'BentoModalDialog' | BentoModalVariant;
             isOpen: boolean;
             content: string;
-            size: 'small' | 'medium' | 'large' | BentoModalSize;
+            size: 'small' | 'large' | 'medium' | BentoModalSize;
             activePage: string;
             actions: BentoButtonActionsList;
             actionsLabel: string;
@@ -16293,7 +16339,7 @@ export declare const BentoSummaryGridItemAmount: DefineComponent<
          * Defines the size of the `summary-grid-item` text content
          */
         size: {
-            type: PropType<'small' | 'medium' | 'large' | BentoSummaryGridItemSize>;
+            type: PropType<'small' | 'large' | 'medium' | BentoSummaryGridItemSize>;
             default: BentoSummaryGridItemSize;
             validator: (value: BentoSummaryGridItemSize) => boolean;
         };
@@ -16391,7 +16437,7 @@ export declare const BentoSummaryGridItemAmount: DefineComponent<
              * Defines the size of the `summary-grid-item` text content
              */
             size: {
-                type: PropType<'small' | 'medium' | 'large' | BentoSummaryGridItemSize>;
+                type: PropType<'small' | 'large' | 'medium' | BentoSummaryGridItemSize>;
                 default: BentoSummaryGridItemSize;
                 validator: (value: BentoSummaryGridItemSize) => boolean;
             };
@@ -16399,7 +16445,7 @@ export declare const BentoSummaryGridItemAmount: DefineComponent<
     >,
     {
         copy: string;
-        size: 'small' | 'medium' | 'large' | BentoSummaryGridItemSize;
+        size: 'small' | 'large' | 'medium' | BentoSummaryGridItemSize;
         fitContent: boolean;
         infoIconTooltipText: string;
         trend: string;
@@ -16602,7 +16648,7 @@ export declare const BentoSummaryGridItemNumeric: DefineComponent<
          * Defines the size of the `summary-grid-item` text content
          */
         size: {
-            type: PropType<'small' | 'medium' | 'large' | BentoSummaryGridItemSize>;
+            type: PropType<'small' | 'large' | 'medium' | BentoSummaryGridItemSize>;
             default: BentoSummaryGridItemSize;
             validator: (value: BentoSummaryGridItemSize) => boolean;
         };
@@ -16693,7 +16739,7 @@ export declare const BentoSummaryGridItemNumeric: DefineComponent<
              * Defines the size of the `summary-grid-item` text content
              */
             size: {
-                type: PropType<'small' | 'medium' | 'large' | BentoSummaryGridItemSize>;
+                type: PropType<'small' | 'large' | 'medium' | BentoSummaryGridItemSize>;
                 default: BentoSummaryGridItemSize;
                 validator: (value: BentoSummaryGridItemSize) => boolean;
             };
@@ -16701,7 +16747,7 @@ export declare const BentoSummaryGridItemNumeric: DefineComponent<
     >,
     {
         copy: string;
-        size: 'small' | 'medium' | 'large' | BentoSummaryGridItemSize;
+        size: 'small' | 'large' | 'medium' | BentoSummaryGridItemSize;
         fitContent: boolean;
         infoIconTooltipText: string;
         trend: string;
@@ -16810,7 +16856,7 @@ export declare const BentoSummaryGridItemPercentage: DefineComponent<
          * Defines the size of the `summary-grid-item` text content
          */
         size: {
-            type: PropType<'small' | 'medium' | 'large' | BentoSummaryGridItemSize>;
+            type: PropType<'small' | 'large' | 'medium' | BentoSummaryGridItemSize>;
             default: BentoSummaryGridItemSize;
             validator: (value: BentoSummaryGridItemSize) => boolean;
         };
@@ -16901,7 +16947,7 @@ export declare const BentoSummaryGridItemPercentage: DefineComponent<
              * Defines the size of the `summary-grid-item` text content
              */
             size: {
-                type: PropType<'small' | 'medium' | 'large' | BentoSummaryGridItemSize>;
+                type: PropType<'small' | 'large' | 'medium' | BentoSummaryGridItemSize>;
                 default: BentoSummaryGridItemSize;
                 validator: (value: BentoSummaryGridItemSize) => boolean;
             };
@@ -16909,7 +16955,7 @@ export declare const BentoSummaryGridItemPercentage: DefineComponent<
     >,
     {
         copy: string;
-        size: 'small' | 'medium' | 'large' | BentoSummaryGridItemSize;
+        size: 'small' | 'large' | 'medium' | BentoSummaryGridItemSize;
         fitContent: boolean;
         infoIconTooltipText: string;
         trend: string;
@@ -18077,39 +18123,9 @@ export declare interface BentoTimelineTimestamp {
     value?: string;
 }
 
-/**
- * @example
- * import { BentoToast, useBentoToastController } from '@adyen/bento-vue2';
- *
- * export default {
- *     components: { BentoToast },
- *     template: `
- *          // in your project root
- *          <bento-toast />
- *      setup() {
- *          bentoToastController = useBentoToastController();
- *          onTrigger = () => {
- *              bentoToastController.addToast({ text: 'Your toast text', action: { text: 'Button text', handler: () => { your code here } });
- *      }
- *     `
- * }
- */
 export declare const BentoToast: DefineComponent<
     {},
-    {
-        computedPositioning: ComputedRef<
-            {
-                top: string;
-                width: string;
-            }[]
-        >;
-        computedHeight: ComputedRef<{
-            bottom: string;
-            height: string;
-        }>;
-        toastsToShow: ComputedRef<BentoToastItem[]>;
-        toast: any;
-    },
+    {},
     {},
     {},
     {},
@@ -18121,17 +18137,23 @@ export declare const BentoToast: DefineComponent<
     {}
 >;
 
-declare interface BentoToastItem {
-    action?: BentoToastItemAction;
-    text: string;
-    dismiss?: () => void;
+export declare interface BentoToastItem extends BentoToastItemParams {
+    id: string;
+    dismiss: () => void;
 }
 
-declare interface BentoToastItemAction {
+export declare interface BentoToastItemAction {
     handler: () => void;
     text: string;
 }
 
+export declare interface BentoToastItemParams {
+    action?: BentoToastItemAction;
+    text: string;
+}
+
+export declare type BentoToastItemsList = Array<BentoToastItem>;
+
 /**
  * A wrapper around the bento toggle, providing checkbox functionality with a knob-like toggle
  *
@@ -18560,149 +18582,128 @@ export declare interface BentoTutorialStep {
  *     `
  * }
  */
-export declare const BentoTypography: DefineComponent<
-    {
-        /**
-         * Sets the HTML DOM element.
-         * @values h1, h2, h3, h4, h5, h6, div, p, span
-         */
-        el: {
-            type: PropType<'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | BentoTypographyElement>;
-            default: BentoTypographyElement;
-            validator: (value: BentoTypographyElement) => boolean;
-        };
-        /**
-         * Adds the stronger class modifier.
-         * Applicable to Caption, Body and Subtitle variants.
-         */
-        stronger: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        /**
-         * Adds the strongest class modifier.
-         * Applicable to Caption, Body and Subtitle variants.
-         */
-        strongest: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        /**
-         * Sets the type of typography variant.
-         * @values caption, body, title.
-         */
-        variant: {
-            type: PropType<'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant>;
-            default: BentoTypographyVariant;
-            validator: (value: BentoTypographyVariant) => boolean;
-        };
-        /**
-         * Adds the medium class modifier.
-         * Applicable to the Title variant.
-         */
-        medium: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        /**
-         * Adds the large class modifier.
-         * Applicable to the Title variant.
-         */
-        large: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        /**
-         * Adds the medium class modifier.
-         * Applicable to tje Body variant.
-         */
-        wide: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    },
-    {
-        conditionalClasses: ComputedRef<{
-            [x: string]: boolean;
-        }>;
-    },
-    {},
-    {},
-    {},
-    ComponentOptionsMixin,
-    ComponentOptionsMixin,
-    {},
-    string,
-    Readonly<
-        ExtractPropTypes<{
-            /**
-             * Sets the HTML DOM element.
-             * @values h1, h2, h3, h4, h5, h6, div, p, span
-             */
-            el: {
-                type: PropType<'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | BentoTypographyElement>;
-                default: BentoTypographyElement;
-                validator: (value: BentoTypographyElement) => boolean;
-            };
-            /**
-             * Adds the stronger class modifier.
-             * Applicable to Caption, Body and Subtitle variants.
-             */
-            stronger: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            /**
-             * Adds the strongest class modifier.
-             * Applicable to Caption, Body and Subtitle variants.
-             */
-            strongest: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            /**
-             * Sets the type of typography variant.
-             * @values caption, body, title.
-             */
-            variant: {
-                type: PropType<'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant>;
-                default: BentoTypographyVariant;
-                validator: (value: BentoTypographyVariant) => boolean;
-            };
-            /**
-             * Adds the medium class modifier.
-             * Applicable to the Title variant.
-             */
-            medium: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            /**
-             * Adds the large class modifier.
-             * Applicable to the Title variant.
-             */
-            large: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            /**
-             * Adds the medium class modifier.
-             * Applicable to tje Body variant.
-             */
-            wide: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-        }>
+export declare const BentoTypography: __VLS_WithTemplateSlots_29<
+    DefineComponent<
+        __VLS_WithDefaults_2<
+            __VLS_TypePropsToRuntimeProps_3<{
+                /**
+                 * Sets the HTML DOM element.
+                 * @values h1, h2, h3, h4, h5, h6, div, p, span
+                 */
+                el?: BentoTypographyElement | `${BentoTypographyElement}`;
+                /**
+                 * Adds the large class modifier.
+                 * Applicable to the Title variant.
+                 */
+                large?: boolean;
+                /**
+                 * Adds the medium class modifier.
+                 * Applicable to the Title variant.
+                 */
+                medium?: boolean;
+                /**
+                 * Adds the stronger class modifier.
+                 * Applicable to Caption, Body and Subtitle variants.
+                 */
+                stronger?: boolean;
+                /**
+                 * Adds the strongest class modifier.
+                 * Applicable to Caption, Body and Subtitle variants.
+                 */
+                strongest?: boolean;
+                /**
+                 * Sets the type of typography variant.
+                 * @values caption, body, title.
+                 */
+                variant?: BentoTypographyVariant | `${BentoTypographyVariant}`;
+                /**
+                 * Adds the medium class modifier.
+                 * Applicable to tje Body variant.
+                 */
+                wide?: boolean;
+            }>,
+            {
+                el: BentoTypographyElement;
+                large: boolean;
+                medium: boolean;
+                stronger: boolean;
+                strongest: boolean;
+                variant: BentoTypographyVariant;
+                wide: boolean;
+            }
+        >,
+        {},
+        {},
+        {},
+        {},
+        ComponentOptionsMixin,
+        ComponentOptionsMixin,
+        {},
+        string,
+        Readonly<
+            ExtractPropTypes<
+                __VLS_WithDefaults_2<
+                    __VLS_TypePropsToRuntimeProps_3<{
+                        /**
+                         * Sets the HTML DOM element.
+                         * @values h1, h2, h3, h4, h5, h6, div, p, span
+                         */
+                        el?: BentoTypographyElement | `${BentoTypographyElement}`;
+                        /**
+                         * Adds the large class modifier.
+                         * Applicable to the Title variant.
+                         */
+                        large?: boolean;
+                        /**
+                         * Adds the medium class modifier.
+                         * Applicable to the Title variant.
+                         */
+                        medium?: boolean;
+                        /**
+                         * Adds the stronger class modifier.
+                         * Applicable to Caption, Body and Subtitle variants.
+                         */
+                        stronger?: boolean;
+                        /**
+                         * Adds the strongest class modifier.
+                         * Applicable to Caption, Body and Subtitle variants.
+                         */
+                        strongest?: boolean;
+                        /**
+                         * Sets the type of typography variant.
+                         * @values caption, body, title.
+                         */
+                        variant?: BentoTypographyVariant | `${BentoTypographyVariant}`;
+                        /**
+                         * Adds the medium class modifier.
+                         * Applicable to tje Body variant.
+                         */
+                        wide?: boolean;
+                    }>,
+                    {
+                        el: BentoTypographyElement;
+                        large: boolean;
+                        medium: boolean;
+                        stronger: boolean;
+                        strongest: boolean;
+                        variant: BentoTypographyVariant;
+                        wide: boolean;
+                    }
+                >
+            >
+        >,
+        {
+            el: BentoTypographyElement | `${BentoTypographyElement}`;
+            wide: boolean;
+            stronger: boolean;
+            strongest: boolean;
+            large: boolean;
+            medium: boolean;
+            variant: BentoTypographyVariant | `${BentoTypographyVariant}`;
+        }
     >,
     {
-        el: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | BentoTypographyElement;
-        wide: boolean;
-        stronger: boolean;
-        strongest: boolean;
-        variant: 'body' | 'caption' | 'title' | 'subtitle' | BentoTypographyVariant;
-        medium: boolean;
-        large: boolean;
+        default: (_: {}) => any;
     }
 >;
 
@@ -19057,16 +19058,13 @@ declare enum PopperContainerPositionExtended {
     LEFT_END = 'left-end',
 }
 
-declare class ToastController {
-    get state(): {
-        queue: Array<BentoToastItem>;
-    };
-    private _state;
-    constructor();
-    private dismissToast;
-    addToast(params: BentoToastItem): {
-        dismiss: () => void;
-    };
+declare interface Toast {
+    dismiss: () => void;
+}
+
+export declare interface ToastStack {
+    stack: DeepReadonly<Ref<BentoToastItemsList>>;
+    addToast: (params: BentoToastItemParams) => Toast;
 }
 
 /**
@@ -19080,7 +19078,9 @@ declare class ToastController {
  */
 export declare function toTypedSchema<T extends ZodSchema>(formSchema: T): T;
 
-export declare function useBentoToastController(): ToastController;
+export declare type UseBentoToastController = ToastStack;
+
+export declare function useBentoToastController(): UseBentoToastController;
 
 /**
  * Maps an ISO code to the country's translated capital city.