@envisiongroup/porygon 1.0.1 → 1.0.2

package/dist/react-components/timeline/EFWTimeline/EFWTimeline.d.ts

@@ -0,0 +1,24 @@
+import { EFWTimelineItem, EFWTimelineProps } from './EFWTimeline.types';
+
+/**
+ * `EFWTimeline` — timeline data-driven, flexible y orientable.
+ *
+ * Renderiza una línea de tiempo a partir de `items`, soportando orientación
+ * vertical (por defecto) u horizontal, resolución de iconos por múltiples
+ * criterios (callback > icono del item > mapa por estado > default), badges y
+ * contenido por defecto o totalmente custom (`render`/`renderItem`), y derivación
+ * automática del progreso vía `activeIndex`/`activeId` (por ejemplo, para marcar
+ * "hasta qué etapa llegó" un evento).
+ *
+ * @example
+ * <EFWTimeline
+ *   orientation="vertical"
+ *   activeIndex={2}
+ *   items={[
+ *     { id: 'a', title: 'Descarga', timestamp: '2026-07-01T09:00:00Z' },
+ *     { id: 'b', title: 'Parseo', status: 'error', description: 'Falló' },
+ *     { id: 'c', title: 'Chunk' },
+ *   ]}
+ * />
+ */
+export declare function EFWTimeline<TItem extends EFWTimelineItem = EFWTimelineItem>(props: EFWTimelineProps<TItem>): import("react/jsx-runtime").JSX.Element;

package/dist/react-components/timeline/EFWTimeline/EFWTimeline.js

