@widergy/energy-ui 3.172.2 → 3.172.3

package/dist/components/UTButton/stories/storiesConstants.js

@@ -1,268 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.COMMON_PARAMETERS = exports.COMMON_ARG_TYPES = exports.COMMON_ARGS = void 0;
-var _utils = require("stories/utils");
-var _constants = require("../constants");
-// Common argTypes used across multiple stories files
-const COMMON_ARG_TYPES = exports.COMMON_ARG_TYPES = {
-  children: {
-    control: 'text',
-    description: 'Contenido del botón.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'node'
-      }
-    }
-  },
-  classes: {
-    control: false,
-    description: 'Clases personalizadas para sobrescribir el tema del botón.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'object'
-      }
-    }
-  },
-  classNames: {
-    control: false,
-    description: 'Clases personalizadas para sobrescribir el tema del botón.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'object'
-      }
-    }
-  },
-  colorTheme: {
-    control: 'select',
-    description: 'Tema de color del botón.',
-    options: Object.keys(_constants.COLORS_MAPPER),
-    table: {
-      defaultValue: {
-        summary: _constants.DEFAULT_PROPS.colorTheme
-      },
-      type: {
-        summary: (0, _utils.joinArgTypes)(Object.keys(_constants.COLORS_MAPPER))
-      }
-    }
-  },
-  count: {
-    control: 'number',
-    description: 'Número a mostrar en un badge dentro del botón.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'number'
-      }
-    }
-  },
-  dataTestId: {
-    control: 'text',
-    description: 'Identificador de test para el botón.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'string'
-      }
-    }
-  },
-  disabled: {
-    control: 'boolean',
-    description: 'Si es `true`, el botón está deshabilitado.',
-    table: {
-      defaultValue: {
-        summary: _constants.DEFAULT_PROPS.disabled
-      },
-      type: {
-        summary: 'boolean'
-      }
-    }
-  },
-  fullHeight: {
-    control: 'boolean',
-    description: 'Si es `true`, el botón ocupa el alto completo de su contenedor padre. Desactiva el `min-height` por tamaño.',
-    table: {
-      defaultValue: {
-        summary: _constants.DEFAULT_PROPS.fullHeight
-      },
-      type: {
-        summary: 'boolean'
-      }
-    }
-  },
-  fullWidth: {
-    control: 'boolean',
-    description: 'Si es `true`, el botón ocupa el ancho completo de su contenedor padre. Desactiva el `min-width`.',
-    table: {
-      defaultValue: {
-        summary: _constants.DEFAULT_PROPS.fullWidth
-      },
-      type: {
-        summary: 'boolean'
-      }
-    }
-  },
-  hideTextOnResponsive: {
-    control: 'boolean',
-    description: 'Si es `true` y hay ícono, el contenido del botón no se muestra en dispositivos móviles.',
-    table: {
-      defaultValue: {
-        summary: _constants.DEFAULT_PROPS.hideTextOnResponsive
-      },
-      type: {
-        summary: 'boolean'
-      }
-    }
-  },
-  LeftIcon: {
-    control: 'text',
-    description: 'Ícono a mostrar al inicio del botón. Puede ser un nombre de icono de Tabler o un componente personalizado.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: (0, _utils.joinArgTypes)(['string', 'ReactComponent'])
-      }
-    }
-  },
-  leftIconProps: {
-    control: false,
-    description: 'Props adicionales a aplicar al ícono izquierdo.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'object'
-      }
-    }
-  },
-  loading: {
-    control: 'boolean',
-    description: 'Si es `true`, se muestra un spinner sobre el botón.',
-    table: {
-      defaultValue: {
-        summary: _constants.DEFAULT_PROPS.loading
-      },
-      type: {
-        summary: 'boolean'
-      }
-    }
-  },
-  onClick: {
-    control: false,
-    description: 'Callback ejecutado cuando se hace clic en el botón.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'function'
-      }
-    }
-  },
-  RightIcon: {
-    control: 'text',
-    description: 'Ícono a mostrar al final del botón. Puede ser un nombre de icono de Tabler o un componente personalizado.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: (0, _utils.joinArgTypes)(['string', 'ReactComponent'])
-      }
-    }
-  },
-  rightIconProps: {
-    control: false,
-    description: 'Props adicionales a aplicar al ícono derecho.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'object'
-      }
-    }
-  },
-  size: {
-    control: 'inline-radio',
-    description: 'Tamaño del botón.',
-    options: Object.values(_constants.SIZES),
-    table: {
-      defaultValue: {
-        summary: _constants.DEFAULT_PROPS.size
-      },
-      type: {
-        summary: (0, _utils.joinArgTypes)(Object.values(_constants.SIZES))
-      }
-    }
-  },
-  type: {
-    control: 'text',
-    description: 'Atributo HTML type del botón.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'string'
-      }
-    }
-  },
-  variant: {
-    control: 'select',
-    description: 'Variante del botón.',
-    options: Object.values(_constants.VARIANTS_NAMES),
-    table: {
-      defaultValue: {
-        summary: _constants.DEFAULT_PROPS.variant
-      },
-      type: {
-        summary: (0, _utils.joinArgTypes)(Object.values(_constants.VARIANTS_NAMES))
-      }
-    }
-  }
-};
-
-// Common args used across multiple stories files
-const COMMON_ARGS = exports.COMMON_ARGS = {
-  colorTheme: _constants.DEFAULT_PROPS.colorTheme,
-  dataTestId: 'customButtonId',
-  disabled: _constants.DEFAULT_PROPS.disabled,
-  fullHeight: _constants.DEFAULT_PROPS.fullHeight,
-  fullWidth: _constants.DEFAULT_PROPS.fullWidth,
-  hideTextOnResponsive: _constants.DEFAULT_PROPS.hideTextOnResponsive,
-  loading: _constants.DEFAULT_PROPS.loading,
-  size: _constants.DEFAULT_PROPS.size,
-  type: 'button',
-  variant: _constants.DEFAULT_PROPS.variant
-};
-
-// Common parameters used across multiple stories files
-const COMMON_PARAMETERS = exports.COMMON_PARAMETERS = {
-  controls: {
-    exclude: ['classes', 'classNames', 'onClick']
-  },
-  docs: {
-    description: {
-      component: 'Componente de botón básico que soporta múltiples variantes, temas de color, tamaños e iconos. Puede mostrar un spinner de carga, un badge con contador, y es completamente personalizable.'
-    }
-  }
-};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.COMMON_PARAMETERS=exports.COMMON_ARG_TYPES=exports.COMMON_ARGS=void 0;var _utils=require("stories/utils"),_constants=require("../constants");const COMMON_ARG_TYPES=exports.COMMON_ARG_TYPES={children:{control:"text",description:"Contenido del botón.",table:{defaultValue:{summary:"undefined"},type:{summary:"node"}}},classes:{control:!1,description:"Clases personalizadas para sobrescribir el tema del botón.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},classNames:{control:!1,description:"Clases personalizadas para sobrescribir el tema del botón.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},colorTheme:{control:"select",description:"Tema de color del botón.",options:Object.keys(_constants.COLORS_MAPPER),table:{defaultValue:{summary:_constants.DEFAULT_PROPS.colorTheme},type:{summary:(0,_utils.joinArgTypes)(Object.keys(_constants.COLORS_MAPPER))}}},count:{control:"number",description:"Número a mostrar en un badge dentro del botón.",table:{defaultValue:{summary:"undefined"},type:{summary:"number"}}},dataTestId:{control:"text",description:"Identificador de test para el botón.",table:{defaultValue:{summary:"undefined"},type:{summary:"string"}}},disabled:{control:"boolean",description:"Si es `true`, el botón está deshabilitado.",table:{defaultValue:{summary:_constants.DEFAULT_PROPS.disabled},type:{summary:"boolean"}}},fullHeight:{control:"boolean",description:"Si es `true`, el botón ocupa el alto completo de su contenedor padre. Desactiva el `min-height` por tamaño.",table:{defaultValue:{summary:_constants.DEFAULT_PROPS.fullHeight},type:{summary:"boolean"}}},fullWidth:{control:"boolean",description:"Si es `true`, el botón ocupa el ancho completo de su contenedor padre. Desactiva el `min-width`.",table:{defaultValue:{summary:_constants.DEFAULT_PROPS.fullWidth},type:{summary:"boolean"}}},hideTextOnResponsive:{control:"boolean",description:"Si es `true` y hay ícono, el contenido del botón no se muestra en dispositivos móviles.",table:{defaultValue:{summary:_constants.DEFAULT_PROPS.hideTextOnResponsive},type:{summary:"boolean"}}},LeftIcon:{control:"text",description:"Ícono a mostrar al inicio del botón. Puede ser un nombre de icono de Tabler o un componente personalizado.",table:{defaultValue:{summary:"undefined"},type:{summary:(0,_utils.joinArgTypes)(["string","ReactComponent"])}}},leftIconProps:{control:!1,description:"Props adicionales a aplicar al ícono izquierdo.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},loading:{control:"boolean",description:"Si es `true`, se muestra un spinner sobre el botón.",table:{defaultValue:{summary:_constants.DEFAULT_PROPS.loading},type:{summary:"boolean"}}},onClick:{control:!1,description:"Callback ejecutado cuando se hace clic en el botón.",table:{defaultValue:{summary:"undefined"},type:{summary:"function"}}},RightIcon:{control:"text",description:"Ícono a mostrar al final del botón. Puede ser un nombre de icono de Tabler o un componente personalizado.",table:{defaultValue:{summary:"undefined"},type:{summary:(0,_utils.joinArgTypes)(["string","ReactComponent"])}}},rightIconProps:{control:!1,description:"Props adicionales a aplicar al ícono derecho.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},size:{control:"inline-radio",description:"Tamaño del botón.",options:Object.values(_constants.SIZES),table:{defaultValue:{summary:_constants.DEFAULT_PROPS.size},type:{summary:(0,_utils.joinArgTypes)(Object.values(_constants.SIZES))}}},type:{control:"text",description:"Atributo HTML type del botón.",table:{defaultValue:{summary:"undefined"},type:{summary:"string"}}},variant:{control:"select",description:"Variante del botón.",options:Object.values(_constants.VARIANTS_NAMES),table:{defaultValue:{summary:_constants.DEFAULT_PROPS.variant},type:{summary:(0,_utils.joinArgTypes)(Object.values(_constants.VARIANTS_NAMES))}}}},COMMON_ARGS=exports.COMMON_ARGS={colorTheme:_constants.DEFAULT_PROPS.colorTheme,dataTestId:"customButtonId",disabled:_constants.DEFAULT_PROPS.disabled,fullHeight:_constants.DEFAULT_PROPS.fullHeight,fullWidth:_constants.DEFAULT_PROPS.fullWidth,hideTextOnResponsive:_constants.DEFAULT_PROPS.hideTextOnResponsive,loading:_constants.DEFAULT_PROPS.loading,size:_constants.DEFAULT_PROPS.size,type:"button",variant:_constants.DEFAULT_PROPS.variant},COMMON_PARAMETERS=exports.COMMON_PARAMETERS={controls:{exclude:["classes","classNames","onClick"]},docs:{description:{component:"Componente de botón básico que soporta múltiples variantes, temas de color, tamaños e iconos. Puede mostrar un spinner de carga, un badge con contador, y es completamente personalizable."}}};

