@conatel-sa/react-ui 0.2.3 → 0.2.5

package/dist/index.mjs

@@ -653,7 +653,79 @@ function eo({
     u,
     {
       className: Ne,
-      style: { colorScheme: "light", ...c },
+      style: {
+        colorScheme: "light",
+        ...(p === "conatel" ? {
+          "--font-sans": "Inter, system-ui, -apple-system, sans-serif",
+          "--color-brand": "#CC032E",
+          "--color-brand-hover": "#a30225",
+          "--color-brand-active": "#CC032E",
+          "--color-brand-light": "#fdf2f4",
+          "--color-accent": "#757578",
+          "--color-accent-hover": "#5F6062",
+          "--color-accent-light": "#f3f3f3",
+          "--color-text": "#2C2C2C",
+          "--color-text-muted": "#757578",
+          "--color-text-subtle": "#BCC0C3",
+          "--color-border": "#BCC0C3",
+          "--color-border-strong": "#5F6062",
+          "--color-border-focus": "#CC032E",
+          "--focus-ring": "0 0 0 3px rgba(204, 3, 46, 0.1)",
+          "--radius-md": "8px",
+          "--radius-lg": "12px",
+          "--shadow-sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+          "--shadow-md": "0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05)",
+          "--shadow-lg": "0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05)",
+          "--color-bg": "#f4f6f8",
+          "--color-bg-alt": "#f8fafc",
+          "--color-surface": "#ffffff",
+          "--color-surface-raised": "#ffffff",
+          "--color-secondary-contrast": "#ffffff",
+          "--color-tertiary": "#4F4F50",
+          "--color-tertiary-hover": "#383839",
+          "--color-success": "#10b981",
+          "--color-success-light": "rgba(16, 185, 129, 0.1)",
+          "--color-warning": "#f59e0b",
+          "--color-warning-light": "rgba(245, 158, 11, 0.1)",
+          "--color-error": "#CC032E",
+          "--color-error-light": "rgba(204, 3, 46, 0.1)"
+        } : p === "vivion" ? {
+          "--font-sans": "Inter, system-ui, -apple-system, sans-serif",
+          "--color-brand": "#0098D4",
+          "--color-brand-hover": "#0098D4",
+          "--color-brand-active": "#0098D4",
+          "--color-brand-light": "#e5f5fd",
+          "--color-accent": "#757578",
+          "--color-accent-hover": "#5F6062",
+          "--color-accent-light": "#f3f3f3",
+          "--color-text": "#2C2C2C",
+          "--color-text-muted": "#757578",
+          "--color-text-subtle": "#BCC0C3",
+          "--color-border": "#BCC0C3",
+          "--color-border-strong": "#5F6062",
+          "--color-border-focus": "#0098D4",
+          "--focus-ring": "0 0 0 3px rgba(0, 152, 212, 0.12)",
+          "--radius-md": "8px",
+          "--radius-lg": "12px",
+          "--shadow-sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+          "--shadow-md": "0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05)",
+          "--shadow-lg": "0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05)",
+          "--color-bg": "#f4f6f8",
+          "--color-bg-alt": "#f8fafc",
+          "--color-surface": "#ffffff",
+          "--color-surface-raised": "#ffffff",
+          "--color-secondary-contrast": "#ffffff",
+          "--color-tertiary": "#4F4F50",
+          "--color-tertiary-hover": "#383839",
+          "--color-success": "#10b981",
+          "--color-success-light": "rgba(16, 185, 129, 0.1)",
+          "--color-warning": "#f59e0b",
+          "--color-warning-light": "rgba(245, 158, 11, 0.1)",
+          "--color-error": "#CC032E",
+          "--color-error-light": "rgba(204, 3, 46, 0.1)"
+        } : {}),
+        ...c
+      },
       "data-theme": p,
       children: o
     },

package/dist/material-symbols.css

@@ -0,0 +1,20 @@
+/**
+ * Estilos base para Material Symbols Outlined (alineado con patrones de apps que usan
+ * la misma familia tipográfica). Importar junto con `dist/index.css` del ThemeProvider.
+ */
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined', system-ui, -apple-system, sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  color: currentColor;
+}

package/dist/metrics.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from 'react';
+
+export type StatInlineProps = {
+  label: string;
+  value: string;
+  accentColor?: string;
+  style?: CSSProperties;
+};
+export declare function StatInline(props: StatInlineProps): JSX.Element;
+
+export type MiniMeterProps = {
+  label: string;
+  value: number;
+  valueText?: string;
+  color?: string;
+  labelWidth?: string;
+  style?: CSSProperties;
+};
+export declare function MiniMeter(props: MiniMeterProps): JSX.Element;

package/dist/metrics.mjs

