bits-ui 2.4.1 → 2.5.0

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

@@ -6,9 +6,9 @@ import { useId } from "../../internal/use-id.js";
 import { getAriaDisabled, getAriaSelected, getDataDisabled, getDataSelected, getDataUnavailable, } from "../../internal/attrs.js";
 import { getAnnouncer } from "../../internal/date-time/announcer.js";
 import { createFormatter } from "../../internal/date-time/formatter.js";
-import { calendarAttrs, createMonths, getCalendarElementProps, getCalendarHeadingValue, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useEnsureNonDisabledPlaceholder, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
+import { calendarAttrs, createMonths, getCalendarElementProps, getCalendarHeadingValue, getDefaultYears, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useEnsureNonDisabledPlaceholder, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
 import { areAllDaysBetweenValid, getDateValueType, isAfter, isBefore, isBetweenInclusive, toDate, } from "../../internal/date-time/utils.js";
-import { onMount } from "svelte";
+import { onMount, untrack } from "svelte";
 export class RangeCalendarRootState {
     opts;
     visibleMonths = $derived.by(() => this.months.map((month) => month.value));
@@ -69,6 +69,8 @@ export class RangeCalendarRootState {
         });
     });
     headingValue = $derived.by(() => {
+        this.opts.monthFormat.current;
+        this.opts.yearFormat.current;
         return getCalendarHeadingValue({
             months: this.months,
             formatter: this.formatter,
@@ -93,11 +95,23 @@ export class RangeCalendarRootState {
             return range;
         return null;
     });
+    initialPlaceholderYear = $derived.by(() => untrack(() => this.opts.placeholder.current.year));
+    defaultYears = $derived.by(() => {
+        return getDefaultYears({
+            minValue: this.opts.minValue.current,
+            maxValue: this.opts.maxValue.current,
+            placeholderYear: this.initialPlaceholderYear,
+        });
+    });
     constructor(opts) {
         this.opts = opts;
         this.domContext = new DOMContext(opts.ref);
         this.announcer = getAnnouncer(null);
-        this.formatter = createFormatter(this.opts.locale.current);
+        this.formatter = createFormatter({
+            initialLocale: this.opts.locale.current,
+            monthFormat: this.opts.monthFormat,
+            yearFormat: this.opts.yearFormat,
+        });
         this.months = createMonths({
             dateObj: this.opts.placeholder.current,
             weekStartsOn: this.opts.weekStartsOn.current,
@@ -105,7 +119,7 @@ export class RangeCalendarRootState {
             fixedWeeks: this.opts.fixedWeeks.current,
             numberOfMonths: this.opts.numberOfMonths.current,
         });
-        $effect(() => {
+        $effect.pre(() => {
             if (this.formatter.getLocale() === this.opts.locale.current)
                 return;
             this.formatter.setLocale(this.opts.locale.current);
@@ -175,6 +189,22 @@ export class RangeCalendarRootState {
                 this.opts.placeholder.current = startValue;
             }
         });
+        /**
+         * Check for disabled dates in the selected range when excludeDisabled is enabled
+         */
+        watch([
+            () => this.opts.startValue.current,
+            () => this.opts.endValue.current,
+            () => this.opts.excludeDisabled.current,
+        ], ([startValue, endValue, excludeDisabled]) => {
+            if (!excludeDisabled || !startValue || !endValue)
+                return;
+            if (this.#hasDisabledDatesInRange(startValue, endValue)) {
+                this.#setStartValue(undefined);
+                this.#setEndValue(undefined);
+                this.#announceEmpty();
+            }
+        });
         watch([() => this.opts.startValue.current, () => this.opts.endValue.current], ([startValue, endValue]) => {
             if (this.opts.value.current &&
                 this.opts.value.current.start === startValue &&
@@ -191,9 +221,19 @@ export class RangeCalendarRootState {
                         const end = endValue;
                         this.#setStartValue(end);
                         this.#setEndValue(start);
+                        if (!this.#isRangeValid(endValue, startValue)) {
+                            this.#setStartValue(startValue);
+                            this.#setEndValue(undefined);
+                            return { start: startValue, end: undefined };
+                        }
                         return { start: endValue, end: startValue };
                     }
                     else {
+                        if (!this.#isRangeValid(startValue, endValue)) {
+                            this.#setStartValue(endValue);
+                            this.#setEndValue(undefined);
+                            return { start: endValue, end: undefined };
+                        }
                         return {
                             start: startValue,
                             end: endValue,
@@ -240,9 +280,19 @@ export class RangeCalendarRootState {
     }
     #setStartValue(value) {
         this.opts.startValue.current = value;
+        // update the main value prop immediately for external consumers
+        this.#updateValue((prev) => ({
+            ...prev,
+            start: value,
+        }));
     }
     #setEndValue(value) {
         this.opts.endValue.current = value;
+        // update the main value prop immediately for external consumers
+        this.#updateValue((prev) => ({
+            ...prev,
+            end: value,
+        }));
     }
     setMonths = (months) => {
         this.months = months;
@@ -286,6 +336,26 @@ export class RangeCalendarRootState {
         }
         return false;
     }
+    #isRangeValid(start, end) {
+        // ensure we always use the correct order for calculation
+        const orderedStart = isBefore(end, start) ? end : start;
+        const orderedEnd = isBefore(end, start) ? start : end;
+        const startDate = orderedStart.toDate(getLocalTimeZone());
+        const endDate = orderedEnd.toDate(getLocalTimeZone());
+        const timeDifference = endDate.getTime() - startDate.getTime();
+        const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
+        const daysInRange = daysDifference + 1; // +1 to include both start and end days
+        if (this.opts.minDays.current && daysInRange < this.opts.minDays.current)
+            return false;
+        if (this.opts.maxDays.current && daysInRange > this.opts.maxDays.current)
+            return false;
+        // check for disabled dates in range if excludeDisabled is enabled
+        if (this.opts.excludeDisabled.current &&
+            this.#hasDisabledDatesInRange(orderedStart, orderedEnd)) {
+            return false;
+        }
+        return true;
+    }
     shiftFocus(node, add) {
         return shiftCalendarFocus({
             node,
@@ -344,8 +414,32 @@ export class RangeCalendarRootState {
             this.#setStartValue(date);
         }
         else if (!this.opts.endValue.current) {
-            this.#announceSelectedRange(this.opts.startValue.current, date);
-            this.#setEndValue(date);
+            // determine the start and end dates for validation
+            const startDate = this.opts.startValue.current;
+            const endDate = date;
+            const orderedStart = isBefore(endDate, startDate) ? endDate : startDate;
+            const orderedEnd = isBefore(endDate, startDate) ? startDate : endDate;
+            // check if the range violates constraints
+            if (!this.#isRangeValid(orderedStart, orderedEnd)) {
+                // reset to just the clicked date
+                this.#setStartValue(date);
+                this.#setEndValue(undefined);
+                this.#announceSelectedDate(date);
+            }
+            else {
+                // ensure start and end are properly ordered
+                if (isBefore(endDate, startDate)) {
+                    // backward selection - reorder the values
+                    this.#setStartValue(endDate);
+                    this.#setEndValue(startDate);
+                    this.#announceSelectedRange(endDate, startDate);
+                }
+                else {
+                    // forward selection - keep original order
+                    this.#setEndValue(date);
+                    this.#announceSelectedRange(this.opts.startValue.current, date);
+                }
+            }
         }
         else if (this.opts.endValue.current && this.opts.startValue.current) {
             this.#setEndValue(undefined);
@@ -423,6 +517,13 @@ export class RangeCalendarRootState {
         onkeydown: this.onkeydown,
         ...attachRef(this.opts.ref),
     }));
+    #hasDisabledDatesInRange(start, end) {
+        for (let date = start; isBefore(date, end) || isSameDay(date, end); date = date.add({ days: 1 })) {
+            if (this.isDateDisabled(date))
+                return true;
+        }
+        return false;
+    }
 }
 export class RangeCalendarCellState {
     opts;
@@ -436,6 +537,16 @@ export class RangeCalendarCellState {
     isFocusedDate = $derived.by(() => isSameDay(this.opts.date.current, this.root.opts.placeholder.current));
     isSelectedDate = $derived.by(() => this.root.isSelected(this.opts.date.current));
     isSelectionStart = $derived.by(() => this.root.isSelectionStart(this.opts.date.current));
+    isRangeStart = $derived.by(() => this.root.isSelectionStart(this.opts.date.current));
+    isRangeEnd = $derived.by(() => {
+        if (!this.root.opts.endValue.current)
+            return this.root.isSelectionStart(this.opts.date.current);
+        return this.root.isSelectionEnd(this.opts.date.current);
+    });
+    isRangeMiddle = $derived.by(() => this.isSelectionMiddle);
+    isSelectionMiddle = $derived.by(() => {
+        return this.isSelectedDate && !this.isSelectionStart && !this.isSelectionEnd;
+    });
     isSelectionEnd = $derived.by(() => this.root.isSelectionEnd(this.opts.date.current));
     isHighlighted = $derived.by(() => this.root.highlightedRange
         ? isBetweenInclusive(this.opts.date.current, this.root.highlightedRange.start, this.root.highlightedRange.end)
@@ -468,6 +579,9 @@ export class RangeCalendarCellState {
         "data-focused": this.isFocusedDate ? "" : undefined,
         "data-selection-start": this.isSelectionStart ? "" : undefined,
         "data-selection-end": this.isSelectionEnd ? "" : undefined,
+        "data-range-start": this.isRangeStart ? "" : undefined,
+        "data-range-end": this.isRangeEnd ? "" : undefined,
+        "data-range-middle": this.isRangeMiddle ? "" : undefined,
         "data-highlighted": this.isHighlighted ? "" : undefined,
         "data-selected": getDataSelected(this.isSelectedDate),
         "data-value": this.opts.date.current.toString(),

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

@@ -20,7 +20,7 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
      * 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;
     /**
@@ -28,11 +28,23 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
      * changes.
      */
     onPlaceholderChange?: OnChangeFn<DateValue>;
+    /**
+     * 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 or not users can deselect a date once selected
      * without selecting another date.
      *
-     * @defaultValue false
+     * @default false
      */
     preventDeselect?: boolean;
     /**
@@ -46,7 +58,7 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
     /**
      * Whether or not the calendar is disabled.
      *
-     * @defaultValue false
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -60,7 +72,7 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
      * 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;
     /**
@@ -68,7 +80,7 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
      * be a number between 0 and 6, where 0 is Sunday and 6 is
      * Saturday.
      *
-     * @defaultValue 0 (Sunday)
+     * @default 0 (Sunday)
      */
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     /**
@@ -81,7 +93,7 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
      * - "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
      */
@@ -119,14 +131,14 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
      * 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;
     /**
@@ -143,7 +155,7 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
     /**
      * The default locale setting.
      *
-     * @defaultValue 'en'
+     * @default 'en'
      */
     locale?: string;
     /**
@@ -152,7 +164,7 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
      * dates. @see disabled for a similar prop that prevents focusing
      * and selecting dates.
      *
-     * @defaultValue false
+     * @default false
      */
     readonly?: boolean;
     /**
@@ -160,9 +172,17 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
      * 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;
+    /**
+     * 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;
     /**
      * A callback function called when the start value changes. This doesn't necessarily mean
      * the `value` has updated and should be used to apply cosmetic changes to the calendar when
@@ -175,6 +195,18 @@ export type RangeCalendarRootPropsWithoutHTML = WithChild<{
      * only part of the value is changed/completed.
      */
     onEndValueChange?: OnChangeFn<DateValue | undefined>;
+    /**
+     * 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);
 }, RangeCalendarRootSnippetProps>;
 export type RangeCalendarRootProps = RangeCalendarRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, RangeCalendarRootPropsWithoutHTML>;
-export type { CalendarPrevButtonProps as RangeCalendarPrevButtonProps, CalendarPrevButtonPropsWithoutHTML as RangeCalendarPrevButtonPropsWithoutHTML, CalendarNextButtonProps as RangeCalendarNextButtonProps, CalendarNextButtonPropsWithoutHTML as RangeCalendarNextButtonPropsWithoutHTML, CalendarHeadingProps as RangeCalendarHeadingProps, CalendarHeadingPropsWithoutHTML as RangeCalendarHeadingPropsWithoutHTML, CalendarGridProps as RangeCalendarGridProps, CalendarGridPropsWithoutHTML as RangeCalendarGridPropsWithoutHTML, CalendarCellProps as RangeCalendarCellProps, CalendarCellPropsWithoutHTML as RangeCalendarCellPropsWithoutHTML, CalendarDayProps as RangeCalendarDayProps, CalendarDayPropsWithoutHTML as RangeCalendarDayPropsWithoutHTML, CalendarGridBodyProps as RangeCalendarGridBodyProps, CalendarGridBodyPropsWithoutHTML as RangeCalendarGridBodyPropsWithoutHTML, CalendarGridHeadProps as RangeCalendarGridHeadProps, CalendarGridHeadPropsWithoutHTML as RangeCalendarGridHeadPropsWithoutHTML, CalendarGridRowProps as RangeCalendarGridRowProps, CalendarGridRowPropsWithoutHTML as RangeCalendarGridRowPropsWithoutHTML, CalendarHeadCellProps as RangeCalendarHeadCellProps, CalendarHeadCellPropsWithoutHTML as RangeCalendarHeadCellPropsWithoutHTML, CalendarHeaderProps as RangeCalendarHeaderProps, CalendarHeaderPropsWithoutHTML as RangeCalendarHeaderPropsWithoutHTML, } from "../calendar/types.js";
+export type { CalendarPrevButtonProps as RangeCalendarPrevButtonProps, CalendarPrevButtonPropsWithoutHTML as RangeCalendarPrevButtonPropsWithoutHTML, CalendarNextButtonProps as RangeCalendarNextButtonProps, CalendarNextButtonPropsWithoutHTML as RangeCalendarNextButtonPropsWithoutHTML, CalendarHeadingProps as RangeCalendarHeadingProps, CalendarHeadingPropsWithoutHTML as RangeCalendarHeadingPropsWithoutHTML, CalendarGridProps as RangeCalendarGridProps, CalendarGridPropsWithoutHTML as RangeCalendarGridPropsWithoutHTML, CalendarCellProps as RangeCalendarCellProps, CalendarCellPropsWithoutHTML as RangeCalendarCellPropsWithoutHTML, CalendarDayProps as RangeCalendarDayProps, CalendarDayPropsWithoutHTML as RangeCalendarDayPropsWithoutHTML, CalendarGridBodyProps as RangeCalendarGridBodyProps, CalendarGridBodyPropsWithoutHTML as RangeCalendarGridBodyPropsWithoutHTML, CalendarGridHeadProps as RangeCalendarGridHeadProps, CalendarGridHeadPropsWithoutHTML as RangeCalendarGridHeadPropsWithoutHTML, CalendarGridRowProps as RangeCalendarGridRowProps, CalendarGridRowPropsWithoutHTML as RangeCalendarGridRowPropsWithoutHTML, CalendarHeadCellProps as RangeCalendarHeadCellProps, CalendarHeadCellPropsWithoutHTML as RangeCalendarHeadCellPropsWithoutHTML, CalendarHeaderProps as RangeCalendarHeaderProps, CalendarHeaderPropsWithoutHTML as RangeCalendarHeaderPropsWithoutHTML, CalendarMonthSelectProps as RangeCalendarMonthSelectProps, CalendarMonthSelectPropsWithoutHTML as RangeCalendarMonthSelectPropsWithoutHTML, CalendarYearSelectProps as RangeCalendarYearSelectProps, CalendarYearSelectPropsWithoutHTML as RangeCalendarYearSelectPropsWithoutHTML, } from "../calendar/types.js";

package/dist/bits/select/components/select-hidden-input.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import { useSelectHiddenInput } from "../select.svelte.js";
+	import type { HTMLInputAttributes } from "svelte/elements";
 	import HiddenInput from "../../utilities/hidden-input.svelte";
 
-	let { value = $bindable("") }: { value?: string } = $props();
+	let {
+		value = $bindable(""),
+		autocomplete,
+	}: { value?: string } & Omit<HTMLInputAttributes, "value"> = $props();
 
 	const hiddenInputState = useSelectHiddenInput({
 		value: box.with(() => value),
@@ -11,5 +15,5 @@
 </script>
 
 {#if hiddenInputState.shouldRender}
-	<HiddenInput {...hiddenInputState.props} bind:value />
+	<HiddenInput {...hiddenInputState.props} bind:value {autocomplete} />
 {/if}

package/dist/bits/select/components/select-hidden-input.svelte.d.ts

@@ -1,6 +1,7 @@
+import type { HTMLInputAttributes } from "svelte/elements";
 type $$ComponentProps = {
     value?: string;
-};
+} & Omit<HTMLInputAttributes, "value">;
 declare const SelectHiddenInput: import("svelte").Component<$$ComponentProps, {}, "value">;
 type SelectHiddenInput = ReturnType<typeof SelectHiddenInput>;
 export default SelectHiddenInput;

package/dist/bits/select/components/select.svelte

@@ -20,6 +20,7 @@
 		required = false,
 		items = [],
 		allowDeselect = false,
+		autocomplete,
 		children,
 	}: SelectRootProps = $props();
 
@@ -79,9 +80,9 @@
 {#if Array.isArray(rootState.opts.value.current)}
 	{#if rootState.opts.value.current.length}
 		{#each rootState.opts.value.current as item (item)}
-			<SelectHiddenInput value={item} />
+			<SelectHiddenInput value={item} {autocomplete} />
 		{/each}
 	{/if}
 {:else}
-	<SelectHiddenInput bind:value={rootState.opts.value.current as string} />
+	<SelectHiddenInput bind:value={rootState.opts.value.current as string} {autocomplete} />
 {/if}

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

@@ -5,6 +5,7 @@ import type { ArrowProps, ArrowPropsWithoutHTML } from "../utilities/arrow/types
 import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from "../../internal/types.js";
 import type { FloatingContentSnippetProps, StaticContentSnippetProps } from "../../shared/types.js";
+import type { HTMLInputAttributes } from "svelte/elements";
 export type SelectBaseRootPropsWithoutHTML = WithChildren<{
     /**
      * Whether the combobox is disabled.
@@ -74,6 +75,10 @@ export type SelectBaseRootPropsWithoutHTML = WithChildren<{
      * This is only applicable to `type="single"` selects/comboboxes.
      */
     allowDeselect?: boolean;
+    /**
+     * The autocomplete attribute to forward to the hidden input element.
+     */
+    autocomplete?: HTMLInputAttributes["autocomplete"];
 }>;
 export type SelectSingleRootPropsWithoutHTML = {
     /**

package/dist/internal/date-time/calendar-helpers.svelte.d.ts

@@ -181,7 +181,7 @@ export declare function getCalendarElementProps({ fullCalendarLabel, id, isInval
     readonly "data-disabled": "" | undefined;
     readonly "data-readonly": "" | undefined;
 };
-export type CalendarParts = "root" | "grid" | "cell" | "next-button" | "prev-button" | "day" | "grid-body" | "grid-head" | "grid-row" | "head-cell" | "header" | "heading";
+export type CalendarParts = "root" | "grid" | "cell" | "next-button" | "prev-button" | "day" | "grid-body" | "grid-head" | "grid-row" | "head-cell" | "header" | "heading" | "month-select" | "year-select";
 export declare function pickerOpenFocus(e: Event): void;
 export declare function getFirstNonDisabledDateInView(calendarRef: HTMLElement): DateValue | undefined;
 /**
@@ -198,5 +198,11 @@ export declare function useEnsureNonDisabledPlaceholder({ ref, placeholder, defa
     defaultPlaceholder: DateValue;
 }): void;
 export declare function getDateWithPreviousTime(date: DateValue | undefined, prev: DateValue | undefined): DateValue | undefined;
-export declare const calendarAttrs: import("../attrs.js").BitsAttrs<readonly ["root", "grid", "cell", "next-button", "prev-button", "day", "grid-body", "grid-head", "grid-row", "head-cell", "header", "heading"]>;
+export declare const calendarAttrs: import("../attrs.js").BitsAttrs<readonly ["root", "grid", "cell", "next-button", "prev-button", "day", "grid-body", "grid-head", "grid-row", "head-cell", "header", "heading", "month-select", "year-select"]>;
+type GetDefaultYearsProps = {
+    placeholderYear: number;
+    minValue: DateValue | undefined;
+    maxValue: DateValue | undefined;
+};
+export declare function getDefaultYears(opts: GetDefaultYearsProps): number[];
 export {};

package/dist/internal/date-time/calendar-helpers.svelte.js

@@ -309,21 +309,23 @@ export function getWeekdays({ months, formatter, weekdayFormat }) {
  * which determines the month to show in the calendar.
  */
 export function useMonthViewOptionsSync(props) {
-    const weekStartsOn = props.weekStartsOn.current;
-    const locale = props.locale.current;
-    const fixedWeeks = props.fixedWeeks.current;
-    const numberOfMonths = props.numberOfMonths.current;
-    untrack(() => {
-        const placeholder = props.placeholder.current;
-        if (!placeholder)
-            return;
-        const defaultMonthProps = {
-            weekStartsOn,
-            locale,
-            fixedWeeks,
-            numberOfMonths,
-        };
-        props.setMonths(createMonths({ ...defaultMonthProps, dateObj: placeholder }));
+    $effect(() => {
+        const weekStartsOn = props.weekStartsOn.current;
+        const locale = props.locale.current;
+        const fixedWeeks = props.fixedWeeks.current;
+        const numberOfMonths = props.numberOfMonths.current;
+        untrack(() => {
+            const placeholder = props.placeholder.current;
+            if (!placeholder)
+                return;
+            const defaultMonthProps = {
+                weekStartsOn,
+                locale,
+                fixedWeeks,
+                numberOfMonths,
+            };
+            props.setMonths(createMonths({ ...defaultMonthProps, dateObj: placeholder }));
+        });
     });
 }
 /**
@@ -529,5 +531,35 @@ export const calendarAttrs = createBitsAttrs({
         "head-cell",
         "header",
         "heading",
+        "month-select",
+        "year-select",
     ],
 });
+export function getDefaultYears(opts) {
+    const currentYear = new Date().getFullYear();
+    const latestYear = Math.max(opts.placeholderYear, currentYear);
+    // use minValue/maxValue as boundaries if provided, otherwise calculate default range
+    let minYear;
+    let maxYear;
+    if (opts.minValue) {
+        minYear = opts.minValue.year;
+    }
+    else {
+        // (111 years: latestYear - 100 to latestYear + 10)
+        const initialMinYear = latestYear - 100;
+        minYear =
+            opts.placeholderYear < initialMinYear ? opts.placeholderYear - 10 : initialMinYear;
+    }
+    if (opts.maxValue) {
+        maxYear = opts.maxValue.year;
+    }
+    else {
+        maxYear = latestYear + 10;
+    }
+    // ensure we have at least one year and minYear <= maxYear
+    if (minYear > maxYear) {
+        minYear = maxYear;
+    }
+    const totalYears = maxYear - minYear + 1;
+    return Array.from({ length: totalYears }, (_, i) => minYear + i);
+}

package/dist/internal/date-time/formatter.d.ts

@@ -1,7 +1,13 @@
 import { type DateValue } from "@internationalized/date";
 import type { HourCycle, TimeValue } from "../../shared/date/types.js";
+import type { ReadableBox } from "svelte-toolbelt";
 export type Formatter = ReturnType<typeof createFormatter>;
 export type TimeFormatter = ReturnType<typeof createTimeFormatter>;
+type CreateFormatterOptions = {
+    initialLocale: string;
+    monthFormat: ReadableBox<Intl.DateTimeFormatOptions["month"] | ((month: number) => string)>;
+    yearFormat: ReadableBox<Intl.DateTimeFormatOptions["year"] | ((year: number) => string)>;
+};
 /**
  * Creates a wrapper around the `DateFormatter`, which is
  * an improved version of the {@link Intl.DateTimeFormat} API,
@@ -10,7 +16,7 @@ export type TimeFormatter = ReturnType<typeof createTimeFormatter>;
  *
  * @see [DateFormatter](https://react-spectrum.adobe.com/internationalized/date/DateFormatter.html)
  */
-export declare function createFormatter(initialLocale: string): {
+export declare function createFormatter(opts: CreateFormatterOptions): {
     setLocale: (newLocale: string) => void;
     getLocale: () => string;
     fullMonth: (date: Date) => string;
@@ -32,3 +38,4 @@ export declare function createTimeFormatter(initialLocale: string): {
     dayPeriod: (date: Date, hourCycle?: HourCycle | undefined) => "AM" | "PM";
     selectedTime: (date: TimeValue) => string;
 };
+export {};

package/dist/internal/date-time/formatter.js

@@ -17,8 +17,8 @@ const defaultPartOptions = {
  *
  * @see [DateFormatter](https://react-spectrum.adobe.com/internationalized/date/DateFormatter.html)
  */
-export function createFormatter(initialLocale) {
-    let locale = initialLocale;
+export function createFormatter(opts) {
+    let locale = opts.initialLocale;
     function setLocale(newLocale) {
         locale = newLocale;
     }
@@ -42,7 +42,20 @@ export function createFormatter(initialLocale) {
         }
     }
     function fullMonthAndYear(date) {
-        return new DateFormatter(locale, { month: "long", year: "numeric" }).format(date);
+        if (typeof opts.monthFormat.current !== "function" &&
+            typeof opts.yearFormat.current !== "function") {
+            return new DateFormatter(locale, {
+                month: opts.monthFormat.current,
+                year: opts.yearFormat.current,
+            }).format(date);
+        }
+        const formattedMonth = typeof opts.monthFormat.current === "function"
+            ? opts.monthFormat.current(date.getMonth() + 1)
+            : new DateFormatter(locale, { month: opts.monthFormat.current }).format(date);
+        const formattedYear = typeof opts.yearFormat.current === "function"
+            ? opts.yearFormat.current(date.getFullYear())
+            : new DateFormatter(locale, { year: opts.yearFormat.current }).format(date);
+        return `${formattedMonth} ${formattedYear}`;
     }
     function fullMonth(date) {
         return new DateFormatter(locale, { month: "long" }).format(date);

package/dist/shared/attributes.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, HTMLImgAttributes, HTMLInputAttributes, HTMLLabelAttributes, HTMLLiAttributes, HTMLTableAttributes, HTMLTdAttributes, HTMLThAttributes, SVGAttributes } from "svelte/elements";
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, HTMLImgAttributes, HTMLInputAttributes, HTMLLabelAttributes, HTMLLiAttributes, HTMLSelectAttributes, HTMLTableAttributes, HTMLTdAttributes, HTMLThAttributes, SVGAttributes } from "svelte/elements";
 export type BitsDivAttributes = HTMLAttributes<HTMLDivElement>;
 export type BitsSpanAttributes = HTMLAttributes<HTMLSpanElement>;
 export type BitsHeadingAttributes = HTMLAttributes<HTMLHeadingElement>;
@@ -7,6 +7,7 @@ export type BitsElementAttributes = HTMLAttributes<HTMLElement>;
 export type BitsTableSectionAttributes = HTMLAttributes<HTMLTableSectionElement>;
 export type BitsTableRowAttributes = HTMLAttributes<HTMLTableRowElement>;
 export type BitsSVGElementAttributes = SVGAttributes<SVGElement>;
+export type BitsSelectAttributes = HTMLSelectAttributes;
 /**
  * We override the `id` prop type to not allow it to be `null`. We rely on the
  * `id` heavily in the internals of Bits UI for node references. We also override
@@ -35,4 +36,5 @@ export type BitsPrimitiveTbodyAttributes = BitsPrimitive<BitsTableSectionAttribu
 export type BitsPrimitiveTrAttributes = BitsPrimitive<BitsTableRowAttributes>;
 export type BitsPrimitiveTheadAttributes = BitsPrimitive<BitsTableSectionAttributes>;
 export type BitsPrimitiveHeaderAttributes = BitsPrimitive<BitsElementAttributes>;
+export type BitsPrimitiveSelectAttributes = BitsPrimitive<BitsSelectAttributes>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",