bits-ui 2.4.1 → 2.5.0

package/dist/bits/calendar/types.d.ts

@@ -1,6 +1,6 @@
 import type { DateValue } from "@internationalized/date";
 import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
-import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes, BitsPrimitiveHeaderAttributes, BitsPrimitiveTableAttributes, BitsPrimitiveTbodyAttributes, BitsPrimitiveTdAttributes, BitsPrimitiveThAttributes, BitsPrimitiveTheadAttributes, BitsPrimitiveTrAttributes } from "../../shared/attributes.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes, BitsPrimitiveHeaderAttributes, BitsPrimitiveSelectAttributes, BitsPrimitiveTableAttributes, BitsPrimitiveTbodyAttributes, BitsPrimitiveTdAttributes, BitsPrimitiveThAttributes, BitsPrimitiveTheadAttributes, BitsPrimitiveTrAttributes } from "../../shared/attributes.js";
 import type { DateMatcher, Month, WeekStartsOn } from "../../shared/date/types.js";
 export type CalendarRootSnippetProps = {
     months: Month<DateValue>[];
@@ -11,7 +11,7 @@ type CalendarBaseRootPropsWithoutHTML = {
      * The placeholder date, used to control the view of the
      * calendar when no value is present.
      *
-     * @defaultValue the current date
+     * @default the current date
      */
     placeholder?: DateValue;
     /**
@@ -23,7 +23,7 @@ type CalendarBaseRootPropsWithoutHTML = {
      * Whether or not users can deselect a date once selected
      * without selecting another date.
      *
-     * @defaultValue false
+     * @default false
      */
     preventDeselect?: boolean;
     /**
@@ -37,7 +37,7 @@ type CalendarBaseRootPropsWithoutHTML = {
     /**
      * Whether or not the calendar is disabled.
      *
-     * @defaultValue false
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -51,7 +51,7 @@ type CalendarBaseRootPropsWithoutHTML = {
      * February), clicking the next button changes the view to March and April. If `pagedNavigation`
      * is `false`, the view shifts to February and March.
      *
-     * @defaultValue false
+     * @default false
      */
     pagedNavigation?: boolean;
     /**
@@ -59,7 +59,7 @@ type CalendarBaseRootPropsWithoutHTML = {
      * be a number between 0 and 6, where 0 is Sunday and 6 is
      * Saturday.
      *
-     * @defaultValue 0 (Sunday)
+     * @default 0 (Sunday)
      */
     weekStartsOn?: WeekStartsOn;
     /**
@@ -72,7 +72,7 @@ type CalendarBaseRootPropsWithoutHTML = {
      * - "narrow": "S", "M", "T", etc.
      *```
      *
-     * @defaultValue "narrow"
+     * @default "narrow"
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#weekday
      */
@@ -110,14 +110,14 @@ type CalendarBaseRootPropsWithoutHTML = {
      * To display 6 weeks per month, you will need to render out the previous
      * and next month's dates in the calendar as well.
      *
-     * @defaultValue false
+     * @default false
      */
     fixedWeeks?: boolean;
     /**
      * Determines the number of months to display on the calendar simultaneously.
      * For navigation between months, refer to the `pagedNavigation` prop.
      *
-     * @defaultValue 1
+     * @default 1
      */
     numberOfMonths?: number;
     /**
@@ -134,7 +134,7 @@ type CalendarBaseRootPropsWithoutHTML = {
     /**
      * The default locale setting.
      *
-     * @defaultValue 'en'
+     * @default 'en'
      */
     locale?: string;
     /**
@@ -143,7 +143,7 @@ type CalendarBaseRootPropsWithoutHTML = {
      * dates. @see disabled for a similar prop that prevents focusing
      * and selecting dates.
      *
-     * @defaultValue false
+     * @default false
      */
     readonly?: boolean;
     /**
@@ -156,9 +156,28 @@ type CalendarBaseRootPropsWithoutHTML = {
      * days outside the current month are rendered to fill the calendar grid, but they
      * are not selectable. Setting this prop to `true` will disable this behavior.
      *
-     * @defaultValue false
+     * @default false
      */
     disableDaysOutsideMonth?: boolean;
+    /**
+     * The maximum number of days that can be selected in multiple mode.
+     * When set, users cannot select more dates than this number.
+     *
+     * @default undefined
+     */
+    maxDays?: number;
+    /**
+     * The format of the month names in the calendar.
+     *
+     * @default "long"
+     */
+    monthFormat?: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
+    /**
+     * The format of the year names in the calendar.
+     *
+     * @default "numeric"
+     */
+    yearFormat?: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
 };
 export type CalendarSingleRootPropsWithoutHTML = {
     /**
@@ -245,4 +264,67 @@ export type CalendarNextButtonPropsWithoutHTML = WithChild;
 export type CalendarNextButtonProps = CalendarNextButtonPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, CalendarNextButtonPropsWithoutHTML>;
 export type CalendarPrevButtonPropsWithoutHTML = WithChild;
 export type CalendarPrevButtonProps = CalendarPrevButtonPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, CalendarPrevButtonPropsWithoutHTML>;
+export type CalendarMonthSelectSnippetProps = {
+    monthItems: Array<{
+        value: number;
+        label: string;
+    }>;
+    selectedMonthItem: {
+        value: number;
+        label: string;
+    };
+};
+export type CalendarMonthSelectPropsWithoutHTML = WithChild<{
+    /**
+     * An array of month numbers (1-12) to display in the select.
+     * This allows for flexible month selection, such as showing only
+     * specific months or seasons.
+     *
+     * @default [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] (all months)
+     */
+    months?: number[];
+    /**
+     * How the month names should be formatted in the select options.
+     *
+     * - "long": "January", "February", etc.
+     * - "short": "Jan", "Feb", etc.
+     * - "narrow": "J", "F", etc.
+     * - "numeric": "1", "2", etc.
+     * - "2-digit": "01", "02", etc.
+     *
+     * @default "long"
+     */
+    monthFormat?: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
+}, CalendarMonthSelectSnippetProps>;
+export type CalendarMonthSelectProps = CalendarMonthSelectPropsWithoutHTML & Without<BitsPrimitiveSelectAttributes, CalendarMonthSelectPropsWithoutHTML>;
+export type CalendarYearSelectSnippetProps = {
+    yearItems: Array<{
+        value: number;
+        label: string;
+    }>;
+    selectedYearItem: {
+        value: number;
+        label: string;
+    };
+};
+export type CalendarYearSelectPropsWithoutHTML = WithChild<{
+    /**
+     * An array of years to display in the select.
+     * This allows for complete control over which years appear,
+     * such as showing only years with data or excluding certain periods.
+     *
+     * @default Array from currentYear - 100 to currentYear
+     */
+    years?: number[];
+    /**
+     * How the year should be formatted in the select options.
+     *
+     * - "numeric": "2024", "2023", etc.
+     * - "2-digit": "24", "23", etc.
+     *
+     * @default "numeric"
+     */
+    yearFormat?: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
+}, CalendarYearSelectSnippetProps>;
+export type CalendarYearSelectProps = CalendarYearSelectPropsWithoutHTML & Without<BitsPrimitiveSelectAttributes, CalendarYearSelectPropsWithoutHTML>;
 export {};

package/dist/bits/combobox/types.d.ts

@@ -1,7 +1,7 @@
 import type { BitsPrimitiveInputAttributes } from "../../shared/attributes.js";
 import type { SelectBaseRootPropsWithoutHTML, SelectMultipleRootPropsWithoutHTML, SelectSingleRootPropsWithoutHTML } from "../select/types.js";
 import type { WithChild, Without } from "../../internal/types.js";
-export type ComboboxBaseRootPropsWithoutHTML = SelectBaseRootPropsWithoutHTML & {
+export type ComboboxBaseRootPropsWithoutHTML = Omit<SelectBaseRootPropsWithoutHTML, "autocomplete"> & {
     /**
      * A read-only value that can be used to programmatically
      * update the input value.

package/dist/bits/date-field/date-field.svelte.js

@@ -127,7 +127,11 @@ export class DateFieldRootState {
         this.onInvalid = rangeRoot ? rangeRoot.opts.onInvalid : props.onInvalid;
         this.errorMessageId = rangeRoot ? rangeRoot.opts.errorMessageId : props.errorMessageId;
         this.isInvalidProp = props.isInvalidProp;
-        this.formatter = createFormatter(this.locale.current);
+        this.formatter = createFormatter({
+            initialLocale: this.locale.current,
+            monthFormat: box.with(() => "long"),
+            yearFormat: box.with(() => "numeric"),
+        });
         this.initialSegments = initializeSegmentValues(this.inferredGranularity);
         this.segmentValues = this.initialSegments;
         this.announcer = getAnnouncer(null);

package/dist/bits/date-picker/components/date-picker-calendar.svelte

@@ -44,6 +44,9 @@
 		onDateSelect: datePickerRootState.opts.onDateSelect,
 		initialFocus: datePickerRootState.opts.initialFocus,
 		defaultPlaceholder: datePickerRootState.opts.defaultPlaceholder,
+		maxDays: box.with(() => undefined),
+		monthFormat: datePickerRootState.opts.monthFormat,
+		yearFormat: datePickerRootState.opts.yearFormat,
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, calendarState.props));

package/dist/bits/date-picker/components/date-picker.svelte

@@ -45,6 +45,8 @@
 		initialFocus = false,
 		errorMessageId,
 		children,
+		monthFormat = "long",
+		yearFormat = "numeric",
 	}: DatePickerRootProps = $props();
 
 	const defaultPlaceholder = getDefaultDate({
@@ -123,6 +125,8 @@
 		initialFocus: box.with(() => initialFocus),
 		onDateSelect: box.with(() => onDateSelect),
 		defaultPlaceholder,
+		monthFormat: box.with(() => monthFormat),
+		yearFormat: box.with(() => yearFormat),
 	});
 
 	usePopoverRoot({

package/dist/bits/date-picker/date-picker.svelte.d.ts

@@ -30,6 +30,8 @@ type DatePickerRootStateProps = WritableBoxedValues<{
     disableDaysOutsideMonth: boolean;
     initialFocus: boolean;
     onDateSelect?: () => void;
+    monthFormat: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
+    yearFormat: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
 }> & {
     defaultPlaceholder: DateValue;
 };

package/dist/bits/date-picker/exports.d.ts

@@ -17,7 +17,9 @@ export { default as Header } from "../calendar/components/calendar-header.svelte
 export { default as Heading } from "../calendar/components/calendar-heading.svelte";
 export { default as NextButton } from "../calendar/components/calendar-next-button.svelte";
 export { default as PrevButton } from "../calendar/components/calendar-prev-button.svelte";
+export { default as MonthSelect } from "../calendar/components/calendar-month-select.svelte";
+export { default as YearSelect } from "../calendar/components/calendar-year-select.svelte";
 export { default as Cell } from "../calendar/components/calendar-cell.svelte";
 export { default as Day } from "../calendar/components/calendar-day.svelte";
 export { default as Portal } from "../utilities/portal/portal.svelte";
-export type { DatePickerRootProps as RootProps, DatePickerLabelProps as LabelProps, DatePickerInputProps as InputProps, DatePickerSegmentProps as SegmentProps, DatePickerArrowProps as ArrowProps, DatePickerCloseProps as CloseProps, DatePickerContentProps as ContentProps, DatePickerContentStaticProps as ContentStaticProps, DatePickerTriggerProps as TriggerProps, DatePickerCalendarProps as CalendarProps, DatePickerCellProps as CellProps, DatePickerDayProps as DayProps, DatePickerGridBodyProps as GridBodyProps, DatePickerGridHeadProps as GridHeadProps, DatePickerGridProps as GridProps, DatePickerGridRowProps as GridRowProps, DatePickerHeadCellProps as HeadCellProps, DatePickerHeaderProps as HeaderProps, DatePickerHeadingProps as HeadingProps, DatePickerNextButtonProps as NextButtonProps, DatePickerPrevButtonProps as PrevButtonProps, DatePickerPortalProps as PortalProps, } from "./types.js";
+export type { DatePickerRootProps as RootProps, DatePickerLabelProps as LabelProps, DatePickerInputProps as InputProps, DatePickerSegmentProps as SegmentProps, DatePickerArrowProps as ArrowProps, DatePickerCloseProps as CloseProps, DatePickerContentProps as ContentProps, DatePickerContentStaticProps as ContentStaticProps, DatePickerTriggerProps as TriggerProps, DatePickerCalendarProps as CalendarProps, DatePickerCellProps as CellProps, DatePickerDayProps as DayProps, DatePickerGridBodyProps as GridBodyProps, DatePickerGridHeadProps as GridHeadProps, DatePickerGridProps as GridProps, DatePickerGridRowProps as GridRowProps, DatePickerHeadCellProps as HeadCellProps, DatePickerHeaderProps as HeaderProps, DatePickerHeadingProps as HeadingProps, DatePickerNextButtonProps as NextButtonProps, DatePickerPrevButtonProps as PrevButtonProps, DatePickerPortalProps as PortalProps, DatePickerMonthSelectProps as MonthSelectProps, DatePickerYearSelectProps as YearSelectProps, } from "./types.js";

package/dist/bits/date-picker/exports.js

@@ -17,6 +17,8 @@ export { default as Header } from "../calendar/components/calendar-header.svelte
 export { default as Heading } from "../calendar/components/calendar-heading.svelte";
 export { default as NextButton } from "../calendar/components/calendar-next-button.svelte";
 export { default as PrevButton } from "../calendar/components/calendar-prev-button.svelte";
+export { default as MonthSelect } from "../calendar/components/calendar-month-select.svelte";
+export { default as YearSelect } from "../calendar/components/calendar-year-select.svelte";
 export { default as Cell } from "../calendar/components/calendar-cell.svelte";
 export { default as Day } from "../calendar/components/calendar-day.svelte";
 export { default as Portal } from "../utilities/portal/portal.svelte";

package/dist/bits/date-picker/types.d.ts

@@ -226,6 +226,18 @@ export type DatePickerRootPropsWithoutHTML = WithChildren<{
      * date is invalid.
      */
     errorMessageId?: string;
+    /**
+     * The format of the month names in the calendar.
+     *
+     * @default "long"
+     */
+    monthFormat?: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
+    /**
+     * The format of the year names in the calendar.
+     *
+     * @default "numeric"
+     */
+    yearFormat?: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
 }>;
 export type DatePickerRootProps = DatePickerRootPropsWithoutHTML;
 export type { PopoverTriggerPropsWithoutHTML as DatePickerTriggerPropsWithoutHTML, PopoverTriggerProps as DatePickerTriggerProps, PopoverContentPropsWithoutHTML as DatePickerContentPropsWithoutHTML, PopoverContentProps as DatePickerContentProps, PopoverContentStaticPropsWithoutHTML as DatePickerContentStaticPropsWithoutHTML, PopoverContentStaticProps as DatePickerContentStaticProps, PopoverArrowPropsWithoutHTML as DatePickerArrowPropsWithoutHTML, PopoverArrowProps as DatePickerArrowProps, PopoverClosePropsWithoutHTML as DatePickerClosePropsWithoutHTML, PopoverCloseProps as DatePickerCloseProps, } from "../popover/types.js";
@@ -234,4 +246,4 @@ export type DatePickerCalendarPropsWithoutHTML = WithChild<{}, CalendarRootSnipp
 export type DatePickerCalendarProps = DatePickerCalendarPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DatePickerCalendarPropsWithoutHTML>;
 export type DatePickerPortalPropsWithoutHTML = PortalProps;
 export type DatePickerPortalProps = DatePickerPortalPropsWithoutHTML;
-export type { CalendarCellPropsWithoutHTML as DatePickerCellPropsWithoutHTML, CalendarCellProps as DatePickerCellProps, CalendarDayPropsWithoutHTML as DatePickerDayPropsWithoutHTML, CalendarDayProps as DatePickerDayProps, CalendarGridPropsWithoutHTML as DatePickerGridPropsWithoutHTML, CalendarGridProps as DatePickerGridProps, CalendarGridBodyPropsWithoutHTML as DatePickerGridBodyPropsWithoutHTML, CalendarGridBodyProps as DatePickerGridBodyProps, CalendarGridHeadPropsWithoutHTML as DatePickerGridHeadPropsWithoutHTML, CalendarGridHeadProps as DatePickerGridHeadProps, CalendarGridRowPropsWithoutHTML as DatePickerGridRowPropsWithoutHTML, CalendarGridRowProps as DatePickerGridRowProps, CalendarHeadCellPropsWithoutHTML as DatePickerHeadCellPropsWithoutHTML, CalendarHeadCellProps as DatePickerHeadCellProps, CalendarHeaderPropsWithoutHTML as DatePickerHeaderPropsWithoutHTML, CalendarHeaderProps as DatePickerHeaderProps, CalendarHeadingPropsWithoutHTML as DatePickerHeadingPropsWithoutHTML, CalendarHeadingProps as DatePickerHeadingProps, CalendarNextButtonPropsWithoutHTML as DatePickerNextButtonPropsWithoutHTML, CalendarNextButtonProps as DatePickerNextButtonProps, CalendarPrevButtonPropsWithoutHTML as DatePickerPrevButtonPropsWithoutHTML, CalendarPrevButtonProps as DatePickerPrevButtonProps, } from "../calendar/types.js";
+export type { CalendarCellPropsWithoutHTML as DatePickerCellPropsWithoutHTML, CalendarCellProps as DatePickerCellProps, CalendarDayPropsWithoutHTML as DatePickerDayPropsWithoutHTML, CalendarDayProps as DatePickerDayProps, CalendarGridPropsWithoutHTML as DatePickerGridPropsWithoutHTML, CalendarGridProps as DatePickerGridProps, CalendarGridBodyPropsWithoutHTML as DatePickerGridBodyPropsWithoutHTML, CalendarGridBodyProps as DatePickerGridBodyProps, CalendarGridHeadPropsWithoutHTML as DatePickerGridHeadPropsWithoutHTML, CalendarGridHeadProps as DatePickerGridHeadProps, CalendarGridRowPropsWithoutHTML as DatePickerGridRowPropsWithoutHTML, CalendarGridRowProps as DatePickerGridRowProps, CalendarHeadCellPropsWithoutHTML as DatePickerHeadCellPropsWithoutHTML, CalendarHeadCellProps as DatePickerHeadCellProps, CalendarHeaderPropsWithoutHTML as DatePickerHeaderPropsWithoutHTML, CalendarHeaderProps as DatePickerHeaderProps, CalendarHeadingPropsWithoutHTML as DatePickerHeadingPropsWithoutHTML, CalendarHeadingProps as DatePickerHeadingProps, CalendarNextButtonPropsWithoutHTML as DatePickerNextButtonPropsWithoutHTML, CalendarNextButtonProps as DatePickerNextButtonProps, CalendarPrevButtonPropsWithoutHTML as DatePickerPrevButtonPropsWithoutHTML, CalendarPrevButtonProps as DatePickerPrevButtonProps, CalendarMonthSelectProps as DatePickerMonthSelectProps, CalendarMonthSelectPropsWithoutHTML as DatePickerMonthSelectPropsWithoutHTML, CalendarYearSelectProps as DatePickerYearSelectProps, CalendarYearSelectPropsWithoutHTML as DatePickerYearSelectPropsWithoutHTML, } from "../calendar/types.js";

package/dist/bits/date-range-field/date-range-field.svelte.js

@@ -26,7 +26,11 @@ export class DateRangeFieldRootState {
     domContext;
     constructor(opts) {
         this.opts = opts;
-        this.formatter = createFormatter(this.opts.locale.current);
+        this.formatter = createFormatter({
+            initialLocale: this.opts.locale.current,
+            monthFormat: box.with(() => "long"),
+            yearFormat: box.with(() => "numeric"),
+        });
         this.domContext = new DOMContext(this.opts.ref);
         onDestroyEffect(() => {
             removeDescriptionElement(this.descriptionId, this.domContext.getDocument());

package/dist/bits/date-range-picker/components/date-range-picker-calendar.svelte

@@ -40,10 +40,15 @@
 		minValue: dateRangePickerRootState.opts.minValue,
 		placeholder: dateRangePickerRootState.opts.placeholder,
 		value: dateRangePickerRootState.opts.value,
+		excludeDisabled: dateRangePickerRootState.opts.excludeDisabled,
 		onRangeSelect: dateRangePickerRootState.opts.onRangeSelect,
 		startValue: dateRangePickerRootState.opts.startValue,
 		endValue: dateRangePickerRootState.opts.endValue,
 		defaultPlaceholder: dateRangePickerRootState.opts.defaultPlaceholder,
+		minDays: dateRangePickerRootState.opts.minDays,
+		maxDays: dateRangePickerRootState.opts.maxDays,
+		monthFormat: dateRangePickerRootState.opts.monthFormat,
+		yearFormat: dateRangePickerRootState.opts.yearFormat,
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rangeCalendarState.props));

package/dist/bits/date-range-picker/components/date-range-picker.svelte

@@ -48,8 +48,13 @@
 		onEndValueChange = noop,
 		validate = noop,
 		errorMessageId,
+		minDays,
+		maxDays,
+		excludeDisabled = false,
 		child,
 		children,
+		monthFormat = "long",
+		yearFormat = "numeric",
 		...restProps
 	}: DateRangePickerRootProps = $props();
 
@@ -132,6 +137,8 @@
 		isDateUnavailable: box.with(() => isDateUnavailable),
 		minValue: box.with(() => minValue),
 		maxValue: box.with(() => maxValue),
+		minDays: box.with(() => minDays),
+		maxDays: box.with(() => maxDays),
 		disabled: box.with(() => disabled),
 		readonly: box.with(() => readonly),
 		granularity: box.with(() => granularity),
@@ -149,6 +156,7 @@
 		isDateDisabled: box.with(() => isDateDisabled),
 		fixedWeeks: box.with(() => fixedWeeks),
 		numberOfMonths: box.with(() => numberOfMonths),
+		excludeDisabled: box.with(() => excludeDisabled),
 		onRangeSelect: box.with(() => onRangeSelect),
 		startValue: box.with(
 			() => startValue,
@@ -164,6 +172,8 @@
 				onEndValueChange(v);
 			}
 		),
+		monthFormat: box.with(() => monthFormat),
+		yearFormat: box.with(() => yearFormat),
 		defaultPlaceholder,
 	});
 

package/dist/bits/date-range-picker/date-range-picker.svelte.d.ts

@@ -15,6 +15,8 @@ type DateRangePickerRootStateProps = WritableBoxedValues<{
     isDateDisabled: DateMatcher;
     minValue: DateValue | undefined;
     maxValue: DateValue | undefined;
+    minDays: number | undefined;
+    maxDays: number | undefined;
     disabled: boolean;
     readonly: boolean;
     granularity: Granularity | undefined;
@@ -30,7 +32,10 @@ type DateRangePickerRootStateProps = WritableBoxedValues<{
     numberOfMonths: number;
     calendarLabel: string;
     disableDaysOutsideMonth: boolean;
+    excludeDisabled: boolean;
     onRangeSelect?: () => void;
+    monthFormat: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
+    yearFormat: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
 }> & {
     defaultPlaceholder: DateValue;
 };

package/dist/bits/date-range-picker/exports.d.ts

@@ -16,6 +16,8 @@ export { default as Header } from "../calendar/components/calendar-header.svelte
 export { default as Heading } from "../calendar/components/calendar-heading.svelte";
 export { default as NextButton } from "../calendar/components/calendar-next-button.svelte";
 export { default as PrevButton } from "../calendar/components/calendar-prev-button.svelte";
+export { default as MonthSelect } from "../calendar/components/calendar-month-select.svelte";
+export { default as YearSelect } from "../calendar/components/calendar-year-select.svelte";
 export { default as Cell } from "../range-calendar/components/range-calendar-cell.svelte";
 export { default as Day } from "../range-calendar/components/range-calendar-day.svelte";
-export type { DateRangePickerRootProps as RootProps, DateRangePickerLabelProps as LabelProps, DateRangePickerInputProps as InputProps, DateRangePickerSegmentProps as SegmentProps, DateRangePickerArrowProps as ArrowProps, DateRangePickerCloseProps as CloseProps, DateRangePickerContentProps as ContentProps, DateRangePickerTriggerProps as TriggerProps, DateRangePickerCalendarProps as CalendarProps, DateRangePickerCellProps as CellProps, DateRangePickerDayProps as DayProps, DateRangePickerGridBodyProps as GridBodyProps, DateRangePickerGridHeadProps as GridHeadProps, DateRangePickerGridProps as GridProps, DateRangePickerGridRowProps as GridRowProps, DateRangePickerHeadCellProps as HeadCellProps, DateRangePickerHeaderProps as HeaderProps, DateRangePickerHeadingProps as HeadingProps, DateRangePickerNextButtonProps as NextButtonProps, DateRangePickerPrevButtonProps as PrevButtonProps, } from "./types.js";
+export type { DateRangePickerRootProps as RootProps, DateRangePickerLabelProps as LabelProps, DateRangePickerInputProps as InputProps, DateRangePickerSegmentProps as SegmentProps, DateRangePickerArrowProps as ArrowProps, DateRangePickerCloseProps as CloseProps, DateRangePickerContentProps as ContentProps, DateRangePickerTriggerProps as TriggerProps, DateRangePickerCalendarProps as CalendarProps, DateRangePickerCellProps as CellProps, DateRangePickerDayProps as DayProps, DateRangePickerGridBodyProps as GridBodyProps, DateRangePickerGridHeadProps as GridHeadProps, DateRangePickerGridProps as GridProps, DateRangePickerGridRowProps as GridRowProps, DateRangePickerHeadCellProps as HeadCellProps, DateRangePickerHeaderProps as HeaderProps, DateRangePickerHeadingProps as HeadingProps, DateRangePickerNextButtonProps as NextButtonProps, DateRangePickerPrevButtonProps as PrevButtonProps, DateRangePickerMonthSelectProps as MonthSelectProps, DateRangePickerYearSelectProps as YearSelectProps, } from "./types.js";

package/dist/bits/date-range-picker/exports.js

@@ -16,5 +16,7 @@ export { default as Header } from "../calendar/components/calendar-header.svelte
 export { default as Heading } from "../calendar/components/calendar-heading.svelte";
 export { default as NextButton } from "../calendar/components/calendar-next-button.svelte";
 export { default as PrevButton } from "../calendar/components/calendar-prev-button.svelte";
+export { default as MonthSelect } from "../calendar/components/calendar-month-select.svelte";
+export { default as YearSelect } from "../calendar/components/calendar-year-select.svelte";
 export { default as Cell } from "../range-calendar/components/range-calendar-cell.svelte";
 export { default as Day } from "../range-calendar/components/range-calendar-day.svelte";

package/dist/bits/date-range-picker/types.d.ts

@@ -233,10 +233,42 @@ export type DateRangePickerRootPropsWithoutHTML = WithChild<{
      * date is invalid.
      */
     errorMessageId?: string;
+    /**
+     * The minimum number of days that can be selected in a range.
+     *
+     * @default undefined
+     */
+    minDays?: number;
+    /**
+     * The maximum number of days that can be selected in a range.
+     *
+     * @default undefined
+     */
+    maxDays?: number;
+    /**
+     * Whether to automatically reset the range if any date within the selected range
+     * becomes disabled. When true, the entire range will be cleared if a disabled
+     * date is found between the start and end dates.
+     *
+     * @default false
+     */
+    excludeDisabled?: boolean;
+    /**
+     * The format of the month names in the calendar.
+     *
+     * @default "long"
+     */
+    monthFormat?: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
+    /**
+     * The format of the year names in the calendar.
+     *
+     * @default "numeric"
+     */
+    yearFormat?: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
 }>;
 export type DateRangePickerRootProps = DateRangePickerRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DateRangePickerRootPropsWithoutHTML>;
 export type { PopoverTriggerPropsWithoutHTML as DateRangePickerTriggerPropsWithoutHTML, PopoverTriggerProps as DateRangePickerTriggerProps, PopoverContentPropsWithoutHTML as DateRangePickerContentPropsWithoutHTML, PopoverContentProps as DateRangePickerContentProps, PopoverArrowPropsWithoutHTML as DateRangePickerArrowPropsWithoutHTML, PopoverArrowProps as DateRangePickerArrowProps, PopoverClosePropsWithoutHTML as DateRangePickerClosePropsWithoutHTML, PopoverCloseProps as DateRangePickerCloseProps, } from "../popover/types.js";
 export type { DateRangeFieldInputPropsWithoutHTML as DateRangePickerInputPropsWithoutHTML, DateRangeFieldInputProps as DateRangePickerInputProps, DateRangeFieldLabelPropsWithoutHTML as DateRangePickerLabelPropsWithoutHTML, DateRangeFieldLabelProps as DateRangePickerLabelProps, DateRangeFieldSegmentPropsWithoutHTML as DateRangePickerSegmentPropsWithoutHTML, DateRangeFieldSegmentProps as DateRangePickerSegmentProps, } from "../date-range-field/types.js";
 export type DateRangePickerCalendarPropsWithoutHTML = WithChild<{}, CalendarRootSnippetProps>;
 export type DateRangePickerCalendarProps = DateRangePickerCalendarPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DateRangePickerCalendarPropsWithoutHTML>;
-export type { RangeCalendarCellPropsWithoutHTML as DateRangePickerCellPropsWithoutHTML, RangeCalendarCellProps as DateRangePickerCellProps, RangeCalendarDayPropsWithoutHTML as DateRangePickerDayPropsWithoutHTML, RangeCalendarDayProps as DateRangePickerDayProps, RangeCalendarGridPropsWithoutHTML as DateRangePickerGridPropsWithoutHTML, RangeCalendarGridProps as DateRangePickerGridProps, RangeCalendarGridBodyPropsWithoutHTML as DateRangePickerGridBodyPropsWithoutHTML, RangeCalendarGridBodyProps as DateRangePickerGridBodyProps, RangeCalendarGridHeadPropsWithoutHTML as DateRangePickerGridHeadPropsWithoutHTML, RangeCalendarGridHeadProps as DateRangePickerGridHeadProps, RangeCalendarGridRowPropsWithoutHTML as DateRangePickerGridRowPropsWithoutHTML, RangeCalendarGridRowProps as DateRangePickerGridRowProps, RangeCalendarHeadCellPropsWithoutHTML as DateRangePickerHeadCellPropsWithoutHTML, RangeCalendarHeadCellProps as DateRangePickerHeadCellProps, RangeCalendarHeaderPropsWithoutHTML as DateRangePickerHeaderPropsWithoutHTML, RangeCalendarHeaderProps as DateRangePickerHeaderProps, RangeCalendarHeadingPropsWithoutHTML as DateRangePickerHeadingPropsWithoutHTML, RangeCalendarHeadingProps as DateRangePickerHeadingProps, RangeCalendarNextButtonPropsWithoutHTML as DateRangePickerNextButtonPropsWithoutHTML, RangeCalendarNextButtonProps as DateRangePickerNextButtonProps, RangeCalendarPrevButtonPropsWithoutHTML as DateRangePickerPrevButtonPropsWithoutHTML, RangeCalendarPrevButtonProps as DateRangePickerPrevButtonProps, } from "../range-calendar/types.js";
+export type { RangeCalendarCellPropsWithoutHTML as DateRangePickerCellPropsWithoutHTML, RangeCalendarCellProps as DateRangePickerCellProps, RangeCalendarDayPropsWithoutHTML as DateRangePickerDayPropsWithoutHTML, RangeCalendarDayProps as DateRangePickerDayProps, RangeCalendarGridPropsWithoutHTML as DateRangePickerGridPropsWithoutHTML, RangeCalendarGridProps as DateRangePickerGridProps, RangeCalendarGridBodyPropsWithoutHTML as DateRangePickerGridBodyPropsWithoutHTML, RangeCalendarGridBodyProps as DateRangePickerGridBodyProps, RangeCalendarGridHeadPropsWithoutHTML as DateRangePickerGridHeadPropsWithoutHTML, RangeCalendarGridHeadProps as DateRangePickerGridHeadProps, RangeCalendarGridRowPropsWithoutHTML as DateRangePickerGridRowPropsWithoutHTML, RangeCalendarGridRowProps as DateRangePickerGridRowProps, RangeCalendarHeadCellPropsWithoutHTML as DateRangePickerHeadCellPropsWithoutHTML, RangeCalendarHeadCellProps as DateRangePickerHeadCellProps, RangeCalendarHeaderPropsWithoutHTML as DateRangePickerHeaderPropsWithoutHTML, RangeCalendarHeaderProps as DateRangePickerHeaderProps, RangeCalendarHeadingPropsWithoutHTML as DateRangePickerHeadingPropsWithoutHTML, RangeCalendarHeadingProps as DateRangePickerHeadingProps, RangeCalendarNextButtonPropsWithoutHTML as DateRangePickerNextButtonPropsWithoutHTML, RangeCalendarNextButtonProps as DateRangePickerNextButtonProps, RangeCalendarPrevButtonPropsWithoutHTML as DateRangePickerPrevButtonPropsWithoutHTML, RangeCalendarPrevButtonProps as DateRangePickerPrevButtonProps, RangeCalendarMonthSelectProps as DateRangePickerMonthSelectProps, RangeCalendarMonthSelectPropsWithoutHTML as DateRangePickerMonthSelectPropsWithoutHTML, RangeCalendarYearSelectProps as DateRangePickerYearSelectProps, RangeCalendarYearSelectPropsWithoutHTML as DateRangePickerYearSelectPropsWithoutHTML, } from "../range-calendar/types.js";

package/dist/bits/range-calendar/components/range-calendar.svelte

@@ -35,8 +35,13 @@
 		maxValue = undefined,
 		preventDeselect = false,
 		disableDaysOutsideMonth = true,
+		minDays,
+		maxDays,
 		onStartValueChange = noop,
 		onEndValueChange = noop,
+		excludeDisabled = false,
+		monthFormat = "long",
+		yearFormat = "numeric",
 		...restProps
 	}: RangeCalendarRootProps = $props();
 
@@ -112,6 +117,9 @@
 		calendarLabel: box.with(() => calendarLabel),
 		fixedWeeks: box.with(() => fixedWeeks),
 		disableDaysOutsideMonth: box.with(() => disableDaysOutsideMonth),
+		minDays: box.with(() => minDays),
+		maxDays: box.with(() => maxDays),
+		excludeDisabled: box.with(() => excludeDisabled),
 		startValue: box.with(
 			() => startValue,
 			(v) => {
@@ -126,6 +134,8 @@
 				onEndValueChange(v);
 			}
 		),
+		monthFormat: box.with(() => monthFormat),
+		yearFormat: box.with(() => yearFormat),
 		defaultPlaceholder,
 	});
 