@@ -0,0 +1,94 @@
+// src/components/metrics/StatInline.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function StatInline({ label, value, accentColor = "var(--color-primary, #2563eb)", style }) {
+  const border = `${accentColor}33`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        background: "var(--color-bg-tertiary, #f9fafb)",
+        border: `1px solid ${border}`,
+        borderRadius: "var(--radius-md, 8px)",
+        padding: "var(--space-2, 8px) var(--space-3, 12px)",
+        minWidth: "5rem",
+        textAlign: "center",
+        fontFamily: "var(--font-sans, system-ui)",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { fontSize: "1.1rem", fontWeight: 700, color: accentColor }, children: value }),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: "0.7rem", color: "var(--color-text-muted, #6b7280)", marginTop: "0.1rem" }, children: label })
+      ]
+    }
+  );
+}
+
+// src/components/metrics/MiniMeter.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function MiniMeter({
+  label,
+  value,
+  valueText,
+  color = "var(--color-primary, #2563eb)",
+  labelWidth = "120px",
+  style
+}) {
+  const pct = Math.max(0, Math.min(100, value));
+  const right = valueText ?? `${Math.round(pct)}%`;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: `${labelWidth} 1fr 54px`,
+        gap: "var(--space-2, 8px)",
+        alignItems: "center",
+        marginBottom: "0.35rem",
+        fontFamily: "var(--font-sans, system-ui)",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx2("span", { style: { fontSize: "0.75rem", color: "var(--color-text-muted, #6b7280)", overflow: "hidden", textOverflow: "ellipsis" }, children: label }),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              height: "0.75rem",
+              background: "var(--color-bg-tertiary, #f3f4f6)",
+              borderRadius: "9999px",
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsx2(
+              "div",
+              {
+                style: {
+                  width: `${pct}%`,
+                  minWidth: pct > 0 ? "2px" : "0",
+                  height: "100%",
+                  background: color,
+                  borderRadius: "9999px"
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            style: {
+              fontSize: "0.75rem",
+              fontWeight: 600,
+              color: "var(--color-text, #111827)",
+              textAlign: "right"
+            },
+            children: right
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  MiniMeter,
+  StatInline
+};

package/dist/metrics.umd.js

@@ -0,0 +1,143 @@
+"use strict";
+var ReactLibraryMetrics = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/metrics-entry.ts
+  var metrics_entry_exports = {};
+  __export(metrics_entry_exports, {
+    MiniMeter: () => MiniMeter,
+    StatInline: () => StatInline
+  });
+
+  // tools/react-shim.mjs
+  var R = typeof window !== "undefined" && window.React ? window.React : {};
+  var react_shim_default = R;
+  var {
+    useContext,
+    useEffect,
+    useLayoutEffect,
+    useMemo,
+    useState,
+    useRef,
+    useCallback,
+    useId,
+    createContext,
+    Fragment
+  } = R;
+
+  // tools/jsx-runtime-shim.mjs
+  function jsx(type, props, key) {
+    const p = key != null ? { ...props, key } : props;
+    return react_shim_default.createElement(type, p);
+  }
+  function jsxs(type, props, key) {
+    return jsx(type, props, key);
+  }
+  var Fragment2 = react_shim_default.Fragment;
+
+  // src/components/metrics/StatInline.tsx
+  function StatInline({ label, value, accentColor = "var(--color-primary, #2563eb)", style }) {
+    const border = `${accentColor}33`;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          background: "var(--color-bg-tertiary, #f9fafb)",
+          border: `1px solid ${border}`,
+          borderRadius: "var(--radius-md, 8px)",
+          padding: "var(--space-2, 8px) var(--space-3, 12px)",
+          minWidth: "5rem",
+          textAlign: "center",
+          fontFamily: "var(--font-sans, system-ui)",
+          ...style
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { style: { fontSize: "1.1rem", fontWeight: 700, color: accentColor }, children: value }),
+          /* @__PURE__ */ jsx("div", { style: { fontSize: "0.7rem", color: "var(--color-text-muted, #6b7280)", marginTop: "0.1rem" }, children: label })
+        ]
+      }
+    );
+  }
+
+  // src/components/metrics/MiniMeter.tsx
+  function MiniMeter({
+    label,
+    value,
+    valueText,
+    color = "var(--color-primary, #2563eb)",
+    labelWidth = "120px",
+    style
+  }) {
+    const pct = Math.max(0, Math.min(100, value));
+    const right = valueText ?? `${Math.round(pct)}%`;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: `${labelWidth} 1fr 54px`,
+          gap: "var(--space-2, 8px)",
+          alignItems: "center",
+          marginBottom: "0.35rem",
+          fontFamily: "var(--font-sans, system-ui)",
+          ...style
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "0.75rem", color: "var(--color-text-muted, #6b7280)", overflow: "hidden", textOverflow: "ellipsis" }, children: label }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                height: "0.75rem",
+                background: "var(--color-bg-tertiary, #f3f4f6)",
+                borderRadius: "9999px",
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: `${pct}%`,
+                    minWidth: pct > 0 ? "2px" : "0",
+                    height: "100%",
+                    background: color,
+                    borderRadius: "9999px"
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: "0.75rem",
+                fontWeight: 600,
+                color: "var(--color-text, #111827)",
+                textAlign: "right"
+              },
+              children: right
+            }
+          )
+        ]
+      }
+    );
+  }
+  return __toCommonJS(metrics_entry_exports);
+})();

