@solid-aria/toggle/dist/index.js

Primitives for building toggle components like checkboxes and switches.

"use strict";

// src/createToggle.ts
import { createFocusable } from "@solid-aria/focus";
import { createPress } from "@solid-aria/interactions";
import { filterDOMProps } from "@solid-aria/utils";
import { combineProps } from "@solid-primitives/props";
import { createMemo, mergeProps } from "solid-js";

// src/createToggleState.ts
import { createControllableBooleanSignal } from "@solid-aria/utils";
import { access } from "@solid-primitives/utils";
function createToggleState(props = {}) {
  const [isSelected, _setSelected] = createControllableBooleanSignal({
    value: () => access(props.isSelected),
    defaultValue: () => !!access(props.defaultSelected),
    onChange: props.onChange
  });
  const setSelected = (value) => {
    if (!access(props.isReadOnly)) {
      _setSelected(value);
    }
  };
  const toggle = () => {
    if (!access(props.isReadOnly)) {
      _setSelected(!isSelected());
    }
  };
  return { isSelected, setSelected, toggle };
}

// src/createToggle.ts
function createToggle(props, inputRef) {
  const defaultProps = {
    isDisabled: false,
    validationState: "valid"
  };
  props = mergeProps(defaultProps, props);
  const state = createToggleState(props);
  const onChange = (event) => {
    event.stopPropagation();
    const target = event.target;
    state.setSelected(target.checked);
    target.checked = state.isSelected();
  };
  const { pressProps } = createPress({
    isDisabled: () => props.isDisabled
  });
  const { focusableProps } = createFocusable(props, inputRef);
  const domProps = mergeProps(createMemo(() => filterDOMProps(props, { labelable: true })));
  const baseToggleProps = {
    type: "checkbox",
    get "aria-invalid"() {
      return props.validationState === "invalid" || void 0;
    },
    get "aria-errormessage"() {
      return props["aria-errormessage"];
    },
    get "aria-controls"() {
      return props["aria-controls"];
    },
    get "aria-readonly"() {
      return props.isReadOnly || void 0;
    },
    get "aria-required"() {
      return props.isRequired || void 0;
    },
    get disabled() {
      return props.isDisabled;
    },
    get value() {
      return props.value;
    },
    get name() {
      return props.name;
    },
    onChange
  };
  const inputProps = combineProps(domProps, baseToggleProps, pressProps, focusableProps);
  return { inputProps, state };
}
export {
  createToggle,
  createToggleState
};