@serendie/ui/dist/components/TextArea/TextArea.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsxs as a, jsx as s } from "react/jsx-runtime";
import w from "../../node_modules/merge-refs/dist/esm/index.js";
import c, { forwardRef as C } from "react";
import { useTranslations as N } from "../../i18n/index.js";
import { cx as R } from "../../styled-system/css/cx.js";
import { sva as T } from "../../styled-system/css/sva.js";
const p = T({
  slots: [
    "root",
    "label",
    "required",
    "wrapper",
    "textarea",
    "messageField",
    "description",
    "invalidMessage"
  ],
  base: {
    root: {
      display: "inline-grid",
      // 後から指定したCSSからwidthが上書きできないため、@layer componentsを指定
      "@layer components": {
        width: "min(100%, 300px)"
      },
      gridTemplateColumns: "auto",
      rowGap: "sd.system.dimension.spacing.extraSmall",
      textStyle: {
        base: "sd.system.typography.body.medium_compact",
        expanded: "sd.system.typography.body.medium_expanded"
      }
    },
    label: {
      textStyle: {
        base: "sd.system.typography.label.medium_compact",
        expanded: "sd.system.typography.label.medium_expanded"
      }
    },
    wrapper: {
      display: "grid",
      gridTemplateColumns: "1fr auto",
      alignItems: "center",
      outlineStyle: "solid",
      outlineWidth: "sd.system.dimension.border.medium",
      outlineColor: "sd.system.color.component.outline",
      borderRadius: "sd.system.dimension.radius.medium",
      backgroundColor: "sd.system.color.component.surface",
      _focusWithin: {
        outlineWidth: "sd.system.dimension.border.thick",
        outlineColor: "sd.system.color.impression.primary"
      },
      _disabled: {
        backgroundColor: "sd.system.color.interaction.disabled"
      },
      _invalid: {
        outlineColor: "sd.system.color.impression.negative"
      },
      '&:has([data-focus="true"])': {
        outlineWidth: "sd.system.dimension.border.thick",
        outlineColor: "sd.system.color.impression.primary"
      }
    },
    textarea: {
      outline: "none",
      marginTop: "sd.system.dimension.spacing.extraSmall",
      // NOTE: Figmaの値と違うがリサイズハンドルを考慮して小さくしている
      marginRight: "sd.system.dimension.spacing.twoExtraSmall",
      marginBottom: "sd.system.dimension.spacing.twoExtraSmall",
      marginLeft: "sd.system.dimension.spacing.small",
      _disabled: {
        cursor: "not-allowed"
      }
    },
    required: {
      pl: "sd.system.dimension.spacing.extraSmall",
      color: "sd.system.color.impression.negative"
    },
    messageField: {
      textAlign: "right",
      color: "sd.system.color.component.onSurfaceVariant",
      textStyle: {
        base: "sd.system.typography.body.extraSmall_compact",
        expanded: "sd.system.typography.body.extraSmall_expanded"
      }
    },
    invalidMessage: {
      color: "sd.system.color.impression.negative"
    }
  },
  variants: {
    autoAdjustHeight: {
      true: {
        textarea: {
          fieldSizing: "content",
          minHeight: "2lh"
        }
      }
    },
    fullWidth: {
      true: {
        root: {
          width: "100%"
        }
      }
    }
  }
}), I = C(
  ({
    placeholder: y,
    label: r,
    description: t,
    required: d,
    requiredLabel: u,
    invalidMessage: o,
    invalid: i,
    disabled: n,
    className: g,
    ...l
  }, h) => {
    const x = N(), b = c.useRef(null), f = w(b, h), [S, v] = p.splitVariantProps(l), e = p(S), _ = t || i && o, m = l.id || c.useId();
    return /* @__PURE__ */ a("div", { className: R(e.root, g), children: [
      r ? /* @__PURE__ */ a("label", { className: e.label, htmlFor: m, children: [
        r,
        d && /* @__PURE__ */ s("span", { className: e.required, children: u ?? x("common.required") })
      ] }) : null,
      /* @__PURE__ */ s(
        "div",
        {
          className: e.wrapper,
          "data-invalid": i ? !0 : void 0,
          "data-disabled": n ? !0 : void 0,
          children: /* @__PURE__ */ s(
            "textarea",
            {
              ref: f,
              id: m,
              placeholder: y,
              required: d,
              disabled: n,
              className: e.textarea,
              ...v
            }
          )
        }
      ),
      _ && /* @__PURE__ */ a("div", { className: e.messageField, children: [
        t && /* @__PURE__ */ s("p", { className: e.description, children: t }),
        i && o && /* @__PURE__ */ s("p", { className: e.invalidMessage, children: o })
      ] })
    ] });
  }
);
export {
  I as TextArea
};