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

package/dist/index.d.ts

@@ -1,155 +1,159 @@
-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" | "control" | "indicator">;
+import * as _destyler_anatomy0 from "@destyler/anatomy";
+import * as _destyler_xstate0 from "@destyler/xstate";
+import { AnyEventObject, Machine, XSend, XState } from "@destyler/xstate";
+import { CommonProperties, DirectionProperty, NormalizeProps, PropTypes, RequiredBy } from "@destyler/types";
 
+//#region src/anatomy.d.ts
+declare const anatomy: _destyler_anatomy0.AnatomyInstance<"root" | "label" | "control" | "indicator">;
+//#endregion
+//#region src/types.d.ts
 type CheckedState = boolean | 'indeterminate';
 interface CheckedChangeDetails {
-    checked: CheckedState;
+  checked: CheckedState;
 }
 type ElementIds = Partial<{
-    root: string;
-    hiddenInput: string;
-    control: string;
-    label: string;
+  root: string;
+  hiddenInput: string;
+  control: string;
+  label: string;
 }>;
 interface PublicContext extends DirectionProperty, CommonProperties {
-    /**
-     * The ids of the elements in the checkbox. Useful for composition.
-     */
-    ids?: ElementIds | undefined;
-    /**
-     * Whether the checkbox is disabled
-     */
-    disabled?: boolean | undefined;
-    /**
-     * Whether the checkbox is invalid
-     */
-    invalid?: boolean | undefined;
-    /**
-     * Whether the checkbox is required
-     */
-    required?: boolean | undefined;
-    /**
-     * The checked state of the checkbox
-     */
-    checked: CheckedState;
-    /**
-     * Whether the checkbox is read-only
-     */
-    readOnly?: boolean | undefined;
-    /**
-     * The callback invoked when the checked state changes.
-     */
-    onCheckedChange?: (details: CheckedChangeDetails) => void;
-    /**
-     * The name of the input field in a checkbox.
-     * Useful for form submission.
-     */
-    name?: string | undefined;
-    /**
-     * The id of the form that the checkbox belongs to.
-     */
-    form?: string | undefined;
-    /**
-     * The value of checkbox input. Useful for form submission.
-     * @default "on"
-     */
-    value: string;
+  /**
+   * The ids of the elements in the checkbox. Useful for composition.
+   */
+  ids?: ElementIds | undefined;
+  /**
+   * Whether the checkbox is disabled
+   */
+  disabled?: boolean | undefined;
+  /**
+   * Whether the checkbox is invalid
+   */
+  invalid?: boolean | undefined;
+  /**
+   * Whether the checkbox is required
+   */
+  required?: boolean | undefined;
+  /**
+   * The checked state of the checkbox
+   */
+  checked: CheckedState;
+  /**
+   * Whether the checkbox is read-only
+   */
+  readOnly?: boolean | undefined;
+  /**
+   * The callback invoked when the checked state changes.
+   */
+  onCheckedChange?: (details: CheckedChangeDetails) => void;
+  /**
+   * The name of the input field in a checkbox.
+   * Useful for form submission.
+   */
+  name?: string | undefined;
+  /**
+   * The id of the form that the checkbox belongs to.
+   */
+  form?: string | undefined;
+  /**
+   * The value of checkbox input. Useful for form submission.
+   * @default "on"
+   */
+  value: string;
 }
 type UserDefinedContext = RequiredBy<PublicContext, 'id'>;
 type ComputedContext = Readonly<{
-    /**
-     * Whether the checkbox is checked
-     */
-    isIndeterminate: boolean;
-    /**
-     * Whether the checkbox is checked
-     */
-    isChecked: boolean;
-    /**
-     * Whether the checkbox is disabled
-     */
-    isDisabled: boolean;
+  /**
+   * Whether the checkbox is checked
+   */
+  isIndeterminate: boolean;
+  /**
+   * Whether the checkbox is checked
+   */
+  isChecked: boolean;
+  /**
+   * Whether the checkbox is disabled
+   */
+  isDisabled: boolean;
 }>;
 interface PrivateContext {
-    /**
-     * @internal
-     * Whether the checkbox is pressed
-     */
-    active?: boolean | undefined;
-    /**
-     * @internal
-     * Whether the checkbox has focus
-     */
-    focused?: boolean | undefined;
-    /**
-     * @internal
-     * Whether the checkbox is focus visible
-     */
-    focusVisible?: boolean | undefined;
-    /**
-     * @internal
-     * Whether the checkbox is hovered
-     */
-    hovered?: boolean | undefined;
-    /**
-     * @internal
-     * Whether the checkbox's fieldset is disabled
-     */
-    fieldsetDisabled: boolean;
-}
-interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
+  /**
+   * @internal
+   * Whether the checkbox is pressed
+   */
+  active?: boolean | undefined;
+  /**
+   * @internal
+   * Whether the checkbox has focus
+   */
+  focused?: boolean | undefined;
+  /**
+   * @internal
+   * Whether the checkbox is focus visible
+   */
+  focusVisible?: boolean | undefined;
+  /**
+   * @internal
+   * Whether the checkbox is hovered
+   */
+  hovered?: boolean | undefined;
+  /**
+   * @internal
+   * Whether the checkbox's fieldset is disabled
+   */
+  fieldsetDisabled: boolean;
 }
