@aegov/design-system-react/dist/components/Textarea/Textarea.js

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.textareaSchema = exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactLabel = require("@radix-ui/react-label");
var _zod = require("zod");
var _utils = require("../../utils");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const textareaSchema = exports.textareaSchema = _zod.z.object({
  value: _zod.z.string().min(1, 'This field is required')
});
const Textarea = /*#__PURE__*/(0, _react.forwardRef)(({
  label,
  error,
  helperText,
  className,
  size = 'base',
  variant = 'primary',
  disabled,
  required,
  id,
  rows = 4,
  ...props
}, ref) => {
  const sizeClasses = {
    sm: 'text-sm py-2.5',
    base: 'text-base py-3',
    lg: 'text-lg py-3.5'
  };
  const labelSizeClasses = {
    sm: 'text-sm',
    base: 'text-sm',
    lg: 'text-base'
  };
  const variantClasses = {
    primary: 'focus-within:ring-primary-600 ring-primary-400',
    secondary: 'focus-within:ring-secondary-600 ring-secondary-400',
    error: 'focus-within:ring-red-600 ring-red-400 bg-red-50'
  };
  const textareaContainerClasses = (0, _utils.cn)('relative flex rounded-lg shadow-sm ring-2 ring-inset focus-within:ring-2 focus-within:ring-inset bg-whitely-50', variantClasses[error ? 'error' : variant], disabled && 'opacity-40', className);
  const textareaClasses = (0, _utils.cn)('w-full flex-1 border-0 bg-transparent px-4 text-gray-900 placeholder:text-gray-400', 'focus:ring-0 outline-none disabled:cursor-not-allowed resize-none', sizeClasses[size]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "w-full"
  }, label && /*#__PURE__*/_react.default.createElement(_reactLabel.Root, {
    htmlFor: id,
    className: (0, _utils.cn)('mb-1 block font-medium text-gray-900', labelSizeClasses[size], error && 'text-red-600', required && 'after:ml-0.5 after:text-red-500 after:content-["*"]')
  }, label), /*#__PURE__*/_react.default.createElement("div", {
    className: textareaContainerClasses
  }, /*#__PURE__*/_react.default.createElement("textarea", _extends({
    ref: ref,
    id: id,
    disabled: disabled,
    required: required,
    rows: rows,
    className: textareaClasses,
    "aria-disabled": disabled ? 'true' : undefined,
    "aria-invalid": error ? 'true' : undefined
  }, props))), (error || helperText) && /*#__PURE__*/_react.default.createElement("p", {
    className: (0, _utils.cn)('mt-1 text-sm', error ? 'text-red-600' : 'text-gray-500')
  }, error ? /*#__PURE__*/_react.default.createElement("span", {
    className: "font-medium"
  }, "Error: ") : null, error || helperText));
});
Textarea.displayName = 'Textarea';
var _default = exports.default = Textarea;