gdx-ui 1.15.2 → 1.15.4

package/components/box/Box.js

@@ -75,7 +75,13 @@ var BoxHeader = exports.BoxHeader = function BoxHeader(_ref2) {
         open: !open
       }));
     },
-    icon: open ? _freeSolidSvgIcons.faChevronUp : _freeSolidSvgIcons.faChevronDown
+    icon: _freeSolidSvgIcons.faChevronDown,
+    style: {
+      transition: 'transform 0.3s ease',
+      // Si open=true → rotate(180deg) = chevron hacia abajo
+      // Si open=false → rotate(0deg) = chevron hacia arriba
+      transform: open ? 'rotate(180deg)' : 'rotate(0deg)'
+    }
   })), children);
 };
 var BoxContent = exports.BoxContent = function BoxContent(_ref3) {

package/components/forms/Input.js

@@ -39,8 +39,7 @@ var Input = exports.Input = /*#__PURE__*/_react["default"].forwardRef(function (
     inputStyle = _ref.inputStyle,
     _ref$showArrows = _ref.showArrows,
     showArrows = _ref$showArrows === void 0 ? true : _ref$showArrows,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? 'left' : _ref$align,
+    align = _ref.align,
     min = _ref.min,
     max = _ref.max,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -75,21 +74,44 @@ var Input = exports.Input = /*#__PURE__*/_react["default"].forwardRef(function (
   var handleBlur = function handleBlur(e) {
     if (type === 'number') {
       var val = e.target.value;
+      var correctedValue = null;
+
       // Si está vacío o es inválido, usar el valor mínimo o 0
       if (val === '' || isNaN(Number(val))) {
-        var defaultValue = min !== undefined ? min : 0;
-        // Crear un evento sintético con el valor por defecto
+        correctedValue = min !== undefined ? min : 0;
+      }
+      // Validar que el valor no sea menor que el mínimo
+      else if (min !== undefined && Number(val) < min) {
+        correctedValue = min;
+      }
+      // Validar que el valor no sea mayor que el máximo
+      else if (max !== undefined && Number(val) > max) {
+        correctedValue = max;
+      }
+
+      // Si se necesita corrección, actualizar el valor
+      if (correctedValue !== null) {
+        // Actualizar el input directamente
+        e.target.value = correctedValue;
+
+        // Crear evento sintético con el valor corregido como NUMBER
         var syntheticEvent = _objectSpread(_objectSpread({}, e), {}, {
           target: _objectSpread(_objectSpread({}, e.target), {}, {
-            value: defaultValue
+            value: correctedValue,
+            valueAsNumber: correctedValue // ✅ Para react-hook-form
           })
         });
+
+        // Llamar a onChange con el valor corregido
         if (onChange) onChange(syntheticEvent);
       }
     }
+
+    // Llamar al onBlur original si existe
     if (onBlur) onBlur(e);
   };
   placeholder !== null && placeholder !== void 0 ? placeholder : placeholder = "".concat(label || '', " ").concat(required ? '(obligatorio)' : '');
+  var alignClass = !align ? type === 'number' ? 'right' : 'left' : align;
   return /*#__PURE__*/_react["default"].createElement("label", {
     className: "form-element"
   }, label && /*#__PURE__*/_react["default"].createElement("div", {
@@ -105,7 +127,7 @@ var Input = exports.Input = /*#__PURE__*/_react["default"].forwardRef(function (
     value: value,
     onChange: handleChange,
     onBlur: handleBlur,
-    className: "".concat(expanded ? 'expanded' : '', " \n            ").concat(type === 'number' ? 'right' : '', "\n            ").concat(error ? 'input-alert' : '', " \n            ").concat(showArrows ? '' : 'hidden-arrows', "\n            ").concat(align, "\n            ").concat(inputClass ? inputClass : ''),
+    className: "".concat(expanded ? 'expanded' : '', " \n            ").concat(alignClass, "\n            ").concat(error ? 'input-alert' : '', " \n            ").concat(showArrows ? '' : 'hidden-arrows', "\n            ").concat(inputClass ? inputClass : ''),
     style: inputStyle,
     placeholder: placeholder,
     min: type === 'number' ? min : undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gdx-ui",
-  "version": "1.15.2",
+  "version": "1.15.4",
   "description": "UI gdx",
   "main": "index.js",
   "module": "index.js",

package/stories/box/Box.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.BoxDefault = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Box = require("../../components/box/Box");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Layout/Box',
+  component: _Box.Box,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+var BoxDefault = exports.BoxDefault = {
+  args: {
+    color: 'primary',
+    open: true,
+    collapsible: true,
+    isLoading: false
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        width: '400px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Box.Box, args, /*#__PURE__*/_react["default"].createElement(_Box.BoxHeader, null, "Box Header"), /*#__PURE__*/_react["default"].createElement(_Box.BoxContent, null, "The content of the box goes here.")));
+  }
+};