@destyler/checkbox 0.0.6 → 0.0.7-beta.1

package/dist/index.cjs

@@ -1,16 +1,294 @@
 'use strict';
 
-const index = require('./component.cjs');
-require('vue');
-require('@destyler/primitive');
-require('@destyler/composition');
-require('@destyler/shared');
-require('@destyler/directives');
-require('@destyler/presence');
+const anatomy$1 = require('@zag-js/anatomy');
+const domQuery = require('@zag-js/dom-query');
+const focusVisible = require('@zag-js/focus-visible');
+const core = require('@zag-js/core');
+const domEvent = require('@zag-js/dom-event');
+const formUtils = require('@zag-js/form-utils');
+const utils = require('@zag-js/utils');
+const types = require('@zag-js/types');
 
+const anatomy = anatomy$1.createAnatomy("checkbox").parts("root", "label", "control", "indicator");
+const parts = anatomy.build();
 
+const dom = domQuery.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))
+});
 
-exports.CheckboxIndicator = index.CheckboxIndicator;
-exports.CheckboxRoot = index.CheckboxRoot;
-exports.checkboxIndicatorProps = index.checkboxIndicatorProps;
-exports.checkboxRootProps = index.checkboxRootProps;
+function connect(state, send, normalize) {
+  const disabled = state.context.isDisabled;
+  const readOnly = state.context.readOnly;
+  const focused = !disabled && state.context.focused;
+  const focusVisible$1 = !disabled && state.context.focusVisible;
+  const checked = state.context.isChecked;
+  const indeterminate = state.context.isIndeterminate;
+  const dataAttrs = {
+    "data-active": domQuery.dataAttr(state.context.active),
+    "data-focus": domQuery.dataAttr(focused),
+    "data-focus-visible": domQuery.dataAttr(focusVisible$1),
+    "data-readonly": domQuery.dataAttr(readOnly),
+    "data-hover": domQuery.dataAttr(state.context.hovered),
+    "data-disabled": domQuery.dataAttr(disabled),
+    "data-state": indeterminate ? "indeterminate" : state.context.checked ? "checked" : "unchecked",
+    "data-invalid": domQuery.dataAttr(state.context.invalid)
+  };
+  return {
+    checked,
+    disabled,
+    indeterminate,
+    focused,
+    checkedState: state.context.checked,
+    setChecked(checked2) {
+      send({ type: "CHECKED.SET", checked: checked2, 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 = domQuery.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": domQuery.visuallyHiddenStyle,
+        onFocus() {
+          const focusVisible2 = focusVisible.isFocusVisible();
+          send({ type: "CONTEXT.SET", context: { focused: true, focusVisible: focusVisible2 } });
+        },
+        onBlur() {
+          send({ type: "CONTEXT.SET", context: { focused: false, focusVisible: false } });
+        },
+        onClick(event) {
+          if (readOnly) {
+            event.preventDefault();
+            return;
+          }
+          const checked2 = event.currentTarget.checked;
+          send({ type: "CHECKED.SET", checked: checked2, isTrusted: true });
+        }
+      });
+    }
+  };
+}
+
+const { not } = core.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 (utils.isEqual(ctx.checked, checked))
+      return;
+    ctx.checked = checked;
+    invoke.change(ctx);
+  }
+};
+function machine(userContext) {
+  const ctx = utils.compact(userContext);
+  return core.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: (ctx2) => isIndeterminate(ctx2.checked),
+        isChecked: (ctx2) => isChecked(ctx2.checked),
+        isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled
+      },
+      states: {
+        ready: {}
+      }
+    },
+    {
+      guards: {
+        isTrusted: (_ctx, evt) => !!evt.isTrusted
+      },
+      activities: {
+        trackPressEvent(ctx2) {
+          if (ctx2.isDisabled)
+            return;
+          return domEvent.trackPress({
+            pointerNode: dom.getRootEl(ctx2),
+            keyboardNode: dom.getHiddenInputEl(ctx2),
+            isValidKey: (event) => event.key === " ",
+            onPress: () => ctx2.active = false,
+            onPressStart: () => ctx2.active = true,
+            onPressEnd: () => ctx2.active = false
+          });
+        },
+        trackFocusVisible(ctx2) {
+          if (ctx2.isDisabled)
+            return;
+          return focusVisible.trackFocusVisible({ root: dom.getRootNode(ctx2) });
+        },
+        trackFormControlState(ctx2, _evt, { send, initialContext }) {
+          return formUtils.trackFormControl(dom.getHiddenInputEl(ctx2), {
+            onFieldsetDisabledChange(disabled) {
+              ctx2.fieldsetDisabled = disabled;
+            },
+            onFormReset() {
+              send({ type: "CHECKED.SET", checked: !!initialContext.checked });
+            }
+          });
+        }
+      },
+      actions: {
+        setContext(ctx2, evt) {
+          Object.assign(ctx2, evt.context);
+        },
+        syncInputElement(ctx2) {
+          const inputEl = dom.getHiddenInputEl(ctx2);
+          if (!inputEl)
+            return;
+          formUtils.setElementChecked(inputEl, ctx2.isChecked);
+          inputEl.indeterminate = ctx2.isIndeterminate;
+        },
+        removeFocusIfNeeded(ctx2) {
+          if (ctx2.disabled && ctx2.focused) {
+            ctx2.focused = false;
+            ctx2.focusVisible = false;
+          }
+        },
+        setChecked(ctx2, evt) {
+          set.checked(ctx2, evt.checked);
+        },
+        toggleChecked(ctx2) {
+          const checked = isIndeterminate(ctx2.checked) ? true : !ctx2.checked;
+          set.checked(ctx2, checked);
+        },
+        dispatchChangeEvent(ctx2) {
+          const inputEl = dom.getHiddenInputEl(ctx2);
+          formUtils.dispatchInputCheckedEvent(inputEl, { checked: isChecked(ctx2.checked) });
+        }
+      }
+    }
+  );
+}
+
+const props = types.createProps()([
+  "checked",
+  "dir",
+  "disabled",
+  "form",
+  "getRootNode",
+  "id",
+  "ids",
+  "invalid",
+  "name",
+  "onCheckedChange",
+  "readOnly",
+  "required",
+  "value"
+]);
+const splitProps = utils.createSplitProps(props);
+
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.machine = machine;
+exports.props = props;
+exports.splitProps = splitProps;

