alinea/dist/field/code/CodeField.view.js

Headless git-based CMS

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

// src/field/code/CodeField.view.tsx
import { useField } from "alinea/dashboard/editor/UseField";
import { InputLabel } from "alinea/dashboard/view/InputLabel";
import { HStack } from "alinea/ui";
import { IcRoundCode } from "alinea/ui/icons/IcRoundCode";
import { TextareaAutosize } from "alinea/ui/util/TextareaAutosize";
import { useState } from "react";

// src/field/code/CodeField.module.scss
var CodeField_module_default = {
  "root-input": "alinea-CodeField-input",
  "rootInput": "alinea-CodeField-input"
};

// src/field/code/CodeField.view.tsx
import { jsx } from "react/jsx-runtime";
var styles = dist_default(CodeField_module_default);
function CodeInput({ field }) {
  const { value, mutator, label, options, error } = useField(field);
  const [focus, setFocus] = useState(false);
  const placeholder = options.inline ? String(label) : "";
  const empty = value === "";
  return /* @__PURE__ */ jsx(
    InputLabel,
    {
      asLabel: true,
      ...options,
      error,
      focused: focus,
      icon: IcRoundCode,
      empty,
      children: /* @__PURE__ */ jsx(HStack, { center: true, gap: 8, children: /* @__PURE__ */ jsx(
        TextareaAutosize,
        {
          className: styles.root.input(),
          type: "text",
          value: value || "",
          onChange: (e) => mutator(e.currentTarget.value),
          onFocus: () => setFocus(true),
          onBlur: () => setFocus(false),
          placeholder,
          spellCheck: "false",
          readOnly: options.readOnly
        }
      ) })
    }
  );
}
export {
  CodeInput
};