ui-next-library/dist/components/Layouts/ContainerElements.js

Biblioteca de componentes UI para Next.js

"use client";

var _excluded = ["children", "title", "width", "height", "titlePosition", "backgroundColor", "rounded", "shadow", "border", "borderWidth", "borderColor", "paddingX", "paddingY", "gap", "className", "titleClassName", "bodyClassName"];
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";
import { twMerge } from "tailwind-merge";

/**
 * Componente ContainerElements - Contenedor para elementos de UI con estilos predeterminados
 * 
 * @component
 * @example
 * // Uso básico
 * <ContainerElements>
 *   <p>Contenido del contenedor</p>
 * </ContainerElements>
 * 
 * @example
 * // Con título y estilos personalizados
 * <ContainerElements 
 *   title="Mi Contenedor" 
 *   titlePosition="left"
 *   backgroundColor="gray-50"
 *   rounded="xl"
 *   className="mt-4"
 * >
 *   <p>Contenido personalizado</p>
 * </ContainerElements>
 * 
 * @param {Object} props - Propiedades del componente
 * @param {ReactNode} props.children - Elementos hijos a renderizar dentro del contenedor
 * @param {string} [props.title=""] - Título opcional para el contenedor
 * @param {string} [props.width="full"] - Ancho del contenedor ('full', 'auto', o clase de Tailwind)
 * @param {string} [props.height="auto"] - Altura del contenedor ('auto' o clase de Tailwind)
 * @param {string} [props.titlePosition="center"] - Alineación del título ('left', 'center', 'right')
 * @param {string} [props.backgroundColor="white"] - Color de fondo
 * @param {string} [props.rounded="2xl"] - Nivel de redondeo de esquinas
 * @param {string} [props.shadow="shadow-lg"] - Sombra del contenedor
 * @param {boolean} [props.border=true] - Mostrar borde
 * @param {string} [props.borderColor="border-gray-100"] - Color del borde
 * @param {string} [props.padding="6"] - Relleno interno (padding)
 * @param {string} [props.gap="4"] - Espacio entre elementos internos
 * @param {string} [props.className=""] - Clases adicionales para el contenedor
 * @param {string} [props.titleClassName=""] - Clases adicionales para el título
 * @param {string} [props.bodyClassName=""] - Clases adicionales para el cuerpo
 */
var ContainerElements = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var children = _ref.children,
    _ref$title = _ref.title,
    title = _ref$title === void 0 ? "" : _ref$title,
    _ref$width = _ref.width,
    width = _ref$width === void 0 ? "full" : _ref$width,
    _ref$height = _ref.height,
    height = _ref$height === void 0 ? "auto" : _ref$height,
    _ref$titlePosition = _ref.titlePosition,
    titlePosition = _ref$titlePosition === void 0 ? "center" : _ref$titlePosition,
    _ref$backgroundColor = _ref.backgroundColor,
    backgroundColor = _ref$backgroundColor === void 0 ? "white" : _ref$backgroundColor,
    _ref$rounded = _ref.rounded,
    rounded = _ref$rounded === void 0 ? "2xl" : _ref$rounded,
    _ref$shadow = _ref.shadow,
    shadow = _ref$shadow === void 0 ? "shadow-lg" : _ref$shadow,
    _ref$border = _ref.border,
    border = _ref$border === void 0 ? true : _ref$border,
    _ref$borderWidth = _ref.borderWidth,
    borderWidth = _ref$borderWidth === void 0 ? "2" : _ref$borderWidth,
    _ref$borderColor = _ref.borderColor,
    borderColor = _ref$borderColor === void 0 ? "border-gray-100" : _ref$borderColor,
    _ref$paddingX = _ref.paddingX,
    paddingX = _ref$paddingX === void 0 ? "6" : _ref$paddingX,
    _ref$paddingY = _ref.paddingY,
    paddingY = _ref$paddingY === void 0 ? "6" : _ref$paddingY,
    _ref$gap = _ref.gap,
    gap = _ref$gap === void 0 ? "4" : _ref$gap,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className,
    _ref$titleClassName = _ref.titleClassName,
    titleClassName = _ref$titleClassName === void 0 ? "" : _ref$titleClassName,
    _ref$bodyClassName = _ref.bodyClassName,
    bodyClassName = _ref$bodyClassName === void 0 ? "" : _ref$bodyClassName,
    rest = _objectWithoutProperties(_ref, _excluded);
  // Aplicar estilos por defecto directamente
  var defaultStyles = "shadow-lg px-6 py-6 border-2 border-gray-100 rounded-2xl";

  // Preparar las clases base para propiedades personalizadas que sobrescribirían los estilos por defecto
  var baseClasses = {
    width: width === "full" ? "w-full" : width === "auto" ? "w-auto" : width.startsWith("w-") ? width : "w-".concat(width),
    height: height === "auto" ? "h-auto" : height.startsWith("h-") ? height : "h-".concat(height),
    background: backgroundColor === "white" ? "bg-white" : "bg-".concat(backgroundColor),
    // Solo incluir estas propiedades si son diferentes a los valores por defecto
    rounded: rounded !== "2xl" ? "rounded-".concat(rounded) : "",
    border: !border ? "border-0" : borderWidth !== "2" ? "border-".concat(borderWidth) : "",
    borderColor: border && borderColor !== "border-gray-100" ? borderColor : "",
    padding: paddingX !== "6" || paddingY !== "6" ? "px-".concat(paddingX, " py-").concat(paddingY) : "",
    gap: "space-y-".concat(gap)
  };

  // Combinar todas las clases base
  var baseClassString = Object.values(baseClasses).filter(Boolean).join(" ");

  // Usar tailwind-merge para combinar las clases base con las personalizadas y los estilos por defecto
  var containerClasses = twMerge(defaultStyles, baseClassString, shadow !== "shadow-lg" ? shadow : "", className);
  var titleClasses = twMerge("text-lg font-semibold mb-4", {
    left: "text-left",
    center: "text-center",
    right: "text-right"
  }[titlePosition] || "text-center", titleClassName);
  var bodyClasses = twMerge("w-full", bodyClassName);
  return /*#__PURE__*/React.createElement("div", _extends({
    ref: ref,
    className: containerClasses
  }, rest), title && /*#__PURE__*/React.createElement("div", {
    className: titleClasses
  }, title), /*#__PURE__*/React.createElement("div", {
    className: bodyClasses
  }, children));
});

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

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