@adyen/bento-mcp 0.1.3 → 0.2.1

package/dist/assets/components/timeline/timeline.stories.ts

@@ -1 +1 @@
-import type { Meta, StoryObj } from '@storybook/vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { onMounted, ref } from 'vue'; import { isVue2 } from 'vue-demi'; import BentoTimeline from './timeline.vue'; import BentoTimelineItem from './components/timeline-item/timeline-item.vue'; import { BentoTimelineGapUnit, BentoTimelineShowMorePlacement } from './timeline.types'; import TimelineDynamicAddition from './__tests__/timeline-dynamic-add-stub.vue?raw'; import { BentoDateFormat } from '@/components/date/date.types'; import BentoLink from '@/components/link/link.vue'; import BentoButton from '@/components/button/button.vue'; const meta: Meta = { title: 'Timeline', component: BentoTimeline, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'BentoTimelineItem components', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, }, }; export default meta; type Story = StoryObj<typeof BentoTimeline>; const DEFAULT_PROPS = { timegapLimit: { unit: BentoTimelineGapUnit.DAY, amount: 15 }, showMore: { limit: 3, placement: BentoTimelineShowMorePlacement.AFTER_FIRST }, }; const DEFAULT_ITEM_PROPS = { timestamp: { date: new Date(), value: 'AuthorName', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD, }, dataList: [ { label: 'Label', value: 'Value' }, { label: 'Label', value: 'Value' }, ], description: 'Space to put some description about this milestone', }; const { description: _, ...DEFAULT_PROPS_WITHOUT_DESCRIPTION } = DEFAULT_ITEM_PROPS; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args"> <bento-timeline-item v-bind="milestone5" /> <bento-timeline-item v-bind="milestone4" /> <bento-timeline-item v-bind="milestone3" /> <bento-timeline-item v-bind="milestone2" /> <bento-timeline-item v-bind="milestone1" /> </bento-timeline> `, setup(props) { const milestone5 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 5', status: 'green', }; const milestone4 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 4', timestamp: { date: new Date().setDate(-2), value: 'AuthorName', }, }; const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 3', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, status: 'red', }; const milestone2 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-15), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; return { args: isVue2 ? props : _args, milestone1, milestone2, milestone3, milestone4, milestone5, }; }, }), args: { ...DEFAULT_PROPS, }, }; export const WithLinks: Story = { render: (_args, { argTypes }) => ({ components: { BentoLink, BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args"> <bento-timeline-item v-bind="milestone3" /> <bento-timeline-item v-bind="milestone2"> A description with <bento-link to="/">a link</bento-link> </bento-timeline-item> <bento-timeline-item v-bind="milestone1" /> </bento-timeline> `, setup(props) { const milestone3 = { ...DEFAULT_ITEM_PROPS, title: { title: 'Milestone 3', to: '/', }, timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, status: 'green', }; const milestone2 = { ...DEFAULT_PROPS_WITHOUT_DESCRIPTION, title: 'Milestone 2', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-15), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; return { args: isVue2 ? props : _args, milestone1, milestone2, milestone3, }; }, }), args: { ...DEFAULT_PROPS, }, }; const withNotesCode = ` <template> <bento-timeline v-bind="args" @add-timeline-note="addNote"> <bento-timeline-item v-for="item in timelineItems" v-bind="item" /> </bento-timeline> </template> <script setup> const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const timelineItems = ref(); onMounted(() => { timelineItems.value = [milestone3, milestone2, milestone1]; }); const addNote = e => { timelineItems.value.unshift(e); }; return { args: isVue2 ? props : _args, timelineItems, addNote, }; </script> `; export const WithNotes: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args"> <bento-timeline-item v-bind="milestone3" /> <bento-timeline-item v-bind="milestone2" /> <bento-timeline-item v-bind="milestone1" /> </bento-timeline> `, setup(props) { const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; return { args: isVue2 ? props : _args, milestone1, milestone2, milestone3, }; }, }), args: { ...DEFAULT_PROPS, showMore: null, }, parameters: storybookDocsParameter(withNotesCode), }; const addNoteCode = ` <template> <bento-timeline v-bind="args" add-note @add-timeline-note="addNote"> <bento-timeline-item v-for="item in timelineItems" v-bind="item" /> </bento-timeline> </template> <script setup> const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const timelineItems = ref(); onMounted(() => { timelineItems.value = [milestone3, milestone2, milestone1]; }); const addNote = e => { timelineItems.value.unshift(e); }; return { timelineItems, addNote, }; </script> `; export const AddNote: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args" add-note @add-timeline-note="addNote"> <bento-timeline-item v-for="item in timelineItems" v-bind="item" /> </bento-timeline> `, setup(props) { const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const timelineItems = ref(); onMounted(() => { timelineItems.value = [milestone3, milestone2, milestone1]; }); const addNote = e => { const newNote = { ...e, timestamp: { ...e.timestamp, value: 'AuthorName' } }; timelineItems.value.unshift(newNote); }; return { args: isVue2 ? props : _args, timelineItems, addNote, }; }, }), args: { ...DEFAULT_PROPS, showMore: null, addNotes: true, }, parameters: storybookDocsParameter(addNoteCode), }; export const DynamicItemAddition: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <div style="display: flex; flex-direction: row; align-items: flex-start; gap: 16px;"> <bento-button @click="addItem">Add timeline item</bento-button> <bento-timeline v-if="timelineEntries"> <bento-timeline-item v-for="entry in timelineEntries" :key="entry.title" v-bind="entry" /> </bento-timeline> </div> `, setup(props) { const timelineEntries = ref([]); let index = 0; const addItem = () => { if (index < 5) { timelineEntries.value.unshift(milestones[index]); index++; } }; const milestone5 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 5', status: 'green', }; const milestone4 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 4', timestamp: { date: new Date().setDate(-2), value: 'AuthorName', }, }; const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 3', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, status: 'red', }; const milestone2 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-15), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const milestones = [milestone1, milestone2, milestone3, milestone4, milestone5]; return { args: isVue2 ? props : _args, timelineEntries, addItem, }; }, }), args: { ...DEFAULT_PROPS, }, parameters: storybookDocsParameter(TimelineDynamicAddition), }; 
+import type { Meta, StoryObj } from '@storybook/vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { onMounted, ref } from 'vue'; import { isVue2 } from 'vue-demi'; import BentoTimeline from './timeline.vue'; import BentoTimelineItem from './components/timeline-item/timeline-item.vue'; import { BentoTimelineGapUnit, BentoTimelineShowMorePlacement } from './timeline.types'; import TimelineDynamicAddition from './__tests__/timeline-dynamic-add-stub.vue?raw'; import TimelineDefaultExample from './__tests__/timeline-default-example.vue?raw'; import { BentoDateFormat } from '@/components/date/date.types'; import BentoLink from '@/components/link/link.vue'; import BentoButton from '@/components/button/button.vue'; const meta: Meta = { title: 'Timeline', component: BentoTimeline, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'BentoTimelineItem components', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, }, }; export default meta; type Story = StoryObj<typeof BentoTimeline>; const DEFAULT_PROPS = { timegapLimit: { unit: BentoTimelineGapUnit.DAY, amount: 15 }, showMore: { limit: 3, placement: BentoTimelineShowMorePlacement.AFTER_FIRST }, }; const DEFAULT_ITEM_PROPS = { timestamp: { date: new Date(), value: 'AuthorName', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD, }, dataList: [ { label: 'Label', value: 'Value' }, { label: 'Label', value: 'Value' }, ], description: 'Space to put some description about this milestone', }; const { description: _, ...DEFAULT_PROPS_WITHOUT_DESCRIPTION } = DEFAULT_ITEM_PROPS; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args"> <bento-timeline-item v-bind="milestone5" /> <bento-timeline-item v-bind="milestone4" /> <bento-timeline-item v-bind="milestone3" /> <bento-timeline-item v-bind="milestone2" /> <bento-timeline-item v-bind="milestone1" /> </bento-timeline> `, setup(props) { const milestone5 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 5', status: 'green', }; const milestone4 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 4', timestamp: { date: new Date().setDate(-2), value: 'AuthorName', }, }; const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 3', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, status: 'red', }; const milestone2 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-14), value: 'BookingDate', description: { popoverText: 'date of booking', }, }, additionalTimestamp: { date: new Date().setDate(-15), value: 'ValueDate', description: { tooltipText: 'date of value', }, }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; return { args: isVue2 ? props : _args, milestone1, milestone2, milestone3, milestone4, milestone5, }; }, }), args: { ...DEFAULT_PROPS, }, parameters: storybookDocsParameter(TimelineDefaultExample), }; export const WithLinks: Story = { render: (_args, { argTypes }) => ({ components: { BentoLink, BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args"> <bento-timeline-item v-bind="milestone3" /> <bento-timeline-item v-bind="milestone2"> A description with <bento-link to="/">a link</bento-link> </bento-timeline-item> <bento-timeline-item v-bind="milestone1" /> </bento-timeline> `, setup(props) { const milestone3 = { ...DEFAULT_ITEM_PROPS, title: { title: 'Milestone 3', to: '/', }, timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, status: 'green', }; const milestone2 = { ...DEFAULT_PROPS_WITHOUT_DESCRIPTION, title: 'Milestone 2', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-15), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; return { args: isVue2 ? props : _args, milestone1, milestone2, milestone3, }; }, }), args: { ...DEFAULT_PROPS, }, }; const withNotesCode = ` <template> <bento-timeline v-bind="args" @add-timeline-note="addNote"> <bento-timeline-item v-for="item in timelineItems" v-bind="item" /> </bento-timeline> </template> <script setup> const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const timelineItems = ref(); onMounted(() => { timelineItems.value = [milestone3, milestone2, milestone1]; }); const addNote = e => { timelineItems.value.unshift(e); }; return { args: isVue2 ? props : _args, timelineItems, addNote, }; </script> `; export const WithNotes: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args"> <bento-timeline-item v-bind="milestone3" /> <bento-timeline-item v-bind="milestone2" /> <bento-timeline-item v-bind="milestone1" /> </bento-timeline> `, setup(props) { const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; return { args: isVue2 ? props : _args, milestone1, milestone2, milestone3, }; }, }), args: { ...DEFAULT_PROPS, showMore: null, }, parameters: storybookDocsParameter(withNotesCode), }; const addNoteCode = ` <template> <bento-timeline v-bind="args" add-note @add-timeline-note="addNote"> <bento-timeline-item v-for="item in timelineItems" v-bind="item" /> </bento-timeline> </template> <script setup> const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const timelineItems = ref(); onMounted(() => { timelineItems.value = [milestone3, milestone2, milestone1]; }); const addNote = e => { timelineItems.value.unshift(e); }; return { timelineItems, addNote, }; </script> `; export const AddNote: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args" add-note @add-timeline-note="addNote"> <bento-timeline-item v-for="item in timelineItems" v-bind="item" /> </bento-timeline> `, setup(props) { const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const timelineItems = ref(); onMounted(() => { timelineItems.value = [milestone3, milestone2, milestone1]; }); const addNote = e => { const newNote = { ...e, timestamp: { ...e.timestamp, value: 'AuthorName' } }; timelineItems.value.unshift(newNote); }; return { args: isVue2 ? props : _args, timelineItems, addNote, }; }, }), args: { ...DEFAULT_PROPS, showMore: null, addNotes: true, }, parameters: storybookDocsParameter(addNoteCode), }; export const DynamicItemAddition: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <div style="display: flex; flex-direction: row; align-items: flex-start; gap: 16px;"> <bento-button @click="addItem">Add timeline item</bento-button> <bento-timeline v-if="timelineEntries"> <bento-timeline-item v-for="entry in timelineEntries" :key="entry.title" v-bind="entry" /> </bento-timeline> </div> `, setup(props) { const timelineEntries = ref([]); let index = 0; const addItem = () => { if (index < 5) { timelineEntries.value.unshift(milestones[index]); index++; } }; const milestone5 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 5', status: 'green', }; const milestone4 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 4', timestamp: { date: new Date().setDate(-2), value: 'AuthorName', }, }; const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 3', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, status: 'red', }; const milestone2 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-15), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const milestones = [milestone1, milestone2, milestone3, milestone4, milestone5]; return { args: isVue2 ? props : _args, timelineEntries, addItem, }; }, }), args: { ...DEFAULT_PROPS, }, parameters: storybookDocsParameter(TimelineDynamicAddition), }; 

