gdx-ui 1.5.0 → 1.7.0

package/components/images/PictureZoomBtns.js

@@ -0,0 +1,308 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PictureZoom = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _util = require("../util");
+var _button = require("../button");
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && Object.prototype.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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+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(arr) { if (Array.isArray(arr)) return arr; }
+var PictureZoom = exports.PictureZoom = function PictureZoom(_ref) {
+  var src = _ref.src,
+    alt = _ref.alt,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '100%' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 600 : _ref$height,
+    _ref$bordered = _ref.bordered,
+    bordered = _ref$bordered === void 0 ? false : _ref$bordered,
+    _ref$maxZoom = _ref.maxZoom,
+    maxZoom = _ref$maxZoom === void 0 ? 1.5 : _ref$maxZoom;
+  var _useState = (0, _react.useState)(),
+    _useState2 = _slicedToArray(_useState, 2),
+    imageData = _useState2[0],
+    setImageData = _useState2[1];
+  var _useState3 = (0, _react.useState)(1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    zoom = _useState4[0],
+    setZoom = _useState4[1];
+  var _useState5 = (0, _react.useState)(1),
+    _useState6 = _slicedToArray(_useState5, 2),
+    minZoom = _useState6[0],
+    setMinZoom = _useState6[1];
+  var _useState7 = (0, _react.useState)(maxZoom),
+    _useState8 = _slicedToArray(_useState7, 2),
+    maxZoomState = _useState8[0],
+    setMaxZoomState = _useState8[1];
+  var _useState9 = (0, _react.useState)({
+      x: 0,
+      y: 0
+    }),
+    _useState10 = _slicedToArray(_useState9, 2),
+    offset = _useState10[0],
+    setOffset = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    dragging = _useState12[0],
+    setDragging = _useState12[1];
+  var _useState13 = (0, _react.useState)({
+      x: 0,
+      y: 0
+    }),
+    _useState14 = _slicedToArray(_useState13, 2),
+    dragStart = _useState14[0],
+    setDragStart = _useState14[1];
+  var _useState15 = (0, _react.useState)({
+      x: 0,
+      y: 0
+    }),
+    _useState16 = _slicedToArray(_useState15, 2),
+    imgStart = _useState16[0],
+    setImgStart = _useState16[1];
+  var containerRef = (0, _react.useRef)(null);
+
+  // Cuando la imagen y el wrapper están listos, calcula el zoom mínimo y máximo
+  (0, _react.useEffect)(function () {
+    if (!src) return;
+    var image = new Image();
+    image.src = src;
+    image.onload = function () {
+      setImageData({
+        width: image.width,
+        height: image.height
+      });
+    };
+  }, [src]);
+  (0, _react.useEffect)(function () {
+    if (!imageData || !containerRef.current) return;
+    var wrapper = containerRef.current;
+    var dispW = wrapper.clientWidth;
+    var dispH = wrapper.clientHeight;
+    var zoomW = dispW / imageData.width;
+    var zoomH = dispH / imageData.height;
+    var fitZoom = Math.min(zoomW, zoomH);
+    setMinZoom(fitZoom);
+    setZoom(fitZoom);
+    setMaxZoomState(Math.max(fitZoom, maxZoom));
+    setOffset({
+      x: 0,
+      y: 0
+    });
+    // eslint-disable-next-line
+  }, [imageData, maxZoom, width, height]);
+
+  // Limita el offset para que la imagen no se salga del área visible
+  var clampOffset = function clampOffset(ox, oy, zoomVal) {
+    if (!imageData || !containerRef.current) return {
+      x: 0,
+      y: 0
+    };
+    var dispW = containerRef.current.clientWidth;
+    var dispH = containerRef.current.clientHeight;
+    var imgW = imageData.width * zoomVal;
+    var imgH = imageData.height * zoomVal;
+    var minX = Math.min(0, dispW - imgW);
+    var minY = Math.min(0, dispH - imgH);
+    return {
+      x: Math.max(minX, Math.min(ox, 0)),
+      y: Math.max(minY, Math.min(oy, 0))
+    };
+  };
+
+  // Zoom handlers
+  var handleZoom = function handleZoom(delta) {
+    setZoom(function (prev) {
+      var next = Math.max(minZoom, Math.min(prev + delta, maxZoomState));
+      setOffset(function (current) {
+        return clampOffset(current.x, current.y, next);
+      });
+      return next;
+    });
+  };
+
+  // Wheel zoom (más suave)
+  // const handleWheel = (e) => {
+  //   e.preventDefault();
+  //   const delta = e.deltaY < 0 ? -0.05 : 0.05;
+  //   handleZoom(delta);
+  // };
+
+  // Drag handlers (mouse & touch)
+  var startDrag = function startDrag(clientX, clientY) {
+    setDragging(true);
+    setDragStart({
+      x: clientX,
+      y: clientY
+    });
+    setImgStart(offset);
+  };
+  var onMouseDown = function onMouseDown(e) {
+    if (zoom === minZoom) return;
+    e.preventDefault();
+    startDrag(e.clientX, e.clientY);
+  };
+  var onMouseMove = function onMouseMove(e) {
+    if (!dragging) return;
+    var dx = e.clientX - dragStart.x;
+    var dy = e.clientY - dragStart.y;
+    setOffset(clampOffset(imgStart.x + dx, imgStart.y + dy, zoom));
+  };
+  var onMouseUp = function onMouseUp() {
+    return setDragging(false);
+  };
+
+  // Touch events
+  var onTouchStart = function onTouchStart(e) {
+    if (zoom === minZoom) return;
+    if (e.touches.length === 1) {
+      var t = e.touches[0];
+      startDrag(t.clientX, t.clientY);
+    }
+  };
+  var onTouchMove = function onTouchMove(e) {
+    if (!dragging || e.touches.length !== 1) return;
+    var t = e.touches[0];
+    var dx = t.clientX - dragStart.x;
+    var dy = t.clientY - dragStart.y;
+    setOffset(clampOffset(imgStart.x + dx, imgStart.y + dy, zoom));
+  };
+  var onTouchEnd = function onTouchEnd() {
+    return setDragging(false);
+  };
+
+  // Reset offset if zoom regresa al mínimo
+  // useEffect(() => {
+  //   if (zoom === minZoom) setOffset({ x: 0, y: 0 });
+  // }, [zoom, minZoom]);
+
+  (0, _react.useEffect)(function () {
+    if (!imageData || !containerRef.current) return;
+    var wrapper = containerRef.current;
+    var dispW = wrapper.clientWidth;
+    var dispH = wrapper.clientHeight;
+    var zoomW = dispW / imageData.width;
+    var zoomH = dispH / imageData.height;
+    var fitZoom = Math.min(zoomW, zoomH);
+    setMinZoom(fitZoom);
+    setZoom(fitZoom);
+    setMaxZoomState(Math.max(fitZoom, maxZoom));
+
+    // Centra la imagen al inicio
+    var imgW = imageData.width * fitZoom;
+    var imgH = imageData.height * fitZoom;
+    var offsetX = (dispW - imgW) / 2;
+    var offsetY = (dispH - imgH) / 2;
+    setOffset({
+      x: offsetX,
+      y: offsetY
+    });
+    // eslint-disable-next-line
+  }, [imageData, maxZoom, width, height]);
+  (0, _react.useEffect)(function () {
+    if (zoom === minZoom && imageData && containerRef.current) {
+      var dispW = containerRef.current.clientWidth;
+      var dispH = containerRef.current.clientHeight;
+      var imgW = imageData.width * minZoom;
+      var imgH = imageData.height * minZoom;
+      var offsetX = (dispW - imgW) / 2;
+      var offsetY = (dispH - imgH) / 2;
+      setOffset({
+        x: offsetX,
+        y: offsetY
+      });
+    }
+  }, [zoom, minZoom, imageData]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: containerRef,
+    style: {
+      width: width,
+      height: height,
+      overflow: 'hidden',
+      position: 'relative',
+      touchAction: 'none',
+      userSelect: dragging ? 'none' : undefined,
+      background: '#FFF'
+    }
+    // onWheel={handleWheel}
+    ,
+    onMouseMove: onMouseMove,
+    onMouseUp: onMouseUp,
+    onMouseLeave: onMouseUp,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    className: "".concat(bordered ? 'bordered' : '', " margin-bottom")
+  }, imageData ? /*#__PURE__*/_react["default"].createElement("img", {
+    src: src,
+    alt: alt,
+    draggable: false,
+    style: {
+      width: imageData.width * zoom,
+      height: imageData.height * zoom,
+      position: 'absolute',
+      left: offset.x,
+      top: offset.y,
+      cursor: zoom > minZoom ? dragging ? 'grabbing' : 'grab' : 'default',
+      transition: dragging ? 'none' : 'left 0.1s, top 0.1s',
+      userSelect: 'none'
+    },
+    onMouseDown: zoom > minZoom ? onMouseDown : undefined,
+    onTouchStart: zoom > minZoom ? onTouchStart : undefined
+  }) : /*#__PURE__*/_react["default"].createElement(_util.Skeleton, {
+    width: "100%",
+    height: height
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: 'absolute',
+      right: 8,
+      bottom: 8,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 15,
+      zIndex: 10
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    icon: _freeSolidSvgIcons.faPlus,
+    type: "button",
+    bg: "solid",
+    style: {
+      cursor: zoom < maxZoomState ? 'pointer' : 'not-allowed'
+    },
+    onClick: function onClick() {
+      return handleZoom(0.5);
+    },
+    disabled: zoom >= maxZoomState,
+    "aria-label": "Zoom in"
+  }), /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    bg: "solid",
+    icon: _freeSolidSvgIcons.faMinus,
+    type: "button",
+    onClick: function onClick() {
+      return handleZoom(-0.5);
+    },
+    disabled: zoom <= minZoom,
+    "aria-label": "Zoom out",
+    style: {
+      cursor: zoom > minZoom ? 'pointer' : 'not-allowed'
+    }
+  })));
+};
+PictureZoom.propTypes = {
+  src: _propTypes["default"].string.isRequired,
+  alt: _propTypes["default"].string,
+  width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  bordered: _propTypes["default"].bool,
+  maxZoom: _propTypes["default"].number
+};

