@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTChip/UTChip.stories.js

@@ -0,0 +1,378 @@
+import React from 'react';
+import { CHIP_SIZES, CHIP_VARIANT, ADORNMENT_TYPES } from './constants';
+import UTChip from '.';
+export default {
+  args: {
+    children: 'Chip Label'
+  },
+  argTypes: {
+    active: {
+      control: 'boolean',
+      description: 'Indica si el chip está en estado activo.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    adornment: {
+      control: 'object',
+      description: 'Elemento decorativo opcional que se muestra antes del texto. Puede ser un icono, avatar o imagen.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    children: {
+      control: 'text',
+      description: 'Contenido de texto que se muestra dentro del chip.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    dataTestId: {
+      control: 'text',
+      description: 'ID para testing y propósitos de accesibilidad.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Desactiva el chip, previniendo interacciones y cambiando su apariencia.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    isDragging: {
+      control: 'boolean',
+      description: 'Indica si el chip está siendo arrastrado o movido. Útil para interacciones de drag and drop.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    onClick: {
+      control: {
+        type: 'inline-radio'
+      },
+      options: ['undefined', 'function'],
+      mapping: {
+        undefined,
+        function: () => alert('Chip clicked')
+      },
+      description: 'Función callback que se ejecuta cuando se hace clic en el chip. Si se proporciona, el chip se vuelve interactivo y muestra un botón de cerrar.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'func'
+        }
+      }
+    },
+    onClose: {
+      control: {
+        type: 'inline-radio'
+      },
+      options: ['undefined', 'function'],
+      mapping: {
+        undefined,
+        function: () => alert('Chip closed')
+      },
+      description: 'Función callback que se ejecuta cuando se hace clic en el botón de cerrar (X). Solo se muestra si onClick está definido.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'func'
+        }
+      }
+    },
+    size: {
+      control: 'select',
+      description: 'Tamaño del chip. Afecta el padding y el tamaño del texto.',
+      options: Object.values(CHIP_SIZES),
+      table: {
+        defaultValue: {
+          summary: CHIP_SIZES.MEDIUM
+        },
+        type: {
+          summary: "'".concat(CHIP_SIZES.MEDIUM, "' | '").concat(CHIP_SIZES.SMALL, "'")
+        }
+      }
+    },
+    variant: {
+      control: 'select',
+      description: 'Variante visual del chip. "default" usa fondo relleno, "outline" usa solo borde.',
+      options: Object.values(CHIP_VARIANT),
+      table: {
+        defaultValue: {
+          summary: CHIP_VARIANT.DEFAULT
+        },
+        type: {
+          summary: "'".concat(CHIP_VARIANT.DEFAULT, "' | '").concat(CHIP_VARIANT.OUTLINE, "'")
+        }
+      }
+    }
+  },
+  component: UTChip,
+  parameters: {
+    docs: {
+      description: {
+        component: 'UTChip es un componente compacto e interactivo usado para mostrar información o acciones en un formato condensado. Se usa comúnmente para tags, filtros, selecciones o acciones rápidas.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTChip'
+};
+export const Default = {
+  args: {
+    active: false,
+    adornment: {
+      type: ADORNMENT_TYPES.ICON,
+      props: {
+        name: 'IconCircleCheck'
+      }
+    },
+    disabled: false,
+    isDragging: false,
+    onClick: undefined,
+    onClose: undefined,
+    size: CHIP_SIZES.MEDIUM,
+    variant: CHIP_VARIANT.DEFAULT
+  },
+  name: 'Playground'
+};
+export const Active = {
+  args: {
+    active: true,
+    disabled: false,
+    size: CHIP_SIZES.MEDIUM,
+    variant: CHIP_VARIANT.DEFAULT,
+    isDragging: false
+  }
+};
+export const Disabled = {
+  args: {
+    active: false,
+    disabled: true,
+    size: CHIP_SIZES.MEDIUM,
+    variant: CHIP_VARIANT.DEFAULT,
+    isDragging: false
+  }
+};
+export const Small = {
+  args: {
+    active: false,
+    disabled: false,
+    size: CHIP_SIZES.SMALL,
+    variant: CHIP_VARIANT.DEFAULT,
+    isDragging: false
+  }
+};
+export const Outline = {
+  args: {
+    active: false,
+    disabled: false,
+    size: CHIP_SIZES.MEDIUM,
+    variant: CHIP_VARIANT.OUTLINE,
+    isDragging: false
+  }
+};
+export const OutlineActive = {
+  args: {
+    active: true,
+    disabled: false,
+    size: CHIP_SIZES.MEDIUM,
+    variant: CHIP_VARIANT.OUTLINE,
+    isDragging: false
+  }
+};
+export const Interactive = {
+  args: {
+    active: false,
+    disabled: false,
+    onClick: () => alert('Chip clicked'),
+    onClose: () => alert('Chip closed'),
+    size: CHIP_SIZES.MEDIUM,
+    variant: CHIP_VARIANT.DEFAULT,
+    isDragging: false
+  }
+};
+export const InteractiveActive = {
+  args: {
+    active: true,
+    disabled: false,
+    onClick: () => alert('Chip clicked'),
+    onClose: () => alert('Chip closed'),
+    size: CHIP_SIZES.MEDIUM,
+    variant: CHIP_VARIANT.DEFAULT,
+    isDragging: false
+  }
+};
+export const WithIconAdornment = {
+  args: {
+    active: false,
+    adornment: {
+      type: ADORNMENT_TYPES.ICON,
+      props: {
+        name: 'IconCircleCheck'
+      }
+    },
+    disabled: false,
+    size: CHIP_SIZES.MEDIUM,
+    variant: CHIP_VARIANT.DEFAULT,
+    isDragging: false
+  }
+};
+export const WithAvatarAdornment = {
+  args: {
+    active: false,
+    adornment: {
+      type: ADORNMENT_TYPES.AVATAR,
+      props: {
+        initials: 'JD'
+      }
+    },
+    children: 'John Doe',
+    disabled: false,
+    size: CHIP_SIZES.MEDIUM,
+    variant: CHIP_VARIANT.DEFAULT,
+    isDragging: false
+  }
+};
+export const WithImageAdornment = {
+  args: {
+    active: false,
+    adornment: {
+      type: ADORNMENT_TYPES.IMAGE,
+      props: {
+        src: 'https://widergy.com/wp-content/uploads/2021/12/cropped-favicon-32x32.png'
+      }
+    },
+    disabled: false,
+    size: CHIP_SIZES.MEDIUM,
+    variant: CHIP_VARIANT.DEFAULT,
+    isDragging: false
+  }
+};
+export const SmallOutlineInteractive = {
+  args: {
+    active: false,
+    disabled: false,
+    onClick: () => alert('Filter clicked'),
+    onClose: () => alert('Filter removed'),
+    size: CHIP_SIZES.SMALL,
+    variant: CHIP_VARIANT.OUTLINE,
+    isDragging: false
+  },
+  name: 'Small Outline Interactive'
+};
+export const Dragging = {
+  args: {
+    active: false,
+    disabled: false,
+    isDragging: true,
+    onClick: () => alert('Chip clicked'),
+    onClose: () => alert('Chip closed'),
+    size: CHIP_SIZES.MEDIUM,
+    variant: CHIP_VARIANT.DEFAULT
+  }
+};
+export const AllVariants = {
+  render: () => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '8px',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement(UTChip, {
+    variant: CHIP_VARIANT.DEFAULT,
+    size: CHIP_SIZES.MEDIUM
+  }, "Default Medium"), /*#__PURE__*/React.createElement(UTChip, {
+    variant: CHIP_VARIANT.DEFAULT,
+    size: CHIP_SIZES.SMALL
+  }, "Default Small"), /*#__PURE__*/React.createElement(UTChip, {
+    variant: CHIP_VARIANT.OUTLINE,
+    size: CHIP_SIZES.MEDIUM
+  }, "Outline Medium"), /*#__PURE__*/React.createElement(UTChip, {
+    variant: CHIP_VARIANT.OUTLINE,
+    size: CHIP_SIZES.SMALL
+  }, "Outline Small"), /*#__PURE__*/React.createElement(UTChip, {
+    active: true,
+    variant: CHIP_VARIANT.DEFAULT,
+    size: CHIP_SIZES.MEDIUM
+  }, "Active Default"), /*#__PURE__*/React.createElement(UTChip, {
+    active: true,
+    variant: CHIP_VARIANT.OUTLINE,
+    size: CHIP_SIZES.MEDIUM
+  }, "Active Outline"), /*#__PURE__*/React.createElement(UTChip, {
+    disabled: true,
+    variant: CHIP_VARIANT.DEFAULT,
+    size: CHIP_SIZES.MEDIUM
+  }, "Disabled"))
+};
+export const TagList = {
+  render: () => {
+    const tags = ['React', 'JavaScript', 'UI Components'];
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '8px',
+        flexWrap: 'wrap'
+      }
+    }, tags.map(tag => /*#__PURE__*/React.createElement(UTChip, {
+      key: tag,
+      onClick: () => alert("Selected: ".concat(tag)),
+      onClose: () => alert("Removed: ".concat(tag)),
+      size: CHIP_SIZES.SMALL,
+      variant: CHIP_VARIANT.OUTLINE
+    }, tag)));
+  }
+};
+export const FilterChips = {
+  render: () => {
+    const filters = ['Active', 'Pending', 'Completed'];
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '8px',
+        flexWrap: 'wrap'
+      }
+    }, filters.map((filter, index) => /*#__PURE__*/React.createElement(UTChip, {
+      key: filter,
+      active: index === 0,
+      onClick: () => alert("Filter: ".concat(filter)),
+      size: CHIP_SIZES.MEDIUM,
+      variant: CHIP_VARIANT.DEFAULT
+    }, filter)));
+  }
+};

