heroes-of-chess-components 0.6.14 → 0.6.17

package/dist/lib/HocComponents/HDropdown/HDropdown.js

@@ -0,0 +1,281 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["label", "notLabel", "options", "additionalOptions", "value", "onChange", "direction", "width", "height", "gap", "labelColor", "labelSize", "selectPadding", "id", "name", "background", "color", "optionColor", "multiple", "disabled"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+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 { useState, useRef, useEffect } from "react";
+import { FaChevronDown } from "react-icons/fa";
+import { DropdownContainer, DropdownLabel, DropdownOption, DropdownSelect, MultiSelectContainer, MultiSelectDisplay, DropdownArrow, MultiSelectDropdown, MultiSelectOption, SimpleSelectContainer, SimpleSelectArrow } from "./HDropdown.styled";
+import { useSounds } from "../../hooks";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var HDropdown = function HDropdown(_ref) {
+  var _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "Select an option:" : _ref$label,
+    notLabel = _ref.notLabel,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    _ref$additionalOption = _ref.additionalOptions,
+    additionalOptions = _ref$additionalOption === void 0 ? [] : _ref$additionalOption,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? "column" : _ref$direction,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "150px" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "40px" : _ref$height,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? "10px" : _ref$gap,
+    _ref$labelColor = _ref.labelColor,
+    labelColor = _ref$labelColor === void 0 ? "" : _ref$labelColor,
+    _ref$labelSize = _ref.labelSize,
+    labelSize = _ref$labelSize === void 0 ? "16px" : _ref$labelSize,
+    _ref$selectPadding = _ref.selectPadding,
+    selectPadding = _ref$selectPadding === void 0 ? "10px 20px" : _ref$selectPadding,
+    id = _ref.id,
+    name = _ref.name,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? "shadePurpleDark" : _ref$background,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "white" : _ref$color,
+    _ref$optionColor = _ref.optionColor,
+    optionColor = _ref$optionColor === void 0 ? "purpleMedium" : _ref$optionColor,
+    _ref$multiple = _ref.multiple,
+    multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var containerRef = useRef(null);
+  var _useSounds = useSounds(),
+    playSound = _useSounds.playSound,
+    HOC_SOUNDS = _useSounds.HOC_SOUNDS;
+
+  // Cerrar dropdown al hacer click fuera
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (multiple && isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return function () {
+        return document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }
+  }, [multiple, isOpen]);
+
+  // Combinar todas las opciones
+  var allOptions = [].concat(_toConsumableArray(additionalOptions || []), _toConsumableArray(options || []));
+
+  // Obtener opciones seleccionadas para mostrar
+  var getSelectedOptions = function getSelectedOptions() {
+    if (!multiple || !value) return [];
+    var selectedValues = Array.isArray(value) ? value : [value];
+    return allOptions.filter(function (option) {
+      var _option$value;
+      var optionValue = (_option$value = option === null || option === void 0 ? void 0 : option.value) !== null && _option$value !== void 0 ? _option$value : option;
+      return selectedValues.includes(optionValue);
+    });
+  };
+
+  // Manejar selección múltiple
+  var handleMultipleSelect = function handleMultipleSelect(optionValue) {
+    if (!onChange || disabled) return;
+    var currentValues = Array.isArray(value) ? value : [];
+    var newValues;
+    if (currentValues.includes(optionValue)) {
+      // Quitar si ya está seleccionado
+      newValues = currentValues.filter(function (v) {
+        return v !== optionValue;
+      });
+    } else {
+      // Agregar si no está seleccionado
+      newValues = [].concat(_toConsumableArray(currentValues), [optionValue]);
+    }
+
+    // Llamar onChange directamente con los nuevos valores
+    onChange(newValues);
+  };
+
+  // Renderizar opciones seleccionadas como etiquetas
+  var renderSelectedTags = function renderSelectedTags() {
+    var selectedOptions = getSelectedOptions();
+    if (selectedOptions.length === 0) {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          opacity: 0.7
+        },
+        children: "Seleccionar opciones..."
+      });
+    }
+    if (selectedOptions.length === 1) {
+      var _option$label, _optionLabel$;
+      var option = selectedOptions[0];
+      var optionLabel = (_option$label = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label !== void 0 ? _option$label : option;
+      var displayLabel = typeof optionLabel === "string" ? (optionLabel === null || optionLabel === void 0 || (_optionLabel$ = optionLabel[0]) === null || _optionLabel$ === void 0 ? void 0 : _optionLabel$.toUpperCase()) + (optionLabel === null || optionLabel === void 0 ? void 0 : optionLabel.slice(1)) : optionLabel;
+      return /*#__PURE__*/_jsx("span", {
+        children: displayLabel
+      });
+    }
+
+    // Para múltiples opciones, mostrar como texto simple
+    var optionLabels = selectedOptions.map(function (option) {
+      var _option$label2, _optionLabel$2;
+      var optionLabel = (_option$label2 = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label2 !== void 0 ? _option$label2 : option;
+      return typeof optionLabel === "string" ? (optionLabel === null || optionLabel === void 0 || (_optionLabel$2 = optionLabel[0]) === null || _optionLabel$2 === void 0 ? void 0 : _optionLabel$2.toUpperCase()) + (optionLabel === null || optionLabel === void 0 ? void 0 : optionLabel.slice(1)) : optionLabel;
+    });
+    return /*#__PURE__*/_jsx("span", {
+      children: optionLabels.join(", ")
+    });
+  };
+
+  // Si es múltiple, usar interfaz personalizada
+  if (multiple) {
+    return /*#__PURE__*/_jsxs(DropdownContainer, _objectSpread(_objectSpread({
+      direction: direction,
+      gap: gap
+    }, props), {}, {
+      width: width,
+      ref: containerRef,
+      onClick: function onClick() {
+        return playSound(HOC_SOUNDS.changeOption);
+      },
+      children: [!notLabel && /*#__PURE__*/_jsx(DropdownLabel, {
+        $labelColor: labelColor,
+        $labelSize: labelSize,
+        children: label
+      }), /*#__PURE__*/_jsxs(MultiSelectContainer, {
+        width: width,
+        children: [/*#__PURE__*/_jsxs(MultiSelectDisplay, {
+          onClick: function onClick() {
+            return !disabled && setIsOpen(!isOpen);
+          },
+          height: height,
+          $selectPadding: selectPadding,
+          background: background,
+          color: color,
+          style: {
+            opacity: disabled ? 0.6 : 1
+          },
+          children: [renderSelectedTags(), /*#__PURE__*/_jsx(DropdownArrow, {
+            $isOpen: isOpen,
+            children: /*#__PURE__*/_jsx(FaChevronDown, {})
+          })]
+        }), /*#__PURE__*/_jsx(MultiSelectDropdown, {
+          $isOpen: isOpen,
+          background: background,
+          children: allOptions.map(function (option) {
+            var _option$value2, _option$label3, _option$disabled, _optionLabel$3;
+            var optionValue = (_option$value2 = option === null || option === void 0 ? void 0 : option.value) !== null && _option$value2 !== void 0 ? _option$value2 : option;
+            var optionLabel = (_option$label3 = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label3 !== void 0 ? _option$label3 : option;
+            var disabled = (_option$disabled = option === null || option === void 0 ? void 0 : option.disabled) !== null && _option$disabled !== void 0 ? _option$disabled : false;
+            var isSelected = Array.isArray(value) && value.includes(optionValue);
+            var displayLabel = typeof optionLabel === "string" ? (optionLabel === null || optionLabel === void 0 || (_optionLabel$3 = optionLabel[0]) === null || _optionLabel$3 === void 0 ? void 0 : _optionLabel$3.toUpperCase()) + (optionLabel === null || optionLabel === void 0 ? void 0 : optionLabel.slice(1)) : optionLabel;
+            return /*#__PURE__*/_jsxs(MultiSelectOption, {
+              onClick: function onClick() {
+                return !disabled && !(option !== null && option !== void 0 && option.disabled) && handleMultipleSelect(optionValue);
+              },
+              $optionColor: optionColor,
+              style: {
+                opacity: disabled || option !== null && option !== void 0 && option.disabled ? 0.5 : 1
+              },
+              children: [/*#__PURE__*/_jsx("input", {
+                type: "checkbox",
+                checked: isSelected,
+                onChange: function onChange() {} // Manejado por el onClick del contenedor
+                ,
+                disabled: disabled || (option === null || option === void 0 ? void 0 : option.disabled)
+              }), /*#__PURE__*/_jsx("span", {
+                children: displayLabel
+              })]
+            }, optionValue);
+          })
+        })]
+      })]
+    }));
+  }
+
+  // Modo simple (original)
+  return /*#__PURE__*/_jsxs(DropdownContainer, _objectSpread(_objectSpread({
+    direction: direction,
+    gap: gap
+  }, props), {}, {
+    width: width,
+    onClick: function onClick() {
+      return playSound(HOC_SOUNDS.changeOption);
+    },
+    children: [!notLabel && /*#__PURE__*/_jsx(DropdownLabel, {
+      $labelColor: labelColor,
+      $labelSize: labelSize,
+      children: label
+    }), /*#__PURE__*/_jsxs(SimpleSelectContainer, {
+      width: width,
+      children: [/*#__PURE__*/_jsxs(DropdownSelect, {
+        id: id,
+        name: name,
+        value: value,
+        onChange: onChange,
+        width: width,
+        height: height,
+        $selectPadding: selectPadding,
+        background: background,
+        color: color,
+        disabled: disabled,
+        style: {
+          opacity: disabled ? 0.6 : 1
+        },
+        children: [additionalOptions === null || additionalOptions === void 0 ? void 0 : additionalOptions.map(function (option) {
+          var _option$value3, _option$label4, _option$disabled2;
+          var val = (_option$value3 = option === null || option === void 0 ? void 0 : option.value) !== null && _option$value3 !== void 0 ? _option$value3 : option;
+          var label = (_option$label4 = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label4 !== void 0 ? _option$label4 : option;
+          var disabled = (_option$disabled2 = option === null || option === void 0 ? void 0 : option.disabled) !== null && _option$disabled2 !== void 0 ? _option$disabled2 : false;
+          return /*#__PURE__*/_jsx(DropdownOption, {
+            value: val,
+            disabled: disabled,
+            background: value === label || value === "" ? "purpleLight" : background,
+            $optionColor: value === label || value === "" ? "purpleDark" : optionColor || color,
+            children: label
+          }, "additional-".concat(val));
+        }), options === null || options === void 0 ? void 0 : options.map(function (option) {
+          var _option$value4, _option$label5, _option$disabled3, _label$;
+          var val = (_option$value4 = option === null || option === void 0 ? void 0 : option.value) !== null && _option$value4 !== void 0 ? _option$value4 : option;
+          var label = (_option$label5 = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label5 !== void 0 ? _option$label5 : option;
+          var disabled = (_option$disabled3 = option === null || option === void 0 ? void 0 : option.disabled) !== null && _option$disabled3 !== void 0 ? _option$disabled3 : false;
+          return /*#__PURE__*/_jsx(DropdownOption, {
+            value: val,
+            disabled: disabled,
+            background: value === label ? "purpleLight" : background,
+            $optionColor: value === label ? "purpleDark" : optionColor || color,
+            children: typeof label === "string" ? (label === null || label === void 0 || (_label$ = label[0]) === null || _label$ === void 0 ? void 0 : _label$.toUpperCase()) + (label === null || label === void 0 ? void 0 : label.slice(1)) : label
+          }, "option-".concat(val));
+        })]
+      }), /*#__PURE__*/_jsx(SimpleSelectArrow, {
+        color: color,
+        style: {
+          opacity: disabled ? 0.6 : 1
+        },
+        children: /*#__PURE__*/_jsx(FaChevronDown, {})
+      })]
+    })]
+  }));
+};
+export default HDropdown;

package/dist/lib/HocComponents/HDropdown/HDropdown.styled.js

@@ -0,0 +1,162 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled from "styled-components";
+export var DropdownContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", "; /* Direcci\xF3n (row o column) */\n  gap: ", "; /* Espaciado entre label y select */\n  width: ", "; /* Ancho del contenedor */\n  position: relative;\n"])), function (_ref) {
+  var direction = _ref.direction;
+  return direction || "column";
+}, function (_ref2) {
+  var gap = _ref2.gap;
+  return gap || "10px";
+}, function (_ref3) {
+  var width = _ref3.width;
+  return width || "auto";
+});
+
+// Contenedor para modo múltiple
+export var MultiSelectContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  width: ", ";\n"])), function (_ref4) {
+  var width = _ref4.width;
+  return width || "200px";
+});
+
+// Display que muestra las opciones seleccionadas
+export var MultiSelectDisplay = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  font-size: var(--p16);\n  color: ", "!important;\n  padding: ", "; /* Padding interno del select */\n  border-radius: 8px;\n  width: 100%;\n  height: ", ";\n  background: ", " !important;\n  border: none;\n  box-shadow: 0px 4px 4px 0px #00000040;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  text-indent: 1px;\n\n  /* Asegurar que sea id\xE9ntico al select normal */\n  min-height: ", ";\n  max-height: ", ";\n  overflow: hidden;\n\n  &:focus {\n    outline: none;\n  }\n"])), function (_ref5) {
+  var theme = _ref5.theme,
+    color = _ref5.color;
+  return (theme === null || theme === void 0 ? void 0 : theme[color]) || color || theme.white;
+}, function (_ref6) {
+  var $selectPadding = _ref6.$selectPadding;
+  return $selectPadding || "10px 20px";
+}, function (_ref7) {
+  var height = _ref7.height;
+  return height || "40px";
+}, function (_ref8) {
+  var _ref9, _theme$background;
+  var theme = _ref8.theme,
+    background = _ref8.background;
+  return (_ref9 = (_theme$background = theme === null || theme === void 0 ? void 0 : theme[background]) !== null && _theme$background !== void 0 ? _theme$background : background) !== null && _ref9 !== void 0 ? _ref9 : theme.shadePurpleDark;
+}, function (_ref0) {
+  var height = _ref0.height;
+  return height || "40px";
+}, function (_ref1) {
+  var height = _ref1.height;
+  return height || "40px";
+});
+
+// Contenedor de las etiquetas seleccionadas
+export var SelectedTagsContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  flex: 1;\n  overflow: hidden;\n"])));
+
+// Etiqueta individual
+export var SelectedTag = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background: ", "66;\n  color: ", ";\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  max-width: 120px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])), function (_ref10) {
+  var theme = _ref10.theme,
+    $optionColor = _ref10.$optionColor;
+  return (theme === null || theme === void 0 ? void 0 : theme[$optionColor]) || $optionColor || theme.purpleMedium;
+}, function (_ref11) {
+  var theme = _ref11.theme,
+    color = _ref11.color;
+  return (theme === null || theme === void 0 ? void 0 : theme[color]) || color || theme.white;
+});
+
+// Botón para remover etiqueta
+export var RemoveTagButton = styled.button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  background: none;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  padding: 0;\n  font-size: 14px;\n  line-height: 1;\n\n  &:hover {\n    opacity: 0.7;\n  }\n"])));
+
+// Flecha del dropdown
+export var DropdownArrow = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-left: 8px;\n  transition: transform 0.2s;\n  transform: ", ";\n  font-size: 14px; /* Tama\xF1o fijo para la flecha */\n  display: flex;\n  align-items: center;\n"])), function (_ref12) {
+  var $isOpen = _ref12.$isOpen;
+  return $isOpen ? "rotate(180deg)" : "rotate(0deg)";
+});
+
+// Lista desplegable para múltiple
+export var MultiSelectDropdown = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  background: ", " !important;\n  border-radius: 8px;\n  box-shadow: 0px 4px 4px 0px #00000040;\n  z-index: 1000;\n  max-height: 200px;\n  overflow-y: auto;\n  display: ", ";\n  margin-top: 4px;\n"])), function (_ref13) {
+  var _ref14, _theme$background2;
+  var theme = _ref13.theme,
+    background = _ref13.background;
+  return (_ref14 = (_theme$background2 = theme === null || theme === void 0 ? void 0 : theme[background]) !== null && _theme$background2 !== void 0 ? _theme$background2 : background) !== null && _ref14 !== void 0 ? _ref14 : theme.shadePurpleDark;
+}, function (_ref15) {
+  var $isOpen = _ref15.$isOpen;
+  return $isOpen ? "block" : "none";
+});
+
+// Opción con checkbox
+export var MultiSelectOption = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  padding: 8px 12px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: ", " !important;\n\n  &:hover {\n    background: ", "33 !important;\n  }\n\n  input[type=\"checkbox\"] {\n    margin: 0;\n    cursor: pointer;\n  }\n"])), function (_ref16) {
+  var theme = _ref16.theme,
+    $optionColor = _ref16.$optionColor;
+  return (theme === null || theme === void 0 ? void 0 : theme[$optionColor]) || $optionColor || theme.white;
+}, function (_ref17) {
+  var theme = _ref17.theme,
+    $optionColor = _ref17.$optionColor;
+  return (theme === null || theme === void 0 ? void 0 : theme[$optionColor]) || $optionColor || theme.purpleMedium;
+});
+export var DropdownSelect = styled.select(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n  font-size: var(--p16);\n  color: ", "!important;\n  padding: ", "; /* Padding interno del select */\n  border-radius: 8px;\n  width: ", "; /* Ancho del dropdown */\n\n  height: ", "; /* Altura del dropdown */\n  background: ", " !important;\n  text-indent: 1px;\n  border: none;\n  box-shadow: 0px 4px 4px 0px #00000040;\n  appearance: none; /* Ocultar flecha nativa */\n  -webkit-appearance: none;\n  -moz-appearance: none;\n\n  &:focus {\n    outline: none;\n  }\n"])), function (_ref18) {
+  var theme = _ref18.theme,
+    color = _ref18.color;
+  return (theme === null || theme === void 0 ? void 0 : theme[color]) || color || theme.white;
+}, function (_ref19) {
+  var $selectPadding = _ref19.$selectPadding;
+  return $selectPadding || "10px 20px";
+}, function (_ref20) {
+  var width = _ref20.width;
+  return width || "200px";
+}, function (_ref21) {
+  var height = _ref21.height;
+  return height || "40px";
+}, function (_ref22) {
+  var _ref23, _theme$background3;
+  var theme = _ref22.theme,
+    background = _ref22.background;
+  return (_ref23 = (_theme$background3 = theme === null || theme === void 0 ? void 0 : theme[background]) !== null && _theme$background3 !== void 0 ? _theme$background3 : background) !== null && _ref23 !== void 0 ? _ref23 : theme.shadePurpleDark;
+});
+
+// Contenedor para el select simple con flecha personalizada
+export var SimpleSelectContainer = styled.div(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n  position: relative;\n  width: ", ";\n"])), function (_ref24) {
+  var width = _ref24.width;
+  return width || "200px";
+});
+
+// Flecha para el select simple (idéntica a la del múltiple)
+export var SimpleSelectArrow = styled.span(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 20px;\n  top: 50%;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: ", ";\n  font-size: 14px; /* Mismo tama\xF1o que la flecha del m\xFAltiple */\n  display: flex;\n  align-items: center;\n"])), function (_ref25) {
+  var theme = _ref25.theme,
+    color = _ref25.color;
+  return (theme === null || theme === void 0 ? void 0 : theme[color]) || color || theme.white;
+});
+export var DropdownOption = styled.option(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  color: ", " !important;\n  background: ", " !important;\n  padding: 8px 12px; /* Padding para mejor UX en m\xFAltiple */\n\n  /* Estilos para selecci\xF3n m\xFAltiple */\n  &:checked {\n    background: ", " !important;\n    color: ", " !important;\n    font-weight: bold;\n  }\n\n  &:hover {\n    background: ", "33 !important;\n  }\n"])), function (_ref26) {
+  var theme = _ref26.theme,
+    $optionColor = _ref26.$optionColor;
+  return (theme === null || theme === void 0 ? void 0 : theme[$optionColor]) || $optionColor || theme.white;
+}, function (_ref27) {
+  var _ref28, _theme$background4;
+  var theme = _ref27.theme,
+    background = _ref27.background;
+  return (_ref28 = (_theme$background4 = theme === null || theme === void 0 ? void 0 : theme[background]) !== null && _theme$background4 !== void 0 ? _theme$background4 : background) !== null && _ref28 !== void 0 ? _ref28 : theme.shadePurpleDark;
+}, function (_ref29) {
+  var theme = _ref29.theme,
+    $optionColor = _ref29.$optionColor;
+  return (theme === null || theme === void 0 ? void 0 : theme[$optionColor]) || $optionColor || theme.purpleMedium;
+}, function (_ref30) {
+  var _ref31, _theme$background5;
+  var theme = _ref30.theme,
+    background = _ref30.background;
+  return (_ref31 = (_theme$background5 = theme === null || theme === void 0 ? void 0 : theme[background]) !== null && _theme$background5 !== void 0 ? _theme$background5 : background) !== null && _ref31 !== void 0 ? _ref31 : theme.shadePurpleDark;
+}, function (_ref32) {
+  var theme = _ref32.theme,
+    $optionColor = _ref32.$optionColor;
+  return (theme === null || theme === void 0 ? void 0 : theme[$optionColor]) || $optionColor || theme.purpleMedium;
+});
+export var DropdownLabel = styled.label(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  font-size: ", " !important;\n\n  font-weight: ", "!important;\n\n  color: ", "!important;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n"])), function (_ref33) {
+  var $labelSize = _ref33.$labelSize;
+  if (!$labelSize) return "var(--p16)";
+  if ($labelSize !== null && $labelSize !== void 0 && $labelSize.startsWith("h") || $labelSize !== null && $labelSize !== void 0 && $labelSize.startsWith("p")) {
+    return "var(--".concat($labelSize, ", var(--p16))");
+  }
+  return $labelSize;
+}, function (_ref34) {
+  var $labelWeight = _ref34.$labelWeight;
+  if (!$labelWeight) return "var(--weight-regular)";
+  if ($labelWeight !== null && $labelWeight !== void 0 && $labelWeight.startsWith("weight-")) {
+    return "var(--".concat($labelWeight, ", var(--weight-regular))");
+  }
+  return $labelWeight; // 400, 700, 'inherit', etc.
+}, function (_ref35) {
+  var $labelColor = _ref35.$labelColor,
+    theme = _ref35.theme;
+  return (theme === null || theme === void 0 ? void 0 : theme[$labelColor]) || $labelColor || theme.purpleMedium;
+});

