@zag-js/radio-group 0.10.4 → 0.11.0

package/dist/radio-group.machine.js

@@ -1,128 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const core = require('@zag-js/core');
-const domQuery = require('@zag-js/dom-query');
-const elementRect = require('@zag-js/element-rect');
-const formUtils = require('@zag-js/form-utils');
-const utils = require('@zag-js/utils');
-const radioGroup_dom = require('./radio-group.dom.js');
-
-function machine(userContext) {
-  const ctx = utils.compact(userContext);
-  return core.createMachine(
-    {
-      id: "radio",
-      initial: "idle",
-      context: {
-        value: null,
-        activeId: null,
-        focusedId: null,
-        hoveredId: null,
-        indicatorRect: {},
-        canIndicatorTransition: false,
-        ...ctx
-      },
-      entry: ["syncIndicatorRect"],
-      exit: ["cleanupObserver"],
-      activities: ["trackFormControlState"],
-      watch: {
-        value: [
-          "setIndicatorTransition",
-          // important to set this after `setIndicatorTransition`
-          "setPreviousValue",
-          "invokeOnChange",
-          "syncIndicatorRect",
-          "syncInputElements"
-        ]
-      },
-      on: {
-        SET_VALUE: {
-          actions: ["setValue"]
-        },
-        SET_HOVERED: {
-          actions: "setHovered"
-        },
-        SET_ACTIVE: {
-          actions: "setActive"
-        },
-        SET_FOCUSED: {
-          actions: "setFocused"
-        }
-      },
-      states: {
-        idle: {}
-      }
-    },
-    {
-      activities: {
-        trackFormControlState(ctx2, _evt, { send, initialContext }) {
-          return formUtils.trackFormControl(radioGroup_dom.dom.getRootEl(ctx2), {
-            onFieldsetDisabled() {
-              ctx2.disabled = true;
-            },
-            onFormReset() {
-              send({ type: "SET_VALUE", value: initialContext.value });
-            }
-          });
-        }
-      },
-      actions: {
-        setValue(ctx2, evt) {
-          ctx2.value = evt.value;
-        },
-        setHovered(ctx2, evt) {
-          ctx2.hoveredId = evt.value;
-        },
-        setActive(ctx2, evt) {
-          ctx2.activeId = evt.value;
-        },
-        setFocused(ctx2, evt) {
-          ctx2.focusedId = evt.value;
-        },
-        invokeOnChange(ctx2, evt) {
-          ctx2.onChange?.({ value: evt.value });
-        },
-        syncInputElements(ctx2) {
-          const inputs = radioGroup_dom.dom.getInputEls(ctx2);
-          inputs.forEach((input) => {
-            input.checked = input.value === ctx2.value;
-          });
-        },
-        setIndicatorTransition(ctx2) {
-          ctx2.canIndicatorTransition = utils.isString(ctx2.value);
-        },
-        cleanupObserver(ctx2) {
-          ctx2.indicatorCleanup?.();
-        },
-        syncIndicatorRect(ctx2) {
-          ctx2.indicatorCleanup?.();
-          if (!radioGroup_dom.dom.getIndicatorEl(ctx2))
-            return;
-          const value = ctx2.value;
-          if (value == null) {
-            ctx2.indicatorRect = {};
-            return;
-          }
-          const radioEl = radioGroup_dom.dom.getActiveRadioEl(ctx2);
-          if (!radioEl)
-            return;
-          ctx2.indicatorCleanup = elementRect.trackElementRect(radioEl, {
-            getRect(el) {
-              return radioGroup_dom.dom.getOffsetRect(el);
-            },
-            onChange(rect) {
-              ctx2.indicatorRect = radioGroup_dom.dom.resolveRect(rect);
-              domQuery.nextTick(() => {
-                ctx2.canIndicatorTransition = false;
-              });
-            }
-          });
-        }
-      }
-    }
-  );
-}
-
-exports.machine = machine;

package/dist/radio-group.machine.mjs