package/dist/esm/components/UTChip/constants.js

@@ -1 +1,20 @@
-import UTIcon from"../UTIcon";import UTAvatar from"../UTAvatar";export const CHIP_VARIANT={DEFAULT:"default",OUTLINE:"outline"};export const CHIP_SIZES={MEDIUM:"medium",SMALL:"small"};export const ADORNMENT_TYPES={ICON:"icon",AVATAR:"avatar",IMAGE:"image"};export const ADORNMENT_COMPONENT_MAPPER={[ADORNMENT_TYPES.ICON]:UTIcon,[ADORNMENT_TYPES.AVATAR]:UTAvatar,[ADORNMENT_TYPES.IMAGE]:"img"};
+import UTIcon from '../UTIcon';
+import UTAvatar from '../UTAvatar';
+export const CHIP_VARIANT = {
+  DEFAULT: 'default',
+  OUTLINE: 'outline'
+};
+export const CHIP_SIZES = {
+  MEDIUM: 'medium',
+  SMALL: 'small'
+};
+export const ADORNMENT_TYPES = {
+  ICON: 'icon',
+  AVATAR: 'avatar',
+  IMAGE: 'image'
+};
+export const ADORNMENT_COMPONENT_MAPPER = {
+  [ADORNMENT_TYPES.ICON]: UTIcon,
+  [ADORNMENT_TYPES.AVATAR]: UTAvatar,
+  [ADORNMENT_TYPES.IMAGE]: 'img'
+};

