@widergy/energy-ui 3.173.2 → 3.173.4

package/dist/esm/components/UTSnackbar/stories/storiesConstants.js

@@ -1,163 +0,0 @@
-import { joinArgTypes } from 'stories/utils';
-import { COLOR_THEMES, POSITIONS, VARIANTS } from '../constants';
-export const ARG_TYPES = {
-  button: {
-    control: 'object',
-    description: 'Configuración del botón de acción primaria. Se hace spread en UTButton — incluir `title` como label y `onClick` como callback.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'shape'
-      }
-    }
-  },
-  colorTheme: {
-    control: 'select',
-    description: 'Tipo de color de la notificación. `success`, `error`, `warning` e `info` usan colores semánticos con ícono asociado. `white` usa colores neutros sin semántica.',
-    options: Object.values(COLOR_THEMES),
-    table: {
-      defaultValue: {
-        summary: COLOR_THEMES.success
-      },
-      type: {
-        summary: joinArgTypes(Object.values(COLOR_THEMES))
-      }
-    }
-  },
-  icon: {
-    control: 'text',
-    description: 'Nombre del ícono Tabler para sobreescribir el ícono por defecto (ej: `IconStar`). Si no se indica, se usa el ícono correspondiente al `colorTheme`.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'string'
-      }
-    }
-  },
-  description: {
-    control: 'text',
-    description: 'Texto secundario debajo del mensaje principal.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'string'
-      }
-    }
-  },
-  dataTestId: {
-    control: false,
-    description: 'Identificador de test raíz. Los sub-elementos derivan su testId automáticamente: `.icon`, `.label`, `.description.label`, `.close`, `.button.secondaryAction`, `.secondaryButton.tertiaryAction`.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'string'
-      }
-    }
-  },
-  message: {
-    control: 'text',
-    description: 'Mensaje principal a mostrar. Soporta markdown.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'string'
-      }
-    }
-  },
-  onClose: {
-    control: false,
-    description: 'Callback ejecutado al cerrar el snackbar.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'function'
-      }
-    }
-  },
-  open: {
-    control: 'boolean',
-    description: 'Controla si el snackbar está visible.',
-    table: {
-      defaultValue: {
-        summary: 'false'
-      },
-      type: {
-        summary: 'boolean'
-      }
-    }
-  },
-  secondaryButton: {
-    control: 'object',
-    description: 'Configuración del botón de acción secundaria. Se hace spread en UTButton — incluir `title` como label y `onClick` como callback.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'shape'
-      }
-    }
-  },
-  timeDuration: {
-    control: 'number',
-    description: 'Duración en milisegundos antes del cierre automático.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'number'
-      }
-    }
-  },
-  position: {
-    control: 'select',
-    description: 'Posición del snackbar en la pantalla.',
-    options: Object.values(POSITIONS),
-    table: {
-      defaultValue: {
-        summary: POSITIONS.bottomLeft
-      },
-      type: {
-        summary: joinArgTypes(Object.values(POSITIONS))
-      }
-    }
-  },
-  variant: {
-    control: 'inline-radio',
-    description: '`dark` usa el color del `colorTheme` como fondo con texto blanco; `light` usa una versión clara con texto oscuro accesible.',
-    options: Object.values(VARIANTS),
-    table: {
-      defaultValue: {
-        summary: VARIANTS.dark
-      },
-      type: {
-        summary: joinArgTypes(Object.values(VARIANTS))
-      }
-    }
-  },
-  withoutIcon: {
-    control: 'boolean',
-    description: 'Si es `true`, oculta el ícono.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'boolean'
-      }
-    }
-  }
-};

package/dist/esm/components/UTStatus/README.md

