INIT

2026-02-17 14:10:16 -06:00
parent 2bca5834c5
commit cf73cd3b4c
11246 changed files with 1690552 additions and 0 deletions
@@ -0,0 +1,147 @@
+import { attachRef } from "svelte-toolbelt";
+import { Context, watch } from "runed";
+import { createBitsAttrs, getAriaChecked, boolToEmptyStrOrUndef, boolToStr, } from "../../internal/attrs.js";
+import { kbd } from "../../internal/kbd.js";
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
+const radioGroupAttrs = createBitsAttrs({
+    component: "radio-group",
+    parts: ["root", "item"],
+});
+const RadioGroupRootContext = new Context("RadioGroup.Root");
+export class RadioGroupRootState {
+    static create(opts) {
+        return RadioGroupRootContext.set(new RadioGroupRootState(opts));
+    }
+    opts;
+    hasValue = $derived.by(() => this.opts.value.current !== "");
+    rovingFocusGroup;
+    attachment;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
+        this.rovingFocusGroup = new RovingFocusGroup({
+            rootNode: this.opts.ref,
+            candidateAttr: radioGroupAttrs.item,
+            loop: this.opts.loop,
+            orientation: this.opts.orientation,
+        });
+    }
+    isChecked(value) {
+        return this.opts.value.current === value;
+    }
+    setValue(value) {
+        this.opts.value.current = value;
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: "radiogroup",
+        "aria-required": boolToStr(this.opts.required.current),
+        "aria-disabled": boolToStr(this.opts.disabled.current),
+        "aria-readonly": this.opts.readonly.current ? "true" : undefined,
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
+        "data-readonly": boolToEmptyStrOrUndef(this.opts.readonly.current),
+        "data-orientation": this.opts.orientation.current,
+        [radioGroupAttrs.root]: "",
+        ...this.attachment,
+    }));
+}
+export class RadioGroupItemState {
+    static create(opts) {
+        return new RadioGroupItemState(opts, RadioGroupRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    checked = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
+    #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
+    #isReadonly = $derived.by(() => this.root.opts.readonly.current);
+    #isChecked = $derived.by(() => this.root.isChecked(this.opts.value.current));
+    #tabIndex = $state(-1);
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(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);
+        });
+        watch([() => this.opts.value.current, () => this.root.opts.value.current], () => {
+            if (this.opts.value.current === this.root.opts.value.current) {
+                this.root.rovingFocusGroup.setCurrentTabStopId(this.opts.id.current);
+                this.#tabIndex = 0;
+            }
+        });
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onfocus = this.onfocus.bind(this);
+    }
+    onclick(_) {
+        if (this.opts.disabled.current || this.#isReadonly)
+            return;
+        this.root.setValue(this.opts.value.current);
+    }
+    onfocus(_) {
+        if (!this.root.hasValue || this.#isReadonly)
+            return;
+        this.root.setValue(this.opts.value.current);
+    }
+    onkeydown(e) {
+        if (this.#isDisabled)
+            return;
+        if (e.key === kbd.SPACE) {
+            e.preventDefault();
+            if (!this.#isReadonly) {
+                this.root.setValue(this.opts.value.current);
+            }
+            return;
+        }
+        this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e, true);
+    }
+    snippetProps = $derived.by(() => ({ checked: this.#isChecked }));
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        disabled: this.#isDisabled ? true : undefined,
+        "data-value": this.opts.value.current,
+        "data-orientation": this.root.opts.orientation.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
+        "data-readonly": boolToEmptyStrOrUndef(this.#isReadonly),
+        "data-state": this.#isChecked ? "checked" : "unchecked",
+        "aria-checked": getAriaChecked(this.#isChecked, false),
+        [radioGroupAttrs.item]: "",
+        type: "button",
+        role: "radio",
+        tabindex: this.#tabIndex,
+        //
+        onkeydown: this.onkeydown,
+        onfocus: this.onfocus,
+        onclick: this.onclick,
+        ...this.attachment,
+    }));
+}
+export class RadioGroupInputState {
+    static create() {
+        return new RadioGroupInputState(RadioGroupRootContext.get());
+    }
+    root;
+    shouldRender = $derived.by(() => this.root.opts.name.current !== undefined);
+    constructor(root) {
+        this.root = root;
+        this.onfocus = this.onfocus.bind(this);
+    }
+    onfocus(_) {
+        this.root.rovingFocusGroup.focusCurrentTabStop();
+    }
+    props = $derived.by(() => ({
+        name: this.root.opts.name.current,
+        value: this.root.opts.value.current,
+        required: this.root.opts.required.current,
+        disabled: this.root.opts.disabled.current,
+        onfocus: this.onfocus,
+    }));
+}