@adyen/bento-vue2 1.83.0 → 1.84.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue2",
-  "version": "1.83.0",
+  "version": "1.84.0",
   "description": "Adyen Bento Vue2 components",
   "type": "module",
   "main": "dist/index.js",
@@ -49,7 +49,7 @@
     "unified": "11.0.5",
     "uuid": "11.0.5",
     "vue-demi": "0.14.10",
-    "@adyen/bento-design-tokens": "1.83.0"
+    "@adyen/bento-design-tokens": "1.84.0"
   },
   "dependenciesMeta": {
     "@adyen/bento-vue-i18n-demi": {
@@ -79,6 +79,7 @@
     "@codemirror/language-data": "6.4.0",
     "@codemirror/state": "6.4.0",
     "@codemirror/view": "6.36.1",
+    "@nx/vite": "22.4.0",
     "@playwright/experimental-ct-vue2": "1.42.1",
     "@playwright/test": "1.42.1",
     "@storybook/addon-a11y": "7.6.21",
@@ -93,6 +94,7 @@
     "@storybook/theming": "7.6.21",
     "@storybook/vue": "7.6.21",
     "@storybook/vue-vite": "7.6.21",
+    "@swc/core": "1.15.11",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/user-event": "14.4.3",
@@ -131,38 +133,25 @@
     "vue-router": "3.6.4",
     "vue-style-loader": "4.1.3",
     "vue-template-compiler": "2.7.16",
-    "vue-tsc": "2.2.10",
+    "vue-tsc": "1.0.24",
     "zod": "3.25.35",
-    "@adyen/bento-cli": "0.8.3",
-    "@adyen/bento-core": "0.0.1",
+    "@adyen/bento-cli": "0.9.0",
+    "@adyen/bento-mcp": "0.1.0",
+    "@adyen/bento-tailwind": "0.10.0",
     "@adyen/bento-vue-i18n-demi": "0.1.0",
-    "@adyen/ui-assets-icons-16": "7.5.1",
-    "@adyen/bento-tailwind": "0.9.1",
-    "@adyen/ui-assets-payment-method-icons": "10.5.3"
+    "@adyen/bento-core": "0.0.1",
+    "@adyen/ui-assets-icons-16": "7.6.0",
+    "@adyen/ui-assets-payment-method-icons": "10.6.0"
   },
   "optionalDependencies": {
     "vue-router": "~3.6"
   },
   "generators": "./generators.json",
   "scripts": {
-    "build": "pnpm run build:prod && pnpm run build:storybook",
-    "build:lib": "vite --config vite.production.config.mts build",
-    "build:dev": "NODE_ENV=development pnpm run clean:build && pnpm run build:lib --mode development build && pnpm run build:types && pnpm run build:webtypes",
-    "build:watch": "NODE_ENV=development pnpm run build:lib --mode development --watch",
-    "build:prod": "pnpm run clean:build && pnpm run build:type-check && pnpm run build:lib && pnpm run build:types && pnpm run build:webtypes",
-    "build:prod:plugin": "pnpm run clean:build && vue-tsc -p ../core/tsconfig.json && pnpm run build:lib && pnpm run build:types && pnpm run build:webtypes",
-    "build:type-check": "vue-tsc --noEmit -p ./tsconfig.build.json",
-    "build:types": "vue-tsc -p ./tsconfig.d.json && tsc-alias -p ./tsconfig.d.json && pnpm run build:types:api-extractor && pnpm run build:types:use-form && pnpm run copy-components-defs",
-    "build:types:api-extractor": "api-extractor run --local --verbose && pnpm prettier dist/@types/index.d.ts -w && rm -rf dist/@types/packages",
-    "build:types:use-form": "vue-tsc --skipLibCheck src/composables/use-form-validate-zod-4/index.ts --declaration --emitDeclarationOnly --declarationDir dist/@types/use-form-v4 && api-extractor run -c api-extractor.use-form.json --local && rm -rf dist/@types/use-form-v4/",
-    "copy-components-defs": "cp src/components.d.ts dist/@types",
-    "build:webtypes": "vue-docgen-web-types --outFile=./dist/web-types.json",
-    "build:storybook": "storybook build -c .storybook -o ../../public/packages/vue2",
+    "build:dev": "nx build vue2 -c development",
+    "build:watch": "nx build:lib vue2 -c development",
+    "build:prod": "nx build vue2 -c production",
     "component:create": "bento-cli component create",
-    "clean": "pnpm run clean:build && pnpm run clean:storybook",
-    "clean:build": "rm -rf ./dist",
-    "clean:storybook": "rm -rf ./storybook-static",
-    "dev": "storybook dev -p 8112 -c .storybook",
     "test": "TZ='Europe/Paris' vitest run --config ./vitest.config.mts",
     "test:changed": "TZ='Europe/Paris' vitest run --changed origin/main",
     "test:coverage": "pnpm run test --coverage",
@@ -177,6 +166,6 @@
     "e2e:report": "playwright show-report playwright-report",
     "e2e:ci": "pnpm run e2e:clean && playwright test -c ./playwright.integration.config.mts",
     "e2e:ci:update": "pnpm run e2e:clean && playwright test -c playwright.integration.config.mts --update-snapshots --project chromium*",
-    "netlify": "pnpm run --filter @adyen/bento-design-tokens build:dev && pnpm run --filter @adyen/bento-tailwind build && pnpm run build:storybook && pnpm run --filter @adyen/bento-storybook-ai build"
+    "netlify": "pnpm run --filter @adyen/bento-design-tokens build:dev && pnpm run --filter @adyen/bento-tailwind build && pnpm nx build:storybook vue2 && pnpm run --filter @adyen/bento-storybook-ai build"
   }
 }

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

