@destyler/radio 0.0.6 → 0.0.7-beta.2

package/dist/index.mjs

@@ -1,8 +1,428 @@
-export { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot, radioGroupIndicatorProps, radioGroupItemProps, radioGroupRootProps } from './component.mjs';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/shared';
-import '@destyler/composition';
-import '@destyler/roving-focus';
-import '@vueuse/core';
-import '@destyler/presence';
+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 { createMachine, guards } from '@zag-js/core';
+import { trackElementRect } from '@zag-js/element-rect';
+import { trackFormControl, dispatchInputCheckedEvent } 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 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@destyler/radio",
   "type": "module",
-  "version": "0.0.6",
-  "description": "a set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.",
+  "version": "0.0.7-beta.2",
+  "description": "A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
   "exports": {
@@ -10,14 +10,6 @@
       "types": "./dist/index.d.mts",
       "default": "./dist/index.mjs"
     },
-    "./resolver": {
-      "types": "./dist/resolver.d.mts",
-      "default": "./dist/resolver.mjs"
-    },
-    "./component": {
-      "types": "./dist/component.d.mts",
-      "default": "./dist/component.mjs"
-    },
     "./*": "./*"
   },
   "main": "dist/index.cjs",
@@ -27,20 +19,19 @@
     "*.d.ts",
     "dist"
   ],
-  "peerDependencies": {
-    "vue": ">=3.4.21"
-  },
   "dependencies": {
-    "@vueuse/core": "^10.9.0",
-    "@destyler/composition": "0.0.6",
-    "@destyler/primitive": "0.0.6",
-    "@destyler/presence": "0.0.6",
-    "@destyler/directives": "0.0.6",
-    "@destyler/roving-focus": "0.0.6",
-    "@destyler/shared": "0.0.6"
+    "@zag-js/anatomy": "^0.80.0",
+    "@zag-js/core": "^0.80.0",
+    "@zag-js/dom-query": "^0.80.0",
+    "@zag-js/element-rect": "^0.80.0",
+    "@zag-js/focus-visible": "^0.80.0",
+    "@zag-js/form-utils": "^0.80.0",
+    "@zag-js/types": "^0.80.0",
+    "@zag-js/utils": "^0.80.0"
   },
   "scripts": {
     "clear": "rimraf ./dist",
+    "clear:node_modules": "rimraf ./node_modules",
     "build": "pnpm run clear && unbuild",
     "stub": "unbuild --stub"
   }

package/README.md

@@ -1,7 +0,0 @@
-# @destyler/radio
-
-[![NPM version](https://img.shields.io/npm/v/@destyler/radio?color=a1b858&radio=)](https://www.npmjs.com/package/@destyler/radio)
-
-> a set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
-
-[GitHub](https://github.com/destyler/destyler) | [Documentation](https://destyler-dev.zeabur.app/)