@widergy/energy-ui 3.148.0 → 3.150.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.150.0](https://github.com/widergy/energy-ui/compare/v3.149.0...v3.150.0) (2026-05-08)
+
+
+### Features
+
+* [CX-2272] extend UTCarousel and UTLabel for custom slide content ([#790](https://github.com/widergy/energy-ui/issues/790)) ([244111f](https://github.com/widergy/energy-ui/commit/244111fc15e0186aa52794434b74982d2e145a97))
+
+# [3.149.0](https://github.com/widergy/energy-ui/compare/v3.148.0...v3.149.0) (2026-05-08)
+
+
+### Features
+
+* [BRILLA-374] utstatus truncate and xl size ([#791](https://github.com/widergy/energy-ui/issues/791)) ([d94861a](https://github.com/widergy/energy-ui/commit/d94861a54defacd18df28d96f3065c954dcf21ee))
+
 # [3.148.0](https://github.com/widergy/energy-ui/compare/v3.147.0...v3.148.0) (2026-05-05)
 
 

package/dist/components/UTCarousel/README.md

@@ -0,0 +1,65 @@
+# UTCarousel
+
+Carousel de imágenes con soporte para autoplay, swipe táctil, flechas de navegación y puntos indicadores. Cada slide puede renderizar una imagen de fondo o contenido React custom.
+
+## Props
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `imgArray` | `array` | — | Array de slides. Ver estructura abajo. |
+| `autoPlay` | `bool` | `false` | Activa el avance automático entre slides. |
+| `autoPlayDelay` | `number` | `2000` | Milisegundos entre slides en autoplay. |
+| `height` | `string` | valor SCSS | Altura del carousel (ej. `'200px'`, `'var(--carousel-banner-height)'`). |
+| `legend` | `shape` | — | Configuración de puntos indicadores. `{ position: 'inside' \| 'outside' }`. Si no se pasa, no se muestran puntos. |
+| `arrow` | `shape` | — | Configuración de flechas. `{ position: 'inside' \| 'outside', arrowCustomLeft, arrowCustomRight, callbackLeft, callbackRight }`. |
+| `activeEvents` | `bool` | — | Habilita/deshabilita eventos de puntero. |
+| `borderSize` | `number` | — | Tamaño del borde entre slides. |
+| `className` | `string` | — | Clase CSS adicional para el contenedor. |
+| `classes` | `object` | — | Override de clases CSS internas (ej. `{ image: 'miClase' }`). |
+
+### Estructura de `imgArray`
+
+```js
+[
+  {
+    id: 1,           // recomendado para keys estables
+    imgSrc: '...',   // URL de imagen de fondo (cuando no se usa renderContent)
+    onClick: fn,     // handler de click (cuando no se usa renderContent)
+    renderContent: <MiComponente />  // contenido React custom (reemplaza imgSrc)
+  }
+]
+```
+
+Cuando se provee `renderContent`, el slide renderiza ese nodo directamente en lugar de la imagen de fondo. El componente pasado es responsable de manejar su propio click y dimensiones.
+
+## Uso básico — imágenes
+
+```jsx
+<UTCarousel
+  imgArray={[
+    { imgSrc: '/banner1.jpg', onClick: () => navigate('/promo1') },
+    { imgSrc: '/banner2.jpg', onClick: () => navigate('/promo2') }
+  ]}
+  autoPlay
+  autoPlayDelay={5000}
+  height="200px"
+/>
+```
+
+## Uso con contenido custom
+
+```jsx
+<UTCarousel
+  imgArray={[
+    { id: 1, renderContent: <BannerItem item={item1} onClick={fn1} /> },
+    { id: 2, renderContent: <BannerItem item={item2} onClick={fn2} /> }
+  ]}
+  autoPlay
+  autoPlayDelay={7000}
+  height="var(--carousel-banner-height)"
+/>
+```
+
+## Sin puntos indicadores
+
+No pasar la prop `legend` para ocultar los dots.

package/dist/components/UTCarousel/components/Legend/index.js

@@ -20,6 +20,7 @@ const LegendContainer = _ref => {
   const handleOnClick = () => onClick(index + 1);
   const isActive = currentSlide === index;
   return LegendCustom ? /*#__PURE__*/_react.default.createElement(LegendCustom, {
+    isActive: isActive,
     onClick: handleOnClick
   }) : /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
     className: classes.legendStyleTouchable,

package/dist/components/UTCarousel/components/Slider/component/Slide/index.js

@@ -19,17 +19,26 @@ const Slide = _ref => {
     imgSrc,
     onClick,
     position,
+    renderContent,
     shouldAnimate,
     widthContainer
   } = _ref;
   const slide = currentSlide === position ? border / 2 : currentSlide === position - 1 ? -border / 4 : currentSlide === position + 1 && border + border / 4;
+  const containerStyle = {
+    left: position * (slide ? widthContainer + slide : widthContainer),
+    width: "".concat(border ? widthContainer - border : widthContainer, "px"),
+    transition: "".concat(shouldAnimate ? "left ".concat(animationTime, "s linear 0s") : 'none')
+  };
+  if (renderContent) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.imageContainer,
+      style: containerStyle,
+      draggable: "false"
+    }, renderContent);
+  }
   return /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
     className: "".concat(_stylesModule.default.imageContainer),
-    style: {
-      left: position * (slide ? widthContainer + slide : widthContainer),
-      width: "".concat(border ? widthContainer - border : widthContainer, "px"),
-      transition: "".concat(shouldAnimate ? "left ".concat(animationTime, "s linear 0s") : 'none')
-    },
+    style: containerStyle,
     draggable: "false",
     onClick: onClick
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -48,6 +57,7 @@ Slide.propTypes = {
   imgSrc: _propTypes.string,
   onClick: _propTypes.func,
   position: _propTypes.number,
+  renderContent: _propTypes.node,
   shouldAnimate: _propTypes.bool,
   widthContainer: _propTypes.number
 };

package/dist/components/UTCarousel/components/Slider/layout.js

@@ -56,10 +56,16 @@ class Slider extends _react.PureComponent {
       key: "slide-".concat(slide.id || slide.imgSrc),
       onClick: slide.onClick,
       position: _index - 1,
+      renderContent: slide.renderContent,
       shouldAnimate: shouldAnimate,
       widthContainer: containerWidth
     }))), legend && legend.position === _constants.INSIDE && /*#__PURE__*/_react.default.createElement("div", {
-      className: _stylesModule.default.legendContainer
+      className: _stylesModule.default.legendContainer,
+      style: {
+        justifyContent: legend.align || 'center',
+        paddingBottom: legend.paddingBottom,
+        paddingLeft: legend.paddingLeft
+      }
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: _stylesModule.default.legend
     }, slides.map((slide, itemIndex) => /*#__PURE__*/_react.default.createElement(_Legend.default, {

package/dist/components/UTCarousel/index.js

@@ -46,11 +46,16 @@ UTCarousel.propTypes = {
     callbackRight: _propTypes.func
   }),
   legend: (0, _propTypes.shape)({
-    position: _propTypes.string,
-    legendCustom: _propTypes.node
+    align: _propTypes.string,
+    legendCustom: _propTypes.func,
+    paddingBottom: _propTypes.string,
+    paddingLeft: _propTypes.string,
+    position: _propTypes.string
   }),
   imgArray: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    imgSrc: _propTypes.string
+    id: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]),
+    imgSrc: _propTypes.string,
+    renderContent: _propTypes.node
   })),
   borderSize: _propTypes.number,
   autoPlay: _propTypes.bool,