package/dist/status.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties } from 'react';
+
+export type StatusSummaryState = 'ok' | 'warn' | 'error' | 'pending';
+export type StatusSummaryItem = {
+  label: string;
+  state: StatusSummaryState;
+  detail?: string;
+};
+export type StatusSummaryPopoverProps = {
+  items: StatusSummaryItem[];
+  triggerLabel?: string;
+  summaryIcon?: string;
+  color?: string;
+  style?: CSSProperties;
+};
+export declare function StatusSummaryPopover(props: StatusSummaryPopoverProps): JSX.Element;

package/dist/status.mjs

@@ -0,0 +1,117 @@
+// src/components/status/StatusSummaryPopover.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function stateIcon(state) {
+  switch (state) {
+    case "ok":
+      return "check_circle";
+    case "warn":
+      return "warning";
+    case "error":
+      return "error";
+    case "pending":
+    default:
+      return "schedule";
+  }
+}
+function stateColor(state) {
+  switch (state) {
+    case "ok":
+      return "var(--color-success, #22c55e)";
+    case "warn":
+      return "var(--color-warning, #eab308)";
+    case "error":
+      return "var(--color-error, #ef4444)";
+    case "pending":
+    default:
+      return "var(--color-text-muted, #6b7280)";
+  }
+}
+function StatusSummaryPopover({
+  items,
+  triggerLabel = "Estado de sistemas",
+  summaryIcon = "monitoring",
+  color,
+  style
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const triggerColor = color ?? (items.some((i) => i.state === "error") ? "var(--color-error, #ef4444)" : items.some((i) => i.state === "warn") ? "var(--color-warning, #eab308)" : items.every((i) => i.state === "ok") ? "var(--color-success, #22c55e)" : "var(--color-text-muted, #6b7280)");
+  useEffect(() => {
+    if (!open) return;
+    const handle = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handle);
+    return () => document.removeEventListener("mousedown", handle);
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { ref, style: { position: "relative", display: "inline-flex", alignItems: "center", ...style }, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        title: triggerLabel,
+        "aria-label": triggerLabel,
+        "aria-expanded": open,
+        onClick: () => setOpen((v) => !v),
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          padding: "0.25rem",
+          marginRight: "0.25rem",
+          background: "transparent",
+          border: "none",
+          color: triggerColor,
+          cursor: "pointer",
+          borderRadius: "4px"
+        },
+        children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", style: { fontSize: "1.5rem" }, "aria-hidden": true, children: summaryIcon })
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "tooltip",
+        style: {
+          position: "absolute",
+          top: "100%",
+          right: 0,
+          marginTop: "0.25rem",
+          minWidth: "220px",
+          maxWidth: "300px",
+          padding: "0.75rem",
+          zIndex: 1e3,
+          background: "var(--color-surface, #ffffff)",
+          border: "1px solid var(--color-border, #e5e7eb)",
+          borderRadius: "var(--radius-md, 8px)",
+          boxShadow: "var(--shadow-md, 0 4px 12px rgba(0,0,0,.1))",
+          fontFamily: "var(--font-sans, system-ui)"
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { style: { fontSize: "0.8rem", color: "var(--color-text-muted, #6b7280)", marginBottom: "0.5rem" }, children: "Resumen" }),
+          items.map((row, i) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "0.5rem",
+                fontSize: "0.85rem",
+                marginTop: i > 0 ? "0.35rem" : 0
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", style: { fontSize: "1rem", color: stateColor(row.state) }, "aria-hidden": true, children: stateIcon(row.state) }),
+                /* @__PURE__ */ jsx("span", { style: { flex: 1, minWidth: 0 }, children: row.label }),
+                /* @__PURE__ */ jsx("span", { style: { color: "var(--color-text-muted, #6b7280)", whiteSpace: "nowrap", fontSize: "0.8rem" }, children: row.detail ?? "" })
+              ]
+            },
+            `${row.label}-${i}`
+          ))
+        ]
+      }
+    ) : null
+  ] });
+}
+export {
+  StatusSummaryPopover
+};

