@adyen/bento-vue2 0.0.7 → 0.0.9

package/README.md

@@ -30,7 +30,8 @@ In order to use the compoent via the `BentoVue` plugin, the following steps must
 
 1. Load the plugin globally in **Vue**
 2. Import the `font.css` file.
-3. Use the library defined components in your application
+3. Initialize `vue-i18n`.
+4. Use the library defined components in your application
 
 #### Load plugin and register components
 
@@ -54,22 +55,47 @@ NOTE: make sure the builder your are using (e.g. `webpack` , `vite`, etc...) is
 import '@adyen/bento-vue2/fonts.css';
 ```
 
+#### Initialize `vue-i18n`
+
+Some Bento components require translations for which the `vue-i18n` package was used so it has to be initialized like
+this:
+
+```diff
+import Vue from 'vue';
++ import VueI18n from 'vue-i18n';
++
++ Vue.use(VueI18n);
++
++ const i18n = new VueI18n({
++     locale: 'en-US',
++     fallbackLocale: 'en-US',
++     fallbackRoot: false,
++ });
+
+const app = new Vue({
+    el: '#app',
+    router,
+    template: '<router-view />',
++    i18n,
+});
+```
+
 #### Use the components
 
 Inside the `.vue` components of your application, you can simply use the available components:
 
 ```javascript
 <template>
-    <b-button @click="onClickHandler">
+    <bento-button @click="onClickHandler">
         {{ buttonLabel }}
-    </b-button>
+    </bento-button>
 </template>
 
 <script>