package/dist/bits/range-calendar/exports.d.ts

@@ -10,4 +10,6 @@ export { default as Header } from "../calendar/components/calendar-header.svelte
 export { default as Heading } from "../calendar/components/calendar-heading.svelte";
 export { default as NextButton } from "../calendar/components/calendar-next-button.svelte";
 export { default as PrevButton } from "../calendar/components/calendar-prev-button.svelte";
-export type { RangeCalendarRootProps as RootProps, RangeCalendarPrevButtonProps as PrevButtonProps, RangeCalendarNextButtonProps as NextButtonProps, RangeCalendarHeadingProps as HeadingProps, RangeCalendarHeaderProps as HeaderProps, RangeCalendarGridProps as GridProps, RangeCalendarGridHeadProps as GridHeadProps, RangeCalendarHeadCellProps as HeadCellProps, RangeCalendarGridBodyProps as GridBodyProps, RangeCalendarCellProps as CellProps, RangeCalendarGridRowProps as GridRowProps, RangeCalendarDayProps as DayProps, } from "./types.js";
+export { default as MonthSelect } from "../calendar/components/calendar-month-select.svelte";
+export { default as YearSelect } from "../calendar/components/calendar-year-select.svelte";
+export type { RangeCalendarRootProps as RootProps, RangeCalendarPrevButtonProps as PrevButtonProps, RangeCalendarNextButtonProps as NextButtonProps, RangeCalendarHeadingProps as HeadingProps, RangeCalendarHeaderProps as HeaderProps, RangeCalendarGridProps as GridProps, RangeCalendarGridHeadProps as GridHeadProps, RangeCalendarHeadCellProps as HeadCellProps, RangeCalendarGridBodyProps as GridBodyProps, RangeCalendarCellProps as CellProps, RangeCalendarGridRowProps as GridRowProps, RangeCalendarDayProps as DayProps, RangeCalendarMonthSelectProps as MonthSelectProps, RangeCalendarYearSelectProps as YearSelectProps, } from "./types.js";