package/dist/esm/components/UTChip/index.js

@@ -1 +1,66 @@
-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)}import React,{memo}from"react";import{bool,func,object,oneOf,shape,string}from"prop-types";import UTButton from"../UTButton";import UTLabel from"../UTLabel";import{getItemsProps}from"./utils";import{ADORNMENT_TYPES,CHIP_SIZES,CHIP_VARIANT}from"./constants";import styles from"./styles.module.scss";const UTChip=_ref=>{let{active:active,adornment:adornment,children:children,dataTestId:dataTestId,disabled:disabled,isDragging:isDragging,onClick:onClick,onClose:onClose,size:size=CHIP_SIZES.MEDIUM,variant:variant=CHIP_VARIANT.DEFAULT}=_ref;const{Adornment:Adornment,adornmentProps:adornmentProps,buttonProps:buttonProps,Container:Container,containerProps:containerProps,labelProps:labelProps}=getItemsProps({active:active,adornment:adornment,dataTestId:dataTestId,disabled:disabled,isDragging:isDragging,onClick:onClick,size:size,variant:variant}),handleClose=onClose?e=>{e.stopPropagation(),onClose(e)}:void 0;return React.createElement(Container,_extends({className:"\n        ".concat(styles.chipContainer,"\n        ").concat(styles[size],"\n        ").concat(styles[variant],"\n        ").concat(active?styles.active:"","\n        ").concat(disabled?styles.disabled:"","\n        ").concat(isDragging?styles.dragging:"","\n        ").concat(onClick&&!disabled?styles.interactive:styles.nonInteractive,"\n      ")},containerProps),Adornment&&React.createElement(Adornment,adornmentProps),React.createElement(UTLabel,labelProps,children),handleClose&&React.createElement(UTButton,_extends({},buttonProps,{Icon:"IconX",onClick:handleClose,size:"small",variant:"text"})))};UTChip.propTypes={active:bool,adornment:shape({props:object,type:oneOf([ADORNMENT_TYPES.ICON,ADORNMENT_TYPES.AVATAR,ADORNMENT_TYPES.IMAGE])}),dataTestId:string,disabled:bool,isDragging:bool,onClick:func,onClose:func,size:oneOf([CHIP_SIZES.MEDIUM,CHIP_SIZES.SMALL]),variant:oneOf([CHIP_VARIANT.DEFAULT,CHIP_VARIANT.OUTLINE])};export default memo(UTChip);
+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); }
+import React, { memo } from 'react';
+import { bool, func, object, oneOf, shape, string } from 'prop-types';
+import UTButton from '../UTButton';
+import UTLabel from '../UTLabel';
+import { getItemsProps } from './utils';
+import { ADORNMENT_TYPES, CHIP_SIZES, CHIP_VARIANT } from './constants';
+import styles from './styles.module.scss';
+const UTChip = _ref => {
+  let {
+    active,
+    adornment,
+    children,
+    dataTestId,
+    disabled,
+    isDragging,
+    onClick,
+    onClose,
+    size = CHIP_SIZES.MEDIUM,
+    variant = CHIP_VARIANT.DEFAULT
+  } = _ref;
+  const {
+    Adornment,
+    adornmentProps,
+    buttonProps,
+    Container,
+    containerProps,
+    labelProps
+  } = getItemsProps({
+    active,
+    adornment,
+    dataTestId,
+    disabled,
+    isDragging,
+    onClick,
+    size,
+    variant
+  });
+  const handleClose = onClose ? e => {
+    e.stopPropagation();
+    onClose(e);
+  } : undefined;
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    className: "\n        ".concat(styles.chipContainer, "\n        ").concat(styles[size], "\n        ").concat(styles[variant], "\n        ").concat(active ? styles.active : '', "\n        ").concat(disabled ? styles.disabled : '', "\n        ").concat(isDragging ? styles.dragging : '', "\n        ").concat(onClick && !disabled ? styles.interactive : styles.nonInteractive, "\n      ")
+  }, containerProps), Adornment && /*#__PURE__*/React.createElement(Adornment, adornmentProps), /*#__PURE__*/React.createElement(UTLabel, labelProps, children), handleClose && /*#__PURE__*/React.createElement(UTButton, _extends({}, buttonProps, {
+    Icon: "IconX",
+    onClick: handleClose,
+    size: "small",
+    variant: "text"
+  })));
+};
+UTChip.propTypes = {
+  active: bool,
+  adornment: shape({
+    props: object,
+    type: oneOf([ADORNMENT_TYPES.ICON, ADORNMENT_TYPES.AVATAR, ADORNMENT_TYPES.IMAGE])
+  }),
+  dataTestId: string,
+  disabled: bool,
+  isDragging: bool,
+  onClick: func,
+  onClose: func,
+  size: oneOf([CHIP_SIZES.MEDIUM, CHIP_SIZES.SMALL]),
+  variant: oneOf([CHIP_VARIANT.DEFAULT, CHIP_VARIANT.OUTLINE])
+};
+export default /*#__PURE__*/memo(UTChip);

