@widergy/energy-ui 3.172.2 → 3.172.3

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

@@ -1,350 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WhiteVariants = exports.TopRight = exports.TopLeft = exports.Test = exports.SinIcono = exports.SemanticLight = exports.SemanticDark = exports.Playground = exports.ConMarkdown = exports.ConDescripcion = exports.ConAcciones = exports.ConAccionPrimaria = exports.BottomRight = exports.AllVariants = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _UTButton = _interopRequireDefault(require("../../UTButton"));
-var _ = _interopRequireDefault(require(".."));
-var _constants = require("../constants");
-var _storiesConstants = require("./storiesConstants");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-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); }
-const SEMANTIC_COLOR_THEMES = [_constants.COLOR_THEMES.success, _constants.COLOR_THEMES.error, _constants.COLOR_THEMES.warning, _constants.COLOR_THEMES.info];
-const AllTypesDemo = () => {
-  const [snackState, setSnackState] = (0, _react.useState)({
-    open: false
-  });
-  const show = function (colorTheme) {
-    let variant = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.VARIANTS.dark;
-    return setSnackState({
-      colorTheme,
-      message: "Alerta de tipo: ".concat(colorTheme),
-      open: true,
-      variant
-    });
-  };
-  const handleClose = () => setSnackState(prev => ({
-    ...prev,
-    open: false
-  }));
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '8px',
-      maxWidth: '400px'
-    }
-  }, /*#__PURE__*/_react.default.createElement("p", {
-    style: {
-      fontSize: '12px',
-      fontWeight: 600,
-      margin: '0 0 4px'
-    }
-  }, "Dark"), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: 'flex',
-      gap: '8px',
-      flexWrap: 'wrap'
-    }
-  }, SEMANTIC_COLOR_THEMES.map(colorTheme => /*#__PURE__*/_react.default.createElement(_UTButton.default, {
-    key: colorTheme,
-    onClick: () => show(colorTheme),
-    size: "small",
-    variant: "outlined"
-  }, colorTheme)), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
-    onClick: () => show(_constants.COLOR_THEMES.white),
-    size: "small",
-    variant: "outlined"
-  }, "white")), /*#__PURE__*/_react.default.createElement("p", {
-    style: {
-      fontSize: '12px',
-      fontWeight: 600,
-      margin: '8px 0 4px'
-    }
-  }, "Light"), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: 'flex',
-      gap: '8px',
-      flexWrap: 'wrap'
-    }
-  }, SEMANTIC_COLOR_THEMES.map(colorTheme => /*#__PURE__*/_react.default.createElement(_UTButton.default, {
-    key: colorTheme,
-    onClick: () => show(colorTheme, _constants.VARIANTS.light),
-    size: "small",
-    variant: "outlined"
-  }, colorTheme, " light")), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
-    onClick: () => show(_constants.COLOR_THEMES.white, _constants.VARIANTS.light),
-    size: "small",
-    variant: "outlined"
-  }, "white light")), /*#__PURE__*/_react.default.createElement(_.default, _extends({}, snackState, {
-    onClose: handleClose
-  })));
-};
-var _default = exports.default = {
-  args: {
-    message: 'Operación realizada exitosamente.',
-    open: true,
-    colorTheme: _constants.DEFAULT_PROPS.colorTheme,
-    position: _constants.DEFAULT_PROPS.position,
-    variant: _constants.DEFAULT_PROPS.variant,
-    withoutIcon: false,
-    icon: undefined,
-    timeDuration: undefined,
-    button: undefined,
-    secondaryButton: undefined,
-    description: undefined
-  },
-  argTypes: _storiesConstants.ARG_TYPES,
-  component: _.default,
-  parameters: {
-    controls: {
-      exclude: ['dataTestId', 'onClose']
-    },
-    docs: {
-      description: {
-        component: 'Componente de notificación tipo Snackbar. Soporta cinco `colorTheme`: los cuatro semánticos (`success`, `error`, `warning`, `info`) y `white` para notificaciones neutras. La prop `variant` controla si el fondo es oscuro o claro.'
-      }
-    }
-  },
-  title: 'Energy-UI/UTSnackbar'
-};
-const Playground = exports.Playground = {
-  name: 'Playground'
-};
-const AllVariants = exports.AllVariants = {
-  name: 'Todas las Variantes',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Hacé clic en cada botón para ver la variante correspondiente.'
-      }
-    }
-  },
-  render: () => /*#__PURE__*/_react.default.createElement(AllTypesDemo, null)
-};
-const SemanticDark = exports.SemanticDark = {
-  args: {
-    message: 'El archivo fue guardado correctamente.',
-    open: true,
-    colorTheme: _constants.COLOR_THEMES.success,
-    variant: _constants.VARIANTS.dark
-  },
-  name: 'Semántico / Dark',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Fondo con el color semántico saturado y texto blanco. Cambiá `colorTheme` en el panel de controls para ver los cuatro tipos semánticos.'
-      }
-    }
-  }
-};
-const SemanticLight = exports.SemanticLight = {
-  args: {
-    message: 'El archivo fue guardado correctamente.',
-    open: true,
-    colorTheme: _constants.COLOR_THEMES.success,
-    variant: _constants.VARIANTS.light
-  },
-  name: 'Semántico / Light',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Fondo claro con texto oscuro accesible. Cambiá `colorTheme` para ver los cuatro tipos semánticos.'
-      }
-    }
-  }
-};
-const WhiteVariants = exports.WhiteVariants = {
-  args: {
-    message: 'Notificación sin semántica asociada.',
-    open: true,
-    colorTheme: _constants.COLOR_THEMES.white,
-    variant: _constants.VARIANTS.light
-  },
-  name: 'White',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Variante neutra sin semántica de color. Con `variant="light"` el fondo es blanco; con `variant="dark"` el fondo es oscuro.'
-      }
-    }
-  }
-};
-const ConAccionPrimaria = exports.ConAccionPrimaria = {
-  args: {
-    button: {
-      title: 'Deshacer'
-    },
-    message: 'Se eliminaron 3 elementos.',
-    open: true,
-    colorTheme: _constants.COLOR_THEMES.error,
-    variant: _constants.VARIANTS.dark
-  },
-  name: 'Con Acción Primaria',
-  parameters: {
-    docs: {
-      description: {
-        story: 'La prop `button` agrega un botón de texto a la derecha del mensaje. Pasar `onClick` dentro del objeto para manejar el evento.'
-      }
-    }
-  }
-};
-const ConAcciones = exports.ConAcciones = {
-  args: {
-    button: {
-      title: 'Confirmar'
-    },
-    secondaryButton: {
-      title: 'Cancelar'
-    },
-    message: 'Se eliminaron 3 elementos.',
-    open: true,
-    colorTheme: _constants.COLOR_THEMES.error,
-    variant: _constants.VARIANTS.dark
-  },
-  name: 'Con Acciones Primaria y Secundaria',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Con `button` y `secondaryButton` se muestran dos botones de acción. Cualquier prop de `UTButton` puede pasarse dentro del objeto para personalizar su comportamiento.'
-      }
-    }
-  }
-};
-const ConDescripcion = exports.ConDescripcion = {
-  args: {
-    message: 'El archivo fue guardado correctamente.',
-    description: 'Los cambios se aplicarán en la próxima sesión.',
-    open: true,
-    colorTheme: _constants.COLOR_THEMES.success,
-    variant: _constants.VARIANTS.light
-  },
-  name: 'Con Descripción',
-  parameters: {
-    docs: {
-      description: {
-        story: 'La prop `description` agrega un texto secundario debajo del mensaje principal con tipografía `small`.'
-      }
-    }
-  }
-};
-const ConMarkdown = exports.ConMarkdown = {
-  args: {
-    message: 'El archivo **reporte_enero.pdf** fue generado *exitosamente*.',
-    open: true,
-    colorTheme: _constants.COLOR_THEMES.success,
-    variant: _constants.VARIANTS.light
-  },
-  name: 'Con Markdown',
-  parameters: {
-    docs: {
-      description: {
-        story: 'El campo `message` soporta sintaxis markdown a través de `UTLabel`.'
-      }
-    }
-  }
-};
-const TopRight = exports.TopRight = {
-  args: {
-    message: 'Esta notificación aparece en la esquina superior derecha.',
-    open: true,
-    colorTheme: _constants.COLOR_THEMES.info,
-    position: _constants.POSITIONS.topRight,
-    variant: _constants.VARIANTS.dark
-  },
-  name: 'Posición Superior Derecha',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Con `position="topRight"` el snackbar aparece en la esquina superior derecha con slide desde la derecha.'
-      }
-    }
-  }
-};
-const BottomRight = exports.BottomRight = {
-  args: {
-    message: 'Esta notificación aparece en la esquina inferior derecha.',
-    open: true,
-    colorTheme: _constants.COLOR_THEMES.success,
-    position: _constants.POSITIONS.bottomRight,
-    variant: _constants.VARIANTS.dark
-  },
-  name: 'Posición Inferior Derecha',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Con `position="bottomRight"` el snackbar aparece en la esquina inferior derecha con slide desde abajo.'
-      }
-    }
-  }
-};
-const TopLeft = exports.TopLeft = {
-  args: {
-    message: 'Esta notificación aparece en la esquina superior izquierda.',
-    open: true,
-    colorTheme: _constants.COLOR_THEMES.warning,
-    position: _constants.POSITIONS.topLeft,
-    variant: _constants.VARIANTS.dark
-  },
-  name: 'Posición Superior Izquierda',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Con `position="topLeft"` el snackbar aparece en la esquina superior izquierda con slide desde arriba.'
-      }
-    }
-  }
-};
-const SinIcono = exports.SinIcono = {
-  args: {
-    message: 'Notificación sin ícono.',
-    open: true,
-    colorTheme: _constants.COLOR_THEMES.warning,
-    variant: _constants.VARIANTS.dark,
-    withoutIcon: true
-  },
-  name: 'Sin Ícono',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Con `withoutIcon: true` se oculta el ícono.'
-      }
-    }
-  }
-};
-const Test = exports.Test = {
-  name: 'Test',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Story para el Storybook Test Runner. Renderiza variantes simultáneas para verificar el correcto renderizado.'
-      }
-    }
-  },
-  render: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, {
-    colorTheme: _constants.COLOR_THEMES.success,
-    message: "success dark",
-    open: true
-  }), /*#__PURE__*/_react.default.createElement(_.default, {
-    colorTheme: _constants.COLOR_THEMES.error,
-    message: "error light",
-    open: true,
-    variant: _constants.VARIANTS.light
-  }), /*#__PURE__*/_react.default.createElement(_.default, {
-    colorTheme: _constants.COLOR_THEMES.white,
-    message: "white dark",
-    open: true,
-    variant: _constants.VARIANTS.dark
-  }), /*#__PURE__*/_react.default.createElement(_.default, {
-    button: {
-      title: 'Acción'
-    },
-    colorTheme: _constants.COLOR_THEMES.info,
-    description: "Texto secundario de descripci\xF3n",
-    message: "Con descripci\xF3n",
-    open: true
-  }))
-};

package/dist/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;
-```