@@ -1,196 +0,0 @@
-/* eslint-disable @typescript-eslint/consistent-type-imports */
-import {
-    BentoAccordion,
-    BentoAccordionItem,
-    BentoActionBar,
-    BentoAlert,
-    BentoAvatar,
-    BentoBaseFilter,
-    BentoButton,
-    BentoButtonActions,
-    BentoCard,
-    BentoCheckbox,
-    BentoCheckboxGroup,
-    BentoChip,
-    BentoClickOutside,
-    BentoCodeSnippet,
-    BentoCountry,
-    BentoCurrency,
-    BentoDashboardSection,
-    BentoDashboardTemplate,
-    BentoDashedUnderline,
-    BentoDataGrid,
-    BentoDataGridStaticIcon,
-    BentoDataGridTemplate,
-    BentoDataGridTrendCell,
-    BentoDate,
-    BentoDatePicker,
-    BentoDateRangePicker,
-    BentoDivider,
-    BentoDropdown,
-    BentoDropdownAvatar,
-    BentoDropdownCountry,
-    BentoDropdownCurrency,
-    BentoDropdownPaymentMethod,
-    BentoDropdownTag,
-    BentoEmptyState,
-    BentoFileUploader,
-    BentoFilterBar,
-    BentoFormLayout,
-    BentoFormLayoutFieldTip,
-    BentoFormLayoutGroup,
-    BentoFormLayoutTitle,
-    BentoHeader,
-    BentoHeaderWithViews,
-    BentoImage,
-    BentoInfoIcon,
-    BentoInputField,
-    BentoInputFieldPassword,
-    BentoInputFieldPhoneNumber,
-    BentoInspector,
-    BentoLayout,
-    BentoLayoutRow,
-    BentoLink,
-    BentoLoadingButton,
-    BentoLoadingIndicator,
-    BentoMenu,
-    BentoModal,
-    BentoModalFullscreen,
-    BentoModalFullscreenPage,
-    BentoModalPage,
-    BentoPagination,
-    BentoPaymentMethod,
-    BentoPopover,
-    BentoPromoBanner,
-    BentoRadioButton,
-    BentoRadioGroup,
-    BentoRichTextEditor,
-    BentoSearchBar,
-    BentoSecondaryNav,
-    BentoSegmentedControl,
-    BentoSelectionCard,
-    BentoSelectionCardGroup,
-    BentoSidepanel,
-    BentoSidepanelPage,
-    BentoStatus,
-    BentoStep,
-    BentoStepper,
-    BentoStructuredList,
-    BentoStructuredListItem,
-    BentoSummaryGrid,
-    BentoSummaryGridItemAmount,
-    BentoSummaryGridItemCustom,
-    BentoSummaryGridItemNumeric,
-    BentoSummaryGridItemPercentage,
-    BentoSummaryGridItemText,
-    BentoTab,
-    BentoTabs,
-    BentoTag,
-    BentoTextarea,
-    BentoTimeline,
-    BentoTimelineItem,
-    BentoToast,
-    BentoToggle,
-    BentoToggleButton,
-    BentoTutorial,
-    BentoTypography,
-} from './index';
-
-declare module 'vue' {
-    export interface GlobalComponents {
-        BentoAccordion: typeof BentoAccordion;
-        BentoAccordionItem: typeof BentoAccordionItem;
-        BentoActionBar: typeof BentoActionBar;
-        BentoAlert: typeof BentoAlert;
-        BentoAvatar: typeof BentoAvatar;
-        BentoBaseFilter: typeof BentoBaseFilter;
-        BentoButton: typeof BentoButton;
-        BentoButtonActions: typeof BentoButtonActions;
-        BentoCard: typeof BentoCard;
-        BentoCheckbox: typeof BentoCheckbox;
-        BentoCheckboxGroup: typeof BentoCheckboxGroup;
-        BentoChip: typeof BentoChip;
-        BentoClickOutside: typeof BentoClickOutside;
-        BentoCountry: typeof BentoCountry;
-        BentoCodeSnippet: typeof BentoCodeSnippet;
-        BentoCurrency: typeof BentoCurrency;
-        BentoDashboardSection: typeof BentoDashboardSection;
-        BentoDashboardTemplate: typeof BentoDashboardTemplate;
-        BentoDashedUnderline: typeof BentoDashedUnderline;
-        BentoDataGrid: typeof BentoDataGrid;
-        BentoDataGridStaticIcon: typeof BentoDataGridStaticIcon;
-        BentoDataGridTemplate: typeof BentoDataGridTemplate;
-        BentoDataGridTrendCell: typeof BentoDataGridTrendCell;
-        BentoDate: typeof BentoDate;
-        BentoDatePicker: typeof BentoDatePicker;
-        BentoDateRangePicker: typeof BentoDateRangePicker;
-        BentoDivider: typeof BentoDivider;
-        BentoDropdown: typeof BentoDropdown;
-        BentoDropdownAvatar: typeof BentoDropdownAvatar;
-        BentoDropdownCountry: typeof BentoDropdownCountry;
-        BentoEmptyState: typeof BentoEmptyState;
-        BentoFileUploader: typeof BentoFileUploader;
-        BentoFilterBar: typeof BentoFilterBar;
-        BentoFormLayout: typeof BentoFormLayout;
-        BentoFormLayoutFieldTip: typeof BentoFormLayoutFieldTip;
-        BentoFormLayoutGroup: typeof BentoFormLayoutGroup;
-        BentoFormLayoutTitle: typeof BentoFormLayoutTitle;
-        BentoHeader: typeof BentoHeader;
-        BentoHeaderWithViews: typeof BentoHeaderWithViews;
-        BentoImage: typeof BentoImage;
-        BentoInfoIcon: typeof BentoInfoIcon;
-        BentoInspector: typeof BentoInspector;
-        BentoLayout: typeof BentoLayout;
-        BentoLayoutRow: typeof BentoLayoutRow;
-        BentoDropdownCurrency: typeof BentoDropdownCurrency;
-        BentoDropdownPaymentMethod: typeof BentoDropdownPaymentMethod;
-        BentoDropdownTag: typeof BentoDropdownTag;
-        BentoInputField: typeof BentoInputField;
-        BentoInputFieldPassword: typeof BentoInputFieldPassword;
-        BentoInputFieldPhoneNumber: typeof BentoInputFieldPhoneNumber;
-        BentoLink: typeof BentoLink;
-        BentoLoadingButton: typeof BentoLoadingButton;
-        BentoLoadingIndicator: typeof BentoLoadingIndicator;
-        BentoMenu: typeof BentoMenu;
-        BentoModal: typeof BentoModal;
-        BentoModalFullscreen: typeof BentoModalFullscreen;
-        BentoModalFullscreenPage: typeof BentoModalFullscreenPage;
-        BentoModalPage: typeof BentoModalPage;
-        BentoPagination: typeof BentoPagination;
-        BentoPaymentMethod: typeof BentoPaymentMethod;
-        BentoPopover: typeof BentoPopover;
-        BentoPromoBanner: typeof BentoPromoBanner;
-        BentoRadioButton: typeof BentoRadioButton;
-        BentoRadioGroup: typeof BentoRadioGroup;
-        BentoRichTextEditor: typeof BentoRichTextEditor;
-        BentoSearchBar: typeof BentoSearchBar;
-        BentoSecondaryNav: typeof BentoSecondaryNav;
-        BentoSegmentedControl: typeof BentoSegmentedControl;
-        BentoSelectionCard: typeof BentoSelectionCard;
-        BentoSelectionCardGroup: typeof BentoSelectionCardGroup;
-        BentoSidepanel: typeof BentoSidepanel;
-        BentoSidepanelPage: typeof BentoSidepanelPage;
-        BentoStatus: typeof BentoStatus;
-        BentoStep: typeof BentoStep;
-        BentoStepper: typeof BentoStepper;
-        BentoStructuredList: typeof BentoStructuredList;
-        BentoStructuredListItem: typeof BentoStructuredListItem;
-        BentoSummaryGrid: typeof BentoSummaryGrid;
-        BentoSummaryGridItemAmount: typeof BentoSummaryGridItemAmount;
-        BentoSummaryGridItemCustom: typeof BentoSummaryGridItemCustom;
-        BentoSummaryGridItemPercentage: typeof BentoSummaryGridItemPercentage;
-        BentoSummaryGridItemNumeric: typeof BentoSummaryGridItemNumeric;
-        BentoSummaryGridItemText: typeof BentoSummaryGridItemText;
-        BentoTab: typeof BentoTab;
-        BentoTabs: typeof BentoTabs;
-        BentoTag: typeof BentoTag;
-        BentoTimeline: typeof BentoTimeline;
-        BentoTimelineItem: typeof BentoTimelineItem;
-        BentoToast: typeof BentoToast;
-        BentoToggle: typeof BentoToggle;
-        BentoToggleButton: typeof BentoToggleButton;
-        BentoTutorial: typeof BentoTutorial;
-        BentoTypography: typeof BentoTypography;
-        BentoTextarea: typeof BentoTextarea;
-    }
-}

