ui-next-library/dist/components/Inputs/Text.js

Biblioteca de componentes UI para Next.js

"use client";

var _excluded = ["value", "placeholder", "type", "disabled", "readOnly", "required", "id", "name", "Icon", "iconPosition", "iconClassName", "paddingY", "onChange", "onBlur", "onFocus", "onKeyDown", "error", "errorMessage", "className", "register", "registerOptions"],
  _excluded2 = ["register"];
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); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import React, { forwardRef, memo } from "react";
import clsx from "clsx";

/**
 * Componente Text - Input básico con soporte para icono e integración con React Hook Form
 */
var Text = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var _rest$errors$name;
  var value = _ref.value,
    _ref$placeholder = _ref.placeholder,
    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
    _ref$type = _ref.type,
    type = _ref$type === void 0 ? "text" : _ref$type,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    _ref$readOnly = _ref.readOnly,
    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
    _ref$required = _ref.required,
    required = _ref$required === void 0 ? false : _ref$required,
    _ref$id = _ref.id,
    id = _ref$id === void 0 ? "" : _ref$id,
    _ref$name = _ref.name,
    name = _ref$name === void 0 ? "" : _ref$name,
    _ref$Icon = _ref.Icon,
    Icon = _ref$Icon === void 0 ? null : _ref$Icon,
    _ref$iconPosition = _ref.iconPosition,
    iconPosition = _ref$iconPosition === void 0 ? "left" : _ref$iconPosition,
    _ref$iconClassName = _ref.iconClassName,
    iconClassName = _ref$iconClassName === void 0 ? "" : _ref$iconClassName,
    _ref$paddingY = _ref.paddingY,
    paddingY = _ref$paddingY === void 0 ? "" : _ref$paddingY,
    _ref$onChange = _ref.onChange,
    onChange = _ref$onChange === void 0 ? null : _ref$onChange,
    _ref$onBlur = _ref.onBlur,
    onBlur = _ref$onBlur === void 0 ? null : _ref$onBlur,
    _ref$onFocus = _ref.onFocus,
    onFocus = _ref$onFocus === void 0 ? null : _ref$onFocus,
    _ref$onKeyDown = _ref.onKeyDown,
    onKeyDown = _ref$onKeyDown === void 0 ? null : _ref$onKeyDown,
    _ref$error = _ref.error,
    error = _ref$error === void 0 ? false : _ref$error,
    _ref$errorMessage = _ref.errorMessage,
    errorMessage = _ref$errorMessage === void 0 ? "" : _ref$errorMessage,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className,
    _ref$register = _ref.register,
    register = _ref$register === void 0 ? null : _ref$register,
    _ref$registerOptions = _ref.registerOptions,
    registerOptions = _ref$registerOptions === void 0 ? {} : _ref$registerOptions,
    rest = _objectWithoutProperties(_ref, _excluded);
  // Verificar si hay icono
  var hasIcon = !!Icon;

  // Detectar si registerOptions incluye la función register
  var registerFromOptions = registerOptions && registerOptions.register;

  // Verificar si hay integración con React Hook Form
  var isUsingHookForm = register && name || registerFromOptions && name;

  // Determinar si debemos mostrar error (por prop o por React Hook Form)
  var hasError = error || rest.errors && rest.errors[name];

  // Mensaje de error a mostrar (prioriza el pasado como prop)
  var displayErrorMessage = errorMessage || rest.errors && ((_rest$errors$name = rest.errors[name]) === null || _rest$errors$name === void 0 ? void 0 : _rest$errors$name.message);

  // Clases base del wrapper
  var baseWrapperClasses = clsx("ui-input-wrapper", hasError && "ui-input-error", disabled && "ui-input-disabled");

  // Combinar clases base con las personalizadas
  var wrapperClasses = clsx(baseWrapperClasses, className);

  // Clases para el input
  var inputClasses = clsx("ui-input",
  // Clases de padding vertical si se especifica
  paddingY && "ui-input-py-".concat(paddingY), hasIcon && iconPosition === "left" && "ui-input-with-icon", hasIcon && iconPosition === "right" && "ui-input-with-icon-right");

  // Clases para el contenedor del icono
  var iconContainerClasses = clsx("ui-input-icon", iconPosition === "left" ? "ui-input-icon-left" : "ui-input-icon-right");

  // Preparamos las props para el input
  var inputProps;
  if (registerFromOptions) {
    // Extraer register y el resto de opciones
    var registerFn = registerOptions.register,
      otherOptions = _objectWithoutProperties(registerOptions, _excluded2);
    inputProps = registerFn(name, otherOptions);
  } else if (register && name) {
    // Usar register de forma tradicional
    inputProps = register(name, registerOptions || {});
  } else {
    // Input controlado normal
    inputProps = {
      value: value !== null && value !== void 0 ? value : "",
      // Usar valor por defecto para evitar problemas de hidratación
      onChange: onChange,
      onBlur: onBlur,
      onFocus: onFocus,
      onKeyDown: onKeyDown,
      required: required,
      ref: ref
    };
  }

  // Renderizamos el componente
  return /*#__PURE__*/React.createElement("div", {
    className: "ui-input-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: wrapperClasses
  }, /*#__PURE__*/React.createElement("input", _extends({}, rest, inputProps, {
    id: id || name || undefined,
    name: name || id || undefined,
    type: type,
    autoComplete: "off",
    disabled: disabled,
    readOnly: readOnly,
    placeholder: placeholder,
    spellCheck: "false",
    className: inputClasses,
    "aria-invalid": hasError,
    "aria-describedby": hasError ? "".concat(id || name, "-error") : undefined
  })), hasIcon && /*#__PURE__*/React.createElement("div", {
    className: iconContainerClasses
  }, /*#__PURE__*/React.createElement(Icon, {
    className: iconClassName
  }))), hasError && displayErrorMessage && /*#__PURE__*/React.createElement("div", {
    id: "".concat(id || name, "-error"),
    className: "ui-error-message",
    role: "alert"
  }, displayErrorMessage));
});

// Nombramiento explícito para DevTools
Text.displayName = "Text";

// Memoización para evitar renderizados innecesarios
export default /*#__PURE__*/memo(Text);