package/dist/status.umd.js

@@ -0,0 +1,166 @@
+"use strict";
+var ReactLibraryStatus = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/status-entry.ts
+  var status_entry_exports = {};
+  __export(status_entry_exports, {
+    StatusSummaryPopover: () => StatusSummaryPopover
+  });
+
+  // tools/react-shim.mjs
+  var R = typeof window !== "undefined" && window.React ? window.React : {};
+  var react_shim_default = R;
+  var {
+    useContext,
+    useEffect,
+    useLayoutEffect,
+    useMemo,
+    useState,
+    useRef,
+    useCallback,
+    useId,
+    createContext,
+    Fragment
+  } = R;
+
+  // tools/jsx-runtime-shim.mjs
+  function jsx(type, props, key) {
+    const p = key != null ? { ...props, key } : props;
+    return react_shim_default.createElement(type, p);
+  }
+  function jsxs(type, props, key) {
+    return jsx(type, props, key);
+  }
+  var Fragment2 = react_shim_default.Fragment;
+
+  // src/components/status/StatusSummaryPopover.tsx
+  function stateIcon(state) {
+    switch (state) {
+      case "ok":
+        return "check_circle";
+      case "warn":
+        return "warning";
+      case "error":
+        return "error";
+      case "pending":
+      default:
+        return "schedule";
+    }
+  }
+  function stateColor(state) {
+    switch (state) {
+      case "ok":
+        return "var(--color-success, #22c55e)";
+      case "warn":
+        return "var(--color-warning, #eab308)";
+      case "error":
+        return "var(--color-error, #ef4444)";
+      case "pending":
+      default:
+        return "var(--color-text-muted, #6b7280)";
+    }
+  }
+  function StatusSummaryPopover({
+    items,
+    triggerLabel = "Estado de sistemas",
+    summaryIcon = "monitoring",
+    color,
+    style
+  }) {
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    const triggerColor = color ?? (items.some((i) => i.state === "error") ? "var(--color-error, #ef4444)" : items.some((i) => i.state === "warn") ? "var(--color-warning, #eab308)" : items.every((i) => i.state === "ok") ? "var(--color-success, #22c55e)" : "var(--color-text-muted, #6b7280)");
+    useEffect(() => {
+      if (!open) return;
+      const handle = (e) => {
+        if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+      };
+      document.addEventListener("mousedown", handle);
+      return () => document.removeEventListener("mousedown", handle);
+    }, [open]);
+    return /* @__PURE__ */ jsxs("div", { ref, style: { position: "relative", display: "inline-flex", alignItems: "center", ...style }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          title: triggerLabel,
+          "aria-label": triggerLabel,
+          "aria-expanded": open,
+          onClick: () => setOpen((v) => !v),
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            padding: "0.25rem",
+            marginRight: "0.25rem",
+            background: "transparent",
+            border: "none",
+            color: triggerColor,
+            cursor: "pointer",
+            borderRadius: "4px"
+          },
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", style: { fontSize: "1.5rem" }, "aria-hidden": true, children: summaryIcon })
+        }
+      ),
+      open ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "tooltip",
+          style: {
+            position: "absolute",
+            top: "100%",
+            right: 0,
+            marginTop: "0.25rem",
+            minWidth: "220px",
+            maxWidth: "300px",
+            padding: "0.75rem",
+            zIndex: 1e3,
+            background: "var(--color-surface, #ffffff)",
+            border: "1px solid var(--color-border, #e5e7eb)",
+            borderRadius: "var(--radius-md, 8px)",
+            boxShadow: "var(--shadow-md, 0 4px 12px rgba(0,0,0,.1))",
+            fontFamily: "var(--font-sans, system-ui)"
+          },
+          children: [
+            /* @__PURE__ */ jsx("div", { style: { fontSize: "0.8rem", color: "var(--color-text-muted, #6b7280)", marginBottom: "0.5rem" }, children: "Resumen" }),
+            items.map((row, i) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "0.5rem",
+                  fontSize: "0.85rem",
+                  marginTop: i > 0 ? "0.35rem" : 0
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", style: { fontSize: "1rem", color: stateColor(row.state) }, "aria-hidden": true, children: stateIcon(row.state) }),
+                  /* @__PURE__ */ jsx("span", { style: { flex: 1, minWidth: 0 }, children: row.label }),
+                  /* @__PURE__ */ jsx("span", { style: { color: "var(--color-text-muted, #6b7280)", whiteSpace: "nowrap", fontSize: "0.8rem" }, children: row.detail ?? "" })
+                ]
+              },
+              `${row.label}-${i}`
+            ))
+          ]
+        }
+      ) : null
+    ] });
+  }
+  return __toCommonJS(status_entry_exports);
+})();