@johly/bits-ui 2.18.1

package/dist/bits/popover/popover.svelte.js

@@ -0,0 +1,404 @@
+import { attachRef, boxWith, DOMContext, } from "svelte-toolbelt";
+import { Context, watch } from "runed";
+import { kbd } from "../../internal/kbd.js";
+import { createBitsAttrs, boolToStr, getDataOpenClosed, getDataTransitionAttrs, } from "../../internal/attrs.js";
+import { isElement, isTouch } from "../../internal/is.js";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
+import { SafePolygon } from "../../internal/safe-polygon.svelte.js";
+import { isTabbable } from "tabbable";
+const popoverAttrs = createBitsAttrs({
+    component: "popover",
+    parts: ["root", "trigger", "content", "close", "overlay"],
+});
+const PopoverRootContext = new Context("Popover.Root");
+export class PopoverRootState {
+    static create(opts) {
+        return PopoverRootContext.set(new PopoverRootState(opts));
+    }
+    opts;
+    contentNode = $state(null);
+    contentPresence;
+    triggerNode = $state(null);
+    overlayNode = $state(null);
+    overlayPresence;
+    // hover tracking state
+    openedViaHover = $state(false);
+    hasInteractedWithContent = $state(false);
+    hoverCooldown = $state(false);
+    closeDelay = $state(0);
+    #closeTimeout = null;
+    #domContext = null;
+    constructor(opts) {
+        this.opts = opts;
+        this.contentPresence = new PresenceManager({
+            ref: boxWith(() => this.contentNode),
+            open: this.opts.open,
+            onComplete: () => {
+                this.opts.onOpenChangeComplete.current(this.opts.open.current);
+            },
+        });
+        this.overlayPresence = new PresenceManager({
+            ref: boxWith(() => this.overlayNode),
+            open: this.opts.open,
+        });
+        watch(() => this.opts.open.current, (isOpen) => {
+            if (!isOpen) {
+                this.openedViaHover = false;
+                this.hasInteractedWithContent = false;
+                this.#clearCloseTimeout();
+            }
+        });
+    }
+    setDomContext(ctx) {
+        this.#domContext = ctx;
+    }
+    #clearCloseTimeout() {
+        if (this.#closeTimeout !== null && this.#domContext) {
+            this.#domContext.clearTimeout(this.#closeTimeout);
+            this.#closeTimeout = null;
+        }
+    }
+    toggleOpen() {
+        this.#clearCloseTimeout();
+        this.opts.open.current = !this.opts.open.current;
+    }
+    handleClose() {
+        this.#clearCloseTimeout();
+        if (!this.opts.open.current)
+            return;
+        this.opts.open.current = false;
+    }
+    handleHoverOpen() {
+        this.#clearCloseTimeout();
+        if (this.opts.open.current)
+            return;
+        this.openedViaHover = true;
+        this.opts.open.current = true;
+    }
+    handleHoverClose() {
+        if (!this.opts.open.current)
+            return;
+        // only close if opened via hover and user hasn't interacted with content
+        if (this.openedViaHover && !this.hasInteractedWithContent) {
+            this.opts.open.current = false;
+        }
+    }
+    handleDelayedHoverClose() {
+        if (!this.opts.open.current)
+            return;
+        if (!this.openedViaHover || this.hasInteractedWithContent)
+            return;
+        this.#clearCloseTimeout();
+        if (this.closeDelay <= 0) {
+            this.opts.open.current = false;
+        }
+        else if (this.#domContext) {
+            this.#closeTimeout = this.#domContext.setTimeout(() => {
+                if (this.openedViaHover && !this.hasInteractedWithContent) {
+                    this.opts.open.current = false;
+                }
+                this.#closeTimeout = null;
+            }, this.closeDelay);
+        }
+    }
+    cancelDelayedClose() {
+        this.#clearCloseTimeout();
+    }
+    markInteraction() {
+        this.hasInteractedWithContent = true;
+        this.#clearCloseTimeout();
+    }
+}
+export class PopoverTriggerState {
+    static create(opts) {
+        return new PopoverTriggerState(opts, PopoverRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    domContext;
+    #openTimeout = null;
+    #closeTimeout = null;
+    #isHovering = $state(false);
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.triggerNode = v));
+        this.domContext = new DOMContext(opts.ref);
+        this.root.setDomContext(this.domContext);
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onpointerenter = this.onpointerenter.bind(this);
+        this.onpointerleave = this.onpointerleave.bind(this);
+        watch(() => this.opts.closeDelay.current, (delay) => {
+            this.root.closeDelay = delay;
+        });
+    }
+    #clearOpenTimeout() {
+        if (this.#openTimeout !== null) {
+            this.domContext.clearTimeout(this.#openTimeout);
+            this.#openTimeout = null;
+        }
+    }
+    #clearCloseTimeout() {
+        if (this.#closeTimeout !== null) {
+            this.domContext.clearTimeout(this.#closeTimeout);
+            this.#closeTimeout = null;
+        }
+    }
+    #clearAllTimeouts() {
+        this.#clearOpenTimeout();
+        this.#clearCloseTimeout();
+    }
+    onpointerenter(e) {
+        if (this.opts.disabled.current)
+            return;
+        if (!this.opts.openOnHover.current)
+            return;
+        if (isTouch(e))
+            return;
+        this.#isHovering = true;
+        this.#clearCloseTimeout();
+        this.root.cancelDelayedClose();
+        if (this.root.opts.open.current || this.root.hoverCooldown)
+            return;
+        const delay = this.opts.openDelay.current;
+        if (delay <= 0) {
+            this.root.handleHoverOpen();
+        }
+        else {
+            this.#openTimeout = this.domContext.setTimeout(() => {
+                this.root.handleHoverOpen();
+                this.#openTimeout = null;
+            }, delay);
+        }
+    }
+    onpointerleave(e) {
+        if (this.opts.disabled.current)
+            return;
+        if (!this.opts.openOnHover.current)
+            return;
+        if (isTouch(e))
+            return;
+        this.#isHovering = false;
+        this.#clearOpenTimeout();
+        this.root.hoverCooldown = false;
+        // let GraceArea handle the close - it will call handleHoverClose via onPointerExit
+        // we just need to stop any pending open timer
+    }
+    onclick(e) {
+        if (this.opts.disabled.current)
+            return;
+        if (e.button !== 0)
+            return;
+        this.#clearAllTimeouts();
+        // if clicked while hovering and popover is open, convert to click-based open
+        if (this.#isHovering && this.root.opts.open.current && this.root.openedViaHover) {
+            this.root.openedViaHover = false;
+            this.root.hasInteractedWithContent = true;
+            return;
+        }
+        // if closing while hovering with openOnHover enabled, set cooldown to prevent
+        // immediate re-open via hover
+        if (this.#isHovering && this.opts.openOnHover.current && this.root.opts.open.current) {
+            this.root.hoverCooldown = true;
+        }
+        // if clicking to open while in cooldown, reset cooldown (explicit open)
+        if (this.root.hoverCooldown && !this.root.opts.open.current) {
+            this.root.hoverCooldown = false;
+        }
+        this.root.toggleOpen();
+    }
+    onkeydown(e) {
+        if (this.opts.disabled.current)
+            return;
+        if (!(e.key === kbd.ENTER || e.key === kbd.SPACE))
+            return;
+        e.preventDefault();
+        this.#clearAllTimeouts();
+        this.root.toggleOpen();
+    }
+    #getAriaControls() {
+        if (this.root.opts.open.current && this.root.contentNode?.id) {
+            return this.root.contentNode?.id;
+        }
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        "aria-haspopup": "dialog",
+        "aria-expanded": boolToStr(this.root.opts.open.current),
+        "data-state": getDataOpenClosed(this.root.opts.open.current),
+        "aria-controls": this.#getAriaControls(),
+        [popoverAttrs.trigger]: "",
+        disabled: this.opts.disabled.current,
+        //
+        onkeydown: this.onkeydown,
+        onclick: this.onclick,
+        onpointerenter: this.onpointerenter,
+        onpointerleave: this.onpointerleave,
+        ...this.attachment,
+    }));
+}
+export class PopoverContentState {
+    static create(opts) {
+        return new PopoverContentState(opts, PopoverRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
+        this.onpointerdown = this.onpointerdown.bind(this);
+        this.onfocusin = this.onfocusin.bind(this);
+        this.onpointerenter = this.onpointerenter.bind(this);
+        this.onpointerleave = this.onpointerleave.bind(this);
+        new SafePolygon({
+            triggerNode: () => this.root.triggerNode,
+            contentNode: () => this.root.contentNode,
+            enabled: () => this.root.opts.open.current &&
+                this.root.openedViaHover &&
+                !this.root.hasInteractedWithContent,
+            onPointerExit: () => {
+                this.root.handleDelayedHoverClose();
+            },
+        });
+    }
+    onpointerdown(_) {
+        this.root.markInteraction();
+    }
+    onfocusin(e) {
+        const target = e.target;
+        if (isElement(target) && isTabbable(target)) {
+            this.root.markInteraction();
+        }
+    }
+    onpointerenter(e) {
+        if (isTouch(e))
+            return;
+        this.root.cancelDelayedClose();
+    }
+    onpointerleave(e) {
+        if (isTouch(e))
+            return;
+        // handled by grace area
+    }
+    onInteractOutside = (e) => {
+        this.opts.onInteractOutside.current(e);
+        if (e.defaultPrevented)
+            return;
+        if (!isElement(e.target))
+            return;
+        const closestTrigger = e.target.closest(popoverAttrs.selector("trigger"));
+        if (closestTrigger && closestTrigger === this.root.triggerNode)
+            return;
+        if (this.opts.customAnchor.current) {
+            if (isElement(this.opts.customAnchor.current)) {
+                if (this.opts.customAnchor.current.contains(e.target))
+                    return;
+            }
+            else if (typeof this.opts.customAnchor.current === "string") {
+                const el = document.querySelector(this.opts.customAnchor.current);
+                if (el && el.contains(e.target))
+                    return;
+            }
+        }
+        this.root.handleClose();
+    };
+    onEscapeKeydown = (e) => {
+        this.opts.onEscapeKeydown.current(e);
+        if (e.defaultPrevented)
+            return;
+        this.root.handleClose();
+    };
+    get shouldRender() {
+        return this.root.contentPresence.shouldRender;
+    }
+    get shouldTrapFocus() {
+        if (this.root.openedViaHover && !this.root.hasInteractedWithContent)
+            return false;
+        return true;
+    }
+    snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        tabindex: -1,
+        "data-state": getDataOpenClosed(this.root.opts.open.current),
+        ...getDataTransitionAttrs(this.root.contentPresence.transitionStatus),
+        [popoverAttrs.content]: "",
+        style: {
+            pointerEvents: "auto",
+            // CSS containment isolates style/layout/paint calculations from the rest of the page
+            contain: "layout style",
+        },
+        onpointerdown: this.onpointerdown,
+        onfocusin: this.onfocusin,
+        onpointerenter: this.onpointerenter,
+        onpointerleave: this.onpointerleave,
+        ...this.attachment,
+    }));
+    popperProps = {
+        onInteractOutside: this.onInteractOutside,
+        onEscapeKeydown: this.onEscapeKeydown,
+    };
+}
+export class PopoverCloseState {
+    static create(opts) {
+        return new PopoverCloseState(opts, PopoverRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref);
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    onclick(_) {
+        this.root.handleClose();
+    }
+    onkeydown(e) {
+        if (!(e.key === kbd.ENTER || e.key === kbd.SPACE))
+            return;
+        e.preventDefault();
+        this.root.handleClose();
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        onclick: this.onclick,
+        onkeydown: this.onkeydown,
+        type: "button",
+        [popoverAttrs.close]: "",
+        ...this.attachment,
+    }));
+}
+export class PopoverOverlayState {
+    static create(opts) {
+        return new PopoverOverlayState(opts, PopoverRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.overlayNode = v));
+    }
+    get shouldRender() {
+        return this.root.overlayPresence.shouldRender;
+    }
+    snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [popoverAttrs.overlay]: "",
+        style: {
+            pointerEvents: "auto",
+        },
+        "data-state": getDataOpenClosed(this.root.opts.open.current),
+        ...getDataTransitionAttrs(this.root.overlayPresence.transitionStatus),
+        ...this.attachment,
+    }));
+}

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