package/dist/@types/use-form-v4.d.ts

@@ -1,86 +0,0 @@
-import { Ref } from 'vue';
-import type { typeToFlattenedError } from 'zod';
-import type { ZodType } from 'zod/v4';
-
-/**
- * Extracts all the keys from a type
- */
-export declare type allKeys<T> = T extends any ? keyof T : never;
-
-/**
- * Object of all the form field props with their respective list of errors
- */
-export declare type ErrorBag<T> = typeToFlattenedError<T, string>['fieldErrors'];
-
-/**
- * Composable that tansforms a Zod schema into a Typed Schema that can be used alongside with {@see useForm}.
- *
- * This is meant to simulate the behavior of {@link @vee-validate/zod} {@see https://vee-validate.logaretm.com/v4/integrations/zod-schema-validation}.
- * Function that transform Zod’s schemas into something that can be understood by vee-validate
- *
- * @param {T extends ZodSchema} formSchema Zod schema to be transformed into a `vee-validate` schema
- * @returns {UseForm<T>} schema Schema transformed
- */
-export declare function toTypedSchema<T extends ZodType>(formSchema: T): T;
-
-/**
- * useForm composable configuration object
- */
-export declare interface UseForm<T> {
-    validationSchema: T;
-}
-
-/**
- * Composable that facilitates validating form data for Vue2 & Vue3 implementations with FormLayout
- * to ease the migration to Vue3.
- *
- * For Vue3 implementations use Vee-Validate.
- *
- * This provides a simplified version of Vee-Validate v4 implemented with Zod to validate a form schema.
- * It returns reactive values that can be used directly in form input elements with 'v-model' alongside
- * with functions to "reset" the data (sets values to default value) and a function to execute the
- * successful form validation process (through a callback).
- *
- * @param props Form configuration object
- * @param props.validationSchema Zod typed validation schema
- * @returns response - Composable with reactive form values and errors, and functions to handle the reactive data
- * @returns response.errorBag Object with all the form values and an array of each one of the errors (if any) per value
- * @returns response.errors Object with all the form values and the first error found for that field (if any)
- * @returns response.values Object with all the form values and their current value
- * @returns response.handleReset Resets the form values to default (initial values) when it gets called
- * @returns response.submitForm Validates the data set in {response.values} and sets errors (if found) inside {response.errors} and {response.errorBag}.
- *                                                                   When the validation is successful it calls the callback so the submit process can continue
- *
- * @example
- * const validationSchema = toTypedSchema(
- *      z.object({
- *          name: z
- *              .string()
- *              .min(3, { message: 'Name is required' })
- *              .startsWith('Jane')
- *              .max(4, { message: 'Name cannot be longer than 4 characters' })
- *              .default('Joe'),
- *      })
- * );
- *
- * const { values, errors, errorBag, submitForm, handleReset } = useForm({
- *     validationSchema
- * });
- * const handleSubmit = submitForm(() => {
- *     // Send data to API here
- * })
- *
- */
-export declare function useForm<T extends ZodType>({ validationSchema, }: UseForm<T>): {
-    errorBag: Ref<{
-        [P in allKeys<(typeof validationSchema)['_output']>]?: Array<string>;
-    }>;
-    errors: Ref<{
-        [P in allKeys<(typeof validationSchema)['_output']>]?: string;
-    }>;
-    values: Ref<(typeof validationSchema)['_output']>;
-    handleReset: () => void;
-    submitForm: (submitted: any) => () => void;
-};
-
-export { }