package/dist/esm/components/UTChip/utils.js

@@ -1 +1,102 @@
-import isEmpty from"lodash/isEmpty";import{COLOR_THEMES}from"../../constants/Palette";import{VARIANTS_NAMES}from"../UTLabel/constants";import UTTouchableWithoutFeedback from"../UTTouchableWithoutFeedback";import{ADORNMENT_COMPONENT_MAPPER,ADORNMENT_TYPES,CHIP_VARIANT,CHIP_SIZES}from"./constants";import styles from"./styles.module.scss";export const getTextColorTheme=_ref=>{let{active:active,disabled:disabled,isDragging:isDragging,variant:variant}=_ref;return!active||disabled||isDragging?COLOR_THEMES.gray:variant===CHIP_VARIANT.DEFAULT?COLOR_THEMES.light:COLOR_THEMES.accent};export const getButtonColorTheme=_ref2=>{let{active:active,disabled:disabled,isDragging:isDragging,variant:variant}=_ref2;return!active||disabled||isDragging?COLOR_THEMES.gray:variant===CHIP_VARIANT.DEFAULT?COLOR_THEMES.negative:COLOR_THEMES.primary};export const getTextVariant=size=>size===CHIP_SIZES.SMALL?VARIANTS_NAMES.SMALL:VARIANTS_NAMES.BODY;export const getDefaultAdornmentProps=_ref3=>{var _adornment$props;let{active:active,adornment:adornment,disabled:disabled,isDragging:isDragging,variant:variant}=_ref3;return isEmpty(adornment)||!adornment.type?{}:adornment.type===ADORNMENT_TYPES.ICON?{...adornment.props,colorTheme:getTextColorTheme({active:active,disabled:disabled,isDragging:isDragging,variant:variant}),size:20}:adornment.type===ADORNMENT_TYPES.AVATAR?{...adornment.props,size:"small"}:adornment.type===ADORNMENT_TYPES.IMAGE?{...adornment.props,className:"".concat(styles.imageAdornment," ").concat((null===(_adornment$props=adornment.props)||void 0===_adornment$props?void 0:_adornment$props.className)||"")}:{}};export const getItemsProps=_ref4=>{let{active:active,adornment:adornment,dataTestId:dataTestId,disabled:disabled,isDragging:isDragging,onClick:onClick,size:size,variant:variant}=_ref4;return{Adornment:null!=adornment&&adornment.type?ADORNMENT_COMPONENT_MAPPER[null==adornment?void 0:adornment.type]:null,adornmentProps:getDefaultAdornmentProps({active:active,adornment:adornment,disabled:disabled,variant:variant}),Container:onClick&&!disabled?UTTouchableWithoutFeedback:"div",containerProps:onClick&&!disabled?{onClick:onClick,dataTestId:dataTestId}:{"data-testid":dataTestId},labelProps:{colorTheme:getTextColorTheme({active:active,disabled:disabled,isDragging:isDragging,variant:variant}),variant:getTextVariant(size)},buttonProps:{colorTheme:getButtonColorTheme({active:active,disabled:disabled,isDragging:isDragging,variant:variant})}}};
+import isEmpty from 'lodash/isEmpty';
+import { COLOR_THEMES } from '../../constants/Palette';
+import { VARIANTS_NAMES } from '../UTLabel/constants';
+import UTTouchableWithoutFeedback from '../UTTouchableWithoutFeedback';
+import { ADORNMENT_COMPONENT_MAPPER, ADORNMENT_TYPES, CHIP_VARIANT, CHIP_SIZES } from './constants';
+import styles from './styles.module.scss';
+export const getTextColorTheme = _ref => {
+  let {
+    active,
+    disabled,
+    isDragging,
+    variant
+  } = _ref;
+  if (active && !disabled && !isDragging) return variant === CHIP_VARIANT.DEFAULT ? COLOR_THEMES.light : COLOR_THEMES.accent;
+  return COLOR_THEMES.gray;
+};
+export const getButtonColorTheme = _ref2 => {
+  let {
+    active,
+    disabled,
+    isDragging,
+    variant
+  } = _ref2;
+  if (active && !disabled && !isDragging) return variant === CHIP_VARIANT.DEFAULT ? COLOR_THEMES.negative : COLOR_THEMES.primary;
+  return COLOR_THEMES.gray;
+};
+export const getTextVariant = size => size === CHIP_SIZES.SMALL ? VARIANTS_NAMES.SMALL : VARIANTS_NAMES.BODY;
+export const getDefaultAdornmentProps = _ref3 => {
+  var _adornment$props;
+  let {
+    active,
+    adornment,
+    disabled,
+    isDragging,
+    variant
+  } = _ref3;
+  if (isEmpty(adornment) || !adornment.type) return {};
+  if (adornment.type === ADORNMENT_TYPES.ICON) return {
+    ...adornment.props,
+    colorTheme: getTextColorTheme({
+      active,
+      disabled,
+      isDragging,
+      variant
+    }),
+    size: 20
+  };
+  if (adornment.type === ADORNMENT_TYPES.AVATAR) return {
+    ...adornment.props,
+    size: 'small'
+  };
+  if (adornment.type === ADORNMENT_TYPES.IMAGE) return {
+    ...adornment.props,
+    className: "".concat(styles.imageAdornment, " ").concat(((_adornment$props = adornment.props) === null || _adornment$props === void 0 ? void 0 : _adornment$props.className) || '')
+  };
+  return {};
+};
+export const getItemsProps = _ref4 => {
+  let {
+    active,
+    adornment,
+    dataTestId,
+    disabled,
+    isDragging,
+    onClick,
+    size,
+    variant
+  } = _ref4;
+  return {
+    Adornment: adornment !== null && adornment !== void 0 && adornment.type ? ADORNMENT_COMPONENT_MAPPER[adornment === null || adornment === void 0 ? void 0 : adornment.type] : null,
+    adornmentProps: getDefaultAdornmentProps({
+      active,
+      adornment,
+      disabled,
+      variant
+    }),
+    Container: onClick && !disabled ? UTTouchableWithoutFeedback : 'div',
+    containerProps: onClick && !disabled ? {
+      onClick,
+      dataTestId
+    } : {
+      'data-testid': dataTestId
+    },
+    labelProps: {
+      colorTheme: getTextColorTheme({
+        active,
+        disabled,
+        isDragging,
+        variant
+      }),
+      variant: getTextVariant(size)
+    },
+    buttonProps: {
+      colorTheme: getButtonColorTheme({
+        active,
+        disabled,
+        isDragging,
+        variant
+      })
+    }
+  };
+};