package/dist/index.d.cts

@@ -1,4 +1,155 @@
-export { CheckboxIndicator, CheckboxIndicatorProps, CheckboxRoot, CheckboxRootProps, checkboxIndicatorProps, checkboxRootProps } from './component.cjs';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/shared';
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { Machine, StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "control" | "indicator">;
+
+type CheckedState = boolean | 'indeterminate';
+interface CheckedChangeDetails {
+    checked: CheckedState;
+}
+type ElementIds = Partial<{
+    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;
+}
+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;
+}>;
+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 {
+}
+interface MachineState {
+    value: 'ready';
+}
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type Service = Machine<MachineContext, MachineState, StateMachine.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'];
+}
+
+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 };

package/dist/index.d.mts

@@ -1,4 +1,155 @@
-export { CheckboxIndicator, CheckboxIndicatorProps, CheckboxRoot, CheckboxRootProps, checkboxIndicatorProps, checkboxRootProps } from './component.mjs';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/shared';
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { Machine, StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "control" | "indicator">;
+
+type CheckedState = boolean | 'indeterminate';
+interface CheckedChangeDetails {
+    checked: CheckedState;
+}
+type ElementIds = Partial<{
+    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;
+}
+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;
+}>;
+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 {
+}
+interface MachineState {
+    value: 'ready';
+}
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type Service = Machine<MachineContext, MachineState, StateMachine.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'];
+}
+
+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 };