alinea/dist/input/check/CheckField.browser.js

[](https://npmjs.org/package/alinea) [](https://packagephobia.com/result?p=alinea)

import "../../chunks/chunk-U5RRZUYZ.js";

// src/input/check/CheckField.browser.tsx
import { Field } from "alinea/core";
import { useField } from "alinea/dashboard/editor/UseField";
import { InputLabel } from "alinea/dashboard/view/InputLabel";
import { HStack, Icon, TextLabel, fromModule } from "alinea/ui";
import { IcRoundCheck } from "alinea/ui/icons/IcRoundCheck";
import { IcRoundTextFields } from "alinea/ui/icons/IcRoundTextFields";
import { useState } from "react";
import { check as createCheck } from "./CheckField.js";

// src/input/check/CheckInput.module.scss
var CheckInput_module_default = {
  "root-input": "alinea-CheckInput-input",
  "rootInput": "alinea-CheckInput-input",
  "root-checkmark": "alinea-CheckInput-checkmark",
  "rootCheckmark": "alinea-CheckInput-checkmark",
  "is-disabled": "alinea-CheckInput-is-disabled",
  "isDisabled": "alinea-CheckInput-is-disabled",
  "root-checkmark-icon": "alinea-CheckInput-checkmark-icon",
  "rootCheckmarkIcon": "alinea-CheckInput-checkmark-icon",
  "root-label": "alinea-CheckInput-label",
  "rootLabel": "alinea-CheckInput-label"
};

// src/input/check/CheckField.browser.tsx
export * from "./CheckField.js";
import { jsx, jsxs } from "react/jsx-runtime";
var check = Field.provideView(CheckInput, createCheck);
var styles = fromModule(CheckInput_module_default);
function CheckInput({ field }) {
  const { value, mutator, label, options } = useField(field);
  const { description, readOnly } = options;
  const [focus, setFocus] = useState(false);
  return /* @__PURE__ */ jsx(
    InputLabel,
    {
      asLabel: true,
      ...options,
      label: description ? label : void 0,
      focused: focus,
      icon: IcRoundTextFields,
      children: /* @__PURE__ */ jsxs(
        HStack,
        {
          center: true,
          gap: 10,
          style: { position: "relative", display: "inline-flex" },
          children: [
            /* @__PURE__ */ jsx(
              "input",
              {
                className: styles.root.input(),
                type: "checkbox",
                checked: Boolean(value),
                onChange: (e) => mutator(e.currentTarget.checked),
                onFocus: () => setFocus(true),
                onBlur: () => setFocus(false),
                autoFocus: options.autoFocus,
                disabled: readOnly
              }
            ),
            /* @__PURE__ */ jsx("span", { className: styles.root.checkmark({ disabled: readOnly }), children: value && /* @__PURE__ */ jsx(
              Icon,
              {
                size: 20,
                icon: IcRoundCheck,
                className: styles.root.checkmark.icon()
              }
            ) }),
            /* @__PURE__ */ jsx(
              TextLabel,
              {
                label: description ?? label,
                className: styles.root.label()
              }
            )
          ]
        }
      )
    }
  );
}
export {
  check
};