@@ -0,0 +1,57 @@
+import type { ArrowProps, ArrowPropsWithoutHTML } from "../utilities/arrow/types.js";
+import type { PopperLayerProps, PopperLayerStaticProps } from "../utilities/popper-layer/types.js";
+import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from "../../internal/types.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { FloatingContentSnippetProps, StaticContentSnippetProps } from "../../shared/types.js";
+import type { PortalProps } from "../../types.js";
+import type { PresenceLayerProps } from "../utilities/presence-layer/types.js";
+export type PopoverRootPropsWithoutHTML = WithChildren<{
+    /**
+     * The open state of the popover.
+     */
+    open?: boolean;
+    /**
+     * A callback that is called when the popover's open state changes.
+     */
+    onOpenChange?: OnChangeFn<boolean>;
+    /**
+     * A callback that is called when the popover's open state changes and the animation is complete.
+     */
+    onOpenChangeComplete?: OnChangeFn<boolean>;
+}>;
+export type PopoverRootProps = PopoverRootPropsWithoutHTML;
+export type PopoverContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<Omit<PopperLayerProps, "content" | "loop">, FloatingContentSnippetProps>;
+export type PopoverContentProps = PopoverContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, PopoverContentPropsWithoutHTML>;
+export type PopoverContentStaticPropsWithoutHTML = WithChildNoChildrenSnippetProps<Omit<PopperLayerStaticProps, "content" | "loop">, StaticContentSnippetProps>;
+export type PopoverContentStaticProps = PopoverContentStaticPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, PopoverContentStaticPropsWithoutHTML>;
+export type PopoverTriggerPropsWithoutHTML = WithChild<{
+    /**
+     * Whether the popover should open when the trigger is hovered.
+     * @default false
+     */
+    openOnHover?: boolean;
+    /**
+     * How long to wait before opening the popover on hover (ms).
+     * Only applies when `openOnHover` is `true`.
+     * @default 700
+     */
+    openDelay?: number;
+    /**
+     * How long to wait before closing the popover after hover ends (ms).
+     * Only applies when `openOnHover` is `true`.
+     * @default 300
+     */
+    closeDelay?: number;
+}>;
+export type PopoverTriggerProps = PopoverTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, PopoverTriggerPropsWithoutHTML>;
+export type PopoverClosePropsWithoutHTML = WithChild;
+export type PopoverCloseProps = PopoverClosePropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, PopoverClosePropsWithoutHTML>;
+export type PopoverArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
+export type PopoverArrowProps = ArrowProps;
+export type PopoverPortalPropsWithoutHTML = PortalProps;
+export type PopoverPortalProps = PortalProps;
+export type PopoverOverlaySnippetProps = {
+    open: boolean;
+};
+export type PopoverOverlayPropsWithoutHTML = WithChild<PresenceLayerProps, PopoverOverlaySnippetProps>;
+export type PopoverOverlayProps = PopoverOverlayPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, PopoverOverlayPropsWithoutHTML>;