package/dist/esm/components/UTConsumptionBar/components/ConsumptionBarIndicator/index.js

@@ -1 +1,43 @@
-import React from"react";import numeral from"numeral";import{number,object,string,bool}from"prop-types";import UTLabel from"../../../UTLabel";import styles from"./styles.module.scss";const ConsumptionBarIndicator=_ref=>{let{left:left,value:value,unit:unit="kWh",total:total,classes:classes,hideAmount:hideAmount}=_ref;return React.createElement("div",{className:styles.indicator,style:{left:"".concat(left,"%")}},React.createElement("div",{className:"".concat(styles.indicatorMarker," ").concat(null==classes?void 0:classes.indicatorMarker)}),React.createElement("div",{className:"".concat(styles.indicatorText," ").concat(null==classes?void 0:classes.indicatorText)},React.createElement(UTLabel,{className:styles.alignCenter,colorTheme:"neutral",shade:"03",weight:"bold"},"".concat(Math.round(value)," ").concat(unit)),!hideAmount&&React.createElement(UTLabel,{className:styles.lightGray,colorTheme:"gray",weight:"bold"},numeral(total||0).format("$ 0,0"))))};ConsumptionBarIndicator.propTypes={classes:object,hideAmount:bool,left:number,total:number,unit:string,value:number};export default ConsumptionBarIndicator;
+import React from 'react';
+import numeral from 'numeral';
+import { number, object, string, bool } from 'prop-types';
+import UTLabel from '../../../UTLabel';
+import styles from './styles.module.scss';
+const ConsumptionBarIndicator = _ref => {
+  let {
+    left,
+    value,
+    unit = 'kWh',
+    total,
+    classes,
+    hideAmount
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.indicator,
+    style: {
+      left: "".concat(left, "%")
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.indicatorMarker, " ").concat(classes === null || classes === void 0 ? void 0 : classes.indicatorMarker)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.indicatorText, " ").concat(classes === null || classes === void 0 ? void 0 : classes.indicatorText)
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.alignCenter,
+    colorTheme: "neutral",
+    shade: "03",
+    weight: "bold"
+  }, "".concat(Math.round(value), " ").concat(unit)), !hideAmount && /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.lightGray,
+    colorTheme: "gray",
+    weight: "bold"
+  }, numeral(total || 0).format('$ 0,0'))));
+};
+ConsumptionBarIndicator.propTypes = {
+  classes: object,
+  hideAmount: bool,
+  left: number,
+  total: number,
+  unit: string,
+  value: number
+};
+export default ConsumptionBarIndicator;