package/dist/bits/range-calendar/exports.js

@@ -10,3 +10,5 @@ export { default as Header } from "../calendar/components/calendar-header.svelte
 export { default as Heading } from "../calendar/components/calendar-heading.svelte";
 export { default as NextButton } from "../calendar/components/calendar-next-button.svelte";
 export { default as PrevButton } from "../calendar/components/calendar-prev-button.svelte";
+export { default as MonthSelect } from "../calendar/components/calendar-month-select.svelte";
+export { default as YearSelect } from "../calendar/components/calendar-year-select.svelte";

package/dist/bits/range-calendar/range-calendar.svelte.d.ts

@@ -28,11 +28,16 @@ type RangeCalendarRootStateProps = WithRefProps<WritableBoxedValues<{
     calendarLabel: string;
     readonly: boolean;
     disableDaysOutsideMonth: boolean;
+    excludeDisabled: boolean;
+    minDays: number | undefined;
+    maxDays: number | undefined;
     /**
      * This is strictly used by the `DateRangePicker` component to close the popover when a date range
      * is selected. It is not intended to be used by the user.
      */
     onRangeSelect?: () => void;
+    monthFormat: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
+    yearFormat: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
 }> & {
     defaultPlaceholder: DateValue;
 }>;
@@ -66,6 +71,8 @@ export declare class RangeCalendarRootState {
         start: DateValue;
         end: DateValue;
     } | null;