package/dist/assets/components/timeline/timeline.types.ts

@@ -0,0 +1 @@
+import { type BentoDashedUnderlineProps } from '@/components/dashed-underline/dashed-underline.types'; import { type BentoDateFormat } from '@/components/date/date.types'; import { type BentoTag } from '@/components/tag'; import { type Ref } from 'vue'; import type { RouterLinkProps } from 'vue-router/types/router.d.ts'; export enum BentoTimelineShowMorePlacement { BOTTOM = 'bottom', AFTER_FIRST = 'after-first', BEFORE_LAST = 'before-last', } export interface BentoTimelineShowMoreObject { limit: number; placement?: BentoTimelineShowMorePlacement; } export enum BentoTimelineGapUnit { SECOND = 'second', MINUTE = 'minute', HOUR = 'hour', DAY = 'day', MONTH = 'month', YEAR = 'year', } export interface BentoTimelineGapObject { amount: number; unit: BentoTimelineGapUnit; } /** * @deprecated "variant" prop was deprecated. Use "status" modifier instead. */ export enum BentoTimelineItemVariant { DEFAULT = 'SquareSmallIcon', SUCCESS = 'CheckedCircleIcon', CRITICAL = 'CrossCircleIcon', } export enum BentoTimelineStatus { BLACK = 'black', BLUE = 'blue', GREEN = 'green', GREY = 'grey', ORANGE = 'orange', RED = 'red', YELLOW = 'yellow', } export interface BentoTimelineItemTitle extends RouterLinkProps { /** * Link label. */ title: string; /** * Set the rendered link to a regular external anchor link. */ external?: boolean; /** * Sets the target of the rendered link. */ target?: string; // This has been added to allow users to add HTML and Aria attribute // eslint-disable-next-line @typescript-eslint/no-explicit-any [name: string]: any; } export interface BentoTimelineTimestamp { date: Date | number; format?: BentoDateFormat; value?: string; description?: BentoDashedUnderlineProps; } export interface BentoTimelineDataListObject { label: string; value: string; } export type BentoTimelineDataList = Array<BentoTimelineDataListObject>; export type BentoTimelineTagProps = InstanceType<typeof BentoTag>['$props']; export interface BentoTimelineEntry { title?: string | BentoTimelineItemTitle; description?: string; date: Date | number; } /** * @deprecated from version 2.0.0. */ export type BentoTimelineRegisterEntry = (props: { title?: string | BentoTimelineItemTitle; description?: string; date: Date | number; }) => { timelineEntries: Ref<Array<BentoTimelineEntry>>; index: number; unregisterTimelineEntry: () => void }; /** * @private */ export type BentoInternalTimelineRegisterEntry = ( entry: BentoTimelineEntry ) => { timelineEntries: Ref<Array<BentoTimelineEntry>>; unregisterTimelineEntry: () => void }; export interface BentoTimelineConfigData { showAll: Ref<boolean>; showMoreIndex: Ref<number>; hiddenItems: Ref<number>; visibleIndexes: Ref<Array<number>>; timegapLimit: Ref<BentoTimelineGapObject>; timelineEntries: Ref<Array<BentoTimelineEntry>>; } export interface BentoTimelineProps { /** * If set to true, gives the possibility to manually add notes to the timeline via a textarea */ addNote?: boolean; /** * Object that determines the max number of items to show without clicking the show more button * and where in the timeline is the show more button placed */ showMore?: BentoTimelineShowMoreObject; /** * Object that determines minimum amount of time for the automatic timegap indicator; * Define a unit (hour, day, month) and an amount (e.g. { amount: 7, unit: 'days' }). * If null, automatic timegap detection will be turned off */ timegapLimit?: BentoTimelineGapObject; } export interface BentoTimelineItemProps { /** * Additional timestamp of the event */ additionalTimestamp?: BentoTimelineTimestamp; /** * Relevant key-value pair data to display in the event */ dataList?: BentoTimelineDataList; /** * Description of the event */ description?: string; /** * Modifier that changes the color of the timeline icon * @values blue, black, green, grey, orange, red, yellow */ status?: string; /** * Tag props that will be passed down to inner tag component */ tag?: BentoTimelineTagProps; /** * Main timestamp of the event. Used for timegap detection. */ timestamp: BentoTimelineTimestamp; /** * Title of the event */ title?: BentoTimelineItemTitle | string; /** * Type of the timeline item. If set to 'note', it renders a note item in the timeline. Defaults to 'milestone'. * @values milestone, note */ type?: string; /** * Variant for the timeline item * @values DEFAULT, SUCCESS, CRITICAL * * @deprecated Use "status" prop instead */ variant?: BentoTimelineItemVariant | `${BentoTimelineItemVariant}`; } 

package/dist/assets/components/toast/components/toast-shadow-stack/toast-shadow-stack.types.ts

@@ -0,0 +1 @@
+import type { BentoToastItem } from '@/composables'; export interface BentoToastItemWithDimensions extends BentoToastItem { bottom: number; height: number; } 

package/dist/assets/components/toggle/toggle.types.ts

@@ -0,0 +1 @@
+export enum BentoTogglePropClass { LABEL_FIRST = 'label-first', } /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoToggleLabelPosition { BEFORE = 'before', AFTER = 'after', } 

package/dist/assets/components/tutorial/tutorial.types.ts

@@ -0,0 +1 @@
+import type { Ref } from 'vue'; import type { BentoButtonActionObject } from '@/components/button'; import type { BentoImage } from '@/components/image'; import type { BentoPopoverPositions } from '@/components/popover'; import type { VueNodeElement } from '@/types/elements'; export interface BentoTutorialStep { target: VueNodeElement | Ref<VueNodeElement>; image?: Omit<InstanceType<typeof BentoImage>['$props'], 'aspectRatio'>; title: string; description: string; action?: BentoButtonActionObject; position?: `${BentoPopoverPositions}`; } export type BentoTutorialScrollOptions = boolean | ScrollIntoViewOptions; 

package/dist/assets/components/typography/typography.types.ts

@@ -0,0 +1 @@
+/** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoTypographyVariant { CAPTION = 'caption', BODY = 'body', /** @deprecated Use "TITLE" instead. */ SUBTITLE = 'subtitle', TITLE = 'title', } export enum BentoTypographyModifier { WIDE = 'wide', STRONGER = 'stronger', STRONGER_WIDE = 'stronger-wide', STRONGEST = 'strongest', STRONGEST_WIDE = 'strongest-wide', MEDIUM = 'm', LARGE = 'l', MOBILE = 'mobile', } /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoTypographyElement { H1 = 'h1', H2 = 'h2', H3 = 'h3', H4 = 'h4', H5 = 'h5', H6 = 'h6', DIV = 'div', PARAGRAPH = 'p', SPAN = 'span', } export interface BentoTypographyProps { /** * 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 rich-text modifier, which allows for the use of HTML tags inside typography. */ richText?: 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 the Body variant. */ wide?: boolean; } 