package/dist/lib/HocComponents/HInitBackgroundAnimation/HInitBackgroundAnimation.js

@@ -0,0 +1,32 @@
+import { HocIconLogoLogin } from "../../assets/HocLogos";
+import HBlackBack from "../HBlackBack/HBlackBack";
+import { Container, LoginContainer, Logo } from "./HInitBackgroundAnimation.styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var HInitBackgroundAnimation = function HInitBackgroundAnimation(_ref) {
+  var showBackground = _ref.showBackground;
+  return /*#__PURE__*/_jsxs(Container, {
+    fadeOut: showBackground,
+    onAnimationEnd: function onAnimationEnd(e) {
+      if (e.target === e.currentTarget) {
+        document.getElementById("background").style.width = "0px";
+        document.getElementById("background").style.height = "0px";
+        document.getElementById("background").style.position = "fixed";
+        document.getElementById("background").style.zIndex = "-1";
+        document.getElementById("background").style.top = "0";
+        document.getElementById("background").style.left = "0";
+      }
+    },
+    id: "background",
+    style: {
+      zIndex: "9999"
+    },
+    children: [/*#__PURE__*/_jsx(HBlackBack, {}), /*#__PURE__*/_jsx(LoginContainer, {
+      children: /*#__PURE__*/_jsx(Logo, {
+        translate: showBackground,
+        src: HocIconLogoLogin,
+        alt: ""
+      })
+    })]
+  });
+};
+export default HInitBackgroundAnimation;

