@conatel-sa/react-ui 0.2.3 → 0.2.4

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,165 @@
+"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,
+    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);
+})();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@conatel-sa/react-ui",
-  "version": "0.2.3",
-  "description": "Biblioteca de componentes React para productos Conatel y Vivion. Incluye más de 20 componentes UI (botones, formularios, navegación, tablas, modales y más) con soporte de theming para ambas marcas.",
+  "version": "0.2.4",
+  "description": "Biblioteca de componentes React para productos Conatel y Vivion. Incluye más de 20 componentes UI con theming. Subpaquetes opcionales: ./icons, ./forms, ./cards, ./dialogs, ./metrics, ./status.",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -11,7 +11,39 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.umd.js"
     },
-    "./dist/index.css": "./dist/index.css"
+    "./dist/index.css": "./dist/index.css",
+    "./dist/material-symbols.css": "./dist/material-symbols.css",
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "import": "./dist/icons.mjs",
+      "require": "./dist/icons.umd.js"
+    }
+    ,
+    "./forms": {
+      "types": "./dist/forms.d.ts",
+      "import": "./dist/forms.mjs",
+      "require": "./dist/forms.umd.js"
+    },
+    "./cards": {
+      "types": "./dist/cards.d.ts",
+      "import": "./dist/cards.mjs",
+      "require": "./dist/cards.umd.js"
+    },
+    "./dialogs": {
+      "types": "./dist/dialogs.d.ts",
+      "import": "./dist/dialogs.mjs",
+      "require": "./dist/dialogs.umd.js"
+    },
+    "./metrics": {
+      "types": "./dist/metrics.d.ts",
+      "import": "./dist/metrics.mjs",
+      "require": "./dist/metrics.umd.js"
+    },
+    "./status": {
+      "types": "./dist/status.d.ts",
+      "import": "./dist/status.mjs",
+      "require": "./dist/status.umd.js"
+    }
   },
   "files": [
     "dist"
@@ -36,7 +68,13 @@
   },
   "peerDependencies": {
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "lucide-react": "^0.460.0"
+  },
+  "peerDependenciesMeta": {
+    "lucide-react": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^8.4.0",