alinea/dist/input/text/TextField.browser.js

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

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

// src/input/text/TextField.browser.tsx
import { Field } from "alinea/core";
import { useField } from "alinea/dashboard/editor/UseField";
import { InputLabel } from "alinea/dashboard/view/InputLabel";
import { HStack, fromModule } from "alinea/ui";
import { IcRoundTextFields } from "alinea/ui/icons/IcRoundTextFields";
import { TextareaAutosize } from "alinea/ui/util/TextareaAutosize";
import { useState } from "react";
import { text as createText } from "./TextField.js";

// src/input/text/TextInput.module.scss
var TextInput_module_default = {
  "root-input": "alinea-TextInput-input",
  "rootInput": "alinea-TextInput-input"
};

// src/input/text/TextField.browser.tsx
export * from "./TextField.js";
import { jsx, jsxs } from "react/jsx-runtime";
var text = Field.provideView(TextInput, createText);
var styles = fromModule(TextInput_module_default);
function TextInput({ field }) {
  const { value, mutator, label, options } = useField(field);
  const [focus, setFocus] = useState(false);
  const {
    width,
    multiline,
    inline,
    optional,
    help,
    iconLeft: IconLeft,
    iconRight: IconRight,
    autoFocus
  } = options;
  const Input = multiline ? TextareaAutosize : "input";
  const placeholder = inline ? String(label) : "";
  const empty = value === "";
  return /* @__PURE__ */ jsx(
    InputLabel,
    {
      asLabel: true,
      label,
      help,
      optional,
      inline,
      width,
      focused: focus,
      icon: IcRoundTextFields,
      empty,
      children: /* @__PURE__ */ jsxs(HStack, { center: true, gap: 8, children: [
        IconLeft && /* @__PURE__ */ jsx(IconLeft, {}),
        /* @__PURE__ */ jsx(
          Input,
          {
            className: styles.root.input(),
            type: "text",
            value: value || "",
            onChange: (e) => mutator(e.currentTarget.value),
            onFocus: () => setFocus(true),
            onBlur: () => setFocus(false),
            placeholder,
            autoFocus,
            disabled: options.readOnly
          }
        ),
        IconRight && /* @__PURE__ */ jsx(IconRight, {})
      ] })
    }
  );
}
export {
  text
};