import {
  mergeRefs
} from "./chunk-KNYB3RL7.js";
import {
  typographyMixin,
  typographyTypes
} from "./chunk-UXT2H3FM.js";
import {
  colors
} from "./chunk-JF3P66JF.js";

// src/components/text-area/text-area.tsx
import { forwardRef, useCallback, useLayoutEffect, useRef } from "react";

// src/components/text-area/text-area-styles.ts
import styled from "styled-components";
var StyledTextArea = styled.textarea`
  ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};
  color: ${colors["brown-100"]};
  border: none;
  outline: none;
  resize: none;
  width: 100%;
  background: transparent;
  vertical-align: bottom;
  max-height: ${({ $maxHeight }) => $maxHeight ? `${$maxHeight}px` : "none"};
  overflow-y: ${({ $maxHeight }) => $maxHeight ? "auto" : "hidden"};

  &::placeholder {
    color: ${colors["brown-50"]};
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
`;

// src/components/text-area/text-area.tsx
import { jsx } from "react/jsx-runtime";
var TextArea = forwardRef(function TextArea2({ value, onChange, placeholder, maxHeight, rows = 1, autoFocus, onKeyDown, disabled, className }, externalRef) {
  const internalRef = useRef(null);
  useLayoutEffect(() => {
    const el = internalRef.current;
    if (el) {
      el.style.height = "auto";
      el.style.height = `${el.scrollHeight}px`;
    }
  }, [value]);
  const handleChange = useCallback(
    (e) => {
      onChange(e.target.value);
    },
    [onChange]
  );
  return /* @__PURE__ */ jsx(
    StyledTextArea,
    {
      ref: mergeRefs(internalRef, externalRef),
      value,
      onChange: handleChange,
      placeholder,
      $maxHeight: maxHeight,
      rows,
      autoFocus,
      onKeyDown,
      disabled,
      className
    }
  );
});

export {
  TextArea
};
//# sourceMappingURL=chunk-7OYIDM42.js.map