@@ -1,124 +0,0 @@
-import { createMachine } from '@zag-js/core';
-import { nextTick } from '@zag-js/dom-query';
-import { trackElementRect } from '@zag-js/element-rect';
-import { trackFormControl } from '@zag-js/form-utils';
-import { compact, isString } from '@zag-js/utils';
-import { dom } from './radio-group.dom.mjs';
-
-function machine(userContext) {
-  const ctx = compact(userContext);
-  return createMachine(
-    {
-      id: "radio",
-      initial: "idle",
-      context: {
-        value: null,
-        activeId: null,
-        focusedId: null,
-        hoveredId: null,
-        indicatorRect: {},
-        canIndicatorTransition: false,
-        ...ctx
-      },
-      entry: ["syncIndicatorRect"],
-      exit: ["cleanupObserver"],
-      activities: ["trackFormControlState"],
-      watch: {
-        value: [
-          "setIndicatorTransition",
-          // important to set this after `setIndicatorTransition`
-          "setPreviousValue",
-          "invokeOnChange",
-          "syncIndicatorRect",
-          "syncInputElements"
-        ]
-      },
-      on: {
-        SET_VALUE: {
-          actions: ["setValue"]
-        },
-        SET_HOVERED: {
-          actions: "setHovered"
-        },
-        SET_ACTIVE: {
-          actions: "setActive"
-        },
-        SET_FOCUSED: {
-          actions: "setFocused"
-        }
-      },
-      states: {
-        idle: {}
-      }
-    },
-    {
-      activities: {
-        trackFormControlState(ctx2, _evt, { send, initialContext }) {
-          return trackFormControl(dom.getRootEl(ctx2), {
-            onFieldsetDisabled() {
-              ctx2.disabled = true;
-            },
-            onFormReset() {
-              send({ type: "SET_VALUE", value: initialContext.value });
-            }
-          });
-        }
-      },
-      actions: {
-        setValue(ctx2, evt) {
-          ctx2.value = evt.value;
-        },
-        setHovered(ctx2, evt) {
-          ctx2.hoveredId = evt.value;
-        },
-        setActive(ctx2, evt) {
-          ctx2.activeId = evt.value;
-        },
-        setFocused(ctx2, evt) {
-          ctx2.focusedId = evt.value;
-        },
-        invokeOnChange(ctx2, evt) {
-          ctx2.onChange?.({ value: evt.value });
-        },
-        syncInputElements(ctx2) {
-          const inputs = dom.getInputEls(ctx2);
-          inputs.forEach((input) => {
-            input.checked = input.value === ctx2.value;
-          });
-        },
-        setIndicatorTransition(ctx2) {
-          ctx2.canIndicatorTransition = isString(ctx2.value);
-        },
-        cleanupObserver(ctx2) {
-          ctx2.indicatorCleanup?.();
-        },
-        syncIndicatorRect(ctx2) {
-          ctx2.indicatorCleanup?.();
-          if (!dom.getIndicatorEl(ctx2))
-            return;
-          const value = ctx2.value;
-          if (value == null) {
-            ctx2.indicatorRect = {};
-            return;
-          }
-          const radioEl = dom.getActiveRadioEl(ctx2);
-          if (!radioEl)
-            return;
-          ctx2.indicatorCleanup = trackElementRect(radioEl, {
-            getRect(el) {
-              return dom.getOffsetRect(el);
-            },
-            onChange(rect) {
-              ctx2.indicatorRect = dom.resolveRect(rect);
-              nextTick(() => {
-                ctx2.canIndicatorTransition = false;
-              });
-            }
-          });
-        }
-      }
-    }
-  );
-}
-
-export { machine };

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

@@ -1,85 +0,0 @@
-import type { StateMachine as S } from "@zag-js/core";
-import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types";
-type ElementIds = Partial<{
-    root: string;
-    label: string;
-    indicator: string;
-    radio(value: string): string;
-    radioLabel(value: string): string;
-    radioControl(value: string): string;
-    radioInput(value: string): string;
-}>;
-type PublicContext = DirectionProperty & CommonProperties & {
-    /**
-     * The ids of the elements in the radio. Useful for composition.
-     */
-    ids?: ElementIds;
-    /**
-     * The value of the checked radio
-     */
-    value: string | null;
-    /**
-     * The name of the input fields in the radio
-     * (Useful for form submission).
-     */
-    name?: string;
-    /**
-     * The associate form of the underlying input.
-     */
-    form?: string;
-    /**
-     * If `true`, the radio group will be disabled
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the radio group will be readonly
-     */
-    readOnly?: boolean;
-    /**
-     * Function called once a radio is checked
-     * @param value the value of the checked radio
-     */
-    onChange?(details: {
-        value: string;
-    }): void;
-    /**
-     * Orientation of the radio group
-     */
-    orientation?: "horizontal" | "vertical";
-};
-type PrivateContext = Context<{}>;
-export type UserDefinedContext = RequiredBy<PublicContext, "id">;
-type ComputedContext = Readonly<{}>;
-export type MachineContext = PublicContext & PrivateContext & ComputedContext;
-export type MachineState = {
-    value: "idle";
-};
-export type State = S.State<MachineContext, MachineState>;
-export type Send = S.Send<S.AnyEventObject>;
-export type RadioProps = {
-    value: string;
-    /**
-     * If `true`, the radio will be disabled
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the radio will be readonly
-     */
-    readOnly?: boolean;
-    /**
-     * If `true`, the radio is marked as invalid.
-     */
-    invalid?: boolean;
-};
-export type InputProps = RadioProps & {
-    /**
-     * If `true` and `disabled` is passed, the radio will
-     * remain tabbable but not interactive
-     */
-    focusable?: boolean;
-    /**
-     * If `true`, the radio input is marked as required,
-     */
-    required?: boolean;
-};
-export {};