bits-ui 1.3.16 → 1.3.18

package/dist/bits/avatar/avatar.svelte.d.ts

@@ -55,10 +55,13 @@ declare class AvatarFallbackState {
     readonly opts: AvatarFallbackStateProps;
     readonly root: AvatarRootState;
     constructor(opts: AvatarFallbackStateProps, root: AvatarRootState);
+    style: {
+        display: string;
+    } | undefined;
     props: {
         readonly style: {
-            readonly display: "none" | undefined;
-        };
+            display: string;
+        } | undefined;
         readonly "data-status": AvatarImageLoadingStatus;
         readonly "data-avatar-fallback": "";
     };

package/dist/bits/avatar/avatar.svelte.js

@@ -77,10 +77,9 @@ class AvatarFallbackState {
         this.root = root;
         useRefById(opts);
     }
+    style = $derived.by(() => this.root.opts.loadingStatus.current === "loaded" ? { display: "none" } : undefined);
     props = $derived.by(() => ({
-        style: {
-            display: this.root.opts.loadingStatus.current === "loaded" ? "none" : undefined,
-        },
+        style: this.style,
         "data-status": this.root.opts.loadingStatus.current,
         [AVATAR_FALLBACK_ATTR]: "",
     }));

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

@@ -138,6 +138,7 @@ declare class CalendarCellState {
         readonly "data-focused": "" | undefined;
         readonly "data-selected": "" | undefined;
         readonly "data-value": string;
+        readonly "data-type": string;
         readonly "data-disabled": "" | undefined;
     };
     props: {
@@ -148,6 +149,7 @@ declare class CalendarCellState {
         readonly "data-focused": "" | undefined;
         readonly "data-selected": "" | undefined;
         readonly "data-value": string;
+        readonly "data-type": string;
         readonly "data-disabled": "" | undefined;
         readonly id: string;
         readonly role: "gridcell";
@@ -179,6 +181,7 @@ declare class CalendarDayState {
         readonly "data-focused": "" | undefined;
         readonly "data-selected": "" | undefined;
         readonly "data-value": string;
+        readonly "data-type": string;
         readonly "data-disabled": "" | undefined;
         readonly id: string;
         readonly role: "button";

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

@@ -8,7 +8,7 @@ import { useId } from "../../internal/use-id.js";
 import { getAnnouncer } from "../../internal/date-time/announcer.js";
 import { createFormatter } from "../../internal/date-time/formatter.js";
 import { createAccessibleHeading, createMonths, getCalendarElementProps, getCalendarHeadingValue, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useEnsureNonDisabledPlaceholder, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
-import { isBefore, toDate } from "../../internal/date-time/utils.js";
+import { getDateValueType, isBefore, toDate } from "../../internal/date-time/utils.js";
 export class CalendarRootState {
     opts;
     months = $state([]);
@@ -429,6 +429,7 @@ class CalendarCellState {
         "data-focused": this.isFocusedDate ? "" : undefined,
         "data-selected": getDataSelected(this.isSelectedDate),
         "data-value": this.opts.date.current.toString(),
+        "data-type": getDateValueType(this.opts.date.current),
         "data-disabled": getDataDisabled(this.isDisabled ||
             (this.isOutsideMonth && this.root.opts.disableDaysOutsideMonth.current)),
     }));

package/dist/bits/pagination/pagination.svelte.js

@@ -19,7 +19,7 @@ class PaginationRootState {
     range = $derived.by(() => {
         const start = (this.opts.page.current - 1) * this.opts.perPage.current;
         const end = Math.min(start + this.opts.perPage.current, this.opts.count.current);
-        return { start, end };
+        return { start: start + 1, end };
     });
     pages = $derived.by(() => getPageItems({
         page: this.opts.page.current,

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

@@ -138,6 +138,7 @@ export declare class RangeCalendarCellState {
         readonly "data-highlighted": "" | undefined;
         readonly "data-selected": "" | undefined;
         readonly "data-value": string;
+        readonly "data-type": string;
         readonly "data-disabled": "" | undefined;
     };
     props: {
@@ -151,6 +152,7 @@ export declare class RangeCalendarCellState {
         readonly "data-highlighted": "" | undefined;
         readonly "data-selected": "" | undefined;
         readonly "data-value": string;
+        readonly "data-type": string;
         readonly "data-disabled": "" | undefined;
         readonly id: string;
         readonly role: "gridcell";
@@ -189,6 +191,7 @@ declare class RangeCalendarDayState {
         readonly "data-highlighted": "" | undefined;
         readonly "data-selected": "" | undefined;
         readonly "data-value": string;
+        readonly "data-type": string;
         readonly "data-disabled": "" | undefined;
         readonly id: string;
         readonly role: "button";

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

@@ -7,7 +7,7 @@ import { getAriaDisabled, getAriaSelected, getDataDisabled, getDataSelected, get
 import { getAnnouncer } from "../../internal/date-time/announcer.js";
 import { createFormatter } from "../../internal/date-time/formatter.js";
 import { createMonths, getCalendarElementProps, getCalendarHeadingValue, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useEnsureNonDisabledPlaceholder, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
-import { areAllDaysBetweenValid, isAfter, isBefore, isBetweenInclusive, toDate, } from "../../internal/date-time/utils.js";
+import { areAllDaysBetweenValid, getDateValueType, isAfter, isBefore, isBetweenInclusive, toDate, } from "../../internal/date-time/utils.js";
 export class RangeCalendarRootState {
     opts;
     months = $state([]);
@@ -466,6 +466,7 @@ export class RangeCalendarCellState {
         "data-highlighted": this.isHighlighted ? "" : undefined,
         "data-selected": getDataSelected(this.isSelectedDate),
         "data-value": this.opts.date.current.toString(),
+        "data-type": getDateValueType(this.opts.date.current),
         "data-disabled": getDataDisabled(this.isDisabled ||
             (this.isOutsideMonth && this.root.opts.disableDaysOutsideMonth.current)),
     }));

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

@@ -1,4 +1,4 @@
-import { CalendarDate, type DateValue } from "@internationalized/date";
+import { type DateValue } from "@internationalized/date";
 import { type ReadableBox, type WritableBox } from "svelte-toolbelt";
 import type { Formatter } from "./formatter.js";
 import type { DateMatcher, Month } from "../../shared/index.js";
@@ -183,7 +183,7 @@ export declare function getCalendarElementProps({ fullCalendarLabel, id, isInval
 };
 export type CalendarParts = "root" | "grid" | "cell" | "next-button" | "prev-button" | "day" | "grid-body" | "grid-head" | "grid-row" | "head-cell" | "header" | "heading";
 export declare function pickerOpenFocus(e: Event): void;
-export declare function getFirstNonDisabledDateInView(calendarRef: HTMLElement): CalendarDate | undefined;
+export declare function getFirstNonDisabledDateInView(calendarRef: HTMLElement): DateValue | undefined;
 /**
  * Ensures the placeholder is not set to a disabled date,
  * which would prevent the user from entering the Calendar

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

@@ -1,7 +1,7 @@
-import { CalendarDate, endOfMonth, isSameDay, isSameMonth, parseDate, startOfMonth, } from "@internationalized/date";
+import { endOfMonth, isSameDay, isSameMonth, startOfMonth, } from "@internationalized/date";
 import { afterTick, styleToString } from "svelte-toolbelt";
 import { untrack } from "svelte";
-import { getDaysInMonth, getLastFirstDayOfWeek, getNextLastDayOfWeek, isAfter, isBefore, parseStringToDateValue, toDate, } from "./utils.js";
+import { getDaysInMonth, getLastFirstDayOfWeek, getNextLastDayOfWeek, isAfter, isBefore, parseAnyDateValue, parseStringToDateValue, toDate, } from "./utils.js";
 import { getDataDisabled, getDataInvalid, getDataReadonly } from "../attrs.js";
 import { chunk, isValidIndex } from "../arrays.js";
 import { isBrowser, isHTMLElement } from "../is.js";
@@ -450,10 +450,12 @@ export function getFirstNonDisabledDateInView(calendarRef) {
     const daysInView = Array.from(calendarRef.querySelectorAll("[data-bits-day]:not([aria-disabled=true])"));
     if (daysInView.length === 0)
         return;
-    const value = daysInView[0]?.getAttribute("data-value");
-    if (!value)
+    const element = daysInView[0];
+    const value = element?.getAttribute("data-value");
+    const type = element?.getAttribute("data-type");
+    if (!value || !type)
         return;
-    return parseDate(value);
+    return parseAnyDateValue(value, type);
 }
 /**
  * Ensures the placeholder is not set to a disabled date,

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

@@ -29,6 +29,8 @@ export declare function parseStringToDateValue(dateStr: string, referenceVal: Da
  * If no timezone is provided, the date will be converted to the local timezone.
  */
 export declare function toDate(dateValue: DateValue, tz?: string): Date;
+export declare function getDateValueType(date: DateValue): string;
+export declare function parseAnyDateValue(value: string, type: string): DateValue;
 export declare function isZonedDateTime(dateValue: DateValue): dateValue is ZonedDateTime;
 export declare function hasTime(dateValue: DateValue): dateValue is CalendarDateTime | ZonedDateTime;
 /**

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

@@ -70,6 +70,27 @@ export function toDate(dateValue, tz = getLocalTimeZone()) {
         return dateValue.toDate(tz);
     }
 }
+export function getDateValueType(date) {
+    if (date instanceof CalendarDate)
+        return "date";
+    if (date instanceof CalendarDateTime)
+        return "datetime";
+    if (date instanceof ZonedDateTime)
+        return "zoneddatetime";
+    throw new Error("Unknown date type");
+}
+export function parseAnyDateValue(value, type) {
+    switch (type) {
+        case "date":
+            return parseDate(value);
+        case "datetime":
+            return parseDateTime(value);
+        case "zoneddatetime":
+            return parseZonedDateTime(value);
+        default:
+            throw new Error(`Unknown date type: ${type}`);
+    }
+}
 function isCalendarDateTime(dateValue) {
     return dateValue instanceof CalendarDateTime;
 }

package/package.json

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