package/dist/components/UTLabel/index.js

@@ -25,6 +25,7 @@ const UTLabel = _ref => {
     dataTestId,
     markdownExtended,
     markdownRenderers,
+    style,
     title,
     variant,
     withMarkdown
@@ -38,6 +39,7 @@ const UTLabel = _ref => {
   return /*#__PURE__*/_react.default.createElement(_UTSkeleton.default, null, /*#__PURE__*/_react.default.createElement(Component, {
     className: componentClassname.trim(),
     "data-testid": dataTestId,
+    style: style,
     title: title
   }, withMarkdown && /*#__PURE__*/_react.default.createElement(_Markdown.default, {
     classes: classes,
@@ -53,6 +55,7 @@ UTLabel.propTypes = {
   dataTestId: _propTypes.string,
   markdownExtended: _propTypes.bool,
   markdownRenderers: (0, _propTypes.objectOf)(_propTypes.func),
+  style: _propTypes.object,
   title: _propTypes.string,
   variant: _propTypes.string,
   withMarkdown: _propTypes.bool

package/dist/components/UTStatus/constants.js

@@ -11,6 +11,7 @@ const SIZES = exports.SIZES = {
   large: 'large',
   medium: 'medium',
   small: 'small',
+  xlarge: 'xlarge',
   xsmall: 'xsmall'
 };
 const VARIANTS = exports.VARIANTS = {

package/dist/components/UTStatus/index.js

@@ -14,6 +14,7 @@ var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
 var _theme = require("./theme");
 var _constants = require("./constants");
 var _utils = require("./utils");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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); }
@@ -31,6 +32,7 @@ const UTStatus = _ref => {
     title,
     tooltip,
     tooltipProps = {},
+    truncate,
     type = _constants.DEFAULT_PROPS.type,
     variant = _constants.DEFAULT_PROPS.variant,
     weight = _constants.DEFAULT_PROPS.weight,
@@ -103,10 +105,10 @@ const UTStatus = _ref => {
     })) : null;
   }, [adornments, size, variant]);
   const StatusRender = /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(classes.root, " ").concat(className || '', " ").concat(area ? '' : classes.withoutArea, " ").concat(areaType === _constants.AREA_TYPES.SQUARE ? '' : classes.roundedArea),
+    className: "".concat(classes.root, " ").concat(truncate ? _stylesModule.default.truncated : '', " ").concat(className || '', " ").concat(area ? '' : classes.withoutArea, " ").concat(areaType === _constants.AREA_TYPES.SQUARE ? '' : classes.roundedArea),
     title: title
   }, useValidAdornments && leftAdornments.map(renderAdornment), withoutIcon || useValidAdornments ? null : /*#__PURE__*/_react.default.createElement(IconComponent, iconProps), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: classes.label,
+    className: "".concat(classes.label, " ").concat(truncate ? _stylesModule.default.truncatedLabel : ''),
     colorTheme: colorTheme,
     shade: type !== _constants.TYPES.negative ? '05' : undefined,
     dataTestId: labelDataTestId,
@@ -139,6 +141,7 @@ UTStatus.propTypes = {
   title: _propTypes.string,
   tooltip: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.element]),
   tooltipProps: _propTypes.object,
+  truncate: _propTypes.bool,
   type: _propTypes.string,
   variant: _propTypes.string,
   weight: _propTypes.string,

package/dist/components/UTStatus/styles.module.scss

@@ -0,0 +1,13 @@
+.truncated {
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 100%;
+}
+
+.truncatedLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/components/UTStatus/theme.js

@@ -34,6 +34,7 @@ const getGridGap = _ref3 => {
     [_constants.SIZES.large]: 'var(--UT-status-gap-large, 8px)',
     [_constants.SIZES.medium]: 'var(--UT-status-gap-medium, 8px)',
     [_constants.SIZES.small]: 'var(--UT-status-gap-small, 4px)',
+    [_constants.SIZES.xlarge]: 'var(--UT-status-gap-xlarge, 8px)',
     [_constants.SIZES.xsmall]: 'var(--UT-status-gap-xsmall, 4px)'
   }[size];
 };
