@zag-js/radio-group/dist/radio-group.machine.js

Core logic for the radio group widget implemented as a state machine

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/radio-group.machine.ts
var radio_group_machine_exports = {};
__export(radio_group_machine_exports, {
  machine: () => machine
});
module.exports = __toCommonJS(radio_group_machine_exports);
var import_core = require("@zag-js/core");
var import_dom_query = require("@zag-js/dom-query");
var import_focus_visible = require("@zag-js/focus-visible");
var dom = __toESM(require("./radio-group.dom.js"));
var { not } = (0, import_core.createGuards)();
var machine = (0, import_core.createMachine)({
  props({ props }) {
    return {
      orientation: "vertical",
      ...props
    };
  },
  initialState() {
    return "idle";
  },
  context({ prop, bindable }) {
    return {
      value: bindable(() => ({
        defaultValue: prop("defaultValue"),
        value: prop("value"),
        onChange(value) {
          prop("onValueChange")?.({ value });
        }
      })),
      activeValue: bindable(() => ({
        defaultValue: null
      })),
      focusedValue: bindable(() => ({
        defaultValue: null
      })),
      focusVisibleValue: bindable(() => ({
        defaultValue: null
      })),
      hoveredValue: bindable(() => ({
        defaultValue: null
      })),
      indicatorRect: bindable(() => ({
        defaultValue: null
      })),
      fieldsetDisabled: bindable(() => ({
        defaultValue: false
      })),
      ssr: bindable(() => ({
        defaultValue: true
      }))
    };
  },
  refs() {
    return {
      indicatorCleanup: null,
      focusVisibleValue: null
    };
  },
  computed: {
    isDisabled: ({ prop, context }) => !!prop("disabled") || context.get("fieldsetDisabled")
  },
  entry: ["syncIndicatorRect", "syncSsr"],
  exit: ["cleanupObserver"],
  effects: ["trackFormControlState", "trackFocusVisible"],
  watch({ track, action, context }) {
    track([() => context.get("value")], () => {
      action(["syncIndicatorRect", "syncInputElements"]);
    });
  },
  on: {
    SET_VALUE: [
      {
        guard: not("isTrusted"),
        actions: ["setValue", "dispatchChangeEvent"]
      },
      {
        actions: ["setValue"]
      }
    ],
    SET_HOVERED: {
      actions: ["setHovered"]
    },
    SET_ACTIVE: {
      actions: ["setActive"]
    },
    SET_FOCUSED: {
      actions: ["setFocused"]
    }
  },
  states: {
    idle: {}
  },
  implementations: {
    guards: {
      isTrusted: ({ event }) => !!event.isTrusted
    },
    effects: {
      trackFormControlState({ context, scope }) {
        return (0, import_dom_query.trackFormControl)(dom.getRootEl(scope), {
          onFieldsetDisabledChange(disabled) {
            context.set("fieldsetDisabled", disabled);
          },
          onFormReset() {
            context.set("value", context.initial("value"));
          }
        });
      },
      trackFocusVisible({ scope }) {
        return (0, import_focus_visible.trackFocusVisible)({ root: scope.getRootNode?.() });
      }
    },
    actions: {
      setValue({ context, event }) {
        context.set("value", event.value);
      },
      setHovered({ context, event }) {
        context.set("hoveredValue", event.value);
      },
      setActive({ context, event }) {
        context.set("activeValue", event.value);
      },
      setFocused({ context, event }) {
        context.set("focusedValue", event.value);
        const focusVisibleValue = event.value != null && event.focusVisible ? event.value : null;
        context.set("focusVisibleValue", focusVisibleValue);
      },
      syncInputElements({ context, scope }) {
        const inputs = dom.getInputEls(scope);
        inputs.forEach((input) => {
          input.checked = input.value === context.get("value");
        });
      },
      cleanupObserver({ refs }) {
        refs.get("indicatorCleanup")?.();
      },
      syncSsr({ context }) {
        context.set("ssr", false);
      },
      syncIndicatorRect({ context, scope, refs }) {
        refs.get("indicatorCleanup")?.();
        if (!dom.getIndicatorEl(scope)) return;
        const value = context.get("value");
        const radioEl = dom.getRadioEl(scope, value);
        if (value == null || !radioEl) {
          context.set("indicatorRect", null);
          return;
        }
        const exec = () => {
          context.set("indicatorRect", dom.getOffsetRect(radioEl));
        };
        exec();
        const indicatorCleanup = import_dom_query.resizeObserverBorderBox.observe(radioEl, exec);
        refs.set("indicatorCleanup", indicatorCleanup);
      },
      dispatchChangeEvent({ context, scope }) {
        const inputEls = dom.getInputEls(scope);
        inputEls.forEach((inputEl) => {
          const checked = inputEl.value === context.get("value");
          if (checked === inputEl.checked) return;
          (0, import_dom_query.dispatchInputCheckedEvent)(inputEl, { checked });
        });
      }
    }
  }
});
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  machine
});