package/dist/bits/popover/types.js

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

package/dist/bits/progress/components/progress.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { ProgressRootProps } from "../types.js";
+	import { ProgressRootState } from "../progress.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		child,
+		children,
+		value = 0,
+		max = 100,
+		min = 0,
+		id = createId(uid),
+		ref = $bindable(null),
+		...restProps
+	}: ProgressRootProps = $props();
+
+	const rootState = ProgressRootState.create({
+		value: boxWith(() => value),
+		max: boxWith(() => max),
+		min: boxWith(() => min),
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => 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/progress/components/progress.svelte.d.ts

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

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

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

package/dist/bits/progress/exports.js

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

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

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

package/dist/bits/progress/index.js

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

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

@@ -0,0 +1,27 @@
+import { type ReadableBoxedValues } from "svelte-toolbelt";
+import type { RefAttachment, WithRefOpts } from "../../internal/types.js";
+interface ProgressRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    value: number | null;
+    max: number;
+    min: number;
+}> {
+}
+export declare class ProgressRootState {
+    static create(opts: ProgressRootStateOpts): ProgressRootState;
+    readonly opts: ProgressRootStateOpts;
+    readonly attachment: RefAttachment;
+    constructor(opts: ProgressRootStateOpts);
+    readonly props: {
+        readonly role: "progressbar";
+        readonly value: number | null;
+        readonly "aria-valuemin": number;
+        readonly "aria-valuemax": number;
+        readonly "aria-valuenow": number | undefined;
+        readonly "data-value": number | undefined;
+        readonly "data-state": "indeterminate" | "loading" | "loaded";
+        readonly "data-max": number;
+        readonly "data-min": number;
+        readonly "data-indeterminate": "" | undefined;
+    };
+}
+export {};

package/dist/bits/progress/progress.svelte.js

@@ -0,0 +1,36 @@
+import { attachRef } from "svelte-toolbelt";
+import { createBitsAttrs } from "../../internal/attrs.js";
+const progressAttrs = createBitsAttrs({
+    component: "progress",
+    parts: ["root"],
+});
+export class ProgressRootState {
+    static create(opts) {
+        return new ProgressRootState(opts);
+    }
+    opts;
+    attachment;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
+    }
+    props = $derived.by(() => ({
+        role: "progressbar",
+        value: this.opts.value.current,
+        "aria-valuemin": this.opts.min.current,
+        "aria-valuemax": this.opts.max.current,
+        "aria-valuenow": this.opts.value.current === null ? undefined : this.opts.value.current,
+        "data-value": this.opts.value.current === null ? undefined : this.opts.value.current,
+        "data-state": getProgressDataState(this.opts.value.current, this.opts.max.current),
+        "data-max": this.opts.max.current,
+        "data-min": this.opts.min.current,
+        "data-indeterminate": this.opts.value.current === null ? "" : undefined,
+        [progressAttrs.root]: "",
+        ...this.attachment,
+    }));
+}
+function getProgressDataState(value, max) {
+    if (value === null)
+        return "indeterminate";
+    return value === max ? "loaded" : "loading";
+}

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

