@destyler/switch 0.0.7-beta.5 → 0.0.7-beta.9

package/dist/index.cjs

@@ -1,286 +0,0 @@
-'use strict';
-
-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("switch").parts("root", "label", "control", "thumb");
-const parts = anatomy.build();
-
-const dom = domQuery.createScope({
-  getRootId: (ctx) => ctx.ids?.root ?? `switch:${ctx.id}`,
-  getLabelId: (ctx) => ctx.ids?.label ?? `switch:${ctx.id}:label`,
-  getThumbId: (ctx) => ctx.ids?.thumb ?? `switch:${ctx.id}:thumb`,
-  getControlId: (ctx) => ctx.ids?.control ?? `switch:${ctx.id}:control`,
-  getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `switch:${ctx.id}:input`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
-});
-
-function connect(state, send, normalize) {
-  const disabled = state.context.isDisabled;
-  const readOnly = state.context.readOnly;
-  const checked = state.context.checked;
-  const focused = !disabled && state.context.focused;
-  const focusVisible$1 = !disabled && state.context.focusVisible;
-  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": state.context.checked ? "checked" : "unchecked",
-    "data-invalid": domQuery.dataAttr(state.context.invalid)
-  };
-  return {
-    checked,
-    disabled,
-    focused,
-    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) {
-          if (disabled)
-            return;
-          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)
-      });
-    },
-    getThumbProps() {
-      return normalize.element({
-        ...parts.thumb.attrs,
-        ...dataAttrs,
-        "dir": state.context.dir,
-        "id": dom.getThumbId(state.context),
-        "aria-hidden": true
-      });
-    },
-    getControlProps() {
-      return normalize.element({
-        ...parts.control.attrs,
-        ...dataAttrs,
-        "dir": state.context.dir,
-        "id": dom.getControlId(state.context),
-        "aria-hidden": true
-      });
-    },
-    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;
-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: "switch",
-      initial: "ready",
-      context: {
-        checked: false,
-        label: "switch",
-        value: "on",
-        disabled: false,
-        ...ctx,
-        fieldsetDisabled: false,
-        focusVisible: false
-      },
-      computed: {
-        isDisabled: (ctx2) => ctx2.disabled || ctx2.fieldsetDisabled
-      },
-      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"]
-        }
-      },
-      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, src: "form-reset" });
-            }
-          });
-        }
-      },
-      actions: {
-        setContext(ctx2, evt) {
-          Object.assign(ctx2, evt.context);
-        },
-        syncInputElement(ctx2) {
-          const inputEl = dom.getHiddenInputEl(ctx2);
-          if (!inputEl)
-            return;
-          inputEl.checked = !!ctx2.checked;
-        },
-        removeFocusIfNeeded(ctx2) {
-          if (ctx2.disabled && ctx2.focused) {
-            ctx2.focused = false;
-          }
-        },
-        setChecked(ctx2, evt) {
-          set.checked(ctx2, evt.checked);
-        },
-        toggleChecked(ctx2, _evt) {
-          set.checked(ctx2, !ctx2.checked);
-        },
-        dispatchChangeEvent(ctx2) {
-          const inputEl = dom.getHiddenInputEl(ctx2);
-          formUtils.dispatchInputCheckedEvent(inputEl, { checked: ctx2.checked });
-        }
-      }
-    }
-  );
-}
-
-const props = types.createProps()([
-  "checked",
-  "dir",
-  "disabled",
-  "form",
-  "getRootNode",
-  "id",
-  "ids",
-  "invalid",
-  "label",
-  "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,143 +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" | "control" | "thumb">;
-
-interface CheckedChangeDetails {
-    checked: boolean;
-}
-type ElementIds = Partial<{
-    root: string;
-    hiddenInput: string;
-    control: string;
-    label: string;
-    thumb: string;
-}>;
-interface PublicContext extends DirectionProperty, CommonProperties {
-    /**
-     * The ids of the elements in the switch. Useful for composition.
-     */
-    ids?: ElementIds | undefined;
-    /**
-     * Specifies the localized strings that identifies the accessibility elements and their states
-     */
-    label: string;
-    /**
-     * Whether the switch is disabled.
-     */
-    disabled?: boolean | undefined;
-    /**
-     * If `true`, the switch is marked as invalid.
-     */
-    invalid?: boolean | undefined;
-    /**
-     * If `true`, the switch input is marked as required,
-     */
-    required?: boolean | undefined;
-    /**
-     * Whether the switch is read-only
-     */
-    readOnly?: boolean | undefined;
-    /**
-     * Function to call when the switch is clicked.
-     */
-    onCheckedChange?: ((details: CheckedChangeDetails) => void) | undefined;
-    /**
-     * Whether the switch is checked.
-     */
-    checked: boolean;
-    /**
-     * The name of the input field in a switch
-     * (Useful for form submission).
-     */
-    name?: string | undefined;
-    /**
-     * The id of the form that the switch belongs to
-     */
-    form?: string | undefined;
-    /**
-     * The value of switch input. Useful for form submission.
-     * @default "on"
-     */
-    value?: string | number | undefined;
-}
-type UserDefinedContext = RequiredBy<PublicContext, 'id'>;
-type ComputedContext = Readonly<{
-    /**
-     * Whether the switch 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 has focus visible
-     */
-    focusVisible?: boolean | undefined;
-    /**
-     * @internal
-     * Whether the checkbox is hovered
-     */
-    hovered?: boolean | undefined;
-    /**
-     * @internal
-     * Whether the checkbox 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 focused
-     */
-    focused: boolean | undefined;
-    /**
-     * Function to set the checked state of the switch.
-     */
-    setChecked: (checked: boolean) => void;
-    /**
-     * Function to toggle the checked state of the checkbox
-     */
-    toggleChecked: () => void;
-    getRootProps: () => T['label'];
-    getLabelProps: () => T['element'];
-    getThumbProps: () => T['element'];
-    getControlProps: () => T['element'];
-    getHiddenInputProps: () => T['input'];
-}
-
-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: ("label" | "ids" | "disabled" | "invalid" | "required" | "readOnly" | "onCheckedChange" | "checked" | "name" | "form" | "value" | "id" | "dir" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "label" | "ids" | "disabled" | "invalid" | "required" | "readOnly" | "onCheckedChange" | "checked" | "name" | "form" | "value" | "id" | "dir" | "getRootNode">];
-
-export { type MachineApi as Api, type CheckedChangeDetails, type UserDefinedContext as Context, type ElementIds, type Service, anatomy, connect, machine, props, splitProps };

package/dist/index.d.mts

@@ -1,143 +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" | "control" | "thumb">;
-
-interface CheckedChangeDetails {
-    checked: boolean;
-}
-type ElementIds = Partial<{
-    root: string;
-    hiddenInput: string;
-    control: string;
-    label: string;
-    thumb: string;
-}>;
-interface PublicContext extends DirectionProperty, CommonProperties {
-    /**
-     * The ids of the elements in the switch. Useful for composition.
-     */
-    ids?: ElementIds | undefined;
-    /**
-     * Specifies the localized strings that identifies the accessibility elements and their states
-     */
-    label: string;
-    /**
-     * Whether the switch is disabled.
-     */
-    disabled?: boolean | undefined;
-    /**
-     * If `true`, the switch is marked as invalid.
-     */
-    invalid?: boolean | undefined;
-    /**
-     * If `true`, the switch input is marked as required,
-     */
-    required?: boolean | undefined;
-    /**
-     * Whether the switch is read-only
-     */
-    readOnly?: boolean | undefined;
-    /**
-     * Function to call when the switch is clicked.
-     */
-    onCheckedChange?: ((details: CheckedChangeDetails) => void) | undefined;
-    /**
-     * Whether the switch is checked.
-     */
-    checked: boolean;
-    /**
-     * The name of the input field in a switch
-     * (Useful for form submission).
-     */
-    name?: string | undefined;
-    /**
-     * The id of the form that the switch belongs to
-     */
-    form?: string | undefined;
-    /**
-     * The value of switch input. Useful for form submission.
-     * @default "on"
-     */
-    value?: string | number | undefined;
-}
-type UserDefinedContext = RequiredBy<PublicContext, 'id'>;
-type ComputedContext = Readonly<{
-    /**
-     * Whether the switch 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 has focus visible
-     */
-    focusVisible?: boolean | undefined;
-    /**
-     * @internal
-     * Whether the checkbox is hovered
-     */
-    hovered?: boolean | undefined;
-    /**
-     * @internal
-     * Whether the checkbox 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 focused
-     */
-    focused: boolean | undefined;
-    /**
-     * Function to set the checked state of the switch.
-     */
-    setChecked: (checked: boolean) => void;
-    /**
-     * Function to toggle the checked state of the checkbox
-     */
-    toggleChecked: () => void;
-    getRootProps: () => T['label'];
-    getLabelProps: () => T['element'];
-    getThumbProps: () => T['element'];
-    getControlProps: () => T['element'];
-    getHiddenInputProps: () => T['input'];
-}
-
-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: ("label" | "ids" | "disabled" | "invalid" | "required" | "readOnly" | "onCheckedChange" | "checked" | "name" | "form" | "value" | "id" | "dir" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "label" | "ids" | "disabled" | "invalid" | "required" | "readOnly" | "onCheckedChange" | "checked" | "name" | "form" | "value" | "id" | "dir" | "getRootNode">];
-
-export { type MachineApi as Api, type CheckedChangeDetails, type UserDefinedContext as Context, type ElementIds, type Service, anatomy, connect, machine, props, splitProps };