@widergy/energy-ui 3.173.3 → 3.174.0

package/dist/components/UTButton/README.md

@@ -1,51 +0,0 @@
-# UTButton
-
-### Description
-
-Basic button component.
-
-### Variants
-
-These variants were defined by the UX team and are:
-
-- `filled`
-- `outlined`
-- `text`
-- `semitransparent`
-
-All these variants are defined in the component theme.
-
-### Color Themes
-
-The color themes are defined by the component consumer and will vary accordingly. They define a set of variables (colors and opacities) that then combined with the variant will change how the button looks.
-The components supports an infinite amount of color themes but requires the consumer to pass at least a `primary` one that works as a default.
-
-### Icons
-
-The button can include up to two icons (left and right), each of which can be either a Tabler Icons name or a custom SVG React component.
-
-- **`LeftIcon`:** rendered at the start of the button content.
-- **`RightIcon`:** rendered at the end of the button content.
-- Additional props for each icon can be passed via `leftIconProps` and `rightIconProps`.
-
-### Props
-
-| Name                 | Type                                                  | Default   | Description                                                                    |
-| -------------------- | ----------------------------------------------------- | --------- | ------------------------------------------------------------------------------ |
-| variant              | 'filled' \| 'outlined' \| 'text' \| 'semitransparent' | 'filled'  | The variant to use.                                                            |
-| colorTheme           | string                                                | 'primary' | The color theme to use.                                                        |
-| size                 | 'small' \| 'medium' \| 'large'                        | 'medium'  | The size of the component.                                                     |
-| onClick              | func                                                  |           | Callback fired when the user clicks the component.                             |
-| loading              | bool                                                  | false     | If `true` a spinner is shown over the component.                               |
-| disabled             | bool                                                  | false     | If `true` the button is unclickable.                                           |
-| LeftIcon             | node \| string                                        |           | Icon rendered at the start of the button.                                      |
-| leftIconProps        | object                                                |           | Additional props to apply to the left icon.                                    |
-| RightIcon            | node \| string                                        |           | Icon rendered at the end of the button.                                        |
-| rightIconProps       | object                                                |           | Additional props to apply to the right icon.                                   |
-| hideTextOnResponsive | bool                                                  | false     | If `true` and an icon is present, the button text is hidden on mobile.         |
-| count                | number                                                |           | Number to display in a badge inside the button.                                |
-| type                 | string                                                |           | HTML type attribute.                                                           |
-| classNames           | object                                                |           | Overrides the default button theme.                                            |
-| children             | node                                                  |           | The component contents.                                                        |
-| Icon                 | node \| string                                        |           | **Deprecated.** Use `LeftIcon` or `RightIcon` instead.                        |
-| iconPlacement        | 'left' \| 'right'                                     | 'left'    | **Deprecated.** Use `LeftIcon` or `RightIcon` instead.                        |

package/dist/components/UTButton/stories/UTButton.mdx

@@ -1,13 +0,0 @@
-import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/blocks';
-
-import * as UTButtonStories from './UTButton.stories.js';
-
-<Meta of={UTButtonStories} />
-
-<Title>UTButton</Title>
-
-<Description of={UTButtonStories} />
-
-<Canvas of={UTButtonStories.Playground} withToolbar />
-
-<ArgTypes exclude={['classes']} />

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