package/dist/esm/components/UTConsumptionBar/components/ConsumptionBarIndicatorTop/index.js

@@ -1 +1,38 @@
-import React from"react";import{number,object,string}from"prop-types";import UTLabel from"../../../UTLabel";import styles from"./styles.module.scss";const ConsumptionBarIndicatorTop=_ref=>{let{left:left,title:title,subtitle:subtitle,classes:classes}=_ref;return React.createElement("div",{className:styles.indicator,style:{left:"".concat(left,"%")}},React.createElement("div",{className:"".concat(styles.indicatorText," ").concat(null==classes?void 0:classes.indicatorText)},React.createElement(UTLabel,{className:styles.alignCenter,colorTheme:"neutral",shade:"03",weight:"bold"},title),React.createElement(UTLabel,{className:styles.subtitleLabel,colorTheme:"gray",weight:"bold"},subtitle)),React.createElement("div",{className:styles.indicatorMarker}))};ConsumptionBarIndicatorTop.propTypes={classes:object,left:number,title:string,subtitle:string};export default ConsumptionBarIndicatorTop;
+import React from 'react';
+import { number, object, string } from 'prop-types';
+import UTLabel from '../../../UTLabel';
+import styles from './styles.module.scss';
+const ConsumptionBarIndicatorTop = _ref => {
+  let {
+    left,
+    title,
+    subtitle,
+    classes
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.indicator,
+    style: {
+      left: "".concat(left, "%")
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.indicatorText, " ").concat(classes === null || classes === void 0 ? void 0 : classes.indicatorText)
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.alignCenter,
+    colorTheme: "neutral",
+    shade: "03",
+    weight: "bold"
+  }, title), /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.subtitleLabel,
+    colorTheme: "gray",
+    weight: "bold"
+  }, subtitle)), /*#__PURE__*/React.createElement("div", {
+    className: styles.indicatorMarker
+  }));
+};
+ConsumptionBarIndicatorTop.propTypes = {
+  classes: object,
+  left: number,
+  title: string,
+  subtitle: string
+};
+export default ConsumptionBarIndicatorTop;

package/dist/esm/components/UTConsumptionBar/constants.js

@@ -1 +1,3 @@
-export const UP="up";export const DOWN="down";export const MIN_LINE_WIDTH="550";
+export const UP = 'up';
+export const DOWN = 'down';
+export const MIN_LINE_WIDTH = '550';