package/components/images/{Image.js → PictureZoomSquare.js}

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Image = void 0;
+exports.Picture = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _util = require("../util");
@@ -17,7 +17,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 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(arr) { if (Array.isArray(arr)) return arr; }
-var Image = exports.Image = function Image(_ref) {
+var Picture = exports.Picture = function Picture(_ref) {
   var src = _ref.src,
     alt = _ref.alt,
     width = _ref.width,
@@ -51,7 +51,7 @@ var Image = exports.Image = function Image(_ref) {
     height: height
   });
 };
-Image.propTypes = {
+Picture.propTypes = {
   src: _propTypes["default"].string.isRequired,
   alt: _propTypes["default"].string,
   width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),

package/components/images/Thumb.js

@@ -11,6 +11,7 @@ var _util = require("../util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && Object.prototype.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() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -23,7 +24,8 @@ var Thumb = exports.Thumb = function Thumb(_ref) {
     _ref$bordered = _ref.bordered,
     bordered = _ref$bordered === void 0 ? false : _ref$bordered,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size;
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    onClick = _ref.onClick;
   var _useState = (0, _react.useState)(),
     _useState2 = _slicedToArray(_useState, 2),
     imageData = _useState2[0],
@@ -40,9 +42,18 @@ var Thumb = exports.Thumb = function Thumb(_ref) {
       });
     };
   }, [src]);
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "thumb thumb-".concat(size, " ").concat(bordered ? 'thumb-bordered' : '')
-  }, imageData ? /*#__PURE__*/_react["default"].createElement("img", {
+  var isClickable = typeof onClick === 'function';
+  return /*#__PURE__*/_react["default"].createElement("div", _extends({
+    className: "thumb thumb-".concat(size, " ").concat(bordered ? 'thumb-bordered' : '', " ").concat(isClickable ? 'clickable bordered-hover' : ''),
+    onClick: true
+  }, isClickable && {
+    onClick: onClick,
+    role: 'button',
+    tabIndex: 0,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter' || e.key === ' ') onClick(e);
+    }
+  }), imageData ? /*#__PURE__*/_react["default"].createElement("img", {
     src: src,
     alt: alt,
     className: "center-by-".concat(imageData.width > imageData.height ? 'width' : 'height')
@@ -54,5 +65,6 @@ Thumb.propTypes = {
   src: _propTypes["default"].string.isRequired,
   alt: _propTypes["default"].string,
   bordered: _propTypes["default"].bool,
-  size: _propTypes["default"].oneOf(['smallest', 'small', 'medium', 'large', 'largest'])
+  size: _propTypes["default"].oneOf(['smallest', 'small', 'medium', 'large', 'largest']),
+  onClick: _propTypes["default"].func
 };

package/components/images/index.js

@@ -3,14 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _Image = require("./Image");
-Object.keys(_Image).forEach(function (key) {
+var _CarouselImages = require("./CarouselImages");
+Object.keys(_CarouselImages).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Image[key]) return;
+  if (key in exports && exports[key] === _CarouselImages[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Image[key];
+      return _CarouselImages[key];
+    }
+  });
+});
+var _ImageZoom = require("./ImageZoom");
+Object.keys(_ImageZoom).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ImageZoom[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ImageZoom[key];
     }
   });
 });