package/dist/assets/components.json

@@ -0,0 +1,101 @@
+[
+  "BentoAccordion",
+  "BentoAccordionItem",
+  "BentoActionBar",
+  "BentoAiTag",
+  "BentoAlert",
+  "BentoAnchorScroller",
+  "BentoAvatar",
+  "BentoBaseFilter",
+  "BentoButton",
+  "BentoButtonActions",
+  "BentoCard",
+  "BentoCheckbox",
+  "BentoCheckboxGroup",
+  "BentoChip",
+  "BentoClickOutside",
+  "BentoCodeSnippet",
+  "BentoCountry",
+  "BentoCurrency",
+  "BentoDashboardSection",
+  "BentoDashboardTemplate",
+  "BentoDashedUnderline",
+  "BentoDataGrid",
+  "BentoDataGridStaticIcon",
+  "BentoDataGridTagWithTextCell",
+  "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",
+  "BentoList",
+  "BentoListItem",
+  "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"
+]

package/dist/assets/composables/use-bento-theme/install.ts

@@ -0,0 +1 @@
+import { type App, isVue2, type Vue2 } from 'vue-demi'; import { useBentoThemeKey } from './use-bento-theme.types'; import { BentoTheme } from './install.types'; const getTheme = () => document.body.className.match(/b-\w+-theme/)?.[0] ?? ''; const getThemeForSystemPreference = () => { const preferredDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; if (preferredDarkMode) { return BentoTheme.BENTO_DARK; } return BentoTheme.BENTO_LIGHT; }; export const setTheme = (theme: BentoTheme) => { const currentTheme = getTheme(); const systemTheme = getThemeForSystemPreference(); const themeToSet = theme === BentoTheme.BENTO_SYSTEM ? systemTheme : theme; if (themeToSet === BentoTheme.BENTO_LIGHT || themeToSet === BentoTheme.BENTO) { document.documentElement.style.colorScheme = 'light'; } else if (themeToSet === BentoTheme.BENTO_DARK) { document.documentElement.style.colorScheme = 'dark'; } // if theme is different from current and it is not `BentoTheme.BENTO` if (currentTheme.length && currentTheme !== themeToSet) { document.body.classList.remove(currentTheme); } // if theme is not `BentoTheme.BENTO` if (themeToSet.length) { document.body.classList.add(themeToSet); } }; /** * This function is used to create and register global reactive state necessary for theme to operate. * @param {Vue} Vue A context application to register global state with. */ export default Vue => { const themeProvider = { getTheme, setTheme, }; if (isVue2) { // Add theme as a global property as there is no "app.provide" functionality in Vue2 // eslint-disable-next-line no-param-reassign -- this is an official way of setting up instance properties on Vue (Vue as typeof Vue2).prototype[useBentoThemeKey] = themeProvider; } else { (Vue as App).provide(useBentoThemeKey, themeProvider); } }; 

package/dist/assets/composables/use-bento-theme/install.types.ts

@@ -0,0 +1 @@
+export enum BentoTheme { /** * @deprecated in favor of {@link BENTO_LIGHT}. To be removed in v2.0.0. */ LEGACY = 'b-legacy-theme', STYLEGUIDE = 'b-styleguide-theme', /** * @deprecated in favor of {@link BENTO_LIGHT}. To be removed in v2.0.0. */ BENTO = '', BENTO_LIGHT = 'b-light-theme', BENTO_DARK = 'b-dark-theme', BENTO_SYSTEM = 'b-system', } 

package/dist/assets/composables/use-bento-theme/use-bento-theme.types.ts

@@ -0,0 +1 @@
+import { type BentoTheme } from './install.types'; export const useBentoThemeKey = Symbol('use-bento-theme'); export interface UseBentoTheme { getTheme: () => string; setTheme: (theme: BentoTheme | `${BentoTheme}`) => void; } 

package/dist/assets/composables/use-bento-toast-controller/install.ts

@@ -0,0 +1 @@
+import { type App, isVue2, type Vue2 } from 'vue-demi'; import { createToastStack, toastStackInjectionKey } from './toast-stack'; /** * This function is used to create and register global reactive state necessary fro the Toasts to operate. * @param {Vue} Vue A context application to register global state with. */ export default Vue => { if (isVue2) { // Add toast stack as a global property as there is no "app.provide" functionality in Vue2 // eslint-disable-next-line no-param-reassign -- this is an official way of setting up instance properties on Vue (Vue as typeof Vue2).prototype[toastStackInjectionKey] = createToastStack(); } else { (Vue as App).provide(toastStackInjectionKey, createToastStack()); } }; 

package/dist/assets/composables/use-bento-toast-controller/use-bento-toast-controller.types.ts

@@ -0,0 +1 @@
+import { type DeepReadonly, type Ref } from 'vue'; export interface BentoToastItemAction { handler: () => void; text: string; } export interface BentoToastItemParams { action?: BentoToastItemAction; text: string; } export interface BentoToastItem extends BentoToastItemParams { id: string; dismiss: () => void; } export type BentoToastItemsList = Array<BentoToastItem>; interface Toast { dismiss: () => void; } export interface ToastStack { stack: DeepReadonly<Ref<BentoToastItemsList>>; addToast: (params: BentoToastItemParams) => Toast; } export type UseBentoToastController = ToastStack; 

package/dist/assets/composables/use-form-validate/use-form.types.ts

@@ -0,0 +1 @@
+import type { typeToFlattenedError } from 'zod'; /** * Object of all the form field props with their respective list of errors * @deprecated For usage with Zod/v3. Migrate to Zod/v4 and use `@adyen/bento-vue2/use-form-v4' instead or migrate to Vue3 and use Vee-Validate instead. */ export type ErrorBag<T> = typeToFlattenedError<T, string>['fieldErrors']; /** * Extracts all the keys from a type * @deprecated For usage with Zod/v3. Migrate to Zod/v4 and use `@adyen/bento-vue2/use-form-v4' instead or migrate to Vue3 and use Vee-Validate instead. */ export type allKeys<T> = T extends any ? keyof T : never; /** * useForm composable configuration object * @deprecated For usage with Zod/v3. Migrate to Zod/v4 and use `@adyen/bento-vue2/use-form-v4' instead or migrate to Vue3 and use Vee-Validate instead. */ export interface UseForm<T> { validationSchema: T; } 

package/dist/assets/composables/use-form-validate-zod-4/use-form.types.ts

@@ -0,0 +1 @@
+import type { typeToFlattenedError } from 'zod'; /** * Object of all the form field props with their respective list of errors */ export type ErrorBag<T> = typeToFlattenedError<T, string>['fieldErrors']; /** * Extracts all the keys from a type */ export type allKeys<T> = T extends any ? keyof T : never; /** * useForm composable configuration object */ export interface UseForm<T> { validationSchema: T; } 

package/dist/assets/composables/use-virtual-list/use-virtual-list.types.ts

@@ -0,0 +1 @@
+import type { Ref, UnwrapRef } from 'vue'; import type { StyleValue } from 'vue/types/jsx.d.ts'; export type UseVirtualListItemHeight = number | ((index: number) => number); export interface UseVirtualListOptions { disabled?: boolean; prefixHeight?: Ref<number>; itemHeight: UseVirtualListItemHeight; overscan?: number; } export interface UseVirtualListContainerProps { ref: Ref<UnwrapRef<HTMLElement | null>>; style: StyleValue; } export interface UseVirtualListWrapperProps { style: StyleValue; } export interface UseVirtualListItem<T> { data: T; index: number; } 

package/dist/assets/deprecations.md

@@ -0,0 +1,330 @@
+# Bento Deprecations Registry
+
+This file contains a list of all deprecated components, properties, and features in the Bento design system, extracted directly from the source code.
+
+---
+
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/input-field/input-field.vue-            BentoInputField error property
+- ../vue2/src/components/input-field/input-field.vue-            `Use the BentoInputField errorMessage property instead to indicate that there is a modifier error.
+- ../vue2/src/components/input-field/input-field.vue-            Having the field as undefined will hide/remove the error.
+- ../vue2/src/components/input-field/input-field.vue-            <bento-dropdown errorMessage=Error message text />`
+- ../vue2/src/components/input-field/input-field.vue-            2.0.0
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/input-field/input-field.vue-            BentoInputField defaultIconBefore slot
+- ../vue2/src/components/input-field/input-field.vue-            `Use the BentoInputField iconBefore slot instead to add an icon at the left side of the input field
+- ../vue2/src/components/input-field/input-field.vue-            <bento-input-field>
+- ../vue2/src/components/input-field/input-field.vue-              \t<template #iconBefore>
+- ../vue2/src/components/input-field/input-field.vue-                \t\t<my-icon-goes-here />
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/input-field/input-field.vue-            BentoInputField value property
+- ../vue2/src/components/input-field/input-field.vue-            `The use of value prop in BentoInputField is no longer supported.
+- ../vue2/src/components/input-field/input-field.vue-             Use the v-model or model-value property instead.`
+- ../vue2/src/components/input-field/input-field.vue-            2.0.0
+- ../vue2/src/components/input-field/input-field.vue-        );
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/card/card.vue-                    BentoCard @click property
+- ../vue2/src/components/card/card.vue-                    `Use the BentoCard @click with the clickable property to enable accessible styles.`
+- ../vue2/src/components/card/card.vue-                    2.0.0
+- ../vue2/src/components/card/card.vue-                );
+- ../vue2/src/components/card/card.vue-            }
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue-            BentoDropdownCurrency value property
+- ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue-            `The use of value prop in BentoDropdownCurrency is no longer supported.
+- ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue-            2.0.0
+- ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue-        );
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            BentoDropdownCountry custom variant and items prop label key
+- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            Use any of the other BentoDropdownCountry variants instead OR use BentoDropdown component for custom labels
+- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            2.0.0
+- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-        );
+- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-    }
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            BentoDropdownCountry value property
+- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            `The use of value prop in BentoDropdownCountry is no longer supported.
+- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-            2.0.0
+- ../vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue-        );
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-            BentoDropdownPaymentMethod value property
+- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-            `The use of value prop in BentoDropdownPaymentMethod is no longer supported.
+- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-            2.0.0
+- ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue-        );
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-            BentoDropdownTag value property
+- ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-            `The use of value prop in BentoDropdownTag is no longer supported.
+- ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-            2.0.0
+- ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue-        );
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-            BentoDropdownAvatar value property
+- ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-            `The use of value prop in BentoDropdownAvatar is no longer supported.
+- ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-            2.0.0
+- ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue-        );
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/dropdown/dropdown.vue-            BentoDropdown error property
+- ../vue2/src/components/dropdown/dropdown.vue-            `Use the BentoDropdown errorMessage property instead to indicate that there is a modifier error.
+- ../vue2/src/components/dropdown/dropdown.vue-                            Having the field as undefined will hide/remove the error.
+- ../vue2/src/components/dropdown/dropdown.vue-                            <bento-dropdown errorMessage=Error message text />`
+- ../vue2/src/components/dropdown/dropdown.vue-            2.0.0
+### Deprecation Found
+
+- deprecate(BentoDropdown size property, `Do not use. Only default size should be used.`, 2.0.0);
+- ../vue2/src/components/dropdown/dropdown.vue-    }
+- ../vue2/src/components/dropdown/dropdown.vue-
+- ../vue2/src/components/dropdown/dropdown.vue-    if (props.value) {
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/dropdown/dropdown.vue-            BentoDropdown value property
+- ../vue2/src/components/dropdown/dropdown.vue-            `The use of value prop in BentoDropdown is no longer supported.
+- ../vue2/src/components/dropdown/dropdown.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/dropdown/dropdown.vue-            2.0.0
+- ../vue2/src/components/dropdown/dropdown.vue-        );
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/typography/typography.vue-            BentoTypography subtitle variant (BentoTypographyVariant.SUBTITLE)
+- ../vue2/src/components/typography/typography.vue-            `Use the title or BentoTypographyVariant.TITLE variant and (optionally) combine it with a size property. e.g. medium / large.
+- variant=BentoTypographyVariant.TITLE medium>`
+- ../vue2/src/components/typography/typography.vue-            2.0.0
+- ../vue2/src/components/typography/typography.vue-        );
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/currency/currency.vue-                BentoCurrency default slot
+- ../vue2/src/components/currency/currency.vue-                `The use of default slot in BentoCurrency is no longer supported as it causes issues with dynamic content.
+- ../vue2/src/components/currency/currency.vue-                Use the value property instead.
+- value=12345.67 currency=USD major-units=false />`
+- ../vue2/src/components/currency/currency.vue-                2.0.0
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/sidepanel/sidepanel.vue-            BentoSidepanel isDismissible property’s behavior
+- ../vue2/src/components/sidepanel/sidepanel.vue-            BentoSidepanel isDismissible will no longer hide the close button. Use hideCloseButton=true instead.
+- ../vue2/src/components/sidepanel/sidepanel.vue-            2.0.0
+- ../vue2/src/components/sidepanel/sidepanel.vue-        );
+- ../vue2/src/components/sidepanel/sidepanel.vue-    }
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/input-field-password/input-field-password.vue-            BentoInputFieldPassword value property
+- ../vue2/src/components/input-field-password/input-field-password.vue-            `The use of value prop in BentoInputFieldPassword is no longer supported.
+- ../vue2/src/components/input-field-password/input-field-password.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/input-field-password/input-field-password.vue-            2.0.0
+- ../vue2/src/components/input-field-password/input-field-password.vue-        );
+### Deprecation Found
+
+- deprecate(
+- The property \`label\` will always be rendered by default.`
+- ../vue2/src/components/internal/controls-group/controls-group.vue-            `After version 2.0.0, the label will be shown by default.
+- hide-label=true\`.  Up until version 2.0.0, to display the label set \`hide-label=false\`.
+- ../vue2/src/components/internal/controls-group/controls-group.vue-            \`label\` will always be rendered when \`description\` is passed alongside with \`label\``
+- ../vue2/src/components/internal/controls-group/controls-group.vue-            `2.0.0`
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/textarea/textarea.vue-                BentoTextarea value property
+- ../vue2/src/components/textarea/textarea.vue-                `The use of value prop in BentoTextarea is no longer supported.
+- ../vue2/src/components/textarea/textarea.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/textarea/textarea.vue-                2.0.0
+- ../vue2/src/components/textarea/textarea.vue-            );
+### Deprecation Found
+
+- deprecate(
+- string | Array<string> | File | Array<File>
+- ../vue2/src/components/file-uploader/file-uploader.vue-                Use FileList instead.
+- ../vue2/src/components/file-uploader/file-uploader.vue-                2.0.0
+- ../vue2/src/components/file-uploader/file-uploader.vue-            );
+- ../vue2/src/components/file-uploader/file-uploader.vue-        }
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/country/country.vue-            BentoCountry custom variant and label prop
+- ../vue2/src/components/country/country.vue-            Use any of the other BentoCountry variants instead OR BentoTypography component for custom text
+- ../vue2/src/components/country/country.vue-            2.0.0
+- ../vue2/src/components/country/country.vue-        );
+- ../vue2/src/components/country/country.vue-    }
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/modal/modal.vue-            BentoModal overflow-visible property
+- ../vue2/src/components/modal/modal.vue-            `overflow-visible property was made redundant. BentoModal can work correctly without the need to pass the propery.
+- ../vue2/src/components/modal/modal.vue-                    Remove the overflow-visible prop from BentoModal to remove this error.`
+- ../vue2/src/components/modal/modal.vue-            2.0.0
+- ../vue2/src/components/modal/modal.vue-        );
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-                BentoCheckboxGroup hasError property
+- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-                `Use the BentoCheckboxGroup errorMessage property instead to indicate that there is a modifier error.
+- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-            Having the field as undefined will hide/remove the error.
+- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-            <bento-checkbox-group errorMessage=Error message text />`
+- ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue-                2.0.0
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/radio-group/radio-group.vue-            BentoRadioGroup hasError property
+- ../vue2/src/components/radio-group/radio-group.vue-            `Use the BentoRadioGroup errorMessage property instead to indicate that there is a modifier error.
+- ../vue2/src/components/radio-group/radio-group.vue-                    Having the field as undefined will hide/remove the error.
+- ../vue2/src/components/radio-group/radio-group.vue-                    <bento-radio-group errorMessage=Error message text />`
+- ../vue2/src/components/radio-group/radio-group.vue-            2.0.0
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/date-picker/date-picker.vue-                    BentoDatePicker value property
+- ../vue2/src/components/date-picker/date-picker.vue-                    `The use of value prop in BentoDatePicker is no longer supported. Use the v-model or model-value property instead.`
+- ../vue2/src/components/date-picker/date-picker.vue-                    2.0.0
+- ../vue2/src/components/date-picker/date-picker.vue-                );
+- ../vue2/src/components/date-picker/date-picker.vue-            }
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-            BentoInputFieldPhoneNumber value property
+- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-            `The use of value prop in BentoInputFieldPhoneNumber is no longer supported.
+- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-                Use the v-model or model-value property instead.`
+- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-            2.0.0
+- ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue-        );
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-                BentoDateRangePicker hasActions property
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-                `Set the BentoDateRangePicker hasActions property true which will display the Apply and Cancel buttons.
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-                        This will be the default behavior in the v2 and hasActions will be removed.`
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-                2.0.0
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-            );
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-                BentoDateRangePicker value property
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-                The use of value prop in BentoDateRangePicker is no longer supported. Use the v-model or model-value property instead.
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-                2.0.0
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-            );
+- ../vue2/src/components/date-range-picker/date-range-picker.vue-        }
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue-                    BentoInputFilter options property
+- ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue-                    `BentoInputFilter options no longer supports dropdown, dropdownPosition or variant attributes.
+- ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue-                            Use the BentoFilterItemType.INPUT_DROPDOWN instead of BentoFilterItemType.INPUT
+- ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue-                            <bento-filter-bar
+- config=[{
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue-                BentoFilterBar filter of type BentoFilterItemType.SELECT options message property
+- ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue-                `Please remove the options.messages property from this filter, it is not required any more for persistent filters.
+- ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue-                        This will be the default behavior in the v2 and options.messages will be removed.`
+- ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue-                2.0.0
+- ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue-            );
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue-            BentoSelectCountryFilter type with `options.variant===custom`
+- ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue-            Use any of the other BentoSelectCountryFilter variants instead OR use BentoSelectFilter type for custom labels
+- ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue-            2.0.0
+- ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue-        );
+- ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue-    }
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                    Boolean filter BentoFilterItemType.BOOLEAN
+- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                    `Use the Radio group filter type BentoFilterItemType.RADIO_GROUP instead.`
+- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                    2.0.0
+- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-                );
+- ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue-            });
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/inspector/inspector.vue-            BentoInspector active-page as optional
+- active-page.
+- ../vue2/src/components/inspector/inspector.vue-            active-page prop will be required in the next version`
+- ../vue2/src/components/inspector/inspector.vue-            2.0.0
+- ../vue2/src/components/inspector/inspector.vue-        );
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-            BentoTimelineItem variant property
+- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-            `Use the BentoTimelineItem status modifier instead to modify the color of the timeline icon.
+- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-                        <bento-timeline-item status=red />`
+- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-            2.0.0
+- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-        );
+### Deprecation Found
+
+- deprecate(TITLE, MESSAGE, VERSION);
+- ../vue2/src/utils/ts/deprecate.test.ts-
+- ../vue2/src/utils/ts/deprecate.test.ts-        expect(warnSpy).toHaveBeenCalledTimes(EXPECTED_CALLS.length);
+- ../vue2/src/utils/ts/deprecate.test.ts-        expect(warnSpy.mock.calls).toEqual(EXPECTED_CALLS);
+- ../vue2/src/utils/ts/deprecate.test.ts-    });
+- ../vue2/src/utils/ts/deprecate.test.ts-
+### Deprecation Found
+
+- deprecate(TITLE, MESSAGE, VERSION);
+### Deprecation Found
+
+- deprecate(TITLE, MESSAGE, VERSION);
+### Deprecation Found
+
+- deprecate(TITLE, MESSAGE, VERSION);
+- ../vue2/src/utils/ts/deprecate.test.ts-
+- ../vue2/src/utils/ts/deprecate.test.ts-        // Only prints the message once
+- ../vue2/src/utils/ts/deprecate.test.ts-        expect(warnSpy).toHaveBeenCalledTimes(EXPECTED_CALLS.length);
+- ../vue2/src/utils/ts/deprecate.test.ts-        expect(warnSpy.mock.calls).toEqual(EXPECTED_CALLS);
+- ../vue2/src/utils/ts/deprecate.test.ts-    });
+### Deprecation Found
+
+- deprecate(TITLE, \tThis\tIs\tTabbed, VERSION);
+- ../vue2/src/utils/ts/deprecate.test.ts-
+- ../vue2/src/utils/ts/deprecate.test.ts-        // Only prints the message once
+- ../vue2/src/utils/ts/deprecate.test.ts-        expect(warnSpy).toHaveBeenCalledTimes(3);
+- ../vue2/src/utils/ts/deprecate.test.ts-        expect(warnSpy.mock.calls).toEqual([
+- ../vue2/src/utils/ts/deprecate.test.ts-            EXPECTED_CALLS[0]
+### Deprecation Found
+
+- string) {
+- ../vue2/src/utils/ts/deprecate.ts-    // If the message is already showing, dont show it again
+- ../vue2/src/utils/ts/deprecate.ts-    if (!shownMessages.has(title)) {
+- \x1b[0m ${title}`, DEPRECATION_STYLES);
+- ../vue2/src/utils/ts/deprecate.ts-        // Format multi-line descriptions with the backtick
+- ../vue2/src/utils/ts/deprecate.ts-        printDevelopmentWarning(`${deprecationMessage.replaceAll(  , ).trim()}`);
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/install.ts-                Using default setting withDesignTokensCSSInjection set to true in BentoVue plugin
+- //adyen-bento.netlify.app/?path=/docs/welcome-getting-started--docs#import-css-variables
+- ../vue2/src/install.ts-                2.0.0
+- ../vue2/src/install.ts-            );
+- ../vue2/src/install.ts-            // Make sure to put all awaited CSS imports below this point and not above!
+### Deprecation Found
+
+- deprecate(Using `BentoTheme.BENTO`, Please use `BentoTheme.BENTO_LIGHT` instead, 2.0.0);
+- ../vue2/src/install.ts-            setTheme(BentoTheme.BENTO_LIGHT);
+- ../vue2/src/install.ts-        } else {
+- ../vue2/src/install.ts-            setTheme(BentoTheme.BENTO_LIGHT);
+- ../vue2/src/install.ts-        }
+- ../vue2/src/install.ts-    }

package/dist/assets/directives/keyboard-navigation/keyboard-navigation.types.ts

@@ -0,0 +1 @@
+import { type DirectiveBinding } from 'vue'; type ListenerCleanup = () => void; interface KeyboardNavigation { keyDownListener?: ListenerCleanup; } export type Binding<V> = DirectiveBinding<V> & KeyboardNavigation; 

package/dist/assets/directives/tooltip/tooltip.types.ts

@@ -0,0 +1 @@
+import type { DirectiveBinding } from 'vue/types/options'; import { PopperContainerPositionBasic } from '../../components/popper-container/popper-container.types'; export interface BentoTooltipDirectiveBinding extends Readonly<DirectiveBinding> { readonly value: string; } export const BentoTooltipPosition = { ...PopperContainerPositionBasic }; export type BentoTooltipPosition = PopperContainerPositionBasic; export enum BentoTooltipState { HIDDEN = 'hidden', }