@adyen/bento-vue2 0.7.1 → 0.8.1

package/dist/@types/components/date-picker/components/date-picker-calendar-range/date-picker-calendar-range.vue.d.ts

@@ -0,0 +1,58 @@
+import { PropType } from 'vue';
+import { BentoTypographyElement } from '@/components/typography';
+import { DatePickerCalendarPaneValue } from '../date-picker-calendar-pane/date-picker-calendar-pane.types';
+declare const _default: import("vue").DefineComponent<{
+    firstDayOfWeek: {
+        type: PropType<import("../date-picker-calendar").DatePickerCalendarFirstDayOfWeek>;
+        default: import("../date-picker-calendar").DatePickerCalendarFirstDayOfWeek;
+        validator: (value: import("../date-picker-calendar").DatePickerCalendarFirstDayOfWeek) => boolean;
+    };
+    isDateDisabled: {
+        type: PropType<import("../date-picker-calendar").DatePickerCalendarIsDateDisabled>;
+        default: any;
+    };
+    numberOfMonths: {
+        type: NumberConstructor;
+        default: number;
+        validator: (n: number) => boolean;
+    };
+    value: {
+        type: PropType<DatePickerCalendarPaneValue>;
+        default: any;
+    };
+}, {
+    startDateString: import("vue").ComputedRef<string>;
+    endDateString: import("vue").ComputedRef<string>;
+    BentoTypographyElement: typeof BentoTypographyElement;
+    hasSlot: (name: string) => boolean;
+    onDateInput: (selectedDate: Date) => void;
+    onStartDateSelected: (newStartDate: Date) => void;
+    onEndDateSelected: (newEndDate: Date) => void;
+    onStartDateInput: (startDateText: string) => void;
+    onEndDateInput: (endDateText: string) => void;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, "input"[], string, Readonly<import("vue").ExtractPropTypes<{
+    firstDayOfWeek: {
+        type: PropType<import("../date-picker-calendar").DatePickerCalendarFirstDayOfWeek>;
+        default: import("../date-picker-calendar").DatePickerCalendarFirstDayOfWeek;
+        validator: (value: import("../date-picker-calendar").DatePickerCalendarFirstDayOfWeek) => boolean;
+    };
+    isDateDisabled: {
+        type: PropType<import("../date-picker-calendar").DatePickerCalendarIsDateDisabled>;
+        default: any;
+    };
+    numberOfMonths: {
+        type: NumberConstructor;
+        default: number;
+        validator: (n: number) => boolean;
+    };
+    value: {
+        type: PropType<DatePickerCalendarPaneValue>;
+        default: any;
+    };
+}>>, {
+    value: DatePickerCalendarPaneValue;
+    firstDayOfWeek: import("../date-picker-calendar").DatePickerCalendarFirstDayOfWeek;
+    isDateDisabled: import("../date-picker-calendar").DatePickerCalendarIsDateDisabled;
+    numberOfMonths: number;
+}>;
+export default _default;

package/dist/@types/components/date-picker/components/date-picker-calendar-range/index.d.ts

@@ -0,0 +1 @@
+export { default as DatePickerCalendarRange } from './date-picker-calendar-range.vue';

package/dist/@types/components/date-picker/composables/use-date-picker-range-calendar-text.d.ts

@@ -0,0 +1,2 @@
+import { BentoDatePickerRangeDate, UseDateDisplayText } from '../date-picker.types';
+export declare const useDatePickerRangeCalendarText: UseDateDisplayText<BentoDatePickerRangeDate>;

package/dist/@types/components/date-picker/composables/use-date-picker-single-calendar-text.d.ts

@@ -0,0 +1,2 @@
+import { UseDateDisplayText } from '../date-picker.types';
+export declare const useDatePickerSingleCalendarText: UseDateDisplayText<Date>;

package/dist/@types/components/date-picker/date-picker.types.d.ts

@@ -1,7 +1,22 @@
+import { ComputedRef, Ref } from 'vue';
 export { DatePickerCalendarFirstDayOfWeek as BentoDatePickerFirstDayOfWeek } from './components/date-picker-calendar';
+export type { DatePickerCalendarIsDateDisabled as BentoDatePickerIsDateDisabled } from './components/date-picker-calendar';
+export type { DatePickerCalendarPaneValue as BentoDatePickerValue, DatePickerCalendarPaneRangeDate as BentoDatePickerRangeDate, } from './components/date-picker-calendar-pane/date-picker-calendar-pane.types';
+export interface UseDateDisplayTextProps<T> {
+    datePickerValue: Ref<T>;
+    isDateIncorrect: Ref<boolean>;
+    textInputDisplayValue: Ref<string>;
+}
+export type UseDateDisplayText<T> = (props: UseDateDisplayTextProps<T>) => {
+    dateDisplayValue: ComputedRef<string>;
+};
 export declare enum BentoDatePickerEvent {
     INPUT = "input"
 }
+export declare enum BentoDatePickerVariant {
+    SINGLE_CALENDAR = "single-calendar",
+    RANGE_CALENDAR = "range-calendar"
+}
 export declare enum BentoDatePickerDateFormat {
     DAY_OF_MONTH = "d",
     NUMERIC_DAY = "dd",

package/dist/@types/components/date-picker/date-picker.vue.d.ts

@@ -1,5 +1,5 @@
-import { PropType } from 'vue';
-import { BentoDatePickerEvent, BentoDatePickerFirstDayOfWeek } from './date-picker.types';
+import { PropType, Ref } from 'vue';
+import { BentoDatePickerEvent, BentoDatePickerFirstDayOfWeek, BentoDatePickerIsDateDisabled, BentoDatePickerRangeDate, BentoDatePickerValue, BentoDatePickerVariant } from './date-picker.types';
 import { BentoTypographyElement, BentoTypographyVariant } from '../typography';
 declare const _default: import("vue").DefineComponent<{
     description: {
@@ -16,7 +16,7 @@ declare const _default: import("vue").DefineComponent<{
         validator: (value: BentoDatePickerFirstDayOfWeek) => boolean;
     };
     isDateDisabled: {
-        type: FunctionConstructor;
+        type: PropType<BentoDatePickerIsDateDisabled>;
         default: any;
     };
     label: {
@@ -31,31 +31,60 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    numberOfMonths: {
+        type: NumberConstructor;
+        default: number;
+        validator: (n: number) => boolean;
+    };
     value: {
-        type: DateConstructor;
+        type: PropType<BentoDatePickerValue>;
         default: any;
     };
+    variant: {
+        type: PropType<BentoDatePickerVariant>;
+        default: BentoDatePickerVariant;
+        validator: (value: BentoDatePickerVariant) => boolean;
+    };
 }, {
     inputContainerRef: any;
-    dateDisplayValue: import("vue").ComputedRef<any>;
-    isDateIncorrect: import("vue").Ref<boolean>;
-    isDatePickerOpen: import("vue").Ref<boolean>;
+    dateDisplayValue: import("vue").ComputedRef<string>;
     datePickerContainerId: string;
-    labelId: string;
-    supportDescriptionText: import("vue").ComputedRef<import("vue-i18n").default.TranslateResult>;
     descriptionConditionalClasses: import("vue").ComputedRef<{
         'b-date-picker__description--error': boolean;
     }>;
+    isDateIncorrect: Ref<boolean>;
+    isDatePickerOpen: Ref<boolean>;
+    labelId: string;
+    popoverAriaLabel: import("vue").ComputedRef<import("vue-i18n").default.TranslateResult>;
+    supportDescriptionText: import("vue").ComputedRef<import("vue-i18n").default.TranslateResult>;
     textInputDisplayValue: any;
-    visibleMonth: import("vue").ComputedRef<Date>;
     BentoTypographyElement: typeof BentoTypographyElement;
     BentoTypographyVariant: typeof BentoTypographyVariant;
+    BentoPopoverPositions: {
+        AUTO: import("../popper-container").PopperContainerPositionExtended.AUTO;
+        AUTO_START: import("../popper-container").PopperContainerPositionExtended.AUTO_START;
+        AUTO_END: import("../popper-container").PopperContainerPositionExtended.AUTO_END;
+        TOP_START: import("../popper-container").PopperContainerPositionExtended.TOP_START;
+        TOP_END: import("../popper-container").PopperContainerPositionExtended.TOP_END;
+        RIGHT_START: import("../popper-container").PopperContainerPositionExtended.RIGHT_START;
+        RIGHT_END: import("../popper-container").PopperContainerPositionExtended.RIGHT_END;
+        BOTTOM_START: import("../popper-container").PopperContainerPositionExtended.BOTTOM_START;
+        BOTTOM_END: import("../popper-container").PopperContainerPositionExtended.BOTTOM_END;
+        LEFT_START: import("../popper-container").PopperContainerPositionExtended.LEFT_START;
+        LEFT_END: import("../popper-container").PopperContainerPositionExtended.LEFT_END;
+        TOP: import("../popper-container").PopperContainerPositionBasic.TOP;
+        RIGHT: import("../popper-container").PopperContainerPositionBasic.RIGHT;
+        BOTTOM: import("../popper-container").PopperContainerPositionBasic.BOTTOM;
+        LEFT: import("../popper-container").PopperContainerPositionBasic.LEFT;
+    };
+    BentoDatePickerVariant: typeof BentoDatePickerVariant;
     closeDatePicker: () => void;
     clearDatePickerValue: () => Promise<void>;
     onDateSelected: (selectedDate: Date) => void;
     openDatePicker: () => void;
     onDateInputChange: (stringDate: any) => void;
     onEnterPressedOverInput: () => void;
+    onDatePickerRangeInput: (selectedRange: BentoDatePickerRangeDate) => void;
 }, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, BentoDatePickerEvent[], string, Readonly<import("vue").ExtractPropTypes<{
     description: {
         type: StringConstructor;
@@ -71,7 +100,7 @@ declare const _default: import("vue").DefineComponent<{
         validator: (value: BentoDatePickerFirstDayOfWeek) => boolean;
     };
     isDateDisabled: {
-        type: FunctionConstructor;
+        type: PropType<BentoDatePickerIsDateDisabled>;
         default: any;
     };
     label: {
@@ -86,18 +115,30 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    numberOfMonths: {
+        type: NumberConstructor;
+        default: number;
+        validator: (n: number) => boolean;
+    };
     value: {
-        type: DateConstructor;
+        type: PropType<BentoDatePickerValue>;
         default: any;
     };
+    variant: {
+        type: PropType<BentoDatePickerVariant>;
+        default: BentoDatePickerVariant;
+        validator: (value: BentoDatePickerVariant) => boolean;
+    };
 }>>, {
     required: boolean;
     optional: boolean;
-    value: Date;
+    value: BentoDatePickerValue;
     label: string;
     disabled: boolean;
     description: string;
+    variant: BentoDatePickerVariant;
     firstDayOfWeek: BentoDatePickerFirstDayOfWeek;
-    isDateDisabled: Function;
+    isDateDisabled: BentoDatePickerIsDateDisabled;
+    numberOfMonths: number;
 }>;
 export default _default;

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

@@ -0,0 +1,6 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    ariaAttributes: import("vue").ComputedRef<{
+        'aria-label': string;
+    }>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

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

@@ -0,0 +1 @@
+export { default as BentoDivider } from './divider.vue';

package/dist/@types/components/filter-bar/components/base-filter/base-filter.vue.d.ts

@@ -9,6 +9,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    controlled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disableApplyButton: {
         type: BooleanConstructor;
         default: boolean;
@@ -25,6 +29,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
+    fitContent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     value: {
         type: PropType<string | string[]>;
         default: any;
@@ -82,6 +90,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    controlled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disableApplyButton: {
         type: BooleanConstructor;
         default: boolean;
@@ -98,6 +110,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
+    fitContent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     value: {
         type: PropType<string | string[]>;
         default: any;
@@ -105,7 +121,9 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     value: string | string[];
     buttonHasChevron: boolean;
+    fitContent: boolean;
     appliedFiltersCount: number;
+    controlled: boolean;
     disableApplyButton: boolean;
     disableClearButton: boolean;
 }>;

package/dist/@types/components/filter-bar/components/date-filter/date-filter.types.d.ts

@@ -0,0 +1,3 @@
+export declare enum BentoDateFilterEvent {
+    UPDATE = "update"
+}

package/dist/@types/components/filter-bar/components/date-filter/date-filter.vue.d.ts

@@ -0,0 +1,114 @@
+import { PropType } from 'vue';
+import { BentoDateFilterOptions } from '../../filter-bar.types';
+import { BentoDateFilterEvent } from './date-filter.types';
+declare const _default: import("vue").DefineComponent<{
+    field: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    options: {
+        type: PropType<BentoDateFilterOptions>;
+        default: any;
+    };
+    value: {
+        type: PropType<Date>;
+        default: any;
+    };
+}, {
+    appliedFiltersCount: import("vue").ComputedRef<number>;
+    internalFilterValue: import("vue").Ref<{
+        toString: () => string;
+        toDateString: () => string;
+        toTimeString: () => string;
+        toLocaleString: {
+            (): string;
+            (locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions): string;
+        };
+        toLocaleDateString: {
+            (): string;
+            (locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions): string;
+        };
+        toLocaleTimeString: {
+            (): string;
+            (locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions): string;
+        };
+        valueOf: () => number;
+        getTime: () => number;
+        getFullYear: () => number;
+        getUTCFullYear: () => number;
+        getMonth: () => number;
+        getUTCMonth: () => number;
+        getDate: () => number;
+        getUTCDate: () => number;
+        getDay: () => number;
+        getUTCDay: () => number;
+        getHours: () => number;
+        getUTCHours: () => number;
+        getMinutes: () => number;
+        getUTCMinutes: () => number;
+        getSeconds: () => number;
+        getUTCSeconds: () => number;
+        getMilliseconds: () => number;
+        getUTCMilliseconds: () => number;
+        getTimezoneOffset: () => number;
+        setTime: (time: number) => number;
+        setMilliseconds: (ms: number) => number;
+        setUTCMilliseconds: (ms: number) => number;
+        setSeconds: (sec: number, ms?: number) => number;
+        setUTCSeconds: (sec: number, ms?: number) => number;
+        setMinutes: (min: number, sec?: number, ms?: number) => number;
+        setUTCMinutes: (min: number, sec?: number, ms?: number) => number;
+        setHours: (hours: number, min?: number, sec?: number, ms?: number) => number;
+        setUTCHours: (hours: number, min?: number, sec?: number, ms?: number) => number;
+        setDate: (date: number) => number;
+        setUTCDate: (date: number) => number;
+        setMonth: (month: number, date?: number) => number;
+        setUTCMonth: (month: number, date?: number) => number;
+        setFullYear: (year: number, month?: number, date?: number) => number;
+        setUTCFullYear: (year: number, month?: number, date?: number) => number;
+        toUTCString: () => string;
+        toISOString: () => string;
+        toJSON: (key?: any) => string;
+        getVarDate: () => VarDate;
+        [Symbol.toPrimitive]: {
+            (hint: "default"): string;
+            (hint: "string"): string;
+            (hint: "number"): number;
+            (hint: string): string | number;
+        };
+    }>;
+    isApplyButtonDisabled: import("vue").ComputedRef<boolean>;
+    isClearButtonDisabled: import("vue").ComputedRef<boolean>;
+    clearFilter: () => void;
+    onDateSelected: (selectedDate: Date) => void;
+    openFilter: () => void;
+    updateFilter: () => void;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, BentoDateFilterEvent[], string, Readonly<import("vue").ExtractPropTypes<{
+    field: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    options: {
+        type: PropType<BentoDateFilterOptions>;
+        default: any;
+    };
+    value: {
+        type: PropType<Date>;
+        default: any;
+    };
+}>>, {
+    value: Date;
+    options: any;
+}>;
+export default _default;

package/dist/@types/components/filter-bar/components/date-filter/index.d.ts

@@ -0,0 +1 @@
+export { default as BentoDateFilter } from './date-filter.vue';

package/dist/@types/components/filter-bar/components/date-range-filter/date-range-filter.types.d.ts

@@ -0,0 +1,3 @@
+export declare enum BentoDateRangeFilterEvent {
+    UPDATE = "update"
+}

package/dist/@types/components/filter-bar/components/date-range-filter/date-range-filter.vue.d.ts

@@ -0,0 +1,200 @@
+import { PropType } from 'vue';
+import { BentoDateRangeFilterOptions } from '../../filter-bar.types';
+import { BentoDatePickerRangeDate } from '@/components/date-picker';
+import { BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';
+import { BentoButtonActionsList } from '@/components/button/components/button-actions';
+import { BentoDateRangeFilterEvent } from './date-range-filter.types';
+declare const _default: import("vue").DefineComponent<{
+    field: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    options: {
+        type: PropType<BentoDateRangeFilterOptions>;
+        default: any;
+    };
+    value: {
+        type: PropType<BentoDatePickerRangeDate>;
+        default: () => {
+            startDate: any;
+            endDate: any;
+        };
+    };
+}, {
+    baseFilter: any;
+    actions: import("vue").ComputedRef<BentoButtonActionsList>;
+    appliedFiltersCount: import("vue").ComputedRef<number>;
+    internalFilterValue: import("vue").Ref<{
+        startDate: {
+            toString: () => string;
+            toDateString: () => string;
+            toTimeString: () => string;
+            toLocaleString: {
+                (): string;
+                (locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions): string;
+            };
+            toLocaleDateString: {
+                (): string;
+                (locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions): string;
+            };
+            toLocaleTimeString: {
+                (): string;
+                (locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions): string;
+            };
+            valueOf: () => number;
+            getTime: () => number;
+            getFullYear: () => number;
+            getUTCFullYear: () => number;
+            getMonth: () => number;
+            getUTCMonth: () => number;
+            getDate: () => number;
+            getUTCDate: () => number;
+            getDay: () => number;
+            getUTCDay: () => number;
+            getHours: () => number;
+            getUTCHours: () => number;
+            getMinutes: () => number;
+            getUTCMinutes: () => number;
+            getSeconds: () => number;
+            getUTCSeconds: () => number;
+            getMilliseconds: () => number;
+            getUTCMilliseconds: () => number;
+            getTimezoneOffset: () => number;
+            setTime: (time: number) => number;
+            setMilliseconds: (ms: number) => number;
+            setUTCMilliseconds: (ms: number) => number;
+            setSeconds: (sec: number, ms?: number) => number;
+            setUTCSeconds: (sec: number, ms?: number) => number;
+            setMinutes: (min: number, sec?: number, ms?: number) => number;
+            setUTCMinutes: (min: number, sec?: number, ms?: number) => number;
+            setHours: (hours: number, min?: number, sec?: number, ms?: number) => number;
+            setUTCHours: (hours: number, min?: number, sec?: number, ms?: number) => number;
+            setDate: (date: number) => number;
+            setUTCDate: (date: number) => number;
+            setMonth: (month: number, date?: number) => number;
+            setUTCMonth: (month: number, date?: number) => number;
+            setFullYear: (year: number, month?: number, date?: number) => number;
+            setUTCFullYear: (year: number, month?: number, date?: number) => number;
+            toUTCString: () => string;
+            toISOString: () => string;
+            toJSON: (key?: any) => string;
+            getVarDate: () => VarDate;
+            [Symbol.toPrimitive]: {
+                (hint: "default"): string;
+                (hint: "string"): string;
+                (hint: "number"): number;
+                (hint: string): string | number;
+            };
+        };
+        endDate: {
+            toString: () => string;
+            toDateString: () => string;
+            toTimeString: () => string;
+            toLocaleString: {
+                (): string;
+                (locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions): string;
+            };
+            toLocaleDateString: {
+                (): string;
+                (locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions): string;
+            };
+            toLocaleTimeString: {
+                (): string;
+                (locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;
+                (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions): string;
+            };
+            valueOf: () => number;
+            getTime: () => number;
+            getFullYear: () => number;
+            getUTCFullYear: () => number;
+            getMonth: () => number;
+            getUTCMonth: () => number;
+            getDate: () => number;
+            getUTCDate: () => number;
+            getDay: () => number;
+            getUTCDay: () => number;
+            getHours: () => number;
+            getUTCHours: () => number;
+            getMinutes: () => number;
+            getUTCMinutes: () => number;
+            getSeconds: () => number;
+            getUTCSeconds: () => number;
+            getMilliseconds: () => number;
+            getUTCMilliseconds: () => number;
+            getTimezoneOffset: () => number;
+            setTime: (time: number) => number;
+            setMilliseconds: (ms: number) => number;
+            setUTCMilliseconds: (ms: number) => number;
+            setSeconds: (sec: number, ms?: number) => number;
+            setUTCSeconds: (sec: number, ms?: number) => number;
+            setMinutes: (min: number, sec?: number, ms?: number) => number;
+            setUTCMinutes: (min: number, sec?: number, ms?: number) => number;
+            setHours: (hours: number, min?: number, sec?: number, ms?: number) => number;
+            setUTCHours: (hours: number, min?: number, sec?: number, ms?: number) => number;
+            setDate: (date: number) => number;
+            setUTCDate: (date: number) => number;
+            setMonth: (month: number, date?: number) => number;
+            setUTCMonth: (month: number, date?: number) => number;
+            setFullYear: (year: number, month?: number, date?: number) => number;
+            setUTCFullYear: (year: number, month?: number, date?: number) => number;
+            toUTCString: () => string;
+            toISOString: () => string;
+            toJSON: (key?: any) => string;
+            getVarDate: () => VarDate;
+            [Symbol.toPrimitive]: {
+                (hint: "default"): string;
+                (hint: "string"): string;
+                (hint: "number"): number;
+                (hint: string): string | number;
+            };
+        };
+    }>;
+    isApplyButtonDisabled: import("vue").ComputedRef<boolean>;
+    isClearButtonDisabled: import("vue").ComputedRef<boolean>;
+    BentoButtonActionsLayout: {
+        BUTTONS_START: import("@/components/button/components/button-actions").BentoButtonActionsLayoutExtended.BUTTONS_START;
+        BUTTONS_END: import("@/components/button/components/button-actions").BentoButtonActionsLayoutBasic.BUTTONS_END;
+        FILL_CONTAINER: import("@/components/button/components/button-actions").BentoButtonActionsLayoutBasic.FILL_CONTAINER;
+        SPACE_BETWEEN: import("@/components/button/components/button-actions").BentoButtonActionsLayoutBasic.SPACE_BETWEEN;
+        VERTICAL_STACK: import("@/components/button/components/button-actions").BentoButtonActionsLayoutBasic.VERTICAL_STACK;
+    };
+    BentoTypographyElement: typeof BentoTypographyElement;
+    BentoTypographyVariant: typeof BentoTypographyVariant;
+    clearFilter: () => void;
+    onDateSelected: (selectedDate: BentoDatePickerRangeDate) => void;
+    openFilter: () => void;
+    updateFilter: () => void;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, BentoDateRangeFilterEvent[], string, Readonly<import("vue").ExtractPropTypes<{
+    field: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    options: {
+        type: PropType<BentoDateRangeFilterOptions>;
+        default: any;
+    };
+    value: {
+        type: PropType<BentoDatePickerRangeDate>;
+        default: () => {
+            startDate: any;
+            endDate: any;
+        };
+    };
+}>>, {
+    value: BentoDatePickerRangeDate;
+    options: any;
+}>;
+export default _default;

package/dist/@types/components/filter-bar/components/date-range-filter/index.d.ts

@@ -0,0 +1 @@
+export { default as BentoDateRangeFilter } from './date-range-filter.vue';

package/dist/@types/components/filter-bar/filter-bar.types.d.ts

@@ -5,6 +5,7 @@ import { BentoTagListboxOptions } from '@/components/dropdown/components/variant
 import { BentoCountryVariant } from '@/components/country';
 import { BentoCurrencyListboxOptions } from '@/components/dropdown/components/variants/dropdown-currency/dropdown-currency.types';
 import { BentoPaymentMethodListboxOptions } from '@/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.types';
+import { BentoDatePickerFirstDayOfWeek, BentoDatePickerIsDateDisabled, BentoDatePickerRangeDate } from '../date-picker/date-picker.types';
 export interface BentoSelectFilterOptions {
     buttonHasChevron?: boolean;
     listboxItems: BentoListboxOptions;
@@ -27,11 +28,22 @@ export type BentoSelectTagFilterOptions = OmitStrict<BentoSelectFilterOptions, '
 export type BentoSelectPaymentMethodFilterOptions = OmitStrict<BentoSelectFilterOptions, 'listboxItems'> & {
     listboxItems: BentoPaymentMethodListboxOptions;
 };
+export interface BentoDateFilterOptions {
+    firstDayOfWeek?: BentoDatePickerFirstDayOfWeek;
+    isDateDisabled?: BentoDatePickerIsDateDisabled;
+}
+export interface BentoDateRangeFilterOptions {
+    numberOfMonths?: number;
+    firstDayOfWeek?: BentoDatePickerFirstDayOfWeek;
+    isDateDisabled?: BentoDatePickerIsDateDisabled;
+}
 export type BentoInputFilterValue = string | null;
 export type BentoSelectFilterValue = BentoListboxSelectedValue;
 export type BentoBooleanFilterValue = string | null;
-export type BentoFilterBarValue = BentoInputFilterValue | BentoSelectFilterValue | BentoBooleanFilterValue;
-export type BentoFilterOptions = BentoSelectFilterOptions | BentoSelectAvatarFilterOptions | BentoSelectCountryFilterOptions | BentoSelectCurrencyFilterOptions | BentoSelectPaymentMethodFilterOptions | BentoSelectTagFilterOptions | undefined;
+export type BentoDateFilterValue = Date | null;
+export type BentoDateRangeFilterValue = BentoDatePickerRangeDate | null;
+export type BentoFilterBarValue = BentoInputFilterValue | BentoSelectFilterValue | BentoBooleanFilterValue | BentoDateFilterValue | BentoDateRangeFilterValue;
+export type BentoFilterOptions = BentoSelectFilterOptions | BentoSelectAvatarFilterOptions | BentoSelectCountryFilterOptions | BentoSelectCurrencyFilterOptions | BentoSelectPaymentMethodFilterOptions | BentoSelectTagFilterOptions | BentoDateFilterOptions | BentoDateRangeFilterOptions | undefined;
 export declare enum BentoFilterItemType {
     INPUT = "BentoInputFilter",
     BOOLEAN = "BentoBooleanFilter",
@@ -41,7 +53,9 @@ export declare enum BentoFilterItemType {
     SELECT_COUNTRY = "BentoSelectCountryFilter",
     SELECT_CURRENCY = "BentoSelectCurrencyFilter",
     SELECT_PAYMENT_METHOD = "BentoSelectPaymentMethodFilter",
-    SELECT_TAG = "BentoSelectTagFilter"
+    SELECT_TAG = "BentoSelectTagFilter",
+    DATE = "BentoDateFilter",
+    DATE_RANGE = "BentoDateRangeFilter"
 }
 export interface BentoFilterModel {
     field: string;