package/components/information/Information.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var Information = exports.Information = function Information(_ref) {
   var children = _ref.children,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'primary' : _ref$color,
+    color = _ref$color === void 0 ? 'default' : _ref$color,
     icon = _ref.icon;
   var faIcon = color === 'primary' ? _freeSolidSvgIcons.faInfoCircle : color === 'success' ? _freeSolidSvgIcons.faCircleCheck : color === 'alert' ? _freeSolidSvgIcons.faCircleExclamation : color === 'warning' ? _freeSolidSvgIcons.faTriangleExclamation : _freeSolidSvgIcons.faComment;
   return /*#__PURE__*/_react["default"].createElement("div", {

package/components/{cards/CardScroller.js → scroller/ListScroller.js}

@@ -4,10 +4,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CardScrollerItem = exports.CardScrollerContext = exports.CardScroller = void 0;
+exports.ListScroller = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../../utils/utils");
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _button = require("../button");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && Object.prototype.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; }
@@ -17,98 +18,94 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 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(arr) { if (Array.isArray(arr)) return arr; }
-// import { useScreenDimentions } from '../../hooks';
-
-var CardScrollerContext = exports.CardScrollerContext = /*#__PURE__*/(0, _react.createContext)(null);
-var CardScroller = exports.CardScroller = function CardScroller(_ref) {
+var ListScroller = exports.ListScroller = function ListScroller(_ref) {
   var children = _ref.children,
-    _ref$visible = _ref.visible,
-    visible = _ref$visible === void 0 ? 3 : _ref$visible,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? 300 : _ref$height;
-  // const [step, setStep] = useState(0);
-  var _useState = (0, _react.useState)({
-      height: height
-    }),
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$itemWidth = _ref.itemWidth,
+    itemWidth = _ref$itemWidth === void 0 ? 120 : _ref$itemWidth,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 15 : _ref$gap;
+  var containerRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
-    settings = _useState2[0],
-    setSettings = _useState2[1];
-  // const [marginLeft, setMarginLeft] = useState(0);
-
-  // const wrapperRef = useRef(null);
-
-  // const onKeyHandler = (e) => {
-  //   const { key } = e;
-  //   console.log({ key })
-  //   if (key === 'ArrowRight') {
-  //     setMarginLeft(m => m - step <= 0 ? 0 : m - step);
-  //   } else if (key === 'ArrowLeft') {
-  //     setMarginLeft(marginLeft + step);
-  //     // setMarginLeft(m => m <= 0 ? m : m - step);
-  //   }
-  //   // console.log({marginLeft})
-  // }
+    canScrollLeft = _useState2[0],
+    setCanScrollLeft = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    canScrollRight = _useState4[0],
+    setCanScrollRight = _useState4[1];
 
-  // const onClickRight = () => {
-  //   setMarginLeft(m => m - step <= 0 ? m : m - step);
-  // }
+  // Actualiza el estado de los botones según el scroll
+  var updateScrollButtons = function updateScrollButtons() {
+    var el = containerRef.current;
+    if (!el) return;
+    setCanScrollLeft(el.scrollLeft > 0);
+    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+  };
+  (0, _react.useEffect)(function () {
+    updateScrollButtons();
+    var el = containerRef.current;
+    if (!el) return;
+    el.addEventListener('scroll', updateScrollButtons);
+    window.addEventListener('resize', updateScrollButtons);
+    return function () {
+      el.removeEventListener('scroll', updateScrollButtons);
+      window.removeEventListener('resize', updateScrollButtons);
+    };
+  }, [children]);
 
-  // const onClickLeft = () => {
-  //   setMarginLeft(marginLeft + step);
-  // }
-
-  // useEffect(() => {
-  //   setStep(wrapperRef.current.offsetWidth / visible);
-  // }, [])
-
-  return /*#__PURE__*/_react["default"].createElement(CardScrollerContext.Provider, {
-    value: {
-      settings: settings,
-      setSettings: setSettings
+  // Scroll a la izquierda/derecha por el ancho de un item
+  var scrollBy = function scrollBy(dir) {
+    if (containerRef.current) {
+      containerRef.current.scrollBy({
+        left: dir * (itemWidth + gap),
+        behavior: 'smooth'
+      });
     }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "card-scroller"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "card-scroller-crop",
-    style: {
-      height: height
-    }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "card-scroller-overflow"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    // style={{marginLeft: `${marginLeft}px`}}
-    className: "card-scroller-platter card-scroller-".concat(visible)
-  }, children)))));
-};
-var CardScrollerItem = exports.CardScrollerItem = function CardScrollerItem(_ref2) {
-  var children = _ref2.children;
-  // const itemRef = useRef(null);
-  var _useContext = (0, _react.useContext)(CardScrollerContext),
-    settings = _useContext.settings;
-  var height = settings.height;
-
-  // useEffect(() => {
-  //   if (itemRef.current) {
-  //     setSettings({...settings, width: itemRef.current.offsetWidth})
-  //   }
-  // }, []);
+  };
 
+  // Touch/swipe para móviles
+  var startX = 0;
+  var scrollLeft = 0;
+  var onTouchStart = function onTouchStart(e) {
+    startX = e.touches[0].pageX;
+    scrollLeft = containerRef.current.scrollLeft;
+  };
+  var onTouchMove = function onTouchMove(e) {
+    if (!startX) return;
+    var x = e.touches[0].pageX;
+    containerRef.current.scrollLeft = scrollLeft - (x - startX);
+  };
   return /*#__PURE__*/_react["default"].createElement("div", {
-    key: (0, _utils.generateId)(),
-    className: "card-scroller-item",
+    className: "list-scroller-wrapper ".concat(className)
+  }, canScrollLeft && /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    className: "list-scroller-btn list-scroller-btn-left",
+    bg: "solid",
+    icon: _freeSolidSvgIcons.faChevronLeft,
+    onClick: function onClick() {
+      return scrollBy(-1);
+    }
+  }), /*#__PURE__*/_react["default"].createElement("ul", {
+    className: "list-scroller",
+    ref: containerRef,
     style: {
-      height: height + 16
+      gap: gap
+    },
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove
+  }, children), canScrollRight && /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    className: "list-scroller-btn list-scroller-btn-right",
+    bg: "solid",
+    icon: _freeSolidSvgIcons.faChevronRight,
+    onClick: function onClick() {
+      return scrollBy(1);
     }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    // ref={itemRef} 