package/dist/lib/HocComponents/HInitBackgroundAnimation/HInitBackgroundAnimation.styled.js

@@ -0,0 +1,15 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled, { css, keyframes } from "styled-components";
+var fadeOut = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n   from {\n      opacity: 1;\n   }\n   to {\n      opacity: 0;\n      display: none;\n   }\n"])));
+var translate = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   from {\n\n   }\n   to {\n      transform: translateY(100%);\n   }\n"])));
+export var Container = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n   min-height: 100vh;\n   width: 100%;\n   display: flex;\n   justify-content: flex-start;\n   align-items: center;\n   flex-direction: column;\n   background: ", ";\n   position: fixed;\n   top: 0;\n   left: 0;\n   z-index: 5;\n   ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.shadePurpleDark2;
+}, function (props) {
+  return props.fadeOut && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      animation: ", " 3s forwards;\n   "])), fadeOut);
+});
+export var LoginContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   gap: 20px;\n   padding: 20px;\n   border-radius: 10px;\n   margin: 20px;\n   z-index: 6;\n   margin-top: 50px;\n"])));
+export var Logo = styled.img(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n   ", "\n"])), function (props) {
+  return props.translate && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      animation: ", " 1s forwards;\n   "])), translate);
+});

package/dist/lib/HocComponents/HInput/HInput.js