package/dist/components/UTButton/theme.js

@@ -1,144 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.variantsColorTheme = exports.retrieveStyle = void 0;
-var _classesUtils = require("../../utils/classesUtils");
-var _shadowUtils = require("../../utils/shadowUtils");
-var _constants = require("./constants");
-const variantsColorTheme = (theme, colorTheme, variant) => {
-  var _theme$Palette, _theme$Palette$shadow;
-  const actionColorName = _constants.COLORS_MAPPER[colorTheme] || _constants.COLORS_MAPPER[_constants.DEFAULT_PROPS.colorTheme];
-  const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
-  const actionTheme = actionPaletteColors[actionColorName];
-  const shadowTheme = ((_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow[_constants.SHADOW_MAPPER[actionColorName]]) || 'transparent';
-  const negativeTheme = actionPaletteColors[_constants.COLORS_MAPPER.negative];
-  const neutralTheme = actionPaletteColors[_constants.COLORS_MAPPER.secondary];
-  const lightTheme = actionPaletteColors[_constants.COLORS_MAPPER.light];
-  const definition = {
-    [_constants.VARIANTS_NAMES.filled]: {
-      backgroundColor: actionTheme['04'],
-      border: '1px solid transparent',
-      fill: colorTheme === _constants.COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
-      '&:hover': {
-        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['05'] : actionTheme['03'],
-        boxShadow: (0, _shadowUtils.getShadow)({
-          color: shadowTheme,
-          level: 2
-        })
-      },
-      '&:active': {
-        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
-        boxShadow: (0, _shadowUtils.getShadow)({
-          color: shadowTheme,
-          level: 2
-        })
-      }
-    },
-    [_constants.VARIANTS_NAMES.semitransparent]: {
-      backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
-      border: '1px solid transparent',
-      fill: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
-      '&:hover': {
-        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
-        boxShadow: 'none'
-      },
-      '&:active': {
-        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['05'] : actionTheme['03'],
-        boxShadow: 'none'
-      }
-    },
-    [_constants.VARIANTS_NAMES.outlined]: {
-      border: "1px solid ".concat(lightTheme['04']),
-      fill: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
-      '&:hover': {
-        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
-        boxShadow: 'none'
-      },
-      '&:active': {
-        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
-        boxShadow: 'none'
-      }
-    },
-    [_constants.VARIANTS_NAMES.text]: {
-      border: '1px solid transparent',
-      fill: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
-      '&:hover': {
-        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
-        boxShadow: 'none'
-      },
-      '&:active': {
-        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
-        boxShadow: 'none'
-      }
-    },
-    [_constants.VARIANTS_NAMES.shadow]: {
-      backgroundColor: colorTheme === _constants.COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
-      boxShadow: (0, _shadowUtils.getShadow)({
-        color: shadowTheme,
-        level: 1
-      }),
-      border: '1px solid transparent',
-      fill: actionTheme['05'],
-      '&:hover': {
-        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
-        boxShadow: (0, _shadowUtils.getShadow)({
-          color: shadowTheme,
-          level: 2
-        })
-      },
-      '&:active': {
-        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
-        boxShadow: (0, _shadowUtils.getShadow)({
-          color: shadowTheme,
-          level: 2
-        })
-      }
-    }
-  };
-  const disabledStyle = {
-    opacity: (0, _classesUtils.withImportant)(0.5),
-    '&.MuiButton-root:hover.Mui-disabled': {
-      backgroundColor: (definition[variant] || definition[_constants.DEFAULT_PROPS.variant]).backgroundColor
-    }
-  };
-  return {
-    ...(definition[variant] || definition[_constants.DEFAULT_PROPS.variant]),
-    disabled: disabledStyle
-  };
-};
-exports.variantsColorTheme = variantsColorTheme;
-const baseButtonTheme = theme => {
-  var _theme$UTButton;
-  return {
-    root: {
-      borderRadius: 'var(--UT-button-radius, 0.25rem)',
-      boxShadow: 'none',
-      minWidth: 'auto',
-      textTransform: 'none',
-      transition: 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
-    },
-    circularProgress: {
-      color: ((_theme$UTButton = theme.UTButton) === null || _theme$UTButton === void 0 || (_theme$UTButton = _theme$UTButton.circularProgress) === null || _theme$UTButton === void 0 ? void 0 : _theme$UTButton.color) || '484848'
-    }
-  };
-};
-const retrieveStyle = _ref => {
-  let {
-    colorTheme,
-    variant,
-    theme
-  } = _ref;
-  const baseTheme = baseButtonTheme(theme);
-  const variantTheme = variantsColorTheme(theme, colorTheme, variant);
-  return {
-    ...baseTheme,
-    disabled: variantTheme.disabled,
-    root: {
-      ...baseTheme.root,
-      ...variantTheme
-    }
-  };
-};
-exports.retrieveStyle = retrieveStyle;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.variantsColorTheme=exports.retrieveStyle=void 0;var _classesUtils=require("../../utils/classesUtils"),_shadowUtils=require("../../utils/shadowUtils"),_constants=require("./constants");const variantsColorTheme=(theme,colorTheme,variant)=>{var _theme$Palette,_theme$Palette$shadow;const actionColorName=_constants.COLORS_MAPPER[colorTheme]||_constants.COLORS_MAPPER[_constants.DEFAULT_PROPS.colorTheme],actionPaletteColors=(null===(_theme$Palette=theme.Palette)||void 0===_theme$Palette?void 0:_theme$Palette.actions)||theme.Palette,actionTheme=actionPaletteColors[actionColorName],shadowTheme=(null===(_theme$Palette$shadow=theme.Palette.shadows)||void 0===_theme$Palette$shadow?void 0:_theme$Palette$shadow[_constants.SHADOW_MAPPER[actionColorName]])||"transparent",negativeTheme=actionPaletteColors[_constants.COLORS_MAPPER.negative],neutralTheme=actionPaletteColors[_constants.COLORS_MAPPER.secondary],lightTheme=actionPaletteColors[_constants.COLORS_MAPPER.light],definition={[_constants.VARIANTS_NAMES.filled]:{backgroundColor:actionTheme["04"],border:"1px solid transparent",fill:colorTheme===_constants.COLORS_MAPPER.negative?neutralTheme["05"]:negativeTheme["05"],"&:hover":{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?actionTheme["05"]:actionTheme["03"],boxShadow:(0,_shadowUtils.getShadow)({color:shadowTheme,level:2})},"&:active":{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?actionTheme["04"]:actionTheme["05"],boxShadow:(0,_shadowUtils.getShadow)({color:shadowTheme,level:2})}},[_constants.VARIANTS_NAMES.semitransparent]:{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?lightTheme["03"]:actionTheme["01"],border:"1px solid transparent",fill:colorTheme===_constants.COLORS_MAPPER.gray?actionTheme["04"]:actionTheme["05"],"&:hover":{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?lightTheme["04"]:actionTheme["02"],boxShadow:"none"},"&:active":{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?lightTheme["05"]:actionTheme["03"],boxShadow:"none"}},[_constants.VARIANTS_NAMES.outlined]:{border:"1px solid ".concat(lightTheme["04"]),fill:colorTheme===_constants.COLORS_MAPPER.gray?actionTheme["04"]:actionTheme["05"],"&:hover":{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?lightTheme["03"]:actionTheme["01"],boxShadow:"none"},"&:active":{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?lightTheme["04"]:actionTheme["02"],boxShadow:"none"}},[_constants.VARIANTS_NAMES.text]:{border:"1px solid transparent",fill:colorTheme===_constants.COLORS_MAPPER.gray?actionTheme["04"]:actionTheme["05"],"&:hover":{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?lightTheme["03"]:actionTheme["01"],boxShadow:"none"},"&:active":{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?lightTheme["04"]:actionTheme["02"],boxShadow:"none"}},[_constants.VARIANTS_NAMES.shadow]:{backgroundColor:colorTheme===_constants.COLORS_MAPPER.negative?neutralTheme["05"]:negativeTheme["05"],boxShadow:(0,_shadowUtils.getShadow)({color:shadowTheme,level:1}),border:"1px solid transparent",fill:actionTheme["05"],"&:hover":{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?lightTheme["03"]:actionTheme["01"],boxShadow:(0,_shadowUtils.getShadow)({color:shadowTheme,level:2})},"&:active":{backgroundColor:colorTheme===_constants.COLORS_MAPPER.gray?lightTheme["04"]:actionTheme["02"],boxShadow:(0,_shadowUtils.getShadow)({color:shadowTheme,level:2})}}},disabledStyle={opacity:(0,_classesUtils.withImportant)(.5),"&.MuiButton-root:hover.Mui-disabled":{backgroundColor:(definition[variant]||definition[_constants.DEFAULT_PROPS.variant]).backgroundColor}};return{...definition[variant]||definition[_constants.DEFAULT_PROPS.variant],disabled:disabledStyle}};exports.variantsColorTheme=variantsColorTheme;const baseButtonTheme=theme=>{var _theme$UTButton;return{root:{borderRadius:"var(--UT-button-radius, 0.25rem)",boxShadow:"none",minWidth:"auto",textTransform:"none",transition:"background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"},circularProgress:{color:(null===(_theme$UTButton=theme.UTButton)||void 0===_theme$UTButton||null===(_theme$UTButton=_theme$UTButton.circularProgress)||void 0===_theme$UTButton?void 0:_theme$UTButton.color)||"484848"}}},retrieveStyle=_ref=>{let{colorTheme:colorTheme,variant:variant,theme:theme}=_ref;const baseTheme=baseButtonTheme(theme),variantTheme=variantsColorTheme(theme,colorTheme,variant);return{...baseTheme,disabled:variantTheme.disabled,root:{...baseTheme.root,...variantTheme}}};exports.retrieveStyle=retrieveStyle;

package/dist/components/UTButton/utils.js

@@ -1,83 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getLabelProps = exports.getIconProps = exports.getCounterColorTheme = void 0;
-var _Palette = require("../../constants/Palette");
-var _componentUtils = require("../../utils/componentUtils");
-var _UTIcon = _interopRequireDefault(require("../UTIcon"));
-var _constants = require("./constants");
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const getButtonElementColorTheme = (buttonColorTheme, buttonVariant) => buttonVariant === _constants.VARIANTS_NAMES.filled ? buttonColorTheme === _constants.COLORS_MAPPER.negative ? _Palette.COLOR_THEMES.neutral : _Palette.COLOR_THEMES.negative : _constants.COLORS_MAPPER[buttonColorTheme];
-const buildSingleIconProps = _ref => {
-  let {
-    className,
-    colorTheme,
-    hideTextOnResponsive,
-    Icon,
-    size,
-    variant
-  } = _ref;
-  if (!Icon) return null;
-  return {
-    IconComponent: (0, _componentUtils.isUTIcon)(Icon) ? _UTIcon.default : Icon,
-    className: "\n      ".concat(_stylesModule.default.baseIcon, "\n      ").concat(className, "\n      ").concat(_stylesModule.default.icon, "\n      ").concat(hideTextOnResponsive ? _stylesModule.default["adaptableIcon".concat((0, _componentUtils.capitalize)(size))] : '', "\n    "),
-    ...((0, _componentUtils.isUTIcon)(Icon) ? {
-      colorTheme: getButtonElementColorTheme(colorTheme, variant),
-      name: Icon
-    } : {})
-  };
-};
-const getIconProps = _ref2 => {
-  let {
-    className,
-    colorTheme,
-    hideTextOnResponsive,
-    Icon,
-    iconPlacement,
-    LeftIcon,
-    RightIcon,
-    size,
-    variant
-  } = _ref2;
-  const resolvedLeftIcon = LeftIcon || (iconPlacement !== _constants.ICON_PLACEMENTS.right ? Icon : undefined);
-  const resolvedRightIcon = RightIcon || (iconPlacement === _constants.ICON_PLACEMENTS.right ? Icon : undefined);
-  const commonParams = {
-    className,
-    colorTheme,
-    hideTextOnResponsive,
-    size,
-    variant
-  };
-  const {
-    IconComponent: LeftIconComponent,
-    ...leftIconProps
-  } = buildSingleIconProps({
-    ...commonParams,
-    Icon: resolvedLeftIcon
-  }) || {};
-  const {
-    IconComponent: RightIconComponent,
-    ...rightIconProps
-  } = buildSingleIconProps({
-    ...commonParams,
-    Icon: resolvedRightIcon
-  }) || {};
-  return {
-    LeftIconComponent: LeftIconComponent || null,
-    leftIconProps,
-    RightIconComponent: RightIconComponent || null,
-    rightIconProps
-  };
-};
-exports.getIconProps = getIconProps;
-const getLabelProps = (buttonColorTheme, buttonVariant, buttonSize) => ({
-  colorTheme: getButtonElementColorTheme(buttonColorTheme, buttonVariant),
-  variant: buttonSize === _constants.SIZES.small ? 'small' : 'body',
-  weight: 'medium'
-});
-exports.getLabelProps = getLabelProps;
-const getCounterColorTheme = (colorTheme, variant) => variant === _constants.VARIANTS_NAMES.filled ? colorTheme === _Palette.COLOR_THEMES.negative ? 'dark' : 'negative' : variant === _constants.VARIANTS_NAMES.outlined ? colorTheme === _Palette.COLOR_THEMES.negative ? 'negative' : colorTheme === _Palette.COLOR_THEMES.primary ? _constants.COLORS_MAPPER[colorTheme] : colorTheme === _Palette.COLOR_THEMES.gray ? 'gray' : 'dark' : colorTheme === _Palette.COLOR_THEMES.gray ? 'gray' : _constants.COLORS_MAPPER[colorTheme];
-exports.getCounterColorTheme = getCounterColorTheme;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getLabelProps=exports.getIconProps=exports.getCounterColorTheme=void 0;var _Palette=require("../../constants/Palette"),_componentUtils=require("../../utils/componentUtils"),_UTIcon=_interopRequireDefault(require("../UTIcon")),_constants=require("./constants"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const getButtonElementColorTheme=(buttonColorTheme,buttonVariant)=>buttonVariant===_constants.VARIANTS_NAMES.filled?buttonColorTheme===_constants.COLORS_MAPPER.negative?_Palette.COLOR_THEMES.neutral:_Palette.COLOR_THEMES.negative:_constants.COLORS_MAPPER[buttonColorTheme],buildSingleIconProps=_ref=>{let{className:className,colorTheme:colorTheme,hideTextOnResponsive:hideTextOnResponsive,Icon:Icon,size:size,variant:variant}=_ref;return Icon?{IconComponent:(0,_componentUtils.isUTIcon)(Icon)?_UTIcon.default:Icon,className:"\n      ".concat(_stylesModule.default.baseIcon,"\n      ").concat(className,"\n      ").concat(_stylesModule.default.icon,"\n      ").concat(hideTextOnResponsive?_stylesModule.default["adaptableIcon".concat((0,_componentUtils.capitalize)(size))]:"","\n    "),...(0,_componentUtils.isUTIcon)(Icon)?{colorTheme:getButtonElementColorTheme(colorTheme,variant),name:Icon}:{}}:null},getIconProps=_ref2=>{let{className:className,colorTheme:colorTheme,hideTextOnResponsive:hideTextOnResponsive,Icon:Icon,iconPlacement:iconPlacement,LeftIcon:LeftIcon,RightIcon:RightIcon,size:size,variant:variant}=_ref2;const resolvedLeftIcon=LeftIcon||(iconPlacement!==_constants.ICON_PLACEMENTS.right?Icon:void 0),resolvedRightIcon=RightIcon||(iconPlacement===_constants.ICON_PLACEMENTS.right?Icon:void 0),commonParams={className:className,colorTheme:colorTheme,hideTextOnResponsive:hideTextOnResponsive,size:size,variant:variant},{IconComponent:LeftIconComponent,...leftIconProps}=buildSingleIconProps({...commonParams,Icon:resolvedLeftIcon})||{},{IconComponent:RightIconComponent,...rightIconProps}=buildSingleIconProps({...commonParams,Icon:resolvedRightIcon})||{};return{LeftIconComponent:LeftIconComponent||null,leftIconProps:leftIconProps,RightIconComponent:RightIconComponent||null,rightIconProps:rightIconProps}};exports.getIconProps=getIconProps;const getLabelProps=(buttonColorTheme,buttonVariant,buttonSize)=>({colorTheme:getButtonElementColorTheme(buttonColorTheme,buttonVariant),variant:buttonSize===_constants.SIZES.small?"small":"body",weight:"medium"});exports.getLabelProps=getLabelProps;const getCounterColorTheme=(colorTheme,variant)=>variant===_constants.VARIANTS_NAMES.filled?colorTheme===_Palette.COLOR_THEMES.negative?"dark":"negative":variant===_constants.VARIANTS_NAMES.outlined?colorTheme===_Palette.COLOR_THEMES.negative?"negative":colorTheme===_Palette.COLOR_THEMES.primary?_constants.COLORS_MAPPER[colorTheme]:colorTheme===_Palette.COLOR_THEMES.gray?"gray":"dark":colorTheme===_Palette.COLOR_THEMES.gray?"gray":_constants.COLORS_MAPPER[colorTheme];exports.getCounterColorTheme=getCounterColorTheme;

package/dist/components/UTButtonGroup/constants.js

@@ -1,18 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SQUARE_TYPE = exports.SHADOW_ACTIVE_COLOR_THEMES = exports.DEFAULT_TYPE = exports.DEFAULT_SIZE = exports.DEFAULT_COLOR_THEME = exports.CIRCLE_TYPE = exports.BACKGROUND_COLOR_MAPPER = void 0;
-const BACKGROUND_COLOR_MAPPER = theme => ({
-  primary: theme.lightBackground,
-  negative: theme.negativeBackground,
-  neutral: theme.lightBackground
-});
-exports.BACKGROUND_COLOR_MAPPER = BACKGROUND_COLOR_MAPPER;
-const CIRCLE_TYPE = exports.CIRCLE_TYPE = 'circle';
-const SQUARE_TYPE = exports.SQUARE_TYPE = 'square';
-const DEFAULT_TYPE = exports.DEFAULT_TYPE = SQUARE_TYPE;
-const DEFAULT_COLOR_THEME = exports.DEFAULT_COLOR_THEME = 'primary';
-const DEFAULT_SIZE = exports.DEFAULT_SIZE = 'small';
-const SHADOW_ACTIVE_COLOR_THEMES = exports.SHADOW_ACTIVE_COLOR_THEMES = ['primary', 'neutral'];
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SQUARE_TYPE=exports.SHADOW_ACTIVE_COLOR_THEMES=exports.DEFAULT_TYPE=exports.DEFAULT_SIZE=exports.DEFAULT_COLOR_THEME=exports.CIRCLE_TYPE=exports.BACKGROUND_COLOR_MAPPER=void 0;const BACKGROUND_COLOR_MAPPER=theme=>({primary:theme.lightBackground,negative:theme.negativeBackground,neutral:theme.lightBackground});exports.BACKGROUND_COLOR_MAPPER=BACKGROUND_COLOR_MAPPER;const CIRCLE_TYPE=exports.CIRCLE_TYPE="circle",SQUARE_TYPE=exports.SQUARE_TYPE="square",DEFAULT_TYPE=exports.DEFAULT_TYPE=SQUARE_TYPE,DEFAULT_COLOR_THEME=exports.DEFAULT_COLOR_THEME="primary",DEFAULT_SIZE=exports.DEFAULT_SIZE="small",SHADOW_ACTIVE_COLOR_THEMES=exports.SHADOW_ACTIVE_COLOR_THEMES=["primary","neutral"];

package/dist/components/UTButtonGroup/index.js

@@ -1,62 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = require("prop-types");
-var _UTButton = _interopRequireDefault(require("../UTButton"));
-var _WithTheme = _interopRequireDefault(require("../WithTheme"));
-var _theme = require("./theme");
-var _constants = require("./constants");
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const UTButtonGroup = _ref => {
-  let {
-    actions,
-    classes: theme,
-    colorTheme = _constants.DEFAULT_COLOR_THEME,
-    selected,
-    shape: type = _constants.DEFAULT_TYPE,
-    size = _constants.DEFAULT_SIZE
-  } = _ref;
-  const backgroundColor = (0, _constants.BACKGROUND_COLOR_MAPPER)(theme)[colorTheme] || (0, _constants.BACKGROUND_COLOR_MAPPER)(theme).primary;
-  const activeVariant = _constants.SHADOW_ACTIVE_COLOR_THEMES.includes(colorTheme) ? 'shadow' : 'filled';
-  const inactiveColorTheme = _constants.SHADOW_ACTIVE_COLOR_THEMES.includes(colorTheme) ? 'gray' : colorTheme;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default["".concat(type, "Container")], " ").concat(backgroundColor)
-  }, actions.map(_ref2 => {
-    let {
-      dataTestId,
-      Icon,
-      id,
-      onClick,
-      label
-    } = _ref2;
-    return /*#__PURE__*/_react.default.createElement(_UTButton.default, {
-      colorTheme: selected === id ? colorTheme : inactiveColorTheme,
-      dataTestId: dataTestId,
-      Icon: Icon,
-      key: id,
-      onClick: onClick,
-      size: size,
-      variant: selected === id ? activeVariant : 'text'
-    }, label);
-  }));
-};
-UTButtonGroup.propTypes = {
-  actions: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    dataTestId: _propTypes.string,
-    Icon: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.element]),
-    id: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]),
-    label: _propTypes.string,
-    onClick: _propTypes.func
-  })).isRequired,
-  classes: (0, _propTypes.objectOf)(_propTypes.string),
-  colorTheme: _propTypes.string,
-  selected: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]).isRequired,
-  shape: _propTypes.string,
-  size: _propTypes.string
-};
-var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTButtonGroup);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=require("prop-types"),_UTButton=_interopRequireDefault(require("../UTButton")),_WithTheme=_interopRequireDefault(require("../WithTheme")),_theme=require("./theme"),_constants=require("./constants"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const UTButtonGroup=_ref=>{let{actions:actions,classes:theme,colorTheme:colorTheme=_constants.DEFAULT_COLOR_THEME,selected:selected,shape:type=_constants.DEFAULT_TYPE,size:size=_constants.DEFAULT_SIZE}=_ref;const backgroundColor=(0,_constants.BACKGROUND_COLOR_MAPPER)(theme)[colorTheme]||(0,_constants.BACKGROUND_COLOR_MAPPER)(theme).primary,activeVariant=_constants.SHADOW_ACTIVE_COLOR_THEMES.includes(colorTheme)?"shadow":"filled",inactiveColorTheme=_constants.SHADOW_ACTIVE_COLOR_THEMES.includes(colorTheme)?"gray":colorTheme;return _react.default.createElement("div",{className:"".concat(_stylesModule.default["".concat(type,"Container")]," ").concat(backgroundColor)},actions.map(_ref2=>{let{dataTestId:dataTestId,Icon:Icon,id:id,onClick:onClick,label:label}=_ref2;return _react.default.createElement(_UTButton.default,{colorTheme:selected===id?colorTheme:inactiveColorTheme,dataTestId:dataTestId,Icon:Icon,key:id,onClick:onClick,size:size,variant:selected===id?activeVariant:"text"},label)}))};UTButtonGroup.propTypes={actions:(0,_propTypes.arrayOf)((0,_propTypes.shape)({dataTestId:_propTypes.string,Icon:(0,_propTypes.oneOfType)([_propTypes.string,_propTypes.element]),id:(0,_propTypes.oneOfType)([_propTypes.number,_propTypes.string]),label:_propTypes.string,onClick:_propTypes.func})).isRequired,classes:(0,_propTypes.objectOf)(_propTypes.string),colorTheme:_propTypes.string,selected:(0,_propTypes.oneOfType)([_propTypes.number,_propTypes.string]).isRequired,shape:_propTypes.string,size:_propTypes.string};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTButtonGroup);