-    className: "card-scroller-item-sized"
-  }, children));
-};
-CardScroller.propTypes = {
-  children: _propTypes["default"].any,
-  visible: _propTypes["default"].number,
-  height: _propTypes["default"].number
+  }));
 };
-CardScrollerItem.propTypes = {
-  children: _propTypes["default"].any
+ListScroller.propTypes = {
+  children: _propTypes["default"].node.isRequired,
+  className: _propTypes["default"].string,
+  itemWidth: _propTypes["default"].number,
+  gap: _propTypes["default"].number
 };

package/components/snackbar/Snackbar.js

@@ -7,7 +7,6 @@ exports.Snackbar = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
-var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _IconButton = require("../button/IconButton");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var Snackbar = exports.Snackbar = function Snackbar(_ref) {
@@ -18,7 +17,7 @@ var Snackbar = exports.Snackbar = function Snackbar(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "snackbar-wrapper"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "snackbar snackbar-".concat(color)
+    className: "snackbar bg-".concat(color)
   }, children, /*#__PURE__*/_react["default"].createElement("div", {
     className: "snackbar-close"
   }, /*#__PURE__*/_react["default"].createElement(_IconButton.IconButton, {
@@ -28,6 +27,6 @@ var Snackbar = exports.Snackbar = function Snackbar(_ref) {
 };
 Snackbar.propTypes = {
   children: _propTypes["default"].any,
-  color: _propTypes["default"].oneOf(['info', 'primary', 'alert', 'success']),
+  color: _propTypes["default"].oneOf(['default', 'primary', 'alert', 'success', 'warning']),
   onClose: _propTypes["default"].func
 };

package/package.json

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