@@ -1,106 +0,0 @@
-# UTStatus
-
-### Descripción
-
-Componente de estado que muestra un ícono y un texto. Soporta múltiples variantes de color, tipos visuales, tamaños, tooltip y adornos opcionales (badges e íconos).
-
-### Tamaños
-
-| Tamaño   | Fuente | Tamaño ícono | Padding |
-| -------- | ------ | ------------ | ------- |
-| `xsmall` | xsmall | 14px         | 2px 4px |
-| `small`  | xsmall | 14px         | 4px 8px |
-| `medium` | small  | 16px         | 4px 8px |
-| `large`  | body   | 20px         | 4px 8px |
-
-### Ícono
-
-Cada variante tiene un ícono por defecto. Puede sobreescribirse con la prop `Icon`, que acepta un nombre de Tabler Icons (string) o un componente React. El ícono puede ocultarse completamente con `withoutIcon`.
-
-### Área
-
-El área de fondo se muestra por defecto (`area={true}`). Puede ocultarse o cambiar su forma:
-
-- `areaType="SQUARE"`: border-radius 4px (por defecto).
-- `areaType="ROUNDED"`: border-radius 100px (forma de píldora).
-
-### Adornos
-
-Se pueden agregar badges o íconos adicionales a la izquierda o derecha del contenido mediante la prop `adornments`. Cada adorno debe indicar un `name` (`Badge` o `Icon`) y opcionalmente `props` para pasarle a ese componente.
-
-```jsx
-// Adorno simple (se ubica a la izquierda por defecto)
-adornments={[{ name: 'Badge', props: { colorTheme: 'success' } }]}
-
-// Posicionamiento explícito izquierda/derecha
-adornments={[
-  { left: { name: 'Icon', props: { name: 'IconStar' } } },
-  { right: { name: 'Badge', props: { colorTheme: 'information' } } }
-]}
-```
-
-### Tooltip
-
-Se puede mostrar un tooltip al hacer hover mediante la prop `tooltip` (string o ReactElement). Opciones adicionales de Tippy.js pueden pasarse con `tooltipProps`.
-
-### Props
-
-| Nombre          | Tipo                                                                                       | Default     | Descripción                                                                                            |
-| --------------- | ------------------------------------------------------------------------------------------ | ----------- | ------------------------------------------------------------------------------------------------------ |
-| variant         | `'success'` \| `'error'` \| `'warning'` \| `'information'` \| `'accent'` \| `'unassigned'` | `'success'` | Variante de color del componente.                                                                      |
-| type            | `'default'` \| `'light'` \| `'accent'` \| `'negative'`                                     | `'default'` | Tipo visual que modifica el tratamiento del color.                                                     |
-| size            | `'xsmall'` \| `'small'` \| `'medium'` \| `'large'`                                         | `'medium'`  | Tamaño del componente.                                                                                 |
-| children        | string                                                                                     |             | Texto del estado.                                                                                      |
-| area            | bool                                                                                       | `true`      | Muestra el área de fondo.                                                                              |
-| areaType        | `'SQUARE'` \| `'ROUNDED'`                                                                  | `'SQUARE'`  | Forma del área de fondo.                                                                               |
-| Icon            | elementType \| string                                                                      |             | Sobreescribe el ícono por defecto de la variante. Acepta nombre de Tabler Icons o un componente React. |
-| withoutIcon     | bool                                                                                       | `false`     | Oculta el ícono.                                                                                       |
-| weight          | string                                                                                     | `'medium'`  | Peso tipográfico del texto.                                                                            |
-| adornments      | array                                                                                      | `[]`        | Array de adornos (`Badge` o `Icon`) para mostrar junto al estado.                                      |
-| tooltip         | string \| node                                                                             |             | Contenido del tooltip al hacer hover.                                                                  |
-| tooltipProps    | object                                                                                     | `{}`        | Props adicionales para el tooltip (Tippy.js).                                                          |
-| className       | string                                                                                     |             | Clase CSS adicional sobre el contenedor raíz.                                                          |
-| labelDataTestId | string                                                                                     |             | `data-testid` para el label interno.                                                                   |
-| title           | string                                                                                     |             | Atributo HTML `title` en el contenedor raíz.                                                           |
-
-### Ejemplo
-
-```jsx
-import React from 'react';
-import { UTStatus } from '@widergy/energy-ui';
-
-const App = () => (
-  <div>
-    <UTStatus variant="success">Activo</UTStatus>
-    <UTStatus variant="error" size="small">
-      Rechazado
-    </UTStatus>
-    <UTStatus variant="warning" type="light">
-      Pendiente
-    </UTStatus>
-    <UTStatus variant="information" size="xsmall">
-      Info
-    </UTStatus>
-    <UTStatus variant="success" area={false}>
-      Sin fondo
-    </UTStatus>
-    <UTStatus variant="unassigned" areaType="ROUNDED">
-      Redondeado
-    </UTStatus>
-    <UTStatus variant="information" Icon="IconStar">
-      Ícono personalizado
-    </UTStatus>
-    <UTStatus variant="error" withoutIcon>
-      Sin ícono
-    </UTStatus>
-    <UTStatus variant="warning" tooltip="Acción requerida">
-      Con tooltip
-    </UTStatus>
-    <UTStatus variant="success" adornments={[{ name: 'Badge', props: { colorTheme: 'success' } }]}>
-      Con badge
-    </UTStatus>
-  </div>
-);
-
-export default App;
-```

package/dist/esm/components/UTStatus/UTStatus.mdx

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

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

@@ -1,391 +0,0 @@
-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 from 'react';
-import { joinArgTypes } from 'stories/utils';
-import { DEFAULT_PROPS, SIZES, TYPES, VARIANTS, AREA_TYPES } from './constants';
-import UTStatus from '.';
-export default {
-  args: {
-    children: 'Información de estado',
-    size: DEFAULT_PROPS.size,
-    type: DEFAULT_PROPS.type,
-    variant: DEFAULT_PROPS.variant
-  },
-  argTypes: {
-    children: {
-      control: 'text',
-      description: 'Texto a mostrar en el componente.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    Icon: {
-      control: false,
-      description: 'Icono a mostrar en el componente. Sobreescribe el default. Solo se muestra si `withoutIcon` es `false`.',
-      table: {
-        defaultValue: {
-          summary: 'Detalles',
-          detail: 'Cada variant tiene su Icon default.'
-        },
-        type: {
-          summary: joinArgTypes(['ReactComponent', 'string'])
-        }
-      }
-    },
-    className: {
-      control: false,
-      description: 'Clase que recibe el contenedor.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    variant: {
-      control: 'select',
-      description: 'Determina la variante del componente a usar.',
-      options: Object.keys(VARIANTS),
-      table: {
-        defaultValue: {
-          summary: 'success'
-        },
-        type: {
-          summary: joinArgTypes(Object.keys(VARIANTS))
-        }
-      }
-    },
-    type: {
-      control: 'select',
-      description: 'Determina el tema a usar.',
-      options: Object.keys(TYPES),
-      table: {
-        defaultValue: {
-          summary: DEFAULT_PROPS.type
-        },
-        type: {
-          summary: joinArgTypes(Object.keys(TYPES))
-        }
-      }
-    },
-    size: {
-      control: 'inline-radio',
-      description: 'Determina el tamaño del texto.',
-      options: Object.keys(SIZES),
-      table: {
-        defaultValue: {
-          summary: DEFAULT_PROPS.size
-        },
-        type: {
-          summary: joinArgTypes(Object.keys(SIZES))
-        }
-      }
-    },
-    withoutIcon: {
-      control: 'boolean',
-      description: 'Determina si se debe mostrar u ocultar el icono.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    title: {
-      control: 'text',
-      description: 'Atributo title del elemento HTML para mostrar información adicional al hacer hover.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    tooltip: {
-      control: 'text',
-      description: 'Contenido del tooltip que se muestra al hacer hover sobre el componente.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: joinArgTypes(['string', 'ReactElement'])
-        }
-      }
-    },
-    tooltipProps: {
-      control: 'object',
-      description: 'Propiedades adicionales para personalizar el comportamiento del tooltip.',
-      table: {
-        defaultValue: {
-          summary: '{}'
-        },
-        type: {
-          summary: 'object'
-        }
-      }
-    },
-    labelDataTestId: {
-      control: 'text',
-      description: 'Identificador de test para el label del componente.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    adornments: {
-      control: 'object',
-      description: 'Array de adornos (badges e iconos) para mostrar junto al estado.',
-      table: {
-        defaultValue: {
-          summary: '[]'
-        },
-        type: {
-          summary: 'array'
-        }
-      }
-    },
-    area: {
-      control: 'boolean',
-      description: 'Determina si se debe mostrar el área de fondo del componente.',
-      table: {
-        defaultValue: {
-          summary: 'true'
-        },
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    areaType: {
-      control: 'select',
-      description: 'Determina el tipo de área a usar.',
-      options: Object.keys(AREA_TYPES),
-      table: {
-        defaultValue: {
-          summary: DEFAULT_PROPS.areaType
-        },
-        type: {
-          summary: joinArgTypes(Object.keys(AREA_TYPES))
-        }
-      }
-    }
-  },
-  component: UTStatus,
-  parameters: {
-    controls: {
-      exclude: ['classes']
-    },
-    docs: {
-      description: {
-        component: 'Este componente se usa para mostrar estados con o sin iconos asociados. Soporta diferentes variantes de color, tipos de tema y tamaños. Incluye funcionalidad de tooltip y puede personalizarse con iconos personalizados.'
-      }
-    }
-  },
-  title: 'Energy-UI/UTStatus'
-};
-export const Default = {
-  args: {
-    size: DEFAULT_PROPS.size,
-    type: DEFAULT_PROPS.type,
-    variant: DEFAULT_PROPS.variant,
-    withoutIcon: DEFAULT_PROPS.withoutIcon,
-    area: DEFAULT_PROPS.area,
-    areaType: DEFAULT_PROPS.areaType
-  },
-  name: 'Playground'
-};
-export const AllVariants = {
-  args: {
-    children: 'Estado del sistema',
-    size: 'medium',
-    type: 'default'
-  },
-  render: args => /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      gap: '16px',
-      flexWrap: 'wrap'
-    }
-  }, Object.keys(VARIANTS).map(variant => /*#__PURE__*/React.createElement(UTStatus, _extends({
-    key: variant
-  }, args, {
-    variant: variant
-  })))),
-  name: 'Todas las Variantes',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Muestra todas las variantes disponibles del componente UTStatus con el tipo por defecto.'
-      }
-    }
-  }
-};
-export const AllTypes = {
-  args: {
-    children: 'Diferentes tipos',
-    size: 'medium',
-    variant: 'success'
-  },
-  render: args => /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      gap: '16px',
-      flexWrap: 'wrap'
-    }
-  }, Object.keys(TYPES).map(type => /*#__PURE__*/React.createElement(UTStatus, _extends({
-    key: type
-  }, args, {
-    type: type
-  })))),
-  name: 'Todos los Tipos',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Muestra todos los tipos de tema disponibles del componente UTStatus con la variante success.'
-      }
-    }
-  }
-};
-export const AllSizes = {
-  args: {
-    type: 'default'
-  },
-  render: args => /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '12px'
-    }
-  }, Object.keys(SIZES).map(size => /*#__PURE__*/React.createElement("div", {
-    key: size,
-    style: {
-      display: 'flex',
-      gap: '8px',
-      alignItems: 'center'
-    }
-  }, Object.keys(VARIANTS).map(variant => /*#__PURE__*/React.createElement(UTStatus, _extends({
-    key: variant
-  }, args, {
-    size: size,
-    variant: variant
-  }), variant))))),
-  name: 'Todos los Tamaños',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Muestra todos los tamaños disponibles del componente UTStatus, con todas las variantes por fila.'
-      }
-    }
-  }
-};
-export const WithTooltip = {
-  args: {
-    children: 'Estado con tooltip',
-    variant: 'warning',
-    tooltip: 'Este es un mensaje de advertencia importante que requiere atención del usuario.'
-  },
-  name: 'Con Tooltip',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Ejemplo del componente UTStatus con tooltip personalizado y propiedades adicionales.'
-      }
-    }
-  }
-};
-export const WithoutIcon = {
-  args: {
-    children: 'Estado sin icono',
-    variant: 'unassigned',
-    withoutIcon: true
-  },
-  name: 'Sin Icono',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Ejemplo del componente UTStatus sin icono, útil para casos donde solo se necesita mostrar el texto del estado.'
-      }
-    }
-  }
-};
-export const CustomIcon = {
-  args: {
-    children: 'Icono personalizado',
-    variant: 'information',
-    Icon: 'IconStar',
-    title: 'Estado destacado con icono personalizado'
-  },
-  name: 'Icono Personalizado',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Ejemplo del componente UTStatus con un icono personalizado que sobrescribe el icono por defecto de la variante.'
-      }
-    }
-  }
-};
-export const WithAdornments = {
-  args: {
-    children: 'Estado con adornos',
-    variant: 'success',
-    adornments: [{
-      name: 'Badge',
-      props: {
-        variant: 'information'
-      }
-    }]
-  },
-  name: 'Con Adornos',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Ejemplo del componente UTStatus con adornos (badges e iconos) adicionales.'
-      }
-    }
-  }
-};
-export const WithoutArea = {
-  args: {
-    children: 'Estado sin área',
-    variant: 'warning',
-    area: false
-  },
-  name: 'Sin Área',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Ejemplo del componente UTStatus sin el área de fondo, útil para integración en diseños más minimalistas.'
-      }
-    }
-  }
-};
-export const RoundedArea = {
-  args: {
-    children: 'Área redondeada',
-    variant: 'success',
-    areaType: 'full'
-  },
-  name: 'Área Redondeada',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Ejemplo del componente UTStatus con área completamente redondeada.'
-      }
-    }
-  }
-};