@@ -0,0 +1,24 @@
+import type { WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+export type ProgressRootPropsWithoutHTML = WithChild<{
+    /**
+     * The current value of the progress bar.
+     * If `null`, the progress bar will be in an indeterminate state.
+     *
+     * @default 0
+     */
+    value?: number | null;
+    /**
+     * The maximum value of the progress bar.
+     *
+     * @default 100
+     */
+    max?: number;
+    /**
+     * The minimum value of the progress bar.
+     *
+     * @default 0
+     */
+    min?: number;
+}>;
+export type ProgressRootProps = ProgressRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ProgressRootPropsWithoutHTML>;

package/dist/bits/progress/types.js

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

package/dist/bits/radio-group/components/radio-group-input.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import HiddenInput from "../../utilities/hidden-input.svelte";
+	import { RadioGroupInputState } from "../radio-group.svelte.js";
+
+	const inputState = RadioGroupInputState.create();
+</script>
+
+{#if inputState.shouldRender}
+	<HiddenInput {...inputState.props} />
+{/if}

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const RadioGroupInput: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RadioGroupInput = InstanceType<typeof RadioGroupInput>;
+export default RadioGroupInput;

package/dist/bits/radio-group/components/radio-group-item.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { RadioGroupItemProps } from "../types.js";
+	import { RadioGroupItemState } from "../radio-group.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		children,
+		child,
+		value,
+		disabled = false,
+		ref = $bindable(null),
+		...restProps
+	}: RadioGroupItemProps = $props();
+
+	const itemState = RadioGroupItemState.create({
+		value: boxWith(() => value),
+		disabled: boxWith(() => disabled ?? false),
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, itemState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, ...itemState.snippetProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.(itemState.snippetProps)}
+	</button>
+{/if}