bits-ui 2.4.1 → 2.6.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/command/command.svelte.d.ts

@@ -1,12 +1,20 @@
 import type { CommandState } from "./types.js";
 import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
+type GridItem = {
+    index: number;
+    firstRowOfGroup: boolean;
+    ref: HTMLElement;
+};
+type ItemsGrid = GridItem[][];
 type CommandRootStateProps = WithRefProps<ReadableBoxedValues<{
     filter: (value: string, search: string, keywords?: string[]) => number;
     shouldFilter: boolean;
     loop: boolean;
     vimBindings: boolean;
+    columns: number | null;
     disablePointerSelection: boolean;
+    disableInitialScroll: boolean;
     onStateChange?: (state: Readonly<CommandState>) => void;
 }> & WritableBoxedValues<{
     value: string;
@@ -28,7 +36,7 @@ declare class CommandRootState {
     labelNode: HTMLElement | null;
     commandState: CommandState;
     _commandState: CommandState;
-    setState<K extends keyof CommandState>(key: K, value: CommandState[K], opts?: boolean): void;
+    setState<K extends keyof CommandState>(key: K, value: CommandState[K], preventScroll?: boolean): void;
     constructor(opts: CommandRootStateProps);
     /**
      * Sets current value and triggers re-render if cleared.
@@ -43,6 +51,20 @@ declare class CommandRootState {
      * @remarks Exposed for direct item access and bound checking
      */
     getValidItems(): HTMLElement[];
+    /**
+     * Gets all visible command items.
+     *
+     * @returns Array of valid item elements
+     * @remarks Exposed for direct item access and bound checking
+     */
+    getVisibleItems(): HTMLElement[];
+    /** Returns all visible items in a matrix structure
+     *
+     * @remarks Returns empty if the command isn't configured as a grid
+     *
+     * @returns
+     */
+    get itemsGrid(): ItemsGrid;
     /**
      * Sets selection to item at specified index in valid items array.
      * If index is out of bounds, does nothing.
@@ -80,7 +102,7 @@ declare class CommandRootState {
      * // get all valid items
      * const items = getValidItems()
      */
-    updateSelectedByItem(change: 1 | -1): void;
+    updateSelectedByItem(change: number): void;
     /**
      * Moves selection to the first valid item in the next/previous group.
      * If no group is found, falls back to selecting the next/previous item globally.
@@ -120,6 +142,7 @@ declare class CommandRootState {
      * @returns Cleanup function
      */
     registerGroup(id: string): () => void;
+    get isGrid(): boolean;
     onkeydown(e: BitsKeyboardEvent): void;
     props: {
         readonly id: string;
@@ -230,6 +253,7 @@ declare class CommandItemState {
         readonly "data-disabled": "" | undefined;
         readonly "data-selected": "" | undefined;
         readonly "data-value": string;
+        readonly "data-group": string | undefined;
         readonly role: "option";
         readonly onpointermove: (_: BitsPointerEvent) => void;
         readonly onclick: (_: BitsMouseEvent) => void;