@@ -0,0 +1,150 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["id", "direction", "placeholder", "value", "type", "onChange", "width", "height", "gap", "fontSize", "fontColor", "fontWeight", "label", "labelColor", "labelSize", "labelWeight", "icon", "iconSize", "iconDirection", "onIconClick", "iconDisabled", "disabled", "labelPosition", "labelWidth", "name", "min", "max", "multiline", "rows", "textAlign", "background", "placeholderColor", "border"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 { forwardRef } from "react";
+import { Input, HInputContainer, InputContainer, InputLabel, TextareaStyled // nuevo import
+} from "./HInput.styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var HInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? "column" : _ref$direction,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "Enter text..." : _ref$placeholder,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? "" : _ref$value,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "text" : _ref$type,
+    onChange = _ref.onChange,
+    width = _ref.width,
+    height = _ref.height,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? "10px" : _ref$gap,
+    fontSize = _ref.fontSize,
+    fontColor = _ref.fontColor,
+    fontWeight = _ref.fontWeight,
+    label = _ref.label,
+    labelColor = _ref.labelColor,
+    labelSize = _ref.labelSize,
+    labelWeight = _ref.labelWeight,
+    icon = _ref.icon,
+    _ref$iconSize = _ref.iconSize,
+    iconSize = _ref$iconSize === void 0 ? "20px" : _ref$iconSize,
+    _ref$iconDirection = _ref.iconDirection,
+    iconDirection = _ref$iconDirection === void 0 ? "row-reverse" : _ref$iconDirection,
+    onIconClick = _ref.onIconClick,
+    _ref$iconDisabled = _ref.iconDisabled,
+    iconDisabled = _ref$iconDisabled === void 0 ? false : _ref$iconDisabled,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    labelPosition = _ref.labelPosition,
+    labelWidth = _ref.labelWidth,
+    name = _ref.name,
+    min = _ref.min,
+    max = _ref.max,
+    _ref$multiline = _ref.multiline,
+    multiline = _ref$multiline === void 0 ? false : _ref$multiline,
+    _ref$rows = _ref.rows,
+    rows = _ref$rows === void 0 ? 1 : _ref$rows,
+    textAlign = _ref.textAlign,
+    background = _ref.background,
+    placeholderColor = _ref.placeholderColor,
+    border = _ref.border,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var handleIconClick = function handleIconClick() {
+    if (iconDisabled) return;
+    onIconClick();
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (iconDisabled) return;
+    if (e.key === "Enter" && onIconClick) {
+      onIconClick();
+    }
+  };
+  return /*#__PURE__*/_jsxs(HInputContainer, _objectSpread(_objectSpread({
+    id: id
+  }, props), {}, {
+    gap: gap,
+    direction: direction,
+    width: width,
+    children: [label && /*#__PURE__*/_jsx(InputLabel, {
+      $labelWidth: labelWidth,
+      $labelColor: labelColor,
+      $labelSize: labelSize,
+      $labelWeight: labelWeight,
+      $labelPosition: labelPosition,
+      children: label
+    }), /*#__PURE__*/_jsxs(InputContainer, {
+      direction: iconDirection,
+      width: width,
+      height: height,
+      className: "input-container",
+      children: [icon && /*#__PURE__*/_jsx("div", {
+        className: "icon-container",
+        onClick: handleIconClick,
+        style: {
+          opacity: iconDisabled ? 0.5 : 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: typeof icon === "string" ? /*#__PURE__*/_jsx("img", {
+          src: icon,
+          alt: "input-icon",
+          style: {
+            width: iconSize
+          }
+        }) : icon
+      }), multiline ? /*#__PURE__*/_jsx(TextareaStyled, {
+        ref: ref,
+        name: name,
+        disabled: disabled,
+        placeholder: placeholder,
+        value: value,
+        onChange: onChange,
+        rows: rows,
+        style: props.style,
+        onInput: function onInput(e) {
+          e.target.style.height = "auto";
+          e.target.style.height = e.target.scrollHeight + "px";
+        },
+        onKeyDown: handleKeyDown,
+        min: min !== null && min !== void 0 ? min : undefined,
+        max: max !== null && max !== void 0 ? max : undefined,
+        className: "hoc-input",
+        $textAlign: textAlign,
+        $background: background,
+        $placeholderColor: placeholderColor,
+        $border: border,
+        $fontSize: fontSize,
+        $fontColor: fontColor,
+        $fontWeight: fontWeight
+      }) : /*#__PURE__*/_jsx(Input, {
+        ref: ref,
+        name: name,
+        onKeyDown: handleKeyDown,
+        type: type,
+        disabled: disabled,
+        placeholder: placeholder,
+        value: value,
+        onChange: onChange,
+        $fontSize: fontSize,
+        $fontColor: fontColor,
+        $fontWeight: fontWeight,
+        $textAlign: textAlign,
+        $background: background,
+        $placeholderColor: placeholderColor,
+        $border: border,
+        min: min !== null && min !== void 0 ? min : undefined,
+        max: max !== null && max !== void 0 ? max : undefined
+      })]
+    })]
+  }));
+});
+export default HInput;