+interface MachineContext extends PublicContext, PrivateContext, ComputedContext {}
 interface MachineState {
-    value: 'ready';
+  value: 'ready';
 }
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
+type State = XState<MachineContext, MachineState>;
+type Send = XSend<AnyEventObject>;
+type Service = Machine<MachineContext, MachineState, AnyEventObject>;
 interface MachineApi<T extends PropTypes = PropTypes> {
-    /**
-     * Whether the checkbox is checked
-     */
-    checked: boolean;
-    /**
-     * Whether the checkbox is disabled
-     */
-    disabled: boolean | undefined;
-    /**
-     * Whether the checkbox is indeterminate
-     */
-    indeterminate: boolean;
-    /**
-     * Whether the checkbox is focused
-     */
-    focused: boolean | undefined;
-    /**
-     *  The checked state of the checkbox
-     */
-    checkedState: CheckedState;
-    /**
-     * Function to set the checked state of the checkbox
-     */
-    setChecked: (checked: CheckedState) => void;
-    /**
-     * Function to toggle the checked state of the checkbox
-     */
-    toggleChecked: () => void;
-    getRootProps: () => T['label'];
-    getLabelProps: () => T['element'];
-    getControlProps: () => T['element'];
-    getHiddenInputProps: () => T['input'];
-    getIndicatorProps: () => T['element'];
+  /**
+   * Whether the checkbox is checked
+   */
+  checked: boolean;
+  /**
+   * Whether the checkbox is disabled
+   */
+  disabled: boolean | undefined;
+  /**
+   * Whether the checkbox is indeterminate
+   */
+  indeterminate: boolean;
+  /**
+   * Whether the checkbox is focused
+   */
+  focused: boolean | undefined;
+  /**
+   *  The checked state of the checkbox
+   */
+  checkedState: CheckedState;
+  /**
+   * Function to set the checked state of the checkbox
+   */
+  setChecked: (checked: CheckedState) => void;
+  /**
+   * Function to toggle the checked state of the checkbox
+   */
+  toggleChecked: () => void;
+  getRootProps: () => T['label'];
+  getLabelProps: () => T['element'];
+  getControlProps: () => T['element'];
+  getHiddenInputProps: () => T['input'];
+  getIndicatorProps: () => T['element'];
 }
-
+//#endregion
+//#region src/connect.d.ts
 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" | "disabled" | "invalid" | "required" | "checked" | "readOnly" | "onCheckedChange" | "name" | "form" | "value" | "id" | "dir" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "ids" | "disabled" | "invalid" | "required" | "checked" | "readOnly" | "onCheckedChange" | "name" | "form" | "value" | "id" | "dir" | "getRootNode">];
