bits-ui 1.0.0-next.59 → 1.0.0-next.60

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

@@ -379,7 +379,7 @@ export class DateFieldRootState {
                 const next = castCb(pVal);
                 this.states.hour.updating = next;
                 if (next !== null && prev.dayPeriod !== null) {
-                    const dayPeriod = this.formatter.dayPeriod(toDate(dateRef.set({ hour: Number.parseInt(next) })));
+                    const dayPeriod = this.formatter.dayPeriod(toDate(dateRef.set({ hour: Number.parseInt(next) })), this.hourCycle.current);
                     if (dayPeriod === "AM" || dayPeriod === "PM") {
                         prev.dayPeriod = dayPeriod;
                     }
@@ -1278,6 +1278,10 @@ class DateFieldHourSegmentState {
                     this.#announcer.announce("12");
                     return "12";
                 }
+                if (next === 0 && this.#root.hourCycle.current === 24) {
+                    this.#announcer.announce("00");
+                    return "00";
+                }
                 this.#announcer.announce(next);
                 return `${next}`;
             });
@@ -1300,6 +1304,10 @@ class DateFieldHourSegmentState {
                     this.#announcer.announce("12");
                     return "12";
                 }
+                if (next === 0 && this.#root.hourCycle.current === 24) {
+                    this.#announcer.announce("00");
+                    return "00";
+                }
                 this.#announcer.announce(next);
                 return `${next}`;
             });
@@ -1307,10 +1315,12 @@ class DateFieldHourSegmentState {
         }
         if (isNumberString(e.key)) {
             const num = Number.parseInt(e.key);
-            const max = "dayPeriod" in this.#root.segmentValues &&
-                this.#root.segmentValues.dayPeriod !== null
-                ? 12
-                : 23;
+            const max = this.#root.hourCycle.current === 24
+                ? 23
+                : "dayPeriod" in this.#root.segmentValues &&
+                    this.#root.segmentValues.dayPeriod !== null
+                    ? 12
+                    : 23;
             const maxStart = Math.floor(max / 10);
             let moveToNext = false;
             const numIsZero = num === 0;
@@ -1385,6 +1395,15 @@ class DateFieldHourSegmentState {
                         this.#root.states.hour.lastKeyZero = false;
                         return `0${num}`;
                     }
+                    /**
+                     * If the new number is 0 and the hour cycle is set to 24, then we move
+                     * to the next segment, returning the new number with a leading 0.
+                     */
+                    if (num === 0 && this.#root.hourCycle.current === 24) {
+                        moveToNext = true;
+                        this.#root.states.hour.lastKeyZero = false;
+                        return `0${num}`;
+                    }
                     /**
                      * If the new number is 0, then we simply return the previous value, since
                      * they didn't actually type a new number.

package/dist/bits/radio-group/radio-group.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler } from "svelte/elements";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { WithRefProps } from "../../internal/types.js";
 import type { Orientation } from "../../shared/index.js";
@@ -56,10 +57,9 @@ declare class RadioGroupItemState {
         readonly type: "button";
         readonly role: "radio";
         readonly tabindex: number;
-        readonly onpointerdown: (e: PointerEvent) => void;
-        readonly onpointerup: (e: PointerEvent) => void;
-        readonly onkeydown: (e: KeyboardEvent) => void;
-        readonly onfocus: () => void;
+        readonly onkeydown: KeyboardEventHandler<HTMLButtonElement>;
+        readonly onfocus: FocusEventHandler<HTMLButtonElement>;
+        readonly onclick: MouseEventHandler<HTMLButtonElement>;
     };
 }
 declare class RadioGroupInputState {

package/dist/bits/radio-group/radio-group.svelte.js

@@ -74,21 +74,11 @@ class RadioGroupItemState {
             this.#tabIndex = this.#root.rovingFocusGroup.getTabIndex(this.#ref.current);
         });
     }
-    #onpointerdown = (e) => {
+    #onclick = (e) => {
         if (this.#disabled.current)
             return;
-        if (e.pointerType === "touch")
-            return e.preventDefault();
         this.#root.setValue(this.#value.current);
     };
-    #onpointerup = (e) => {
-        if (this.#disabled.current)
-            return;
-        if (e.pointerType === "touch") {
-            e.preventDefault();
-            this.#root.setValue(this.#value.current);
-        }
-    };
     #onfocus = () => {
         if (!this.#root.hasValue)
             return;
@@ -119,10 +109,9 @@ class RadioGroupItemState {
         role: "radio",
         tabindex: this.#tabIndex,
         //
-        onpointerdown: this.#onpointerdown,
-        onpointerup: this.#onpointerup,
         onkeydown: this.#onkeydown,
         onfocus: this.#onfocus,
+        onclick: this.#onclick,
     }));
 }
 //

package/dist/internal/date-time/field/helpers.js

@@ -54,7 +54,7 @@ function createContentObj(props) {
             }
             else if (!isNull(value) && !isNull(intValue)) {
                 const formatted = formatter.part(dateRef.set({ [part]: value }), part, {
-                    hourCycle: props.hourCycle === 24 ? "h24" : undefined,
+                    hourCycle: props.hourCycle === 24 ? "h23" : undefined,
                 });
                 /**
                  * If we're operating in a 12 hour clock and the part is an hour, we handle
@@ -179,7 +179,7 @@ function getOptsByGranularity(granularity, hourCycle) {
         minute: "2-digit",
         second: "2-digit",
         timeZoneName: "short",
-        hourCycle: hourCycle === 24 ? "h24" : undefined,
+        hourCycle: hourCycle === 24 ? "h23" : undefined,
         hour12: hourCycle === 24 ? false : undefined,
     };
     if (granularity === "day") {

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

@@ -1,4 +1,5 @@
 import { type DateValue } from "@internationalized/date";
+import type { HourCycle } from "../../shared/date/types.js";
 export type Formatter = ReturnType<typeof createFormatter>;
 /**
  * Creates a wrapper around the `DateFormatter`, which is
@@ -17,7 +18,7 @@ export declare function createFormatter(initialLocale: string): {
     toParts: (date: DateValue, options?: Intl.DateTimeFormatOptions) => Intl.DateTimeFormatPart[];
     custom: (date: Date, options: Intl.DateTimeFormatOptions) => string;
     part: (dateObj: DateValue, type: Intl.DateTimeFormatPartTypes, options?: Intl.DateTimeFormatOptions) => string;
-    dayPeriod: (date: Date) => "AM" | "PM";
+    dayPeriod: (date: Date, hourCycle?: HourCycle | undefined) => "AM" | "PM";
     selectedDate: (date: DateValue, includeTime?: boolean) => string;
     dayOfWeek: (date: Date, length?: Intl.DateTimeFormatOptions["weekday"]) => string;
 };

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

@@ -63,10 +63,11 @@ export function createFormatter(initialLocale) {
     function dayOfWeek(date, length = "narrow") {
         return new DateFormatter(locale, { weekday: length }).format(date);
     }
-    function dayPeriod(date) {
+    function dayPeriod(date, hourCycle = undefined) {
         const parts = new DateFormatter(locale, {
             hour: "numeric",
             minute: "numeric",
+            hourCycle: hourCycle === 24 ? "h23" : undefined,
         }).formatToParts(date);
         const value = parts.find((p) => p.type === "dayPeriod")?.value;
         if (value === "PM") {

package/package.json

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