@destyler/radio 0.0.7-beta.7 → 0.0.7-beta.9

package/dist/index.d.mts

@@ -1,194 +0,0 @@
-import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
-import * as _zag_js_core from '@zag-js/core';
-import { StateMachine, Machine } from '@zag-js/core';
-
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "item" | "itemText" | "itemControl" | "indicator">;
-
-interface ValueChangeDetails {
-    value: string;
-}
-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 PublicContext extends DirectionProperty, CommonProperties {
-    /**
-     * The ids of the elements in the radio. Useful for composition.
-     */
-    ids?: ElementIds | undefined;
-    /**
-     * The value of the checked radio
-     */
-    value: string | null;
-    /**
-     * 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;
-    /**
-     * Whether the checkbox is read-only
-     */
-    readOnly?: boolean | undefined;
-    /**
-     * Function called once a radio is checked
-     * @param value the value of the checked radio
-     */
-    onValueChange?: (details: ValueChangeDetails) => void;
-    /**
-     * Orientation of the radio group
-     */
-    orientation?: 'horizontal' | 'vertical' | undefined;
-}
-interface PrivateContext {
-    /**
-     * @internal
-     * The id of the active radio
-     */
-    activeValue: string | null;
-    /**
-     * @internal
-     * The id of the focused radio
-     */
-    focusedValue: string | null;
-    /**
-     * @internal
-     * The id of the hovered radio
-     */
-    hoveredValue: string | null;
-    /**
-     * @internal
-     * The active tab indicator's dom rect
-     */
-    indicatorRect: Partial<{
-        left: string;
-        top: string;
-        width: string;
-        height: string;
-    }>;
-    /**
-     * @internal
-     * Whether the active tab indicator's rect can transition
-     */
-    canIndicatorTransition?: boolean | undefined;
-    /**
-     * @internal
-     * Function to clean up the observer for the active tab's rect
-     */
-    indicatorCleanup?: VoidFunction | null | undefined;
-    /**
-     * @internal
-     * Whether the radio group's fieldset is disabled
-     */
-    fieldsetDisabled: boolean;
-    /**
-     * @internal
-     * Whether the radio group is in focus
-     */
-    focusVisible: boolean;
-    /**
-     * @internal
-     * Whether the radio group is in server-side rendering
-     */
-    ssr: boolean;
-}
-type UserDefinedContext = RequiredBy<PublicContext, 'id'>;
-type ComputedContext = Readonly<{
-    /**
-     * @computed
-     * Whether the radio group is disabled
-     */
-    isDisabled: boolean;
-}>;
-interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
-}
-interface MachineState {
-    value: 'idle';
-}
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
-interface ItemProps {
-    value: string;
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
-}
-interface ItemState {
-    /**
-     * Whether the radio is invalid
-     */
-    invalid: boolean;
-    /**
-     * Whether the radio is disabled
-     */
-    disabled: boolean;
-    /**
-     * Whether the radio is checked
-     */
-    checked: boolean;
-    /**
-     *  Whether the radio is focused
-     */
-    focused: boolean;
-    /**
-     * Whether the radio is hovered
-     */
-    hovered: boolean;
-    /**
-     * Whether the radio is active or pressed
-     */
-    active: boolean;
-}
-interface MachineApi<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: () => void;
-    /**
-     * Function to focus the radio group
-     */
-    focus: () => void;
-    /**
-     * 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'];
-}
-
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
-
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
-
-declare const props: ("ids" | "value" | "name" | "form" | "disabled" | "readOnly" | "onValueChange" | "orientation" | "id" | "dir" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "ids" | "value" | "name" | "form" | "disabled" | "readOnly" | "onValueChange" | "orientation" | "id" | "dir" | "getRootNode">];
-declare const itemProps: (keyof ItemProps)[];
-declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
-
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type ItemProps, type ItemState, type Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };

package/dist/index.mjs

@@ -1,428 +0,0 @@
-import { createAnatomy } from '@zag-js/anatomy';
-import { createScope, queryAll, dataAttr, visuallyHiddenStyle, nextTick } from '@zag-js/dom-query';
-import { isFocusVisible, trackFocusVisible } from '@zag-js/focus-visible';
-import { guards, createMachine } from '@zag-js/core';
-import { trackElementRect } from '@zag-js/element-rect';
-import { dispatchInputCheckedEvent, trackFormControl } from '@zag-js/form-utils';
-import { compact, isString, isEqual, createSplitProps } from '@zag-js/utils';
-import { createProps } from '@zag-js/types';
-
-const anatomy = createAnatomy("radio-group").parts(
-  "root",
-  "label",
-  "item",
-  "itemText",
-  "itemControl",
-  "indicator"
-);
-const parts = anatomy.build();
-
-const dom = createScope({
-  getRootId: (ctx) => ctx.ids?.root ?? `radio-group:${ctx.id}`,
-  getLabelId: (ctx) => ctx.ids?.label ?? `radio-group:${ctx.id}:label`,
-  getItemId: (ctx, value) => ctx.ids?.item?.(value) ?? `radio-group:${ctx.id}:radio:${value}`,
-  getItemHiddenInputId: (ctx, value) => ctx.ids?.itemHiddenInput?.(value) ?? `radio-group:${ctx.id}:radio:input:${value}`,
-  getItemControlId: (ctx, value) => ctx.ids?.itemControl?.(value) ?? `radio-group:${ctx.id}:radio:control:${value}`,
-  getItemLabelId: (ctx, value) => ctx.ids?.itemLabel?.(value) ?? `radio-group:${ctx.id}:radio:label:${value}`,
-  getIndicatorId: (ctx) => ctx.ids?.indicator ?? `radio-group:${ctx.id}:indicator`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getItemHiddenInputEl: (ctx, value) => dom.getById(ctx, dom.getItemHiddenInputId(ctx, value)),
-  getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
-  getFirstEnabledInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled)"),
-  getFirstEnabledAndCheckedInputEl: (ctx) => dom.getRootEl(ctx)?.querySelector("input:not(:disabled):checked"),
-  getInputEls: (ctx) => {
-    const ownerId = CSS.escape(dom.getRootId(ctx));
-    const selector = `input[type=radio][data-ownedby='${ownerId}']:not([disabled])`;
-    return queryAll(dom.getRootEl(ctx), selector);
-  },
-  getActiveRadioEl: (ctx) => {
-    if (!ctx.value)
-      return;
-    return dom.getById(ctx, dom.getItemId(ctx, ctx.value));
-  },
-  getOffsetRect: (el) => ({
-    left: el?.offsetLeft ?? 0,
-    top: el?.offsetTop ?? 0,
-    width: el?.offsetWidth ?? 0,
-    height: el?.offsetHeight ?? 0
-  }),
-  getRectById: (ctx, id) => {
-    const radioEl = dom.getById(ctx, dom.getItemId(ctx, id));
-    if (!radioEl)
-      return;
-    return dom.resolveRect(dom.getOffsetRect(radioEl));
-  },
-  resolveRect: (rect) => ({
-    width: `${rect.width}px`,
-    height: `${rect.height}px`,
-    left: `${rect.left}px`,
-    top: `${rect.top}px`
-  })
-});
-
-function connect(state, send, normalize) {
-  const groupDisabled = state.context.isDisabled;
-  const readOnly = state.context.readOnly;
-  function getItemState(props) {
-    return {
-      invalid: !!props.invalid,
-      disabled: !!props.disabled || groupDisabled,
-      checked: state.context.value === props.value,
-      focused: state.context.focusedValue === props.value,
-      hovered: state.context.hoveredValue === props.value,
-      active: state.context.activeValue === props.value
-    };
-  }
-  function getItemDataAttrs(props) {
-    const radioState = getItemState(props);
-    return {
-      "data-focus": dataAttr(radioState.focused),
-      "data-focus-visible": dataAttr(radioState.focused && state.context.focusVisible),
-      "data-disabled": dataAttr(radioState.disabled),
-      "data-readonly": dataAttr(readOnly),
-      "data-state": radioState.checked ? "checked" : "unchecked",
-      "data-hover": dataAttr(radioState.hovered),
-      "data-invalid": dataAttr(radioState.invalid),
-      "data-orientation": state.context.orientation,
-      "data-ssr": dataAttr(state.context.ssr)
-    };
-  }
-  const focus = () => {
-    const firstEnabledAndCheckedInput = dom.getFirstEnabledAndCheckedInputEl(state.context);
-    if (firstEnabledAndCheckedInput) {
-      firstEnabledAndCheckedInput.focus();
-      return;
-    }
-    const firstEnabledInput = dom.getFirstEnabledInputEl(state.context);
-    firstEnabledInput?.focus();
-  };
-  return {
-    focus,
-    value: state.context.value,
-    setValue(value) {
-      send({ type: "SET_VALUE", value, isTrusted: false });
-    },
-    clearValue() {
-      send({ type: "SET_VALUE", value: null, isTrusted: false });
-    },
-    getRootProps() {
-      return normalize.element({
-        ...parts.root.attrs,
-        "role": "radiogroup",
-        "id": dom.getRootId(state.context),
-        "aria-labelledby": dom.getLabelId(state.context),
-        "data-orientation": state.context.orientation,
-        "data-disabled": dataAttr(groupDisabled),
-        "aria-orientation": state.context.orientation,
-        "dir": state.context.dir,
-        "style": {
-          position: "relative"
-        }
-      });
-    },
-    getLabelProps() {
-      return normalize.element({
-        ...parts.label.attrs,
-        "dir": state.context.dir,
-        "data-orientation": state.context.orientation,
-        "data-disabled": dataAttr(groupDisabled),
-        "id": dom.getLabelId(state.context),
-        "onClick": focus
-      });
-    },
-    getItemState,
-    getItemProps(props) {
-      const itemState = getItemState(props);
-      return normalize.label({
-        ...parts.item.attrs,
-        dir: state.context.dir,
-        id: dom.getItemId(state.context, props.value),
-        htmlFor: dom.getItemHiddenInputId(state.context, props.value),
-        ...getItemDataAttrs(props),
-        onPointerMove() {
-          if (itemState.disabled)
-            return;
-          if (itemState.hovered)
-            return;
-          send({ type: "SET_HOVERED", value: props.value, hovered: true });
-        },
-        onPointerLeave() {
-          if (itemState.disabled)
-            return;
-          send({ type: "SET_HOVERED", value: null });
-        },
-        onPointerDown(event) {
-          if (itemState.disabled)
-            return;
-          if (itemState.focused && event.pointerType === "mouse") {
-            event.preventDefault();
-          }
-          send({ type: "SET_ACTIVE", value: props.value, active: true });
-        },
-        onPointerUp() {
-          if (itemState.disabled)
-            return;
-          send({ type: "SET_ACTIVE", value: null });
-        }
-      });
-    },
-    getItemTextProps(props) {
-      return normalize.element({
-        ...parts.itemText.attrs,
-        dir: state.context.dir,
-        id: dom.getItemLabelId(state.context, props.value),
-        ...getItemDataAttrs(props)
-      });
-    },
-    getItemControlProps(props) {
-      const controlState = getItemState(props);
-      return normalize.element({
-        ...parts.itemControl.attrs,
-        "dir": state.context.dir,
-        "id": dom.getItemControlId(state.context, props.value),
-        "data-active": dataAttr(controlState.active),
-        "aria-hidden": true,
-        ...getItemDataAttrs(props)
-      });
-    },
-    getItemHiddenInputProps(props) {
-      const inputState = getItemState(props);
-      return normalize.input({
-        "data-ownedby": dom.getRootId(state.context),
-        "id": dom.getItemHiddenInputId(state.context, props.value),
-        "type": "radio",
-        "name": state.context.name || state.context.id,
-        "form": state.context.form,
-        "value": props.value,
-        onClick(event) {
-          if (readOnly) {
-            event.preventDefault();
-            return;
-          }
-          if (event.currentTarget.checked) {
-            send({ type: "SET_VALUE", value: props.value, isTrusted: true });
-          }
-        },
-        onBlur() {
-          send({ type: "SET_FOCUSED", value: null, focused: false, focusVisible: false });
-        },
-        onFocus() {
-          const focusVisible = isFocusVisible();
-          send({ type: "SET_FOCUSED", value: props.value, focused: true, focusVisible });
-        },
-        onKeyDown(event) {
-          if (event.defaultPrevented)
-            return;
-          if (event.key === " ") {
-            send({ type: "SET_ACTIVE", value: props.value, active: true });
-          }
-        },
-        onKeyUp(event) {
-          if (event.defaultPrevented)
-            return;
-          if (event.key === " ") {
-            send({ type: "SET_ACTIVE", value: null });
-          }
-        },
-        "disabled": inputState.disabled,
-        "defaultChecked": inputState.checked,
-        "style": visuallyHiddenStyle
-      });
-    },
-    getIndicatorProps() {
-      return normalize.element({
-        "id": dom.getIndicatorId(state.context),
-        ...parts.indicator.attrs,
-        "dir": state.context.dir,
-        "hidden": state.context.value == null,
-        "data-disabled": dataAttr(groupDisabled),
-        "data-orientation": state.context.orientation,
-        "style": {
-          "--transition-property": "left, top, width, height",
-          "--left": state.context.indicatorRect?.left,
-          "--top": state.context.indicatorRect?.top,
-          "--width": state.context.indicatorRect?.width,
-          "--height": state.context.indicatorRect?.height,
-          "position": "absolute",
-          "willChange": "var(--transition-property)",
-          "transitionProperty": "var(--transition-property)",
-          "transitionDuration": state.context.canIndicatorTransition ? "var(--transition-duration, 150ms)" : "0ms",
-          "transitionTimingFunction": "var(--transition-timing-function)",
-          [state.context.orientation === "horizontal" ? "left" : "top"]: state.context.orientation === "horizontal" ? "var(--left)" : "var(--top)"
-        }
-      });
-    }
-  };
-}
-
-const { not } = guards;
-const invoke = {
-  change: (ctx) => {
-    if (ctx.value == null)
-      return;
-    ctx.onValueChange?.({ value: ctx.value });
-  }
-};
-const set = {
-  value: (ctx, value) => {
-    if (isEqual(ctx.value, value))
-      return;
-    ctx.value = value;
-    invoke.change(ctx);
-  }
-};
-function machine(userContext) {
-  const ctx = compact(userContext);
-  return createMachine(
-    {
-      id: "radio",
-      initial: "idle",
-      context: {
-        value: null,
-        activeValue: null,
-        focusedValue: null,
-        hoveredValue: null,
-        disabled: false,
-        orientation: "vertical",
-        ...ctx,
-        indicatorRect: {},
-        canIndicatorTransition: false,
-        fieldsetDisabled: false,
-        focusVisible: false,
-        ssr: true
-      },
-      computed: {
-        isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled
-      },
-      entry: ["syncIndicatorRect", "syncSsr"],
-      exit: ["cleanupObserver"],
-      activities: ["trackFormControlState", "trackFocusVisible"],
-      watch: {
-        value: ["setIndicatorTransition", "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: {}
-      }
-    },
-    {
-      guards: {
-        isTrusted: (_ctx, evt) => !!evt.isTrusted
-      },
-      activities: {
-        trackFormControlState(ctx2, _evt, { send, initialContext }) {
-          return trackFormControl(dom.getRootEl(ctx2), {
-            onFieldsetDisabledChange(disabled) {
-              ctx2.fieldsetDisabled = disabled;
-            },
-            onFormReset() {
-              send({ type: "SET_VALUE", value: initialContext.value });
-            }
-          });
-        },
-        trackFocusVisible(ctx2) {
-          return trackFocusVisible({ root: dom.getRootNode(ctx2) });
-        }
-      },
-      actions: {
-        setValue(ctx2, evt) {
-          set.value(ctx2, evt.value);
-        },
-        setHovered(ctx2, evt) {
-          ctx2.hoveredValue = evt.value;
-        },
-        setActive(ctx2, evt) {
-          ctx2.activeValue = evt.value;
-        },
-        setFocused(ctx2, evt) {
-          ctx2.focusedValue = evt.value;
-          ctx2.focusVisible = evt.focusVisible;
-        },
-        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?.();
-        },
-        syncSsr(ctx2) {
-          ctx2.ssr = false;
-        },
-        syncIndicatorRect(ctx2) {
-          ctx2.indicatorCleanup?.();
-          if (!dom.getIndicatorEl(ctx2))
-            return;
-          const value = ctx2.value;
-          const radioEl = dom.getActiveRadioEl(ctx2);
-          if (value == null || !radioEl) {
-            ctx2.indicatorRect = {};
-            return;
-          }
-          ctx2.indicatorCleanup = trackElementRect(radioEl, {
-            getRect(el) {
-              return dom.getOffsetRect(el);
-            },
-            onChange(rect) {
-              ctx2.indicatorRect = dom.resolveRect(rect);
-              nextTick(() => {
-                ctx2.canIndicatorTransition = false;
-              });
-            }
-          });
-        },
-        dispatchChangeEvent(ctx2) {
-          const inputEls = dom.getInputEls(ctx2);
-          inputEls.forEach((inputEl) => {
-            const checked = inputEl.value === ctx2.value;
-            if (checked === inputEl.checked)
-              return;
-            dispatchInputCheckedEvent(inputEl, { checked });
-          });
-        }
-      }
-    }
-  );
-}
-
-const props = createProps()([
-  "dir",
-  "disabled",
-  "form",
-  "getRootNode",
-  "id",
-  "ids",
-  "name",
-  "onValueChange",
-  "orientation",
-  "readOnly",
-  "value"
-]);
-const splitProps = createSplitProps(props);
-const itemProps = createProps()(["value", "disabled", "invalid"]);
-const splitItemProps = createSplitProps(itemProps);
-
-export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };