@widergy/energy-ui 3.173.3 → 3.174.0

package/dist/components/UTLabel/README.md

@@ -1,179 +0,0 @@
-# UTLabel
-
-Component used for displaying text values and markdown.
-
-## Props
-
-
-| Name              | Type   | Default                                  | Description                                                                                                                                                                                                                 |
-| ------------------- | -------- | ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| align             | string |                                    | Alignment of the text content. Accepts values like 'left', 'center', 'right', or 'justify'.                                                                                                                                 |
-| className         | string |                                          | Additional classes.                                                                                                                                                                                                         |
-| classes           | string |                                          | Classes returned by UTLabel's own[theme](./theme.js#L40) `retrieveStyle`.                                                                                                                                                   |
-| colorTheme        | string | 'primary'                                | Color theme to style the UTLabel. Has to be defined in the proyect theme.[Example](#colortheme).                                                                                                                            |
-| markdownExtended  | bool   | false                                    | ⚠️ Requires`withMarkdown` to be set to `true` <br />Activates all markdown plugins for extended markdown support.                                                                                                            |
-| markdownRenderers | object | [MARKDOWN_RENDERERS](./constants.js#L36) | ⚠️ Requires`withMarkdown` to be set to `true` <br />Object mapping tag names to React components. The keys in components are HTML equivalents for the things you write with markdown [List of tags](#markdown-renderers). |
-| title             | string |                                          | [Title global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title).                                                                                                                        |
-| variant           | string | 'body'                                   | Defines html component to use. For a list of available variants, check [here](#variants). Font sizes can be overwritten (⚠️ for the entire proyect) through the proyect's theme.                                           |
-| weight            | string | 'regular'                                | Defines font-weight to be used. For a list of available options, check [here](#font-weights).                                                                                                                                |
-| withMarkdown      | bool   | false                                    | Tells the component whether or not to render text inside as markdown.                                                                                                                                                       |
-
-## Examples
-
-### colorTheme
-
-```js
-UTLabel: {
-    colorThemes: {
-      primary: {
-        color: Colors.primary
-      },
-    }
-}
-```
-
-### Use
-
-```JSX
-<UTLabel colorTheme='primary'>Your text here</UTLabel>
-```
-
-### Markdown renderers
-
-
-| markdown                  | component                                |
-| --------------------------- | ------------------------------------------ |
-| `blockquote`              | `blockquote`                             |
-| `break`                   | `br`                                     |
-| `code`, `inlineCode`      | `code`, `pre`**\***                      |
-| `definition`              | **†**                                   |
-| `emphasis`                | `em`                                     |
-| `heading`                 | `h1`, `h2`, `h3`, `h4`, `h5`, `h6`**§** |
-| `image`, `imageReference` | `img`**†**                              |
-| `link`, `linkReference`   | `a`**†**                                |
-| `list`                    | `ol`, `ul`**¶**                         |
-| `listItem`                | `li`                                     |
-| `paragraph`               | `p`                                      |
-| `strong`                  | `strong`                                 |
-| `text`                    |                                          |
-| `thematicBreak`           | `hr`                                     |
-
-- **\*** It’s possible to differentiate between code based on the `inline`
-  prop.
-  Block code is also wrapped in a `pre`
-- **†** Resource (`[text](url)`) and reference (`[text][id]`) style links and
-  images (and their definitions) are now resolved and treated the same
-- **§** It’s possible to differentiate between heading based on the `level`
-  prop
-- **¶** It’s possible to differentiate between lists based on the `ordered`
-  prop
-
-Example
-
-```JSX
-const markdownRenderers = {
-   a: ({ href, children }) => ( <a href={href}>{children}</a> );
-};
-
-<UTLabel withMarkdown markdownRenderers={markdownRenderers}>
-
-```
-
-<details>
-<summary>Show list of props for each component</summary>
-
-**Custom Handler Behavior:**
-If an element already has internal handling within UTLabel (such as `a`, `blockquote`, `h2`, etc.) and you pass a `customHandler` that returns `null`, the component will use its default internal behavior. This allows you to selectively override rendering for specific cases while falling back to the built-in logic when needed.
-
-The keys in components are HTML equivalents for the things you write with
-markdown (such as `h1` for `# heading`)**†**
-
-**†** Normally, in markdown, those are: `a`, `blockquote`, `code`, `em`, `h1`,
-`h2`, `h3`, `h4`, `h5`, `h6`, `hr`, `img`, `li`, `ol`, `p`, `pre`, `strong`, and
-`ul`.
-
-The props that are passed are what you probably would expect: an `a` (link) will
-get `href` (and `title`) props, and `img` (image) an `src` (and `title`), etc.
-There are some extra props passed.
-
-- `code`
-  - `inline` (`boolean?`)
-    — set to `true` for inline code
-  - `className` (`string?`)
-    — set to `language-js` or so when using ` ```js`
-- `h1`, `h2`, `h3`, `h4`, `h5`, `h6`
-  - `level` (`number` beween 1 and 6)
-    — heading rank
-- `input` (when using [`remark-gfm`][gfm])
-  - `checked` (`boolean`)
-    — whether the item is checked
-  - `disabled` (`true`)
-  - `type` (`'checkbox'`)
-- `li`
-  - `index` (`number`)
-    — number of preceding items (so first gets `0`, etc.)
-  - `ordered` (`boolean`)
-    — whether the parent is an `ol` or not
-  - `checked` (`boolean?`)
-    — `null` normally, `boolean` when using [`remark-gfm`][gfm]’s tasklists
-  - `className` (`string?`)
-    — set to `task-list-item` when using [`remark-gfm`][gfm] and the
-    item1 is a tasklist
-- `ol`, `ul`
-  - `depth` (`number`)
-    — number of ancestral lists (so first gets `0`, etc.)
-  - `ordered` (`boolean`)
-    — whether it’s an `ol` or not
-  - `className` (`string?`)
-    — set to `contains-task-list` when using [`remark-gfm`][gfm] and the
-    list contains one or more tasklists
-- `td`, `th` (when using [`remark-gfm`][gfm])
-  - `style` (`Object?`)
-    — something like `{textAlign: 'left'}` depending on how the cell is
-    aligned
-  - `isHeader` (`boolean`)
-    — whether it’s a `th` or not
-- `tr` (when using [`remark-gfm`][gfm])
-  - `isHeader` (`boolean`)
-    — whether it’s in the `thead` or not
-
-Every component will receive a `node` (`Object`).
-This is the original [hast](https://github.com/syntax-tree/hast) element being
-turned into a React element.
-
-Every element will receive a `key` (`string`).
-See [React’s docs](https://reactjs.org/docs/lists-and-keys.html#keys) for more
-info.
-
-</details>
-
-### variants
-
-
-| Variant   | Component | Default font size |
-| ----------- | ----------- | ------------------- |
-| title1    | h1        | 30px              |
-| title2    | h2        | 24px              |
-| title3    | h3        | 22px              |
-| subtitle1 | h4        | 18px              |
-| subtitle2 | h5        | 16px              |
-| body      | span      | 16px              |
-| small     | span      | 14px              |
-| xsmall    | span      | 13px              |
-| th        | th        | 16px              |
-| td        | td        | 16px              |
-
-### font-weights
-
-
-| Name       | Weight |
-| ------------ | -------- |
-| thin       | 100    |
-| extralight | 200    |
-| light      | 300    |
-| regular    | 400    |
-| medium     | 500    |
-| semibold   | 600    |
-| bold       | 700    |
-| extrabold  | 800    |
-| black      | 900    |

package/dist/components/UTLabel/UTLabel.mdx

@@ -1,13 +0,0 @@
-import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/blocks';
-
-import * as UTLabelStories from './UTLabel.stories';
-
-<Meta of={UTLabelStories} />
-
-<Title>UTLabel</Title>
-
-<Description of={UTLabelStories} />
-
-<Canvas of={UTLabelStories.Default} withToolbar name="UTLabel" />
-
-<ArgTypes exclude={['classes', 'style', 'title']} />

package/dist/components/UTLabel/UTLabel.stories.js

@@ -1,234 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.HeadingBlocks = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _utils = require("stories/utils");
-var _Palette = require("../../constants/Palette");
-var _constants = require("./constants");
-var _ = _interopRequireDefault(require("."));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  args: {
-    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
-  },
-  argTypes: {
-    children: {
-      control: 'text',
-      description: 'Texto a mostrar en el componente.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    colorTheme: {
-      control: 'select',
-      description: 'Determina el color de la paleta a usar.',
-      options: Object.values(_Palette.COLOR_THEMES),
-      table: {
-        defaultValue: {
-          summary: _constants.DEFAULT_PROPS.colorTheme
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    shade: {
-      control: 'select',
-      description: 'Determina el tono de la prop `colorTheme` a usar.',
-      options: Object.values(_Palette.COLOR_SHADES),
-      table: {
-        defaultValue: {
-          summary: '05'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    markdownExtended: {
-      control: 'boolean',
-      description: 'Habilita todos los plugins de markdown',
-      table: {
-        defaultValue: {
-          summary: _constants.DEFAULT_PROPS.markdownExtended
-        },
-        type: {
-          summary: 'bool'
-        }
-      }
-    },
-    markdownRenderers: {
-      control: false,
-      description: 'Mapper de componentes HTML a componentes react. Para más detalles revisar la sección Markdown Renderers',
-      table: {
-        defaultValue: {
-          summary: 'Detalles',
-          detail: 'Por defecto hay un renderer para elementos <a> que presetea algunos atributos de la etiqueta.'
-        },
-        type: {
-          summary: 'Object'
-        }
-      }
-    },
-    variant: {
-      control: 'select',
-      description: 'Determina el componente HTML a renderizar.',
-      options: Object.keys(_constants.VARIANTS),
-      table: {
-        defaultValue: {
-          summary: _constants.DEFAULT_PROPS.variant
-        },
-        type: {
-          summary: (0, _utils.joinArgTypes)(Object.keys(_constants.VARIANTS))
-        }
-      }
-    },
-    weight: {
-      control: 'select',
-      description: 'Determina el valor del atributo `font-weight`.',
-      options: Object.keys(_constants.WEIGHTS),
-      table: {
-        defaultValue: {
-          summary: _constants.DEFAULT_PROPS.weight
-        },
-        type: {
-          summary: (0, _utils.joinArgTypes)(Object.keys(_constants.WEIGHTS))
-        }
-      }
-    },
-    withMarkdown: {
-      control: 'boolean',
-      description: 'Determina si renderizar el contenido como markdown o texto plano.',
-      table: {
-        defaultValue: {
-          summary: _constants.DEFAULT_PROPS.withMarkdown
-        },
-        type: {
-          summary: 'bool'
-        }
-      }
-    },
-    className: {
-      control: false,
-      description: 'Clase que se le pasa al elemento contenedor.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    }
-  },
-  component: _.default,
-  parameters: {
-    controls: {
-      exclude: ['classes', 'field', 'style', 'title']
-    },
-    docs: {
-      description: {
-        component: 'Este componente se usa para renderizar texto. Consume la paleta de colores. Acepta markdown para formatear texto.'
-      }
-    }
-  },
-  title: 'Energy-UI/UTLabel'
-};
-const Default = exports.Default = {
-  args: {
-    colorTheme: _constants.DEFAULT_PROPS.colorTheme,
-    markdownExtended: _constants.DEFAULT_PROPS.markdownExtended,
-    variant: _constants.DEFAULT_PROPS.variant,
-    weight: _constants.DEFAULT_PROPS.weight,
-    withMarkdown: _constants.DEFAULT_PROPS.withMarkdown,
-    shade: '05'
-  },
-  name: 'Playground'
-};
-const BODY_TEXT = 'El sistema de diseño provee tokens de tipografía que garantizan consistencia visual en todos los productos. Cada nivel de heading tiene un line-height proporcional a su tamaño para una lectura cómoda.';
-const SMALL_TEXT = 'Los valores de consumo se actualizan cada 15 minutos y se almacenan durante 24 meses para análisis histórico.';
-const XSMALL_TEXT = 'Última actualización: 26/05/2026 · Fuente: medidor digital · ID lectura: 00487-A';
-const HEADINGS = [{
-  variant: 'title1',
-  label: 'Title 1 — H1',
-  heading: 'Gestión de energía para utilities modernas que operan en múltiples regiones del país'
-}, {
-  variant: 'title2',
-  label: 'Title 2 — H2',
-  heading: 'Seguimiento de consumo en tiempo real con integración a sistemas de medición inteligente'
-}, {
-  variant: 'title3',
-  label: 'Title 3 — H3',
-  heading: 'Configuración de alertas, notificaciones y umbrales de consumo por categoría de usuario'
-}, {
-  variant: 'subtitle1',
-  label: 'Subtitle 1 — H4',
-  heading: 'Parámetros de medición avanzada para clientes residenciales de alta demanda energética'
-}, {
-  variant: 'subtitle2',
-  label: 'Subtitle 2 — H5',
-  heading: 'Detalles del período de facturación correspondiente al bimestre actual del servicio eléctrico'
-}];
-const HeadingBlocks = exports.HeadingBlocks = {
-  name: 'Bloques heading + texto',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Cada categoría de heading junto a párrafos de body, small y xsmall para verificar jerarquía y line-height.'
-      }
-    }
-  },
-  render: () => {
-    const pageStyle = {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '3rem',
-      maxWidth: '560px',
-      padding: '2rem'
-    };
-    const blockStyle = {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '0.75rem',
-      borderLeft: '3px solid #e2e8f0',
-      paddingLeft: '1rem'
-    };
-    const chipStyle = {
-      fontSize: '0.7rem',
-      color: '#94a3b8',
-      fontFamily: 'monospace',
-      marginBottom: '0.25rem'
-    };
-    return /*#__PURE__*/_react.default.createElement("div", {
-      style: pageStyle
-    }, HEADINGS.map(_ref => {
-      let {
-        variant,
-        label,
-        heading
-      } = _ref;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: variant,
-        style: blockStyle
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        style: chipStyle
-      }, label), /*#__PURE__*/_react.default.createElement(_.default, {
-        variant: variant
-      }, heading), /*#__PURE__*/_react.default.createElement(_.default, {
-        variant: "small"
-      }, BODY_TEXT), /*#__PURE__*/_react.default.createElement(_.default, {
-        variant: "small"
-      }, SMALL_TEXT), /*#__PURE__*/_react.default.createElement(_.default, {
-        variant: "xsmall"
-      }, XSMALL_TEXT));
-    }));
-  }
-};

package/dist/components/UTLoading/README.md

@@ -1,85 +0,0 @@
-# UTLoading
-
-Componente de carga con soporte de versiones. Muestra un indicador visual de carga mientras se obtienen datos. Soporta dos variantes internas: un Spinner circular y un LogoLoader con el logo/isologo del cliente.
-
-## Versiones
-
-### V0 (default)
-
-Comportamiento original. Se activa cuando no se pasa la prop `version` o cuando se pasa `version="V0"`.
-
-- `useUtilityLoading=false` → Spinner basado en Material UI `CircularProgress`
-- `useUtilityLoading=true` → AnimatedCircles: logo + 3 puntos animados, siempre full screen
-
-### V1
-
-Nueva versión con diseño actualizado. Se activa pasando `version="V1"`.
-
-- `useUtilityLoading=false` → Nuevo Spinner CSS puro con línea más gruesa
-- `useUtilityLoading=true` → LogoLoader: track de gradiente animado con logo del cliente, prop `fullScreen` para controlar comportamiento
-
-## Uso básico
-
-```jsx
-import { UTLoading } from '@widergy/energy-ui';
-
-// V0 (default — sin cambios)
-<UTLoading loading>
-  <MiContenido />
-</UTLoading>
-
-// V1 — Spinner
-<UTLoading version="V1" loading useUtilityLoading={false}>
-  <MiContenido />
-</UTLoading>
-
-// V1 — LogoLoader full screen
-<UTLoading
-  version="V1"
-  loading
-  useUtilityLoading
-  Logo="https://mi-dominio.com/logo.svg"
-  fullScreen
-/>
-
-// V1 — LogoLoader en contenedor
-<UTLoading
-  version="V1"
-  loading
-  useUtilityLoading
-  fullScreen={false}
->
-  <MiContenido />
-</UTLoading>
-```
-
-## Props
-
-| Prop | Tipo | Default | Descripción |
-|------|------|---------|-------------|
-| `version` | `string` | `'V0'` | `'V0'` o `'V1'` — selecciona la versión a renderizar |
-| `loading` | `bool` | — | Muestra el loader cuando `true`, los `children` cuando `false` |
-| `children` | `node` | — | Contenido a mostrar cuando `loading=false` |
-| `useUtilityLoading` | `bool` | — | `true` → LogoLoader / AnimatedCircles; `false` → Spinner |
-| `fullScreen` | `bool` | `true` | Solo V1 LogoLoader. `true`: `position: fixed` full screen. `false`: adaptado al contenedor |
-| `Logo` | `string` | — | URL del asset SVG del logo/isologo del cliente |
-| `text` | `string` | `'Cargando el contenido...'` | Texto de carga. Pasar `''` para ocultarlo (solo V1) |
-| `dataTestId` | `string` | — | `data-testid` del elemento raíz (solo V1) |
-| `color` | `string` | — | Color CSS explícito del spinner (solo V0 Spinner) |
-| `size` | `number` | — | Tamaño del spinner en px (solo V0) |
-| `thickness` | `number` | — | Grosor del spinner (solo V0) |
-| `preventUnmount` | `bool` | `false` | Mantiene los children en el DOM cuando `loading=true` (Spinner) |
-| `className` | `string` | — | Clase adicional para el spinner (solo V0) |
-| `textClassName` | `string` | — | Clase del texto (solo V0) |
-| `wrapperClassName` | `string` | — | Clase del wrapper de children (Spinner) |
-| `classNames` | `object` | — | Objeto de clases para AnimatedCircles (solo V0) |
-
-## Design tokens — V1
-
-| Token | Descripción | Fallback |
-|-------|-------------|---------|
-| `--UT-loading-track-color-start` | Color inicial del gradiente del track | `identitySolidTone1` del cliente |
-| `--UT-loading-track-color-end` | Color final del gradiente del track | `identitySolidTone2` del cliente |
-| `--UT-loading-gap` | Gap entre track/spinner y label | `8px` |
-
-> Los tokens de color del gradiente se derivan automáticamente de los colores de identidad de cada cliente. El ajuste de valores exactos queda pendiente de confirmación de Diseño en Figma (CX-2398).

package/dist/components/UTLoading/versions/V1/stories/UTLoadingV1.mdx

@@ -1,67 +0,0 @@
-import { Canvas, Controls, Meta, Story } from '@storybook/blocks';
-import * as UTLoadingV1Stories from './UTLoadingV1.stories';
-
-<Meta of={UTLoadingV1Stories} />
-
-# UTLoading — V1
-
-Nueva versión del componente de carga. Incluye un Spinner custom con línea más gruesa y un LogoLoader con track de gradiente animado usando los colores de identidad del cliente.
-
-## Cómo activar V1
-
-Pasar la prop `version="V1"` al componente. Sin esta prop el comportamiento es idéntico al actual (V0).
-
-```jsx
-<UTLoading version="V1" loading useUtilityLoading={false} />
-```
-
-## Spinner
-
-Spinner circular CSS puro. Muestra una línea circular con track de fondo y arco superior en el color de acento del tema. Soporta un label de texto opcional debajo.
-
-<Canvas of={UTLoadingV1Stories.SpinnerPlayground} />
-<Controls of={UTLoadingV1Stories.SpinnerPlayground} />
-
-## LogoLoader
-
-Loader con track circular de gradiente de 2 colores (colores de identidad del cliente). El logo/isologo del cliente se muestra centrado con una animación de escala sincronizada con la rotación del track.
-
-### Full Screen
-
-Cuando `fullScreen=true` el contenedor ocupa toda la pantalla con `position: fixed` y `z-index: 999`.
-
-<Canvas of={UTLoadingV1Stories.LogoLoaderFullScreen} />
-
-### En contenedor
-
-Cuando `fullScreen=false` el loader se adapta al contenedor padre y se centra dentro de él.
-
-<Canvas of={UTLoadingV1Stories.LogoLoaderEnContenedor} />
-
-### Con logo del cliente
-
-<Canvas of={UTLoadingV1Stories.LogoLoaderConLogo} />
-
-## Props
-
-| Prop | Tipo | Default | Descripción |
-|------|------|---------|-------------|
-| `version` | `string` | `'V0'` | `'V0'` o `'V1'` — versión a renderizar |
-| `loading` | `bool` | — | Muestra el loader cuando `true`, los `children` cuando `false` |
-| `useUtilityLoading` | `bool` | — | `true` → LogoLoader; `false` → Spinner |
-| `fullScreen` | `bool` | `true` | Full screen (`position: fixed`) o adaptado al contenedor |
-| `Logo` | `string` | — | URL del SVG del logo/isologo del cliente |
-| `text` | `string` | `'Cargando...'` | Texto de carga. Pasar `''` para ocultarlo |
-| `dataTestId` | `string` | — | `data-testid` del elemento raíz |
-| `preventUnmount` | `bool` | `false` | Mantiene los children en el DOM cuando `loading=true` (solo Spinner) |
-| `wrapperClassName` | `string` | — | Clase del wrapper de children (solo Spinner) |
-
-## Design tokens
-
-| Token | Propiedad | Fallback |
-|-------|-----------|---------|
-| `--UT-loading-track-color-start` | Color inicial del gradiente del track | Color de identidad 1 del cliente |
-| `--UT-loading-track-color-end` | Color final del gradiente del track | Color de identidad 2 del cliente |
-| `--UT-loading-gap` | Gap entre track/spinner y label | `8px` |
-
-> Los tokens de color del gradiente se inyectan automáticamente desde los colores de identidad del cliente (`identitySolidTone1` y `identitySolidTone2`).