@@ -0,0 +1,392 @@
+import { jsx as r, jsxs as T, Fragment as J } from "react/jsx-runtime";
+import { makeStyles as Q, tokens as e, mergeClasses as f, Spinner as Y, Caption1 as G, Text as Z, Badge as ee } from "@fluentui/react-components";
+import { CircleRegular as te, ErrorCircleFilled as oe, RecordRegular as ne, CheckmarkCircleFilled as ie } from "@fluentui/react-icons";
+import { resolveActiveIndex as re, resolveItemStatus as ae, isKnownStatus as A, defaultFormatTimestamp as le, DEFAULT_STATUS_COLORS as ce } from "./EFWTimeline.utils.js";
+import { useTimelineLocaleText as se } from "../../i18n/PorygonI18nProvider.js";
+const me = Q({
+  // --- Raíz ---
+  root: {
+    display: "flex",
+    minWidth: 0,
+    // Permite que el timeline nunca desborde su contenedor en móviles.
+    maxWidth: "100%"
+  },
+  rootVertical: {
+    flexDirection: "column"
+  },
+  rootHorizontal: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    columnGap: 0,
+    overflowX: "auto",
+    // Scroll horizontal suave en dispositivos táctiles.
+    WebkitOverflowScrolling: "touch"
+  },
+  // --- Item ---
+  item: {
+    display: "grid",
+    minWidth: 0
+  },
+  itemVertical: {
+    gridTemplateColumns: "auto minmax(0, 1fr)"
+  },
+  itemVerticalSmall: { columnGap: e.spacingHorizontalS },
+  itemVerticalMedium: { columnGap: e.spacingHorizontalM },
+  itemVerticalLarge: { columnGap: e.spacingHorizontalL },
+  itemHorizontal: {
+    gridTemplateRows: "auto minmax(0, 1fr)",
+    rowGap: e.spacingVerticalS,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0,
+    minWidth: "120px"
+  },
+  itemInteractive: {
+    cursor: "pointer",
+    borderRadius: e.borderRadiusMedium,
+    ":hover": {
+      backgroundColor: e.colorNeutralBackground1Hover
+    },
+    ":focus-visible": {
+      outlineWidth: e.strokeWidthThick,
+      outlineStyle: "solid",
+      outlineColor: e.colorStrokeFocus2
+    }
+  },
+  // --- Riel (icono + conector) ---
+  rail: {
+    display: "flex",
+    alignItems: "center"
+  },
+  railVertical: {
+    flexDirection: "column",
+    // Sin gap: el conector queda a ras del icono para una línea continua y
+    // simétrica entre puntos.
+    rowGap: 0
+  },
+  railHorizontal: {
+    flexDirection: "row",
+    columnGap: 0,
+    width: "100%"
+  },
+  // --- Icono ---
+  icon: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    color: e.colorNeutralForeground4,
+    lineHeight: 0
+  },
+  iconDone: { color: e.colorStatusSuccessForeground1 },
+  iconCurrent: { color: e.colorBrandForeground1 },
+  iconError: { color: e.colorStatusDangerForeground1 },
+  iconPending: { color: e.colorNeutralForeground4 },
+  // --- Conector ---
+  connector: {
+    flexGrow: 1,
+    backgroundColor: e.colorNeutralStroke2,
+    borderRadius: e.borderRadiusCircular
+  },
+  connectorVertical: {
+    width: e.strokeWidthThin
+  },
+  connectorHorizontal: {
+    height: e.strokeWidthThin
+  },
+  // Longitud mínima del conector según tamaño.
+  connectorVSmall: {
+    minHeight: e.spacingVerticalS,
+    margin: e.spacingVerticalXS + " 0"
+  },
+  connectorVMedium: {
+    minHeight: e.spacingVerticalM,
+    margin: e.spacingVerticalXS + " 0"
+  },
+  connectorVLarge: {
+    minHeight: e.spacingVerticalL,
+    margin: e.spacingVerticalXS + " 0"
+  },
+  connectorHSmall: {
+    minWidth: e.spacingHorizontalS,
+    // Gap horizontal (izq/der) para separar el conector de ambos iconos.
+    margin: "0 " + e.spacingHorizontalXS
+  },
+  connectorHMedium: {
+    minWidth: e.spacingHorizontalM,
+    margin: "0 " + e.spacingHorizontalS
+  },
+  connectorHLarge: {
+    minWidth: e.spacingHorizontalL,
+    margin: "0 " + e.spacingHorizontalS
+  },
+  connectorDone: {
+    backgroundColor: e.colorStatusSuccessBorderActive
+  },
+  // --- Contenido ---
+  // El padding del contenido es lo que separa un item del siguiente. Como el
+  // conector (flex-grow) llena todo el alto/ancho del riel, la línea llega
+  // hasta el icono siguiente sin cortes.
+  content: {
+    display: "grid",
+    rowGap: e.spacingVerticalXS,
+    minWidth: 0
+  },
+  contentVertical: {},
+  contentVerticalSmall: { paddingBottom: e.spacingVerticalS },
+  contentVerticalMedium: { paddingBottom: e.spacingVerticalL },
+  contentVerticalLarge: { paddingBottom: e.spacingVerticalXXL },
+  contentHorizontal: {},
+  contentHorizontalSmall: { paddingRight: e.spacingHorizontalS },
+  contentHorizontalMedium: { paddingRight: e.spacingHorizontalL },
+  contentHorizontalLarge: { paddingRight: e.spacingHorizontalXXL },
+  timestamp: { color: e.colorNeutralForeground3 },
+  titleRow: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    columnGap: e.spacingHorizontalS,
+    rowGap: e.spacingVerticalXXS
+  },
+  description: { color: e.colorNeutralForeground2 },
+  // --- Tamaños de icono ---
+  sizeSmall: { fontSize: "16px", width: "16px", height: "16px" },
+  sizeMedium: { fontSize: "20px", width: "20px", height: "20px" },
+  sizeLarge: { fontSize: "24px", width: "24px", height: "24px" }
+}), de = {
+  done: /* @__PURE__ */ r(ie, {}),
+  current: /* @__PURE__ */ r(ne, {}),
+  error: /* @__PURE__ */ r(oe, {}),
+  pending: /* @__PURE__ */ r(te, {})
+};
+function ue(t, o) {
+  switch (t) {
+    case "done":
+      return o.iconDone;
+    case "current":
+      return o.iconCurrent;
+    case "error":
+      return o.iconError;
+    case "pending":
+      return o.iconPending;
+    default:
+      return "";
+  }
+}
+function ge(t, o, l) {
+  const p = {
+    small: t.sizeSmall,
+    medium: t.sizeMedium,
+    large: t.sizeLarge
+  }[o], m = {
+    small: t.itemVerticalSmall,
+    medium: t.itemVerticalMedium,
+    large: t.itemVerticalLarge
+  }[o], z = l ? {
+    small: t.connectorVSmall,
+    medium: t.connectorVMedium,
+    large: t.connectorVLarge
+  }[o] : {
+    small: t.connectorHSmall,
+    medium: t.connectorHMedium,
+    large: t.connectorHLarge
+  }[o], V = l ? {
+    small: t.contentVerticalSmall,
+    medium: t.contentVerticalMedium,
+    large: t.contentVerticalLarge
+  }[o] : {
+    small: t.contentHorizontalSmall,
+    medium: t.contentHorizontalMedium,
+    large: t.contentHorizontalLarge
+  }[o];
+  return { sizeClass: p, itemColClass: m, connectorSizeClass: z, contentSizeClass: V };
+}
+function He(t) {
+  const {
+    items: o,
+    orientation: l = "vertical",
+    size: p = "medium",
+    activeIndex: m,
+    activeId: z,
+    statusIcons: V,
+    statusColors: k,
+    statusLabels: N,
+    renderIcon: C,
+    renderItem: I,
+    renderBadge: i,
+    formatTimestamp: d,
+    hideBadges: W = !1,
+    hideConnectors: F = !1,
+    spinnerOnCurrent: u = !1,
+    itemSpacing: a = e.spacingVerticalXL,
+    onItemClick: h,
+    className: v,
+    style: M,
+    slotClassNames: S,
+    labels: D
+  } = t, n = me(), c = l === "vertical", B = re(o, m, z), X = se(
+    D?.noTimestamp != null ? { noTimestamp: D.noTimestamp } : void 0
+  ), { sizeClass: E, itemColClass: O, connectorSizeClass: U, contentSizeClass: _ } = ge(n, p, c), j = "extra-tiny", x = typeof a == "number" ? `${a}px` : a, y = X.noTimestamp;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      role: "list",
+      className: f(
+        n.root,
+        c ? n.rootVertical : n.rootHorizontal,
+        S?.root,
+        v
+      ),
+      style: M,
+      children: o.map((s, H) => {
+        const g = ae(s, H, B), K = H === 0, L = H === o.length - 1, b = {
+          item: s,
+          index: H,
+          status: g,
+          isFirst: K,
+          isLast: L,
+          isActive: B === H,
+          orientation: l
+        }, P = C?.(b) ?? s.icon ?? (u && g === "current" ? /* @__PURE__ */ r(Y, { size: j }) : void 0) ?? V?.[g] ?? (A(g) ? de[g] : null), $ = !F && !L, w = typeof h == "function", q = (R) => {
+          w && (R.key === "Enter" || R.key === " ") && (R.preventDefault(), h?.(b));
+        };
+        return /* @__PURE__ */ T(
+          "div",
+          {
+            role: w ? "button" : "listitem",
+            className: f(
+              n.item,
+              c ? n.itemVertical : n.itemHorizontal,
+              c && O,
+              w && n.itemInteractive,
+              S?.item
+            ),
+            ...w ? {
+              tabIndex: 0,
+              "aria-label": typeof s.title == "string" ? s.title : void 0,
+              onClick: () => h?.(b),
+              onKeyDown: q
+            } : {},
+            children: [
+              /* @__PURE__ */ T(
+                "div",
+                {
+                  className: f(
+                    n.rail,
+                    c ? n.railVertical : n.railHorizontal,
+                    S?.rail
+                  ),
+                  children: [
+                    /* @__PURE__ */ r(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: f(
+                          n.icon,
+                          E,
+                          ue(g, n),
+                          S?.icon
+                        ),
+                        children: P
+                      }
+                    ),
+                    $ ? /* @__PURE__ */ r(
+                      "span",
+                      {
+                        className: f(
+                          n.connector,
+                          c ? n.connectorVertical : n.connectorHorizontal,
+                          U,
+                          g === "done" && n.connectorDone,
+                          S?.connector
+                        )
+                      }
+                    ) : null
+                  ]
+                }
+              ),
+              /* @__PURE__ */ r(
+                "div",
+                {
+                  className: f(
+                    n.content,
+                    c ? n.contentVertical : n.contentHorizontal,
+                    // Sin spacing custom, la distancia la da la clase por tamaño.
+                    // El último item no necesita separación final.
+                    !L && x == null && _,
+                    S?.content,
+                    s.className
+                  ),
+                  style: {
+                    ...!L && x != null ? c ? { paddingBottom: x } : { paddingRight: x } : null,
+                    ...s.style
+                  },
+                  children: pe({
+                    ctx: b,
+                    renderItem: I,
+                    renderBadge: i,
+                    styles: n,
+                    statusColors: k,
+                    statusLabels: N,
+                    localeStatusLabels: X.statusLabels,
+                    hideBadges: W,
+                    formatTimestamp: d,
+                    noTimestampLabel: y
+                  })
+                }
+              )
+            ]
+          },
+          s.id
+        );
+      })
+    }
+  );
+}
+function pe(t) {
+  const {
+    ctx: o,
+    renderItem: l,
+    renderBadge: p,
+    styles: m,
+    statusColors: z,
+    statusLabels: V,
+    localeStatusLabels: k,
+    hideBadges: N,
+    formatTimestamp: C,
+    noTimestampLabel: I
+  } = t, { item: i, status: d } = o;
+  if (i.render)
+    return i.render(o);
+  if (l) {
+    const a = l(o);
+    if (a != null) return a;
+  }
+  const F = i.timestamp != null ? C ? C(i.timestamp, o) : le(i.timestamp) : null;
+  let u = null;
+  if (i.badge !== void 0)
+    u = i.badge;
+  else {
+    const a = p ? p(o) : void 0;
+    if (a !== void 0)
+      u = a;
+    else if (!N) {
+      const h = A(d), v = V?.[d] ?? (h ? k[d] : void 0);
+      if (v != null) {
+        const M = z?.[d] ?? (h ? ce[d] : void 0);
+        u = /* @__PURE__ */ r(ee, { shape: "rounded", size: "small", appearance: "tint", color: M, children: v });
+      }
+    }
+  }
+  return /* @__PURE__ */ T(J, { children: [
+    i.timestamp !== void 0 ? /* @__PURE__ */ r(G, { className: m.timestamp, children: F ?? I }) : null,
+    i.title != null || u != null ? /* @__PURE__ */ T("div", { className: m.titleRow, children: [
+      i.title != null ? /* @__PURE__ */ r(Z, { weight: "semibold", children: i.title }) : null,
+      u
+    ] }) : null,
+    i.description != null ? /* @__PURE__ */ r(G, { className: m.description, children: i.description }) : null
+  ] });
+}
+export {
+  He as EFWTimeline
+};

