@hypothesis/frontend-shared/lib/components/input/ToggleInput.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/input/ToggleInput.tsx";
import classnames from 'classnames';
import { downcastRef } from '../../util/typing';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
/**
 * Render a labeled checkbox or radio input. The input is styled with two icons:
 * one for the unchecked state and one for the checked state. The input itself
 * is positioned exactly on top of the icon, but is non-visible.
 */
export default function ToggleInput({
  children,
  elementRef,
  containerRef,
  checked,
  icon: UncheckedIcon,
  checkedIcon: CheckedIcon,
  disabled,
  onChange,
  id,
  type,
  containerClasses,
  ...htmlAttributes
}) {
  const Icon = checked ? CheckedIcon : UncheckedIcon;
  return _jsxDEV("label", {
    className: classnames('relative flex items-center gap-x-1.5', {
      'cursor-pointer': !disabled,
      'opacity-70': disabled
    }, containerClasses),
    htmlFor: id,
    "data-composite-component": type === 'checkbox' ? 'Checkbox' : 'RadioButton',
    ref: downcastRef(containerRef),
    children: [_jsxDEV("input", {
      ...htmlAttributes,
      type: type,
      ref: downcastRef(elementRef),
      className: classnames(
      // Set the special Tailwind peer class to allow sibling elements
      // to style themselves based on the state of this element
      'peer',
      // Position this atop the icon and size it to the same dimensions
      'absolute w-em h-em',
      // Make input visually hidden, but some screen readers won't read out
      // elements with 0 opacity
      'opacity-[.00001]', {
        'cursor-pointer': !disabled
      }),
      checked: checked,
      disabled: disabled,
      id: id,
      onChange: onChange
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 66,
      columnNumber: 7
    }, this), _jsxDEV(Icon, {
      className: classnames(
      // Add an outline ring to the icon when the input is focus-visible.
      // The ring needs to be applied here because the `input` has an
      // effectively-0 opacity.
      'peer-focus-visible:ring', 'w-em h-em')
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 88,
      columnNumber: 7
    }, this), children]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 51,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=ToggleInput.js.map