package/dist/components/UTButtonGroup/stories/storiesConstants.js

@@ -1,51 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SIZE_OPTIONS = exports.SHAPE_OPTIONS = exports.COMMON_ARG_TYPES = exports.COMMON_ARGS = exports.COMMON_ACTIONS = exports.COLOR_THEME_OPTIONS = void 0;
-var _constants = require("../constants");
-const COMMON_ACTIONS = exports.COMMON_ACTIONS = [{
-  Icon: 'IconPencil',
-  id: 'edit',
-  label: 'Editar'
-}, {
-  Icon: 'IconTrash',
-  id: 'delete',
-  label: 'Eliminar'
-}, {
-  Icon: 'IconEye',
-  id: 'view',
-  label: 'Ver'
-}];
-const COLOR_THEME_OPTIONS = exports.COLOR_THEME_OPTIONS = ['primary', 'neutral', 'negative'];
-const SHAPE_OPTIONS = exports.SHAPE_OPTIONS = [_constants.SQUARE_TYPE, _constants.CIRCLE_TYPE];
-const SIZE_OPTIONS = exports.SIZE_OPTIONS = ['small', 'medium', 'large'];
-const COMMON_ARG_TYPES = exports.COMMON_ARG_TYPES = {
-  actions: {
-    control: 'object',
-    description: 'Array de acciones. Cada item acepta: id (string), label (string), Icon (nombre de icono Tabler).'
-  },
-  colorTheme: {
-    control: 'select',
-    options: COLOR_THEME_OPTIONS
-  },
-  selected: {
-    control: 'text',
-    description: 'ID del botón activo. Debe coincidir con el id de uno de los actions.'
-  },
-  shape: {
-    control: 'inline-radio',
-    options: SHAPE_OPTIONS
-  },
-  size: {
-    control: 'inline-radio',
-    options: SIZE_OPTIONS
-  }
-};
-const COMMON_ARGS = exports.COMMON_ARGS = {
-  colorTheme: _constants.DEFAULT_COLOR_THEME,
-  selected: COMMON_ACTIONS[0].id,
-  shape: _constants.DEFAULT_TYPE,
-  size: _constants.DEFAULT_SIZE
-};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SIZE_OPTIONS=exports.SHAPE_OPTIONS=exports.COMMON_ARG_TYPES=exports.COMMON_ARGS=exports.COMMON_ACTIONS=exports.COLOR_THEME_OPTIONS=void 0;var _constants=require("../constants");const COMMON_ACTIONS=exports.COMMON_ACTIONS=[{Icon:"IconPencil",id:"edit",label:"Editar"},{Icon:"IconTrash",id:"delete",label:"Eliminar"},{Icon:"IconEye",id:"view",label:"Ver"}],COLOR_THEME_OPTIONS=exports.COLOR_THEME_OPTIONS=["primary","neutral","negative"],SHAPE_OPTIONS=exports.SHAPE_OPTIONS=[_constants.SQUARE_TYPE,_constants.CIRCLE_TYPE],SIZE_OPTIONS=exports.SIZE_OPTIONS=["small","medium","large"],COMMON_ARG_TYPES=exports.COMMON_ARG_TYPES={actions:{control:"object",description:"Array de acciones. Cada item acepta: id (string), label (string), Icon (nombre de icono Tabler)."},colorTheme:{control:"select",options:COLOR_THEME_OPTIONS},selected:{control:"text",description:"ID del botón activo. Debe coincidir con el id de uno de los actions."},shape:{control:"inline-radio",options:SHAPE_OPTIONS},size:{control:"inline-radio",options:SIZE_OPTIONS}},COMMON_ARGS=exports.COMMON_ARGS={colorTheme:_constants.DEFAULT_COLOR_THEME,selected:COMMON_ACTIONS[0].id,shape:_constants.DEFAULT_TYPE,size:_constants.DEFAULT_SIZE};