@@ -1,41 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Playground = void 0;
-var _ = _interopRequireDefault(require(".."));
-var _storiesConstants = require("./storiesConstants");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Energy-UI/UTButton',
-  component: _.default,
-  args: {
-    children: undefined,
-    classNames: undefined,
-    count: undefined,
-    LeftIcon: undefined,
-    leftIconProps: undefined,
-    onClick: undefined,
-    RightIcon: undefined,
-    rightIconProps: undefined,
-    ..._storiesConstants.COMMON_ARGS
-  },
-  argTypes: {
-    ..._storiesConstants.COMMON_ARG_TYPES
-  },
-  parameters: {
-    ..._storiesConstants.COMMON_PARAMETERS,
-    options: {
-      storySort: {
-        method: 'alphabetical'
-      }
-    }
-  }
-};
-const Playground = exports.Playground = {
-  args: {
-    children: 'Button'
-  },
-  name: 'Playground'
-};

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

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.RightIconOnly = exports.LeftIconOnly = exports.IconOnly = exports.CountOnly = exports.CountAndIcon = exports.BothIcons = void 0;
-var _ = _interopRequireDefault(require(".."));
-var _storiesConstants = require("./storiesConstants");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Energy-UI/UTButton/Adornments',
-  component: _.default,
-  args: {
-    ..._storiesConstants.COMMON_ARGS
-  },
-  argTypes: {
-    ..._storiesConstants.COMMON_ARG_TYPES
-  },
-  parameters: {
-    ..._storiesConstants.COMMON_PARAMETERS
-  }
-};
-const LeftIconOnly = exports.LeftIconOnly = {
-  args: {
-    children: 'Left Icon',
-    LeftIcon: 'IconArrowLeft'
-  }
-};
-const RightIconOnly = exports.RightIconOnly = {
-  args: {
-    children: 'Right Icon',
-    RightIcon: 'IconArrowRight'
-  }
-};
-const BothIcons = exports.BothIcons = {
-  args: {
-    children: 'Descargas',
-    LeftIcon: 'IconDownload',
-    RightIcon: 'IconChevronDown'
-  }
-};
-const IconOnly = exports.IconOnly = {
-  args: {
-    LeftIcon: 'IconSearch'
-  }
-};
-const CountAndIcon = exports.CountAndIcon = {
-  args: {
-    count: 7,
-    LeftIcon: 'IconBell'
-  }
-};
-const CountOnly = exports.CountOnly = {
-  args: {
-    count: 5
-  }
-};

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

@@ -1,52 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Success = exports.Secondary = exports.Negative = exports.Gray = exports.Error = void 0;
-var _ = _interopRequireDefault(require(".."));
-var _storiesConstants = require("./storiesConstants");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Energy-UI/UTButton/Color Themes',
-  component: _.default,
-  args: {
-    ..._storiesConstants.COMMON_ARGS
-  },
-  argTypes: {
-    ..._storiesConstants.COMMON_ARG_TYPES
-  },
-  parameters: {
-    ..._storiesConstants.COMMON_PARAMETERS
-  }
-};
-const Error = exports.Error = {
-  args: {
-    children: 'Error Color Theme',
-    colorTheme: 'error'
-  }
-};
-const Gray = exports.Gray = {
-  args: {
-    children: 'Gray Color Theme',
-    colorTheme: 'gray'
-  }
-};
-const Negative = exports.Negative = {
-  args: {
-    children: 'Negative Color Theme',
-    colorTheme: 'negative'
-  }
-};
-const Secondary = exports.Secondary = {
-  args: {
-    children: 'Secondary Color Theme',
-    colorTheme: 'secondary'
-  }
-};
-const Success = exports.Success = {
-  args: {
-    children: 'Success Color Theme',
-    colorTheme: 'success'
-  }
-};

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

@@ -1,55 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Small = exports.Medium = exports.Large = exports.FullHeight = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ = _interopRequireDefault(require(".."));
-var _storiesConstants = require("./storiesConstants");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Energy-UI/UTButton/Sizes',
-  component: _.default,
-  args: {
-    ..._storiesConstants.COMMON_ARGS
-  },
-  argTypes: {
-    ..._storiesConstants.COMMON_ARG_TYPES
-  },
-  parameters: {
-    ..._storiesConstants.COMMON_PARAMETERS
-  }
-};
-const Small = exports.Small = {
-  args: {
-    children: 'Small Size',
-    size: 'small'
-  }
-};
-const Medium = exports.Medium = {
-  args: {
-    children: 'Medium Size',
-    size: 'medium'
-  }
-};
-const Large = exports.Large = {
-  args: {
-    children: 'Large Size',
-    size: 'large'
-  }
-};
-const FullHeight = exports.FullHeight = {
-  args: {
-    children: 'Full Height',
-    fullHeight: true
-  },
-  render: args => /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: 'flex',
-      height: 80,
-      border: '1px dashed #ccc',
-      padding: 8
-    }
-  }, /*#__PURE__*/_react.default.createElement(_.default, args))
-};

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