package/dist/react-components/timeline/EFWTimeline/EFWTimeline.types.d.ts

@@ -0,0 +1,208 @@
+import { BadgeProps } from '@fluentui/react-components';
+import { CSSProperties, ReactNode } from 'react';
+
+/**
+ * Orientación del timeline.
+ *
+ * - `vertical`: los items se apilan de arriba hacia abajo (por defecto), con el
+ *   riel de iconos a la izquierda y el contenido a la derecha. Ideal para
+ *   historiales/etapas de un proceso.
+ * - `horizontal`: los items se disponen de izquierda a derecha, con el icono
+ *   arriba y el contenido debajo. Ideal para wizards/steppers.
+ */
+export type EFWTimelineOrientation = 'vertical' | 'horizontal';
+/**
+ * Densidad visual del timeline. Ajusta de forma coordinada el tamaño del icono,
+ * la separación entre items, el largo mínimo del conector y el padding del
+ * contenido.
+ *
+ * - `small`: compacto, ideal para paneles laterales, drawers, celdas o vistas
+ *   móviles donde el espacio es escaso.
+ * - `medium`: densidad por defecto.
+ * - `large`: más aireado, para vistas destacadas.
+ */
+export type EFWTimelineSize = 'small' | 'medium' | 'large';
+/**
+ * Estados semánticos de un item. Se acepta además cualquier `string` para
+ * estados de dominio propios (el consumidor debe proveer icono/color/label vía
+ * las props de personalización).
+ */
+export type EFWTimelineItemStatus = 'done' | 'current' | 'error' | 'pending' | (string & {});
+/** Estados "conocidos" con defaults incluidos (icono, color y label). */
+export type EFWTimelineKnownStatus = 'done' | 'current' | 'error' | 'pending';
+/**
+ * Contexto entregado a todos los render callbacks. Describe la posición y el
+ * estado ya resuelto del item dentro del timeline.
+ */
+export interface EFWTimelineItemContext<TItem extends EFWTimelineItem> {
+    /** Item original tal como fue provisto. */
+    item: TItem;
+    /** Índice del item dentro de `items`. */
+    index: number;
+    /** Estado ya resuelto (item.status ?? derivado de `activeIndex`). */
+    status: EFWTimelineItemStatus;
+    /** `true` si es el primer item. */
+    isFirst: boolean;
+    /** `true` si es el último item (no dibuja conector). */
+    isLast: boolean;
+    /** `true` si el item coincide con `activeIndex`/`activeId`. */
+    isActive: boolean;
+    /** Orientación efectiva del timeline. */
+    orientation: EFWTimelineOrientation;
+}
+/**
+ * Un item del timeline. Es data-driven: describe el contenido con campos
+ * comunes (title/description/timestamp/badge) y permite reemplazar el contenido
+ * completo con `render`. Extiende esta interfaz para tipar `data`.
+ *
+ * @example
+ * type MyItem = EFWTimelineItem & { data: { userId: string } };
+ */
+export interface EFWTimelineItem {
+    /** Identidad estable del item (para React keys y `activeId`). */
+    id: string | number;
+    /**
+     * Estado del item. Si se omite y se pasa `activeIndex`/`activeId`, el
+     * timeline lo deriva (antes → `done`, igual → `current`, después →
+     * `pending`).
+     */
+    status?: EFWTimelineItemStatus;
+    /** Título principal del item. */
+    title?: ReactNode;
+    /** Descripción secundaria del item. */
+    description?: ReactNode;
+    /** Marca de tiempo; se formatea con `formatTimestamp`. */
+    timestamp?: string | number | Date | null;
+    /**
+     * Badge a mostrar. Si se omite y el estado es conocido, se muestra un badge
+     * por defecto con el color/label del estado. Pasa `null` para ocultarlo solo
+     * en este item.
+     */
+    badge?: ReactNode;
+    /**
+     * Icono explícito de este item. Precedencia:
+     * `renderIcon` > `item.icon` > `statusIcons[status]` > default por estado.
+     */
+    icon?: ReactNode;
+    /** Clase CSS aplicada al contenido de este item. */
+    className?: string;
+    /** Estilos inline aplicados al contenido de este item. */
+    style?: CSSProperties;
+    /**
+     * Reemplaza TODO el contenido de este item por lo que retorne. Tiene
+     * prioridad sobre `renderItem` a nivel timeline y sobre los campos comunes.
+     */
+    render?: (ctx: EFWTimelineItemContext<this>) => ReactNode;
+    /** Payload de dominio arbitrario (tipar extendiendo la interfaz). */
+    data?: unknown;
+}
+/**
+ * Clases CSS por "slot" interno, para overrides finos sin romper el layout.
+ */
+export interface EFWTimelineSlotClassNames {
+    /** Contenedor raíz del timeline. */
+    root?: string;
+    /** Contenedor de cada item. */
+    item?: string;
+    /** Riel (columna/fila del icono + conector). */
+    rail?: string;
+    /** Envoltorio del icono. */
+    icon?: string;
+    /** Conector entre items. */
+    connector?: string;
+    /** Contenedor del contenido. */
+    content?: string;
+}
+/** Iconos por estado. Sobrescribe (parcialmente) los defaults por estado. */
+export type EFWTimelineStatusIcons = Partial<Record<EFWTimelineItemStatus, ReactNode>>;
+/** Color de Badge por estado (Fluent Badge `color`). */
+export type EFWTimelineStatusColors = Partial<Record<EFWTimelineItemStatus, BadgeProps['color']>>;
+/** Label de Badge por estado. */
+export type EFWTimelineStatusLabels = Partial<Record<EFWTimelineItemStatus, string>>;
+/** Textos internos localizables del componente. */
+export interface EFWTimelineLabels {
+    /** Texto cuando `timestamp` es `null`/vacío. Default: "Sin fecha registrada". */
+    noTimestamp?: string;
+}
+/**
+ * Props del componente `EFWTimeline`.
+ *
+ * @template TItem Tipo del item (extiende `EFWTimelineItem` para tipar `data`).
+ */
+export interface EFWTimelineProps<TItem extends EFWTimelineItem = EFWTimelineItem> {
+    /** Items a renderizar, en orden. */
+    items: readonly TItem[];
+    /** Orientación del timeline. @default 'vertical' */
+    orientation?: EFWTimelineOrientation;
+    /** Densidad visual (icono, espaciado, conector y padding). @default 'medium' */
+    size?: EFWTimelineSize;
+    /**
+     * Índice del item "actual" (0-based). Cuando un item no define `status`,
+     * el timeline deriva: `index < activeIndex` → `done`, `index === activeIndex`
+     * → `current`, `index > activeIndex` → `pending`.
+     */
+    activeIndex?: number;
+    /** Igual que `activeIndex` pero por `id` (tiene prioridad si ambos existen). */
+    activeId?: TItem['id'];
+    /** Iconos por estado (override parcial de los defaults). */
+    statusIcons?: EFWTimelineStatusIcons;
+    /** Colores de badge por estado. */
+    statusColors?: EFWTimelineStatusColors;
+    /** Labels de badge por estado. */
+    statusLabels?: EFWTimelineStatusLabels;
+    /**
+     * Resuelve el icono de cada item. Máxima prioridad. Retorna `undefined`/
+     * `null` para caer en la cadena `item.icon` > `statusIcons` > default.
+     */
+    renderIcon?: (ctx: EFWTimelineItemContext<TItem>) => ReactNode;
+    /**
+     * Reemplaza el contenido de cada item. `item.render` tiene prioridad sobre
+     * esto. Retornar `undefined` cae en el render por defecto (campos comunes).
+     */
+    renderItem?: (ctx: EFWTimelineItemContext<TItem>) => ReactNode;
+    /**
+     * Personaliza por completo el badge que acompaña al título, para cada item.
+     * Recibe el contexto y decide qué renderizar, sin depender de los labels/
+     * colores por defecto (útil para evitar textos por defecto o usar tu propio
+     * componente de badge).
+     *
+     * Precedencia: `item.badge` (si está definido) tiene prioridad sobre esto.
+     *
+     * Semántica del valor retornado:
+     * - `undefined` → cae en el badge por defecto (respetando `hideBadges`).
+     * - `null` → oculta el badge para ese item.
+     * - cualquier `ReactNode` → se usa tal cual como badge.
+     */
+    renderBadge?: (ctx: EFWTimelineItemContext<TItem>) => ReactNode;
+    /** Formatea el timestamp. Default: `Date.toLocaleString()`. */
+    formatTimestamp?: (value: NonNullable<EFWTimelineItem['timestamp']>, ctx: EFWTimelineItemContext<TItem>) => ReactNode;
+    /** Oculta todos los badges por defecto. @default false */
+    hideBadges?: boolean;
+    /**
+     * Renderiza un spinner en el icono del item en curso (el elemento activo,
+     * es decir `status === 'current'`). Útil para indicar que ese paso está en
+     * progreso. No afecta a `renderIcon` ni a `item.icon`, que siguen teniendo
+     * prioridad. @default false
+     */
+    spinnerOnCurrent?: boolean;
+    /** Oculta los conectores entre items. @default false */
+    hideConnectors?: boolean;
+    /**
+     * Distancia entre items del timeline. Sobrescribe la separación por defecto
+     * derivada de `size`. En vertical controla el espacio vertical (y por tanto
+     * el largo del conector); en horizontal, el espacio horizontal. Un `number`
+     * se interpreta como px; también acepta cualquier unidad CSS válida
+     * (`'1.5rem'`, `'24px'`, un token de spacing, etc.).
+     */
+    itemSpacing?: number | string;
+    /** Callback al hacer click en un item (lo hace interactivo/accesible). */
+    onItemClick?: (ctx: EFWTimelineItemContext<TItem>) => void;
+    /** Clase del contenedor raíz. */
+    className?: string;
+    /** Estilos inline del contenedor raíz. */
+    style?: CSSProperties;
+    /** Clases por slot interno. */
+    slotClassNames?: EFWTimelineSlotClassNames;
+    /** Textos internos localizables. */
+    labels?: EFWTimelineLabels;
+}