+    readonly initialPlaceholderYear: number;
+    readonly defaultYears: number[];
     constructor(opts: RangeCalendarRootStateProps);
     setMonths: (months: Month<DateValue>[]) => void;
     isOutsideVisibleMonths(date: DateValue): boolean;
@@ -120,6 +127,10 @@ export declare class RangeCalendarCellState {
     readonly isFocusedDate: boolean;
     readonly isSelectedDate: boolean;
     readonly isSelectionStart: boolean;
+    readonly isRangeStart: boolean;
+    readonly isRangeEnd: boolean;
+    readonly isRangeMiddle: boolean;
+    readonly isSelectionMiddle: boolean;
     readonly isSelectionEnd: boolean;
     readonly isHighlighted: boolean;
     readonly labelText: string;
@@ -138,6 +149,9 @@ export declare class RangeCalendarCellState {
         readonly "data-focused": "" | undefined;
         readonly "data-selection-start": "" | undefined;
         readonly "data-selection-end": "" | undefined;
+        readonly "data-range-start": "" | undefined;
+        readonly "data-range-end": "" | undefined;
+        readonly "data-range-middle": "" | undefined;
         readonly "data-highlighted": "" | undefined;
         readonly "data-selected": "" | undefined;
         readonly "data-value": string;
@@ -152,6 +166,9 @@ export declare class RangeCalendarCellState {
         readonly "data-focused": "" | undefined;
         readonly "data-selection-start": "" | undefined;
         readonly "data-selection-end": "" | undefined;
+        readonly "data-range-start": "" | undefined;
+        readonly "data-range-end": "" | undefined;
+        readonly "data-range-middle": "" | undefined;
         readonly "data-highlighted": "" | undefined;
         readonly "data-selected": "" | undefined;
         readonly "data-value": string;
@@ -191,6 +208,9 @@ declare class RangeCalendarDayState {
         readonly "data-focused": "" | undefined;
         readonly "data-selection-start": "" | undefined;
         readonly "data-selection-end": "" | undefined;
+        readonly "data-range-start": "" | undefined;
+        readonly "data-range-end": "" | undefined;
+        readonly "data-range-middle": "" | undefined;
         readonly "data-highlighted": "" | undefined;
         readonly "data-selected": "" | undefined;
         readonly "data-value": string;