alinea/dist/field/check/CheckField.view.js

Headless git-based CMS

import {
  dist_default
} from "../../chunks/chunk-A5O3N2GS.js";
import "../../chunks/chunk-NZLE2WMY.js";

// src/field/check/CheckField.view.tsx
import { useField } from "alinea/dashboard/editor/UseField";
import { InputLabel, LabelHeader } from "alinea/dashboard/view/InputLabel";
import { HStack, Icon, TextLabel } from "alinea/ui";
import { IcRoundCheck } from "alinea/ui/icons/IcRoundCheck";
import { IcRoundTextFields } from "alinea/ui/icons/IcRoundTextFields";
import { useState } from "react";

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

// src/field/check/CheckField.view.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var styles = dist_default(CheckField_module_default);
function CheckInput({ field }) {
  const { value, mutator, label, options, error } = useField(field);
  const { description, readOnly } = options;
  const [focus, setFocus] = useState(false);
  return /* @__PURE__ */ jsx(
    InputLabel,
    {
      asLabel: true,
      ...options,
      error,
      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) => {
                  if (!readOnly) mutator(e.currentTarget.checked);
                },
                onFocus: () => setFocus(true),
                onBlur: () => setFocus(false),
                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__ */ jsxs(HStack, { center: true, children: [
              /* @__PURE__ */ jsx(
                TextLabel,
                {
                  label: description ?? label,
                  className: styles.root.label({ disabled: readOnly })
                }
              ),
              !description && /* @__PURE__ */ jsx(
                LabelHeader,
                {
                  label: "",
                  help: options?.help,
                  required: options?.required,
                  shared: options?.shared
                }
              )
            ] })
          ]
        }
      )
    }
  );
}
export {
  CheckInput
};