package/dist/react-components/timeline/EFWTimeline/EFWTimeline.utils.d.ts

@@ -0,0 +1,30 @@
+import { BadgeProps } from '@fluentui/react-components';
+import { EFWTimelineItem, EFWTimelineItemStatus, EFWTimelineKnownStatus } from './EFWTimeline.types';
+
+/**
+ * Helpers puros de `EFWTimeline`. Sin dependencias de React ni JSX para poder
+ * testearlos de forma aislada.
+ */
+/** Colores de badge por estado conocido (Fluent Badge `color`). */
+export declare const DEFAULT_STATUS_COLORS: Record<EFWTimelineKnownStatus, BadgeProps['color']>;
+/** Labels de badge por estado conocido (español, localizable vía props). */
+export declare const DEFAULT_STATUS_LABELS: Record<EFWTimelineKnownStatus, string>;
+/** Type guard: ¿el estado es uno de los conocidos con defaults? */
+export declare function isKnownStatus(status: EFWTimelineItemStatus): status is EFWTimelineKnownStatus;
+/**
+ * Resuelve el índice activo a partir de `activeId` (prioritario) o `activeIndex`.
+ * Retorna `undefined` si no hay ninguno resoluble.
+ */
+export declare function resolveActiveIndex(items: readonly EFWTimelineItem[], activeIndex: number | undefined, activeId: EFWTimelineItem['id'] | undefined): number | undefined;
+/**
+ * Deriva un estado desde la posición relativa al índice activo.
+ * `index < active` → `done`; `index === active` → `current`; resto → `pending`.
+ */
+export declare function deriveStatusFromActive(index: number, activeIndex: number): EFWTimelineKnownStatus;
+/**
+ * Estado efectivo de un item: usa `item.status` explícito; si falta, deriva de
+ * `activeIndex`; si tampoco hay, cae en `pending`.
+ */
+export declare function resolveItemStatus(item: EFWTimelineItem, index: number, activeIndex: number | undefined): EFWTimelineItemStatus;
+/** Formateo por defecto de timestamps (fecha/hora local). */
+export declare function defaultFormatTimestamp(value: NonNullable<EFWTimelineItem['timestamp']>): string;

