bits-ui 1.2.0 → 1.3.0

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

@@ -41,13 +41,6 @@ export declare class DateRangeFieldRootState {
     startValueComplete: boolean;
     endValueComplete: boolean;
     rangeComplete: boolean;
-    mergedValues: {
-        start: undefined;
-        end: undefined;
-    } | {
-        start: DateValue;
-        end: DateValue;
-    };
     constructor(opts: DateRangeFieldRootStateProps);
     validationStatus: false | {
         readonly reason: "custom";

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

@@ -1,6 +1,5 @@
-import { untrack } from "svelte";
 import { box, onDestroyEffect, useRefById } from "svelte-toolbelt";
-import { Context } from "runed";
+import { Context, watch } from "runed";
 import { DateFieldInputState, useDateFieldRoot } from "../date-field/date-field.svelte.js";
 import { useId } from "../../internal/use-id.js";
 import { getDataDisabled, getDataInvalid } from "../../internal/attrs.js";
@@ -22,21 +21,6 @@ export class DateRangeFieldRootState {
     startValueComplete = $derived.by(() => this.opts.startValue.current !== undefined);
     endValueComplete = $derived.by(() => this.opts.endValue.current !== undefined);
     rangeComplete = $derived(this.startValueComplete && this.endValueComplete);
-    mergedValues = $derived.by(() => {
-        if (this.opts.startValue.current === undefined ||
-            this.opts.endValue.current === undefined) {
-            return {
-                start: undefined,
-                end: undefined,
-            };
-        }
-        else {
-            return {
-                start: this.opts.startValue.current,
-                end: this.opts.endValue.current,
-            };
-        }
-    });
     constructor(opts) {
         this.opts = opts;
         this.formatter = createFormatter(this.opts.locale.current);
@@ -54,48 +38,65 @@ export class DateRangeFieldRootState {
                 return;
             this.formatter.setLocale(this.opts.locale.current);
         });
-        $effect(() => {
-            const startValue = this.opts.value.current.start;
-            untrack(() => {
-                if (startValue)
-                    this.opts.placeholder.current = startValue;
-            });
-        });
-        $effect(() => {
-            const endValue = this.opts.value.current.end;
-            untrack(() => {
-                if (endValue)
-                    this.opts.placeholder.current = endValue;
-            });
+        /**
+         * Synchronize the start and end values with the `value` in case
+         * it is updated externally.
+         */
+        watch(() => this.opts.value.current, (value) => {
+            if (value.start && value.end) {
+                this.opts.startValue.current = value.start;
+                this.opts.endValue.current = value.end;
+            }
+            else if (value.start) {
+                this.opts.startValue.current = value.start;
+                this.opts.endValue.current = undefined;
+            }
+            else if (value.start === undefined && value.end === undefined) {
+                this.opts.startValue.current = undefined;
+                this.opts.endValue.current = undefined;
+            }
         });
         /**
-         * Sync values set programatically with the `startValue` and `endValue`
+         * Synchronize the placeholder value with the current start value
          */
-        $effect(() => {
-            const value = this.opts.value.current;
-            untrack(() => {
-                if (value.start !== undefined && value.start !== this.opts.startValue.current) {
-                    this.#setStartValue(value.start);
-                }
-                if (value.end !== undefined && value.end !== this.opts.endValue.current) {
-                    this.#setEndValue(value.end);
-                }
-            });
+        watch(() => this.opts.value.current, (value) => {
+            const startValue = value.start;
+            if (startValue && this.opts.placeholder.current !== startValue) {
+                this.opts.placeholder.current = startValue;
+            }
         });
-        // TODO: Handle description element
-        $effect(() => {
-            const placeholder = untrack(() => this.opts.placeholder.current);
-            const startValue = untrack(() => this.opts.startValue.current);
-            if (this.startValueComplete && placeholder !== startValue) {
-                untrack(() => {
-                    if (startValue) {
-                        this.opts.placeholder.current = startValue;
+        watch([() => this.opts.startValue.current, () => this.opts.endValue.current], ([startValue, endValue]) => {
+            if (this.opts.value.current &&
+                this.opts.value.current.start === startValue &&
+                this.opts.value.current.end === endValue) {
+                return;
+            }
+            if (startValue && endValue) {
+                this.#updateValue((prev) => {
+                    if (prev.start === startValue && prev.end === endValue) {
+                        return prev;
+                    }
+                    if (isBefore(endValue, startValue)) {
+                        const start = startValue;
+                        const end = endValue;
+                        this.#setStartValue(end);
+                        this.#setEndValue(start);
+                        return { start: endValue, end: startValue };
+                    }
+                    else {
+                        return {
+                            start: startValue,
+                            end: endValue,
+                        };
                     }
                 });
             }
-        });
-        $effect(() => {
-            this.opts.value.current = this.mergedValues;
+            else if (this.opts.value.current &&
+                this.opts.value.current.start &&
+                this.opts.value.current.end) {
+                this.opts.value.current.start = undefined;
+                this.opts.value.current.end = undefined;
+            }
         });
     }
     validationStatus = $derived.by(() => {
@@ -134,6 +135,11 @@ export class DateRangeFieldRootState {
             return false;
         return true;
     });
+    #updateValue(cb) {
+        const value = this.opts.value.current;
+        const newValue = cb(value);
+        this.opts.value.current = newValue;
+    }
     #setStartValue(value) {
         this.opts.startValue.current = value;
     }

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

@@ -1,5 +1,5 @@
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
 type DialogVariant = "alert-dialog" | "dialog";
 type DialogRootStateProps = WritableBoxedValues<{
     open: boolean;
@@ -42,7 +42,6 @@ declare class DialogTriggerState {
     readonly root: DialogRootState;
     constructor(opts: DialogTriggerStateProps, root: DialogRootState);
     onclick(e: BitsMouseEvent): void;
-    onpointerdown(e: BitsPointerEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
     props: {
         readonly "data-state": "open" | "closed";
@@ -50,7 +49,6 @@ declare class DialogTriggerState {
         readonly "aria-haspopup": "dialog";
         readonly "aria-expanded": "true" | "false";
         readonly "aria-controls": string | undefined;
-        readonly onpointerdown: (e: BitsPointerEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly onclick: (e: BitsMouseEvent) => void;
         readonly disabled: true | undefined;

package/dist/bits/dialog/dialog.svelte.js

@@ -51,9 +51,6 @@ class DialogTriggerState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        this.onclick = this.onclick.bind(this);
-        this.onpointerdown = this.onpointerdown.bind(this);
-        this.onkeydown = this.onkeydown.bind(this);
         useRefById({
             ...opts,
             onRefChange: (node) => {
@@ -62,7 +59,6 @@ class DialogTriggerState {
             },
         });
         this.onclick = this.onclick.bind(this);
-        this.onpointerdown = this.onpointerdown.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
     }
     onclick(e) {
@@ -72,15 +68,6 @@ class DialogTriggerState {
             return;
         this.root.handleOpen();
     }
-    onpointerdown(e) {
-        if (this.opts.disabled.current)
-            return;
-        if (e.button > 0)
-            return;
-        // by default, it will attempt to focus this trigger on pointerdown
-        // since this also opens the dialog we want to prevent that behavior
-        e.preventDefault();
-    }
     onkeydown(e) {
         if (this.opts.disabled.current)
             return;
@@ -95,7 +82,6 @@ class DialogTriggerState {
         "aria-expanded": getAriaExpanded(this.root.opts.open.current),
         "aria-controls": this.root.contentId,
         [this.root.attrs.trigger]: "",
-        onpointerdown: this.onpointerdown,
         onkeydown: this.onkeydown,
         onclick: this.onclick,
         disabled: this.opts.disabled.current ? true : undefined,

package/dist/bits/index.d.ts

@@ -18,6 +18,7 @@ export { DropdownMenu } from "./dropdown-menu/index.js";
 export { Label } from "./label/index.js";
 export { LinkPreview } from "./link-preview/index.js";
 export { Menubar } from "./menubar/index.js";
+export { Meter } from "./meter/index.js";
 export { NavigationMenu } from "./navigation-menu/index.js";
 export { Pagination } from "./pagination/index.js";
 export { PinInput } from "./pin-input/index.js";

package/dist/bits/index.js

@@ -18,6 +18,7 @@ export { DropdownMenu } from "./dropdown-menu/index.js";
 export { Label } from "./label/index.js";
 export { LinkPreview } from "./link-preview/index.js";
 export { Menubar } from "./menubar/index.js";
+export { Meter } from "./meter/index.js";
 export { NavigationMenu } from "./navigation-menu/index.js";
 export { Pagination } from "./pagination/index.js";
 export { PinInput } from "./pin-input/index.js";

package/dist/bits/meter/components/meter.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { MeterRootProps } from "../types.js";
+	import { useMeterRootState } from "../meter.svelte.js";
+	import { useId } from "../../../internal/use-id.js";
+
+	let {
+		child,
+		children,
+		value = 0,
+		max = 100,
+		min = 0,
+		id = useId(),
+		ref = $bindable(null),
+		...restProps
+	}: MeterRootProps = $props();
+
+	const rootState = useMeterRootState({
+		value: box.with(() => value),
+		max: box.with(() => max),
+		min: box.with(() => min),
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, rootState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/bits/meter/components/meter.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { MeterRootProps } from "../types.js";
+declare const Meter: import("svelte").Component<MeterRootProps, {}, "ref">;
+type Meter = ReturnType<typeof Meter>;
+export default Meter;

package/dist/bits/meter/exports.d.ts

@@ -0,0 +1,2 @@
+export { default as Root } from "./components/meter.svelte";
+export type { MeterRootProps as RootProps } from "./types.js";

package/dist/bits/meter/exports.js

@@ -0,0 +1 @@
+export { default as Root } from "./components/meter.svelte";

package/dist/bits/meter/index.d.ts

@@ -0,0 +1 @@
+export * as Meter from "./exports.js";

package/dist/bits/meter/index.js

@@ -0,0 +1 @@
+export * as Meter from "./exports.js";

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

@@ -0,0 +1,24 @@
+import type { ReadableBoxedValues } from "../../internal/box.svelte.js";
+import type { WithRefProps } from "../../internal/types.js";
+type MeterRootStateProps = WithRefProps<ReadableBoxedValues<{
+    value: number;
+    max: number;
+    min: number;
+}>>;
+declare class MeterRootState {
+    readonly opts: MeterRootStateProps;
+    constructor(opts: MeterRootStateProps);
+    props: {
+        readonly role: "meter";
+        readonly value: number;
+        readonly "aria-valuemin": number;
+        readonly "aria-valuemax": number;
+        readonly "aria-valuenow": number;
+        readonly "data-value": number;
+        readonly "data-max": number;
+        readonly "data-min": number;
+        readonly "data-meter-root": "";
+    };
+}
+export declare function useMeterRootState(props: MeterRootStateProps): MeterRootState;
+export {};

package/dist/bits/meter/meter.svelte.js

@@ -0,0 +1,23 @@
+import { useRefById } from "svelte-toolbelt";
+const METER_ROOT_ATTR = "data-meter-root";
+class MeterRootState {
+    opts;
+    constructor(opts) {
+        this.opts = opts;
+        useRefById(opts);
+    }
+    props = $derived.by(() => ({
+        role: "meter",
+        value: this.opts.value.current,
+        "aria-valuemin": this.opts.min.current,
+        "aria-valuemax": this.opts.max.current,
+        "aria-valuenow": this.opts.value.current,
+        "data-value": this.opts.value.current,
+        "data-max": this.opts.max.current,
+        "data-min": this.opts.min.current,
+        [METER_ROOT_ATTR]: "",
+    }));
+}
+export function useMeterRootState(props) {
+    return new MeterRootState(props);
+}

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

@@ -0,0 +1,23 @@
+import type { WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+export type MeterRootPropsWithoutHTML = WithChild<{
+    /**
+     * The current value of the meter.
+     *
+     * @default 0
+     */
+    value?: number;
+    /**
+     * The maximum value of the meter.
+     *
+     * @default 100
+     */
+    max?: number;
+    /**
+     * The minimum value of the meter.
+     *
+     * @default 0
+     */
+    min?: number;
+}>;
+export type MeterRootProps = MeterRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MeterRootPropsWithoutHTML>;

package/dist/bits/meter/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -50,6 +50,13 @@ class RadioGroupItemState {
             id: this.opts.id,
             ref: this.opts.ref,
         });
+        if (this.opts.value.current === this.root.opts.value.current) {
+            this.root.rovingFocusGroup.setCurrentTabStopId(this.opts.id.current);
+            this.#tabIndex = 0;
+        }
+        else if (!this.root.opts.value.current) {
+            this.#tabIndex = 0;
+        }
         $effect(() => {
             this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);
         });
@@ -77,7 +84,7 @@ class RadioGroupItemState {
         }
         this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e, true);
     }
-    #tabIndex = $state(0);
+    #tabIndex = $state(-1);
     snippetProps = $derived.by(() => ({ checked: this.#isChecked }));
     props = $derived.by(() => ({
         id: this.opts.id.current,

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
 export * from "./shared/index.js";
 export type * from "./shared/index.js";
 export * from "./types.js";

package/dist/index.js

@@ -1,3 +1,3 @@
-export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
 export * from "./shared/index.js";
 export * from "./types.js";

package/dist/types.d.ts

@@ -19,6 +19,7 @@ export type * from "./bits/label/types.js";
 export type * from "./bits/link-preview/types.js";
 export type * from "./bits/select/types.js";
 export type * from "./bits/menubar/types.js";
+export type * from "./bits/meter/types.js";
 export type * from "./bits/navigation-menu/types.js";
 export type * from "./bits/pagination/types.js";
 export type * from "./bits/pin-input/types.js";

package/package.json

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