cherry-styled-components/dist/textarea.js

Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.

"use client";
"use client";
import { fullWidthStyles, resetButton, resetInput, statusBorderStyles } from "./utils/mixins.js";
import { StyledInputWrapper, StyledLabel } from "./input.js";
import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import styled from "styled-components";
//#region src/lib/textarea.tsx
var StyledTextarea = styled.textarea.withConfig({
	displayName: "textarea__StyledTextarea",
	componentId: "sc-bafd59ce-0"
})([
	``,
	`;`,
	`;font-family:inherit;display:inline-block;padding:15px;border-radius:`,
	`;font-weight:400;white-space:break-spaces;hyphens:none;color:`,
	`;background:`,
	`;border:solid 2px `,
	`;box-shadow:0 0 0 0px `,
	`;transition:all 0.3s ease;min-height:80px;&::placeholder{color:`,
	`;}&:hover:not([disabled]){border-color:`,
	`;}&:focus:not([disabled]){box-shadow:0 0 0 4px `,
	`;border-color:`,
	`;}&:active:not([disabled]){box-shadow:0 0 0 2px `,
	`;}`,
	` `,
	` `,
	` `,
	``
], resetButton, resetInput, ({ theme }) => theme.spacing.radius.xs, ({ theme }) => theme.colors.dark, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.gray, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ $size, theme }) => $size === "big" ? `font-size: ${theme.fontSizes.inputBig.lg};
			line-height: ${theme.lineHeights.text.lg};
	` : $size === "small" ? `font-size: ${theme.fontSizes.inputSmall.lg};
			line-height: ${theme.lineHeights.text.lg};
      padding: 10px 12px;
	` : `font-size: ${theme.fontSizes.input.lg};
			line-height: ${theme.lineHeights.text.lg};`, ({ $error, $success, theme }) => {
	return statusBorderStyles($error, $success, theme);
}, ({ disabled, theme }) => disabled && `cursor: not-allowed;
		background: ${theme.colors.grayLight};
		border-color: ${theme.colors.gray};
		color: ${theme.colors.gray};
	`, ({ $fullWidth }) => fullWidthStyles($fullWidth));
function LocalTextarea({ ...props }, ref) {
	return /* @__PURE__ */ jsxs(StyledInputWrapper, {
		$fullWidth: props.$fullWidth,
		$label: props.$label,
		className: props.$wrapperClassName,
		children: [props.$label && /* @__PURE__ */ jsx(StyledLabel, {
			htmlFor: props.id,
			$label: props.$label,
			children: props.$label
		}), /* @__PURE__ */ jsx(StyledTextarea, {
			...props,
			"aria-invalid": props.$error || void 0,
			ref,
			children: props.children
		})]
	});
}
var Textarea = /* @__PURE__ */ forwardRef(LocalTextarea);
//#endregion
export { Textarea };