@@ -45,6 +46,7 @@ const getPadding = _ref4 => {
     [_constants.SIZES.large]: 'var(--UT-status-padding-y-large, 4px) var(--UT-status-padding-x-large, 8px)',
     [_constants.SIZES.medium]: 'var(--UT-status-padding-y-medium, 4px) var(--UT-status-padding-x-medium, 8px)',
     [_constants.SIZES.small]: 'var(--UT-status-padding-y-small, 4px) var(--UT-status-padding-x-small, 8px)',
+    [_constants.SIZES.xlarge]: 'var(--UT-status-padding-y-xlarge, 4px) var(--UT-status-padding-x-xlarge, 8px)',
     [_constants.SIZES.xsmall]: 'var(--UT-status-padding-y-xsmall, 2px) var(--UT-status-padding-x-xsmall, 4px)'
   }[size];
 };
@@ -56,6 +58,7 @@ const getLabelVariant = _ref5 => {
     [_constants.SIZES.large]: 'body',
     [_constants.SIZES.medium]: 'small',
     [_constants.SIZES.small]: 'xsmall',
+    [_constants.SIZES.xlarge]: 'body',
     [_constants.SIZES.xsmall]: 'xsmall'
   }[size];
 };
@@ -68,6 +71,7 @@ const getIconSize = _ref6 => {
     [_constants.SIZES.large]: 'var(--UT-status-icon-size-xs, 20px)',
     [_constants.SIZES.medium]: 'var(--UT-status-icon-size-2xs, 16px)',
     [_constants.SIZES.small]: 'var(--UT-status-icon-size-3xs, 12px)',
+    [_constants.SIZES.xlarge]: 'var(--UT-status-icon-size-xs, 20px)',
     [_constants.SIZES.xsmall]: 'var(--UT-status-icon-size-3xs, 12px)'
   }[size];
 };
