@zag-js/radio-group 1.34.1 → 1.35.1

package/dist/radio-group.machine.js

@@ -0,0 +1,199 @@
+"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.cjs"));
+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
+});

package/dist/radio-group.machine.mjs

@@ -0,0 +1,164 @@
+// src/radio-group.machine.ts
+import { createGuards, createMachine } from "@zag-js/core";
+import { dispatchInputCheckedEvent, resizeObserverBorderBox, trackFormControl } from "@zag-js/dom-query";
+import { trackFocusVisible } from "@zag-js/focus-visible";
+import * as dom from "./radio-group.dom.mjs";
+var { not } = createGuards();
+var machine = 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 trackFormControl(dom.getRootEl(scope), {
+          onFieldsetDisabledChange(disabled) {
+            context.set("fieldsetDisabled", disabled);
+          },
+          onFormReset() {
+            context.set("value", context.initial("value"));
+          }
+        });
+      },
+      trackFocusVisible({ scope }) {
+        return 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 = 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;
+          dispatchInputCheckedEvent(inputEl, { checked });
+        });
+      }
+    }
+  }
+});
+export {
+  machine
+};

package/dist/radio-group.props.d.mts

@@ -0,0 +1,10 @@
+import { ItemProps, RadioGroupProps } from './radio-group.types.mjs';
+import '@zag-js/core';
+import '@zag-js/types';
+
+declare const props: (keyof RadioGroupProps)[];
+declare const splitProps: <Props extends Partial<RadioGroupProps>>(props: Props) => [Partial<RadioGroupProps>, Omit<Props, keyof RadioGroupProps>];
+declare const itemProps: (keyof ItemProps)[];
+declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
+
+export { itemProps, props, splitItemProps, splitProps };

package/dist/radio-group.props.d.ts

@@ -0,0 +1,10 @@
+import { ItemProps, RadioGroupProps } from './radio-group.types.js';
+import '@zag-js/core';
+import '@zag-js/types';
+
+declare const props: (keyof RadioGroupProps)[];
+declare const splitProps: <Props extends Partial<RadioGroupProps>>(props: Props) => [Partial<RadioGroupProps>, Omit<Props, keyof RadioGroupProps>];
+declare const itemProps: (keyof ItemProps)[];
+declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
+
+export { itemProps, props, splitItemProps, splitProps };

package/dist/radio-group.props.js

@@ -0,0 +1,56 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/radio-group.props.ts
+var radio_group_props_exports = {};
+__export(radio_group_props_exports, {
+  itemProps: () => itemProps,
+  props: () => props,
+  splitItemProps: () => splitItemProps,
+  splitProps: () => splitProps
+});
+module.exports = __toCommonJS(radio_group_props_exports);
+var import_types = require("@zag-js/types");
+var import_utils = require("@zag-js/utils");
+var props = (0, import_types.createProps)()([
+  "dir",
+  "disabled",
+  "form",
+  "getRootNode",
+  "id",
+  "ids",
+  "invalid",
+  "name",
+  "onValueChange",
+  "orientation",
+  "readOnly",
+  "required",
+  "value",
+  "defaultValue"
+]);
+var splitProps = (0, import_utils.createSplitProps)(props);
+var itemProps = (0, import_types.createProps)()(["value", "disabled", "invalid"]);
+var splitItemProps = (0, import_utils.createSplitProps)(itemProps);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  itemProps,
+  props,
+  splitItemProps,
+  splitProps
+});

package/dist/radio-group.props.mjs

@@ -0,0 +1,28 @@
+// src/radio-group.props.ts
+import { createProps } from "@zag-js/types";
+import { createSplitProps } from "@zag-js/utils";
+var props = createProps()([
+  "dir",
+  "disabled",
+  "form",
+  "getRootNode",
+  "id",
+  "ids",
+  "invalid",
+  "name",
+  "onValueChange",
+  "orientation",
+  "readOnly",
+  "required",
+  "value",
+  "defaultValue"
+]);
+var splitProps = createSplitProps(props);
+var itemProps = createProps()(["value", "disabled", "invalid"]);
+var splitItemProps = createSplitProps(itemProps);
+export {
+  itemProps,
+  props,
+  splitItemProps,
+  splitProps
+};

package/dist/radio-group.types.d.mts