-    import { BButton } from '@adyen/bento-vue2'
+    import { BentoButton } from '@adyen/bento-vue2'
 
     export default {
-        components: { BButton },
+        components: { BentoButton },
         data: () => ({
             buttonLabel: 'Button text'
         }),

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

@@ -1,6 +1,6 @@
-export declare enum AdlAlertSeverityOption {
+export declare enum BentoAlertSeverityOption {
     WARNING = "warning",
-    ERROR = "error",
-    INFO = "info",
+    CRITICAL = "critical",
+    HIGHLIGHT = "highlight",
     SUCCESS = "success"
 }

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

@@ -1,34 +1,47 @@
 import { PropType } from 'vue';
-import { AdlAlertSeverityOption } from '@/components/alert/alert.types';
+import { BentoAlertSeverityOption } from '@/components/alert/alert.types';
 import { BentoButtonVariant } from '@/components/button/button.types';
+import { BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';
 declare const _default: import("vue").DefineComponent<{
     severity: {
-        type: PropType<AdlAlertSeverityOption>;
-        default: AdlAlertSeverityOption;
+        type: PropType<BentoAlertSeverityOption>;
+        default: BentoAlertSeverityOption;
     };
     closeButton: {
         type: BooleanConstructor;
         default: boolean;
     };
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     alertConditionalClasses: import("vue").ComputedRef<{
-        [x: string]: AdlAlertSeverityOption;
+        [x: string]: boolean | BentoAlertSeverityOption;
+        'b-alert--inline': boolean;
     }>;
     computedRole: import("vue").ComputedRef<"alert" | "status">;
     onCloseButtonClick: () => void;
     BentoButtonVariant: typeof BentoButtonVariant;
-    AdlAlertSeverityOption: typeof AdlAlertSeverityOption;
+    BentoAlertSeverityOption: typeof BentoAlertSeverityOption;
+    BentoTypographyVariant: typeof BentoTypographyVariant;
+    BentoTypographyElement: typeof BentoTypographyElement;
 }, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, "close-alert"[], string, Readonly<import("vue").ExtractPropTypes<{
     severity: {
-        type: PropType<AdlAlertSeverityOption>;
-        default: AdlAlertSeverityOption;
+        type: PropType<BentoAlertSeverityOption>;
+        default: BentoAlertSeverityOption;
     };
     closeButton: {
         type: BooleanConstructor;
         default: boolean;
     };
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
-    severity: AdlAlertSeverityOption;
+    inline: boolean;
+    severity: BentoAlertSeverityOption;
     closeButton: boolean;
 }>;
 export default _default;

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

@@ -1,2 +1,2 @@
-export { default as AdlAlert } from './alert.vue';
+export { default as BentoAlert } from './alert.vue';
 export * from './alert.types';

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

@@ -31,6 +31,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: boolean;
     }>;
     onClickButton: () => void;
+    hasSlot: (name: string) => boolean;
 }, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, ("blur" | "click" | "focus" | "keydown.esc")[], string, Readonly<import("vue").ExtractPropTypes<{
     disabled: {
         type: BooleanConstructor;

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

@@ -23,17 +23,19 @@ declare const _default: import("vue").DefineComponent<{
         default: any;
     };
 }, {
-    computedAriaLabel: import("vue").ComputedRef<string>;
     ariaChecked: import("vue").ComputedRef<"mixed" | (boolean | "false" | "true")>;
-    isCheckboxGroup: import("vue").ComputedRef<boolean>;
-    isChecked: import("vue").ComputedRef<boolean>;
-    isIndeterminate: import("vue").ComputedRef<boolean>;
+    computedAriaLabel: import("vue").ComputedRef<string>;
     conditionalClass: import("vue").ComputedRef<{
         'b-checkbox--disabled': boolean;
     }>;
     conditionalClassOutline: import("vue").ComputedRef<{
         'b-checkbox__outline--unchecked': boolean;
     }>;
+    defaultSlot: import("vue").ComputedRef<string>;
+    descriptionSlot: import("vue").ComputedRef<string>;
+    isCheckboxGroup: import("vue").ComputedRef<boolean>;
+    isChecked: import("vue").ComputedRef<boolean>;
+    isIndeterminate: import("vue").ComputedRef<boolean>;
     BentoTypographyElement: typeof BentoTypographyElement;
     BentoTypographyVariant: typeof BentoTypographyVariant;
     onChange: (event: Event) => void;

package/dist/@types/components/checkbox/components/checkbox-group/checkbox-group.types.d.ts

@@ -0,0 +1,11 @@
+export declare enum BentoCheckboxGroupVariant {
+    HORIZONTAL = "horizontal",
+    VERTICAL = "vertical"
+}
+export interface BentoCheckboxGroupItem {
+    value: string | number;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+export type BentoCheckboxGroupItems = Array<BentoCheckboxGroupItem>;

package/dist/@types/components/checkbox/components/checkbox-group/checkbox-group.vue.d.ts

@@ -0,0 +1,58 @@
+import { PropType } from 'vue';
+import { BentoCheckboxGroupItems, BentoCheckboxGroupVariant } from './checkbox-group.types';
+declare const _default: import("vue").DefineComponent<{
+    items: {
+        type: PropType<BentoCheckboxGroupItems>;
+        required: true;
+    };
+    variant: {
+        type: PropType<BentoCheckboxGroupVariant>;
+        default: BentoCheckboxGroupVariant;
+        validator: (value: BentoCheckboxGroupVariant) => boolean;
+    };
+    formId: {
+        type: StringConstructor;
+        default: any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    conditionalClasses: import("vue").ComputedRef<{
+        'b-checkbox-group--horizontal': boolean;
+    }>;
+    modelValue: import("vue").Ref<any[]>;
+    onInput: (value: any) => void;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, "input"[], string, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: PropType<BentoCheckboxGroupItems>;
+        required: true;
+    };
+    variant: {
+        type: PropType<BentoCheckboxGroupVariant>;
+        default: BentoCheckboxGroupVariant;
+        validator: (value: BentoCheckboxGroupVariant) => boolean;
+    };
+    formId: {
+        type: StringConstructor;
+        default: any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {
+    disabled: boolean;
+    variant: BentoCheckboxGroupVariant;
+    formId: string;
+}>;
+export default _default;

package/dist/@types/components/checkbox/components/checkbox-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BentoCheckboxGroup } from './checkbox-group.vue';
+export { BentoCheckboxGroupVariant } from './checkbox-group.types';

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

@@ -1,2 +1,3 @@
 export { default as BentoCheckbox } from './checkbox.vue';
 export * from './checkbox.types';
+export * from './components/checkbox-group';

package/dist/@types/components/data-grid/components/data-grid-columns.vue.d.ts

@@ -0,0 +1,74 @@
+import { PropType } from 'vue';
+import { BentoColumn, BentoDatagridAllItemsSelectedState, BentoDatagridSortByColumn, BentoDatagridSortDirection } from '../data-grid.types';
+import { BentoTypographyElement } from '@/components/typography';
+declare const _default: import("vue").DefineComponent<{
+    columns: {
+        type: PropType<BentoColumn[]>;
+        required: true;
+    };
+    hasResizableColumns: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    allItemsSelectedState: {
+        type: PropType<BentoDatagridAllItemsSelectedState>;
+        default: any;
+    };
+    sortBy: {
+        type: PropType<BentoDatagridSortByColumn[]>;
+        default: () => any[];
+    };
+    gridColumnWidthStyle: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}, {
+    DATAGRID_SELECT_FIELD_NAME: string;
+    conditionalColumnClasses: (column: BentoColumn) => {
+        'b-data-grid-columns__column--sortable': boolean;
+        'b-data-grid-columns__column--padding-left-unset': boolean;
+        'b-data-grid-columns__column--padding-right-unset': boolean;
+        'b-data-grid-columns__column--numeric': boolean;
+    };
+    conditionalColumnSeperatorClasses: import("vue").ComputedRef<{
+        'b-data-grid-columns__column-seperator-container--is-resizeable': boolean;
+    }>;
+    allItemsSelectedCheckboxState: import("vue").Ref<{
+        allItemsSelected: boolean;
+        isIndeterminate: boolean;
+    }>;
+    onAllRowSelect: (areAllItemsSelected: boolean) => void;
+    conditionalSortDirectionClasses: (field: string, direction: BentoDatagridSortDirection) => {
+        'b-data-grid-columns__column-sort-icon--sorted': boolean;
+    };
+    sortByColumnField: (field: string) => void;
+    startResize: (hasResizableColumns: boolean, field: string, event: MouseEvent) => void;
+    BentoDatagridSortDirection: typeof BentoDatagridSortDirection;
+    BentoTypographyElement: typeof BentoTypographyElement;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, ("sort" | "column-resize" | "select-all-rows")[], string, Readonly<import("vue").ExtractPropTypes<{
+    columns: {
+        type: PropType<BentoColumn[]>;
+        required: true;
+    };
+    hasResizableColumns: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    allItemsSelectedState: {
+        type: PropType<BentoDatagridAllItemsSelectedState>;
+        default: any;
+    };
+    sortBy: {
+        type: PropType<BentoDatagridSortByColumn[]>;
+        default: () => any[];
+    };
+    gridColumnWidthStyle: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>>, {
+    hasResizableColumns: boolean;
+    allItemsSelectedState: BentoDatagridAllItemsSelectedState;
+    sortBy: BentoDatagridSortByColumn[];
+}>;
+export default _default;

package/dist/@types/components/data-grid/components/index.d.ts

@@ -0,0 +1 @@
+export { default as BentoDataGridColumns } from './data-grid-columns.vue';

package/dist/@types/components/data-grid/composables/index.d.ts

@@ -0,0 +1,4 @@
+export { default as useResizer } from './useResizer';
+export { default as useCalculateColumnWidth, DATAGRID_SELECT_FIELD_NAME, } from './useCalculateColumnWidth/useCalculateColumnWidth';
+export { useSorter } from './useSorter';
+export { useSelector } from './useSelector';

package/dist/@types/components/data-grid/composables/useCalculateColumnWidth/useCalculateColumnWidth.d.ts

@@ -1,10 +1,29 @@
-import { MaybeRef } from '../../../../types';
-import { BentoColumn } from '../../data-grid.types';
+import { BentoColumn, BentoColumnWidthOverridesLookup } from '../../data-grid.types';
 import { CalculateColumnWidthOptions } from './useCalculateColumnWidth.types';
+import { MaybeRef } from '../../../../types';
 export declare const DEFAULT_COLUMN_WIDTH = 100;
 export declare const DEFAULT_COLUMN_MIN_WIDTH = 50;
 export declare const DATAGRID_SELECT_FIELD_NAME = "b-select";
-export declare const useCalculateColumnWidth: (newColumns: MaybeRef<BentoColumn[]>, newGridWidth: MaybeRef<number>, options?: CalculateColumnWidthOptions) => {
-    caclulatedWidths: import("vue").ComputedRef<BentoColumn[]>;
+export declare const useCalculateColumnWidth: (newColumns: MaybeRef<BentoColumn[]>, bodyRef: MaybeRef<HTMLDivElement | undefined>, options?: CalculateColumnWidthOptions) => {
+    columnDefs: import("vue").ComputedRef<{
+        width: number;
+        field: string;
+        label: string;
+        minWidth?: number;
+        flex?: number;
+        sortable?: boolean;
+        numeric?: boolean;
+        padding?: {
+            left?: boolean;
+            right?: boolean;
+        };
+        overflow?: import("../../data-grid.types").BentoColumnOverflow;
+    }[]>;
+    gridColumnWidthStyle: import("vue").ComputedRef<{
+        gridTemplateColumns: string;
+        gridColumnEnd: number;
+        width: string;
+    }>;
+    onColumnWidthOverride: (newColumnWidthOverridesLookup: BentoColumnWidthOverridesLookup) => void;
 };
 export default useCalculateColumnWidth;

package/dist/@types/components/data-grid/composables/useResizer.d.ts

@@ -1,17 +1,8 @@
 import { Ref } from 'vue';
-import { BentoColumn } from '../data-grid.types';
+import { BentoColumn, BentoColumnWidthOverridesLookup } from '../data-grid.types';
 export declare const useResizer: (columns: Ref<BentoColumn[]>, emit: (event: string, ...args: unknown[]) => void) => {
-    resizeData: {
-        resizingColumnField: string;
-        offsetLeft: number;
-        stepPositionX: number;
-        resizedColumnsWidths: {
-            [k: string]: {
-                width: number;
-                minWidth: number;
-            };
-        };
-    };
+    resizeData: Ref<BentoColumnWidthOverridesLookup>;
     allColumnRefs: import("vue").ToRefs<{}>;
     startResize: (hasResizableColumns: boolean, field: BentoColumn['field'], event: MouseEvent) => void;
 };
+export default useResizer;

package/dist/@types/components/data-grid/composables/useSelector.d.ts

@@ -1,7 +1,7 @@
 import { Ref } from 'vue';
 import { BentoDatagridData, BentoDatagridDataItemId, BentoDatagridGetDataItemIdFn, BentoDatagridIsDataItemDisabledFn } from '../data-grid.types';
 export declare const useSelector: (selection: Ref<BentoDatagridDataItemId[]>, emit: (event: string, emitedSelectedItems: BentoDatagridDataItemId[]) => void, data: Ref<BentoDatagridData>, getDataItemId: BentoDatagridGetDataItemIdFn, isDataItemDisabled: BentoDatagridIsDataItemDisabledFn) => {
-    onAllRowSelect: () => void;
+    onAllRowSelect: (allItemsSelected: boolean) => void;
     onRowSelect: () => void;
     allItemsSelectedState: {
         allItemsSelected: boolean;

package/dist/@types/components/data-grid/composables/useSorter.d.ts

@@ -2,7 +2,7 @@ import { Ref } from 'vue';
 import { BentoColumn, BentoDatagridSortByColumn, BentoDatagridSortDirection } from '../data-grid.types';
 export declare const useSorter: (sortBy: Ref<BentoDatagridSortByColumn[]>, columns: Ref<BentoColumn[]>, emit: (event: string, updatedSortBy: BentoDatagridSortByColumn[]) => void) => {
     conditionalSortDirectionClasses: (field: string, direction: BentoDatagridSortDirection) => {
-        'b-data-grid__column-sort-icon--sorted': boolean;
+        'b-data-grid-columns__column-sort-icon--sorted': boolean;
     };
     sortByColumnField: (field: string) => void;
 };

package/dist/@types/components/data-grid/data-grid.types.d.ts

@@ -10,6 +10,7 @@ export interface BentoColumn {
     minWidth?: number;
     flex?: number;
     sortable?: boolean;
+    numeric?: boolean;
     padding?: {
         left?: boolean;
         right?: boolean;
@@ -36,3 +37,13 @@ export type BentoDatagridDataItemId = string | number;
 export type BentoDatagridGetDataItemIdFn = (item: BentoDatagridDataItem) => BentoDatagridDataItemId;
 export type BentoDatagridIsDataItemDisabledFn = (item: BentoDatagridDataItem) => boolean;
 export type BentoDatagridPaginationProps = InstanceType<typeof BentoPagination>['$props'];
+export interface BentoColumnWidthOverridesLookup {
+    [field: string]: {
+        width: BentoColumn['width'];
+        minWidth: BentoColumn['minWidth'];
+    };
+}
+export interface BentoDatagridAllItemsSelectedState {
+    allItemsSelected: boolean;
+    isIndeterminate: boolean;
+}

package/dist/@types/components/data-grid/data-grid.vue.d.ts

@@ -30,6 +30,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<BentoDatagridIsDataItemDisabledFn>;
         default: () => false;
     };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     outline: {
         type: BooleanConstructor;
         default: boolean;
@@ -112,13 +116,15 @@ declare const _default: import("vue").DefineComponent<{
         default: () => any[];
     };
 }, {
-    processedColumns: import("vue").ComputedRef<{
+    body: import("vue").Ref<HTMLDivElement>;
+    columnDefs: import("vue").ComputedRef<{
         width: number;
         field: string;
         label: string;
         minWidth?: number;
         flex?: number;
         sortable?: boolean;
+        numeric?: boolean;
         padding?: {
             left?: boolean;
             right?: boolean;
@@ -135,11 +141,6 @@ declare const _default: import("vue").DefineComponent<{
     conditionalGridClasses: import("vue").ComputedRef<{
         [x: string]: boolean;
     }>;
-    conditionalColumnClasses: (column: BentoColumn) => {
-        'b-data-grid__column--sortable': boolean;
-        'b-data-grid__column--padding-left-unset': boolean;
-        'b-data-grid__column--padding-right-unset': boolean;
-    };
     conditionalRowClasses: (row: BentoDatagridDataItem) => {
         'b-data-grid__row--disabled': boolean;
     };
@@ -147,45 +148,32 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: boolean;
         'b-data-grid__cell--padding-left-unset': boolean;
         'b-data-grid__cell--padding-right-unset': boolean;
+        'b-data-grid__cell--numeric': boolean;
         'b-data-grid__cell--condensed': boolean;
     };
-    conditionalColumnSeperatorClasses: import("vue").ComputedRef<{
-        'b-data-grid__column-seperator-container--is-resizeable': boolean;
-    }>;
     conditionalPaginationClasses: import("vue").ComputedRef<{
         'b-data-grid__pagination--padding-left-unset': boolean;
         'b-data-grid__pagination--padding-right-unset': boolean;
     }>;
-    resizeData: {
-        resizingColumnField: string;
-        offsetLeft: number;
-        stepPositionX: number;
-        resizedColumnsWidths: {
-            [k: string]: {
-                width: number;
-                minWidth: number;
-            };
-        };
-    };
-    startResize: (hasResizableColumns: boolean, field: string, event: MouseEvent) => void;
-    conditionalSortDirectionClasses: (field: string, direction: BentoDatagridSortDirection) => {
-        'b-data-grid__column-sort-icon--sorted': boolean;
-    };
-    sortByColumnField: (field: string) => void;
+    onColumnWidthOverride: (newColumnWidthOverridesLookup: import("./data-grid.types").BentoColumnWidthOverridesLookup) => void;
+    onColumnResized: (resizeEvent: {
+        field: string;
+        width: number;
+    }) => void;
+    onSort: (updatedSortBy: BentoDatagridSortByColumn[]) => void;
     allItemsSelectedState: {
         allItemsSelected: boolean;
         isIndeterminate: boolean;
     };
     selectedItems: import("vue").Ref<BentoDatagridDataItemId[]>;
-    onAllRowSelect: () => void;
+    onAllRowSelect: (allItemsSelected: boolean) => void;
     onRowSelect: () => void;
     DATAGRID_SELECT_FIELD_NAME: string;
     BentoDatagridSortDirection: typeof BentoDatagridSortDirection;
     BentoTypographyElement: typeof BentoTypographyElement;
     BentoTypographyVariant: typeof BentoTypographyVariant;
-    paginationNavigate: (page: number) => void;
+    onPaginationNavigate: (page: number) => void;
     onItemsPerPageChange: (itemsPerPage: number) => void;
-    body: any;
 }, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, ("sort" | "navigate" | "select" | "items-page" | "column-resize" | "update:filters")[], string, Readonly<import("vue").ExtractPropTypes<{
     condensed: {
         type: BooleanConstructor;
@@ -215,6 +203,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<BentoDatagridIsDataItemDisabledFn>;
         default: () => false;
     };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     outline: {
         type: BooleanConstructor;
         default: boolean;
@@ -298,14 +290,15 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     outline: boolean;
+    loading: boolean;
     condensed: boolean;
     filters: import("../filter-bar").BentoFilterBarModel;
-    getDataItemId: BentoDatagridGetDataItemIdFn;
     hasResizableColumns: boolean;
+    sortBy: BentoDatagridSortByColumn[];
+    getDataItemId: BentoDatagridGetDataItemIdFn;
     isDataItemDisabled: BentoDatagridIsDataItemDisabledFn;
     pagination: any;
     selectable: boolean;
     selection: BentoDatagridDataItemId[];
-    sortBy: BentoDatagridSortByColumn[];
 }>;
 export default _default;

package/dist/@types/components/{radio-button → radio-group/components/radio-button}/radio-button.vue.d.ts

@@ -16,12 +16,13 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     ariaLabel: ComputedRef<string>;
     isChecked: ComputedRef<boolean>;
-    shouldShowDescription: ComputedRef<boolean>;
-    shouldShowLabel: ComputedRef<boolean>;
-    shouldShowSubLabel: ComputedRef<boolean>;
+    shouldShowDescription: ComputedRef<string>;
+    shouldShowLabel: ComputedRef<string>;
+    shouldShowSubLabel: ComputedRef<string>;
     conditionalClass: ComputedRef<{
-        'b-input-radio--disabled': boolean;
+        'b-radio-button--disabled': boolean;
     }>;
+    radioButtonId: string;
     onClick: () => void;
     BentoTypographyVariant: typeof BentoTypographyVariant;
     BentoTypographyElement: typeof BentoTypographyElement;

package/dist/@types/components/radio-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BentoRadioGroup } from './radio-group.vue';
+export { BentoRadioGroupVariant } from './radio-group.types';

package/dist/@types/components/radio-group/radio-group.types.d.ts

@@ -0,0 +1,11 @@
+export declare enum BentoRadioGroupVariant {
+    HORIZONTAL = "horizontal",
+    VERTICAL = "vertical"
+}
+export interface BentoRadioGroupItem {
+    value: string | number;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+export type BentoRadioGroupItems = Array<BentoRadioGroupItem>;

package/dist/@types/components/radio-group/radio-group.vue.d.ts

@@ -0,0 +1,58 @@
+import { PropType } from 'vue';
+import { BentoRadioGroupItems, BentoRadioGroupVariant } from './radio-group.types';
+declare const _default: import("vue").DefineComponent<{
+    items: {
+        type: PropType<BentoRadioGroupItems>;
+        required: true;
+    };
+    variant: {
+        type: PropType<BentoRadioGroupVariant>;
+        default: BentoRadioGroupVariant;
+        validator: (value: BentoRadioGroupVariant) => boolean;
+    };
+    formId: {
+        type: StringConstructor;
+        default: any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    conditionalClasses: import("vue").ComputedRef<{
+        'b-radio-group--horizontal': boolean;
+    }>;
+    inputValue: import("vue").Ref<string | number>;
+    onInput: (value: any) => void;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, "input"[], string, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: PropType<BentoRadioGroupItems>;
+        required: true;
+    };
+    variant: {
+        type: PropType<BentoRadioGroupVariant>;
+        default: BentoRadioGroupVariant;
+        validator: (value: BentoRadioGroupVariant) => boolean;
+    };
+    formId: {
+        type: StringConstructor;
+        default: any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {
+    disabled: boolean;
+    variant: BentoRadioGroupVariant;
+    formId: string;
+}>;
+export default _default;