package/dist/react-components/timeline/EFWTimeline/EFWTimeline.utils.js

@@ -0,0 +1,45 @@
+const s = {
+  done: "success",
+  current: "brand",
+  error: "danger",
+  pending: "informative"
+}, c = {
+  done: "Completada",
+  current: "En curso",
+  error: "Con error",
+  pending: "Pendiente"
+}, i = [
+  "done",
+  "current",
+  "error",
+  "pending"
+];
+function d(n) {
+  return i.includes(n);
+}
+function f(n, r, t) {
+  if (t != null) {
+    const e = n.findIndex((u) => u.id === t);
+    if (e >= 0) return e;
+  }
+  if (r != null && Number.isFinite(r)) return r;
+}
+function o(n, r) {
+  return n < r ? "done" : n === r ? "current" : "pending";
+}
+function S(n, r, t) {
+  return n.status != null ? n.status : t != null ? o(r, t) : "pending";
+}
+function a(n) {
+  const r = n instanceof Date ? n : new Date(n);
+  return Number.isNaN(r.getTime()) ? String(n) : r.toLocaleString();
+}
+export {
+  s as DEFAULT_STATUS_COLORS,
+  c as DEFAULT_STATUS_LABELS,
+  a as defaultFormatTimestamp,
+  o as deriveStatusFromActive,
+  d as isKnownStatus,
+  f as resolveActiveIndex,
+  S as resolveItemStatus
+};