@@ -0,0 +1,193 @@
+import { Machine, EventObject, Service } from '@zag-js/core';
+import { PropTypes, RequiredBy, DirectionProperty, CommonProperties, Rect } from '@zag-js/types';
+
+interface ValueChangeDetails {
+    value: string | null;
+}
+type ElementIds = Partial<{
+    root: string;
+    label: string;
+    indicator: string;
+    item: (value: string) => string;
+    itemLabel: (value: string) => string;
+    itemControl: (value: string) => string;
+    itemHiddenInput: (value: string) => string;
+}>;
+interface RadioGroupProps extends DirectionProperty, CommonProperties {
+    /**
+     * The ids of the elements in the radio. Useful for composition.
+     */
+    ids?: ElementIds | undefined;
+    /**
+     * The controlled value of the radio group
+     */
+    value?: string | null | undefined;
+    /**
+     * The initial value of the checked radio when rendered.
+     * Use when you don't need to control the value of the radio group.
+     */
+    defaultValue?: string | null | undefined;
+    /**
+     * The name of the input fields in the radio
+     * (Useful for form submission).
+     */
+    name?: string | undefined;
+    /**
+     * The associate form of the underlying input.
+     */
+    form?: string | undefined;
+    /**
+     * If `true`, the radio group will be disabled
+     */
+    disabled?: boolean | undefined;
+    /**
+     * If `true`, the radio group is marked as invalid.
+     */
+    invalid?: boolean | undefined;
+    /**
+     * If `true`, the radio group is marked as required.
+     */
+    required?: boolean | undefined;
+    /**
+     * Whether the radio group is read-only
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Function called once a radio is checked
+     */
+    onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+    /**
+     * Orientation of the radio group
+     */
+    orientation?: "horizontal" | "vertical" | undefined;
+}
+interface PrivateContext {
+    /**
+     * The value of the checked radio
+     */
+    value: string | null;
+    /**
+     * The id of the active radio
+     */
+    activeValue: string | null;
+    /**
+     * The id of the focused radio
+     */
+    focusedValue: string | null;
+    /**
+     * The id of the radio that has focus-visible
+     */
+    focusVisibleValue: string | null;
+    /**
+     * The id of the hovered radio
+     */
+    hoveredValue: string | null;
+    /**
+     * The active tab indicator's dom rect
+     */
+    indicatorRect: Rect | null;
+    /**
+     * Whether the radio group's fieldset is disabled
+     */
+    fieldsetDisabled: boolean;
+    /**
+     * Whether the radio group is in server-side rendering
+     */
+    ssr: boolean;
+}
+type PropsWithDefault = "orientation";
+type ComputedContext = Readonly<{
+    /**
+     * Whether the radio group is disabled
+     */
+    isDisabled: boolean;
+}>;
+interface Refs {
+    /**
+     * Function to clean up the observer for the active tab's rect
+     */
+    indicatorCleanup: VoidFunction | null;
+}
+interface RadioGroupSchema {
+    state: "idle";
+    props: RequiredBy<RadioGroupProps, PropsWithDefault>;
+    context: PrivateContext;
+    computed: ComputedContext;
+    refs: Refs;
+    event: EventObject;
+    action: string;
+    effect: string;
+    guard: string;
+}
+type RadioGroupService = Service<RadioGroupSchema>;
+type RadioGroupMachine = Machine<RadioGroupSchema>;
+interface ItemProps {
+    value: string;
+    disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
+}
+interface ItemState {
+    /**
+     * The value of the item
+     */
+    value: string;
+    /**
+     * Whether the item is invalid
+     */
+    invalid: boolean;
+    /**
+     * Whether the item is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the item is checked
+     */
+    checked: boolean;
+    /**
+     *  Whether the item is focused
+     */
+    focused: boolean;
+    /**
+     * Whether the item is focused and the focus is visible
+     */
+    focusVisible: boolean;
+    /**
+     * Whether the item is hovered
+     */
+    hovered: boolean;
+    /**
+     * Whether the item is active or pressed
+     */
+    active: boolean;
+}
+interface RadioGroupApi<T extends PropTypes = PropTypes> {
+    /**
+     * The current value of the radio group
+     */
+    value: string | null;
+    /**
+     * Function to set the value of the radio group
+     */
+    setValue: (value: string) => void;
+    /**
+     * Function to clear the value of the radio group
+     */
+    clearValue: VoidFunction;
+    /**
+     * Function to focus the radio group
+     */
+    focus: VoidFunction;
+    /**
+     * Returns the state details of a radio input
+     */
+    getItemState: (props: ItemProps) => ItemState;
+    getRootProps: () => T["element"];
+    getLabelProps: () => T["element"];
+    getItemProps: (props: ItemProps) => T["label"];
+    getItemTextProps: (props: ItemProps) => T["element"];
+    getItemControlProps: (props: ItemProps) => T["element"];
+    getItemHiddenInputProps: (props: ItemProps) => T["input"];
+    getIndicatorProps: () => T["element"];
+}
+
+export type { ElementIds, ItemProps, ItemState, RadioGroupApi, RadioGroupMachine, RadioGroupProps, RadioGroupSchema, RadioGroupService, ValueChangeDetails };