@@ -180,6 +184,10 @@ const retrieveStyle = _ref8 => {
       height: '8px',
       width: '8px'
     },
+    iconXlarge: {
+      height: '20px',
+      width: '20px'
+    },
     badgeSmall: {
       height: '8px',
       width: '8px'
@@ -192,6 +200,10 @@ const retrieveStyle = _ref8 => {
       height: '10px',
       width: '10px'
     },
+    badgeXlarge: {
+      height: '10px',
+      width: '10px'
+    },
     withoutArea: {
       backgroundColor: 'transparent !important'
     },

package/dist/components/UTStatus/utils.js

@@ -47,23 +47,27 @@ const interpreterSize = (size, classes) => {
     iconSmall,
     iconMedium,
     iconLarge,
+    iconXlarge,
     badgeXsmall,
     badgeSmall,
     badgeMedium,
-    badgeLarge
+    badgeLarge,
+    badgeXlarge
   } = classes || {};
   return {
     [_constants.COMPONENT_KEYS.BADGE]: {
       [_constants.SIZES.xsmall]: badgeXsmall,
       [_constants.SIZES.small]: badgeSmall,
       [_constants.SIZES.medium]: badgeMedium,
-      [_constants.SIZES.large]: badgeLarge
+      [_constants.SIZES.large]: badgeLarge,
+      [_constants.SIZES.xlarge]: badgeXlarge
     }[size],
     [_constants.COMPONENT_KEYS.ICON]: {
       [_constants.SIZES.xsmall]: iconXsmall,
       [_constants.SIZES.small]: iconSmall,
       [_constants.SIZES.medium]: iconMedium,
-      [_constants.SIZES.large]: iconLarge
+      [_constants.SIZES.large]: iconLarge,
+      [_constants.SIZES.xlarge]: iconXlarge
     }[size]
   };
 };

package/dist/utils/hooks/useCSSVariables/constants.js

@@ -243,6 +243,7 @@ const baseTokens = exports.baseTokens = {
     'UT-status-gap-large': 'gap-sm',
     'UT-status-gap-medium': 'gap-sm',
     'UT-status-gap-small': 'gap-xs',
+    'UT-status-gap-xlarge': 'gap-sm',
     'UT-status-gap-xsmall': 'gap-xs',
     'UT-status-padding-y-large': 'padding-2xs',
     'UT-status-padding-x-large': 'padding-xs',
@@ -250,6 +251,8 @@ const baseTokens = exports.baseTokens = {
     'UT-status-padding-x-medium': 'padding-xs',
     'UT-status-padding-y-small': 'padding-2xs',
     'UT-status-padding-x-small': 'padding-xs',
+    'UT-status-padding-y-xlarge': 'padding-2xs',
+    'UT-status-padding-x-xlarge': 'padding-xs',
     'UT-status-padding-y-xsmall': 'padding-3xs',
     'UT-status-padding-x-xsmall': 'padding-2xs',
     'UT-status-radius': 'radius-sm',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.148.0",
+  "version": "3.150.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",