@@ -1,34 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Loading = exports.Disabled = void 0;
-var _ = _interopRequireDefault(require(".."));
-var _storiesConstants = require("./storiesConstants");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Energy-UI/UTButton/States',
-  component: _.default,
-  args: {
-    ..._storiesConstants.COMMON_ARGS
-  },
-  argTypes: {
-    ..._storiesConstants.COMMON_ARG_TYPES
-  },
-  parameters: {
-    ..._storiesConstants.COMMON_PARAMETERS
-  }
-};
-const Disabled = exports.Disabled = {
-  args: {
-    children: 'Disabled',
-    disabled: true
-  }
-};
-const Loading = exports.Loading = {
-  args: {
-    children: 'Loading',
-    loading: true
-  }
-};

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

@@ -1,61 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Text = exports.Shadow = exports.Semitransparent = exports.Outlined = exports.Filled = void 0;
-var _ = _interopRequireDefault(require(".."));
-var _storiesConstants = require("./storiesConstants");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const COMMON_PROPS = {
-  count: 3,
-  Icon: 'IconPencil'
-};
-var _default = exports.default = {
-  title: 'Energy-UI/UTButton/Variants',
-  component: _.default,
-  args: {
-    ..._storiesConstants.COMMON_ARGS
-  },
-  argTypes: {
-    ..._storiesConstants.COMMON_ARG_TYPES
-  },
-  parameters: {
-    ..._storiesConstants.COMMON_PARAMETERS
-  }
-};
-const Filled = exports.Filled = {
-  args: {
-    ...COMMON_PROPS,
-    children: 'Filled Variant',
-    variant: 'filled'
-  }
-};
-const Semitransparent = exports.Semitransparent = {
-  args: {
-    ...COMMON_PROPS,
-    children: 'Semitransparent Variant',
-    variant: 'semitransparent'
-  }
-};
-const Outlined = exports.Outlined = {
-  args: {
-    ...COMMON_PROPS,
-    children: 'Outlined Variant',
-    variant: 'outlined'
-  }
-};
-const Shadow = exports.Shadow = {
-  args: {
-    ...COMMON_PROPS,
-    children: 'Shadow Variant',
-    variant: 'shadow'
-  }
-};
-const Text = exports.Text = {
-  args: {
-    ...COMMON_PROPS,
-    children: 'Text Variant',
-    variant: 'text'
-  }
-};

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

@@ -1,268 +0,0 @@
-"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.'
-    }
-  }
-};

package/dist/components/UTButtonGroup/README.md

@@ -1,30 +0,0 @@
-# UTButtonGroup
-
-A component that renders a group of buttons with consistent styling and behavior. The selected button is highlighted with a `shadow` variant (for `primary` and `neutral` color themes) or `filled` variant (for `negative`), while inactive buttons use the `text` variant.
-
-The container applies padding and border-radius via design tokens (`--UT-buttonGroup-padding`, `--UT-buttonGroup-radius`), making both values overridable per utility.
-
-## Props
-
-| Name       | Type            | Default   | Required | Description                                                                                    |
-| ---------- | :-------------- | --------- | -------- | ---------------------------------------------------------------------------------------------- |
-| actions    | array           | -         | Yes      | Array of action objects to render. Each action must include `Icon`, `id`, and `onClick` props. |
-| colorTheme | string          | 'primary' | No       | The color theme to use. One of: `primary`, `neutral`, `negative`.                              |
-| selected   | string / number | -         | Yes      | ID of the currently active/selected button.                                                    |
-| shape      | string          | 'square'  | No       | Shape of the button group. One of: `square`, `circle`.                                         |
-| size       | string          | 'small'   | No       | Size of the buttons. One of: `small`, `medium`, `large`.                                       |
-
-## Active variant by colorTheme
-
-| colorTheme | Active variant |
-| ---------- | -------------- |
-| primary    | shadow         |
-| neutral    | shadow         |
-| negative   | filled         |
-
-## Design tokens
-
-| Token                    | Default  | Semantic token  | Description                                    |
-| ------------------------ | -------- | --------------- | ---------------------------------------------- |
-| `--UT-buttonGroup-padding` | `0.25rem` | `padding-2xs`  | Padding del contenedor principal               |
-| `--UT-buttonGroup-radius`  | `8px`    | `radius-md`    | Border-radius del contenedor (variante square) |