-
-export { type MachineApi as Api, type CheckedChangeDetails, type CheckedState, type UserDefinedContext as Context, type ElementIds, type Service, anatomy, connect, machine, props, splitProps };
+//#endregion
+//#region src/machine.d.ts
+declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
+//#endregion
+//#region src/props.d.ts
+declare const props: ("value" | "ids" | "disabled" | "invalid" | "required" | "checked" | "readOnly" | "onCheckedChange" | "name" | "form" | "dir" | "id" | "getRootNode")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "ids" | "disabled" | "invalid" | "required" | "checked" | "readOnly" | "onCheckedChange" | "name" | "form" | "dir" | "id" | "getRootNode">];
+//#endregion
+export { type MachineApi as Api, type CheckedChangeDetails, type CheckedState, type UserDefinedContext as Context, type ElementIds, type Service, anatomy, connect, machine, props, splitProps };

package/dist/index.js

@@ -0,0 +1,302 @@
+import { createAnatomy } from "@destyler/anatomy";
+import { createScope, dataAttr, dispatchInputCheckedEvent, getEventTarget, setElementChecked, trackFormControl, trackPress, visuallyHiddenStyle } from "@destyler/dom";
+import { isFocusVisible, trackFocusVisible } from "@destyler/focus-visible";
+import { compact, createSplitProps, isEqual } from "@destyler/utils";
+import { createMachine, guards } from "@destyler/xstate";
+import { createProps } from "@destyler/types";
+
+//#region src/anatomy.ts
+const anatomy = createAnatomy("checkbox").parts("root", "label", "control", "indicator");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/dom.ts
+const dom = createScope({
+	getRootId: (ctx) => ctx.ids?.root ?? `checkbox:${ctx.id}`,
+	getLabelId: (ctx) => ctx.ids?.label ?? `checkbox:${ctx.id}:label`,
+	getControlId: (ctx) => ctx.ids?.control ?? `checkbox:${ctx.id}:control`,
+	getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `checkbox:${ctx.id}:input`,
+	getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+	getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
+});
+
+//#endregion
+//#region src/connect.ts
+function connect(state, send, normalize) {
+	const disabled = state.context.isDisabled;
+	const readOnly = state.context.readOnly;
+	const focused = !disabled && state.context.focused;
+	const focusVisible = !disabled && state.context.focusVisible;
+	const checked = state.context.isChecked;
+	const indeterminate = state.context.isIndeterminate;
+	const dataAttrs = {
+		"data-active": dataAttr(state.context.active),
+		"data-focus": dataAttr(focused),
+		"data-focus-visible": dataAttr(focusVisible),
+		"data-readonly": dataAttr(readOnly),
+		"data-hover": dataAttr(state.context.hovered),
+		"data-disabled": dataAttr(disabled),
+		"data-state": indeterminate ? "indeterminate" : state.context.checked ? "checked" : "unchecked",
+		"data-invalid": dataAttr(state.context.invalid)
+	};
+	return {
+		checked,
+		disabled,
+		indeterminate,
+		focused,
+		checkedState: state.context.checked,
+		setChecked(checked$1) {
+			send({
+				type: "CHECKED.SET",
+				checked: checked$1,
+				isTrusted: false
+			});
+		},
+		toggleChecked() {
+			send({
+				type: "CHECKED.TOGGLE",
+				checked,
+				isTrusted: false
+			});
+		},
+		getRootProps() {
+			return normalize.label({
+				...parts.root.attrs,
+				...dataAttrs,
+				dir: state.context.dir,
+				id: dom.getRootId(state.context),
+				htmlFor: dom.getHiddenInputId(state.context),
+				onPointerMove() {
+					if (disabled) return;
+					send({
+						type: "CONTEXT.SET",
+						context: { hovered: true }
+					});
+				},
+				onPointerLeave() {
+					if (disabled) return;
+					send({
+						type: "CONTEXT.SET",
+						context: { hovered: false }
+					});
+				},
+				onClick(event) {
+					const target = getEventTarget(event);
+					if (target === dom.getHiddenInputEl(state.context)) event.stopPropagation();
+				}
+			});
+		},
+		getLabelProps() {
+			return normalize.element({
+				...parts.label.attrs,
+				...dataAttrs,
+				dir: state.context.dir,
+				id: dom.getLabelId(state.context)
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				...dataAttrs,
+				"dir": state.context.dir,
+				"id": dom.getControlId(state.context),
+				"aria-hidden": true
+			});
+		},
+		getIndicatorProps() {
+			return normalize.element({
+				...parts.indicator.attrs,
+				...dataAttrs,
+				dir: state.context.dir,
+				hidden: !indeterminate && !state.context.checked
+			});
+		},
+		getHiddenInputProps() {
+			return normalize.input({
+				"id": dom.getHiddenInputId(state.context),
+				"type": "checkbox",
+				"required": state.context.required,
+				"defaultChecked": checked,
+				"disabled": disabled,
+				"aria-labelledby": dom.getLabelId(state.context),
+				"aria-invalid": state.context.invalid,
+				"name": state.context.name,
+				"form": state.context.form,
+				"value": state.context.value,
+				"style": visuallyHiddenStyle,
+				onFocus() {
+					const focusVisible$1 = isFocusVisible();
+					send({
+						type: "CONTEXT.SET",
+						context: {
+							focused: true,
+							focusVisible: focusVisible$1
+						}
+					});
+				},
+				onBlur() {
+					send({
+						type: "CONTEXT.SET",
+						context: {
+							focused: false,
+							focusVisible: false
+						}
+					});
+				},
+				onClick(event) {
+					if (readOnly) {
+						event.preventDefault();
+						return;
+					}
+					const checked$1 = event.currentTarget.checked;
+					send({
+						type: "CHECKED.SET",
+						checked: checked$1,
+						isTrusted: true
+					});
+				}
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machine.ts
+const { not } = guards;
+function isIndeterminate(checked) {
+	return checked === "indeterminate";
+}
+function isChecked(checked) {
+	return isIndeterminate(checked) ? false : !!checked;
+}
+const invoke = { change: (ctx) => {
+	ctx.onCheckedChange?.({ checked: ctx.checked });
+} };
+const set = { checked: (ctx, checked) => {
+	if (isEqual(ctx.checked, checked)) return;
+	ctx.checked = checked;
+	invoke.change(ctx);
+} };
+function machine(userContext) {
+	const ctx = compact(userContext);
+	return createMachine({
+		id: "checkbox",
+		initial: "ready",
+		context: {
+			checked: false,
+			value: "on",
+			disabled: false,
+			...ctx,
+			fieldsetDisabled: false,
+			focusVisible: false
+		},
+		watch: {
+			disabled: "removeFocusIfNeeded",
+			checked: "syncInputElement"
+		},
+		activities: [
+			"trackFormControlState",
+			"trackPressEvent",
+			"trackFocusVisible"
+		],
+		on: {
+			"CHECKED.TOGGLE": [{
+				guard: not("isTrusted"),
+				actions: ["toggleChecked", "dispatchChangeEvent"]
+			}, { actions: ["toggleChecked"] }],
+			"CHECKED.SET": [{
+				guard: not("isTrusted"),
+				actions: ["setChecked", "dispatchChangeEvent"]
+			}, { actions: ["setChecked"] }],
+			"CONTEXT.SET": { actions: ["setContext"] }
+		},
+		computed: {
+			isIndeterminate: (ctx$1) => isIndeterminate(ctx$1.checked),
+			isChecked: (ctx$1) => isChecked(ctx$1.checked),
+			isDisabled: (ctx$1) => !!ctx$1.disabled || ctx$1.fieldsetDisabled
+		},
+		states: { ready: {} }
+	}, {
+		guards: { isTrusted: (_ctx, evt) => !!evt.isTrusted },
+		activities: {
+			trackPressEvent(ctx$1) {
+				if (ctx$1.isDisabled) return;
+				return trackPress({
+					pointerNode: dom.getRootEl(ctx$1),
+					keyboardNode: dom.getHiddenInputEl(ctx$1),
+					isValidKey: (event) => event.key === " ",
+					onPress: () => ctx$1.active = false,
+					onPressStart: () => ctx$1.active = true,
+					onPressEnd: () => ctx$1.active = false
+				});
+			},
+			trackFocusVisible(ctx$1) {
+				if (ctx$1.isDisabled) return;
+				return trackFocusVisible({ root: dom.getRootNode(ctx$1) });
+			},
+			trackFormControlState(ctx$1, _evt, { send, initialContext }) {
+				return trackFormControl(dom.getHiddenInputEl(ctx$1), {
+					onFieldsetDisabledChange(disabled) {
+						ctx$1.fieldsetDisabled = disabled;
+					},
+					onFormReset() {
+						send({
+							type: "CHECKED.SET",
+							checked: !!initialContext.checked
+						});
+					}
+				});
+			}
+		},
+		actions: {
+			setContext(ctx$1, evt) {
+				Object.assign(ctx$1, evt.context);
+			},
+			syncInputElement(ctx$1) {
+				const inputEl = dom.getHiddenInputEl(ctx$1);
+				if (!inputEl) return;
+				setElementChecked(inputEl, ctx$1.isChecked);
+				inputEl.indeterminate = ctx$1.isIndeterminate;
+			},
+			removeFocusIfNeeded(ctx$1) {
+				if (ctx$1.disabled && ctx$1.focused) {
+					ctx$1.focused = false;
+					ctx$1.focusVisible = false;
+				}
+			},
+			setChecked(ctx$1, evt) {
+				set.checked(ctx$1, evt.checked);
+			},
+			toggleChecked(ctx$1) {
+				const checked = isIndeterminate(ctx$1.checked) ? true : !ctx$1.checked;
+				set.checked(ctx$1, checked);
+			},
+			dispatchChangeEvent(ctx$1) {
+				const inputEl = dom.getHiddenInputEl(ctx$1);
+				dispatchInputCheckedEvent(inputEl, { checked: isChecked(ctx$1.checked) });
+			}
+		}
+	});
+}
+
+//#endregion
+//#region src/props.ts
+const props = createProps()([
+	"checked",
+	"dir",
+	"disabled",
+	"form",
+	"getRootNode",
+	"id",
+	"ids",
+	"invalid",
+	"name",
+	"onCheckedChange",
+	"readOnly",
+	"required",
+	"value"
+]);
+const splitProps = createSplitProps(props);
+
+//#endregion
+export { anatomy, connect, machine, props, splitProps };

package/package.json

@@ -1,38 +1,32 @@
 {
   "name": "@destyler/checkbox",
   "type": "module",
-  "version": "0.0.7-beta.7",
+  "version": "0.0.7-beta.9",
   "description": "a control that allows the user to toggle between checked and not checked.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.mts",
-      "default": "./dist/index.mjs"
-    },
-    "./*": "./*"
+    ".": "./dist/index.js"
   },
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "*.d.ts",
     "dist"
   ],
   "dependencies": {
-    "@zag-js/anatomy": "^0.82.1",
-    "@zag-js/core": "^0.82.1",
-    "@zag-js/dom-event": "^0.80.0",
-    "@zag-js/dom-query": "^0.82.1",
-    "@zag-js/focus-visible": "^0.82.1",
-    "@zag-js/form-utils": "^0.81.1",
-    "@zag-js/types": "^0.82.1",
-    "@zag-js/utils": "^0.82.1"
+    "@destyler/anatomy": "0.0.7-beta.9",
+    "@destyler/dom": "0.0.7-beta.9",
+    "@destyler/focus-visible": "0.0.7-beta.9",
+    "@destyler/types": "0.0.7-beta.9",
+    "@destyler/utils": "0.0.7-beta.9",
+    "@destyler/xstate": "0.0.7-beta.9"
   },
   "scripts": {
     "clear": "rimraf ./dist",
     "clear:node_modules": "rimraf ./node_modules",
-    "build": "pnpm run clear && unbuild",
-    "stub": "unbuild --stub"
+    "build": "pnpm run clear && tsdown",
+    "watch": "tsdown --watch"
   }
 }