@conatel-sa/react-ui 0.2.2 → 0.2.4

package/dist/cards.umd.js

@@ -0,0 +1,345 @@
+"use strict";
+var ReactLibraryCards = (() => {
+  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/cards-entry.ts
+  var cards_entry_exports = {};
+  __export(cards_entry_exports, {
+    ArtifactReportCard: () => ArtifactReportCard,
+    ChangelogPanel: () => ChangelogPanel,
+    FeatureCard: () => FeatureCard,
+    ServiceCard: () => ServiceCard
+  });
+
+  // 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/cards/ServiceCard.tsx
+  function statusStyles(status) {
+    switch (status) {
+      case "active":
+        return {
+          bg: "var(--color-success-light, rgba(16, 185, 129, 0.1))",
+          fg: "var(--color-success, #10b981)",
+          label: "OK"
+        };
+      case "degraded":
+        return {
+          bg: "var(--color-warning-light, rgba(245, 158, 11, 0.12))",
+          fg: "var(--color-warning, #f59e0b)",
+          label: "WARN"
+        };
+      case "error":
+        return {
+          bg: "var(--color-error-light, rgba(204, 3, 46, 0.12))",
+          fg: "var(--color-error, #CC032E)",
+          label: "ERROR"
+        };
+      case "info":
+        return {
+          bg: "var(--color-info-light, rgba(37, 99, 235, 0.12))",
+          fg: "var(--color-info, #2563eb)",
+          label: "INFO"
+        };
+      default:
+        return {
+          bg: "var(--color-neutral-100, #f5f5f5)",
+          fg: "var(--color-text-muted, #6b6b6b)",
+          label: "INFO"
+        };
+    }
+  }
+  function ServiceCard({
+    icon,
+    title,
+    description,
+    status,
+    count,
+    onClick
+  }) {
+    const st = statusStyles(status);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: onClick ? "button" : void 0,
+        tabIndex: onClick ? 0 : void 0,
+        onClick,
+        onKeyDown: (e) => {
+          if (!onClick) return;
+          if (e.key === "Enter" || e.key === " ") onClick();
+        },
+        style: {
+          border: "1.5px solid var(--color-border, #e0e0e0)",
+          borderRadius: "var(--radius-lg, 8px)",
+          background: "var(--color-surface, #ffffff)",
+          boxShadow: "var(--shadow-sm, 0 1px 3px rgba(0,0,0,.1))",
+          padding: "var(--space-4, 16px)",
+          cursor: onClick ? "pointer" : "default"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "var(--space-3, 12px)" }, children: [
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "var(--space-3, 12px)", flex: 1, minWidth: 0 }, children: [
+              icon ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "material-symbols-outlined",
+                  style: { fontSize: "1.5rem", color: "var(--color-primary, #CC032E)", marginTop: "2px" },
+                  "aria-hidden": "true",
+                  children: icon
+                }
+              ) : null,
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--space-1, .25rem)", minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontFamily: "var(--font-sans, system-ui)",
+                      fontSize: "var(--text-base, 15px)",
+                      fontWeight: "var(--weight-semibold, 600)",
+                      color: "var(--color-text, #1a1a1a)",
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis"
+                    },
+                    children: title
+                  }
+                ),
+                description ? /* @__PURE__ */ jsx("div", { style: { fontFamily: "var(--font-sans, system-ui)", fontSize: "var(--text-sm, 13px)", color: "var(--color-text-muted, #757578)", lineHeight: 1.3 }, children: description }) : null
+              ] })
+            ] }),
+            count != null ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  minWidth: "3rem",
+                  textAlign: "right",
+                  fontFamily: "var(--font-sans, system-ui)",
+                  fontSize: "var(--text-sm, 13px)",
+                  color: "var(--color-text-muted, #757578)",
+                  fontWeight: "var(--weight-medium, 500)"
+                },
+                children: count
+              }
+            ) : null
+          ] }),
+          status ? /* @__PURE__ */ jsx("div", { style: { marginTop: "var(--space-3, 12px)" }, children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "var(--space-2, 8px)",
+                padding: "var(--space-1, .25rem) var(--space-2, 8px)",
+                borderRadius: "var(--radius-full, 9999px)",
+                background: st.bg,
+                color: st.fg,
+                fontFamily: "var(--font-sans, system-ui)",
+                fontSize: "var(--text-sm, 13px)",
+                fontWeight: "var(--weight-medium, 500)",
+                whiteSpace: "nowrap"
+              },
+              children: st.label
+            }
+          ) }) : null
+        ]
+      }
+    );
+  }
+
+  // src/components/cards/FeatureCard.tsx
+  var baseCardStyle = {
+    position: "relative",
+    display: "block",
+    border: "1.5px solid var(--color-border, #e0e0e0)",
+    borderRadius: "var(--radius-lg, 12px)",
+    background: "var(--color-surface, #ffffff)",
+    boxShadow: "var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08))",
+    padding: "var(--space-4, 16px)",
+    textDecoration: "none",
+    color: "inherit",
+    fontFamily: "var(--font-sans, system-ui)",
+    textAlign: "left",
+    cursor: "default",
+    boxSizing: "border-box"
+  };
+  function FeatureCard({
+    title,
+    description,
+    icon,
+    corner,
+    href,
+    onClick,
+    children,
+    style,
+    className
+  }) {
+    const interactive = Boolean(href || onClick);
+    const mergedStyle = {
+      ...baseCardStyle,
+      cursor: interactive ? "pointer" : "default",
+      ...style
+    };
+    const inner = /* @__PURE__ */ jsxs(Fragment2, { children: [
+      corner ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: "0.75rem",
+            right: "0.75rem",
+            display: "flex",
+            alignItems: "center",
+            gap: "0.25rem",
+            fontSize: "0.75rem",
+            color: "var(--color-text-muted, #757578)"
+          },
+          children: corner
+        }
+      ) : null,
+      icon ? /* @__PURE__ */ jsx("div", { style: { marginBottom: "var(--space-3, 12px)" }, children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", style: { fontSize: "2rem", color: "var(--color-primary, #2563eb)" }, "aria-hidden": true, children: icon }) }) : null,
+      /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: "var(--text-base, 15px)", color: "var(--color-text, #1a1a1a)", marginBottom: "var(--space-2, 8px)" }, children: title }),
+      description ? /* @__PURE__ */ jsx("div", { style: { fontSize: "var(--text-sm, 13px)", color: "var(--color-text-muted, #757578)", lineHeight: 1.45 }, children: description }) : null,
+      children
+    ] });
+    if (href) {
+      return /* @__PURE__ */ jsx("a", { href, className, style: mergedStyle, children: inner });
+    }
+    if (onClick) {
+      return /* @__PURE__ */ jsx("button", { type: "button", className, style: mergedStyle, onClick, children: inner });
+    }
+    return /* @__PURE__ */ jsx("div", { className, style: mergedStyle, children: inner });
+  }
+
+  // src/components/cards/ChangelogPanel.tsx
+  function ChangelogPanel({ version, items }) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          border: "1.5px solid var(--color-border, #e0e0e0)",
+          borderRadius: "var(--radius-lg, 8px)",
+          background: "var(--color-surface, #ffffff)",
+          boxShadow: "var(--shadow-sm, 0 1px 3px rgba(0,0,0,.1))",
+          padding: "var(--space-4, 16px)"
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { style: { fontFamily: "var(--font-sans, system-ui)", fontWeight: "var(--weight-semibold, 600)", color: "var(--color-text, #1a1a1a)", fontSize: "var(--text-base, 15px)" }, children: version ? `Changelog ${version}` : "Changelog" }),
+          /* @__PURE__ */ jsx("div", { style: { marginTop: "var(--space-3, 12px)", display: "flex", flexDirection: "column", gap: "var(--space-3, 12px)" }, children: items.map((it, idx) => /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { style: { fontFamily: "var(--font-sans, system-ui)", fontWeight: "var(--weight-semibold, 600)", color: "var(--color-text, #1a1a1a)", fontSize: "var(--text-sm, 13px)" }, children: it.title }),
+            /* @__PURE__ */ jsx("div", { style: { fontFamily: "var(--font-sans, system-ui)", color: "var(--color-text-muted, #757578)", fontSize: "var(--text-sm, 13px)", lineHeight: 1.4, marginTop: "var(--space-1, .25rem)" }, children: it.content })
+          ] }, idx)) })
+        ]
+      }
+    );
+  }
+
+  // src/components/cards/ArtifactReportCard.tsx
+  function variantToColors(variant) {
+    switch (variant) {
+      case "success":
+        return { fg: "var(--color-success, #10b981)", bg: "var(--color-success, #10b981)" };
+      case "warning":
+        return { fg: "var(--color-warning, #f59e0b)", bg: "var(--color-warning, #f59e0b)" };
+      case "error":
+        return { fg: "var(--color-error, #CC032E)", bg: "var(--color-error, #CC032E)" };
+      case "info":
+        return { fg: "var(--color-info, #2563eb)", bg: "var(--color-info, #2563eb)" };
+      case "primary":
+      default:
+        return { fg: "var(--color-primary, var(--color-brand, #CC032E))", bg: "var(--color-primary, var(--color-brand, #CC032E))" };
+    }
+  }
+  function ArtifactReportCard({ title, stats }) {
+    const max = Math.max(1, ...stats.map((s) => typeof s.value === "number" ? s.value : 0));
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          border: "1.5px solid var(--color-border, #e0e0e0)",
+          borderRadius: "var(--radius-lg, 8px)",
+          background: "var(--color-surface, #ffffff)",
+          boxShadow: "var(--shadow-sm, 0 1px 3px rgba(0,0,0,.1))",
+          padding: "var(--space-4, 16px)"
+        },
+        children: [
+          title ? /* @__PURE__ */ jsx("div", { style: { fontFamily: "var(--font-sans, system-ui)", fontWeight: "var(--weight-semibold, 600)", color: "var(--color-text, #1a1a1a)", fontSize: "var(--text-base, 15px)" }, children: title }) : null,
+          /* @__PURE__ */ jsx("div", { style: { marginTop: "var(--space-3, 12px)", display: "flex", flexDirection: "column", gap: "var(--space-3, 12px)" }, children: stats.map((s, idx) => {
+            const colors = variantToColors(s.variant);
+            const ratio = Math.max(0, Math.min(1, s.value / max));
+            return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--space-2, 8px)" }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", gap: "var(--space-2, 8px)" }, children: [
+                /* @__PURE__ */ jsx("div", { style: { fontFamily: "var(--font-sans, system-ui)", color: "var(--color-text-muted, #757578)", fontSize: "var(--text-sm, 13px)", fontWeight: "var(--weight-medium, 500)" }, children: s.label }),
+                /* @__PURE__ */ jsx("div", { style: { fontFamily: "var(--font-sans, system-ui)", color: colors.fg, fontSize: "var(--text-sm, 13px)", fontWeight: "var(--weight-semibold, 600)" }, children: s.value })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: "100%",
+                    height: "10px",
+                    borderRadius: "var(--radius-full, 9999px)",
+                    background: "var(--color-neutral-200, rgba(0,0,0,.08))",
+                    overflow: "hidden"
+                  },
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        width: `${Math.round(ratio * 100)}%`,
+                        height: "100%",
+                        background: colors.bg,
+                        borderRadius: "inherit",
+                        transition: "width var(--duration-base, .15s) var(--ease-out, ease) "
+                      }
+                    }
+                  )
+                }
+              ),
+              s.footer ? /* @__PURE__ */ jsx("div", { style: { fontFamily: "var(--font-sans, system-ui)", color: "var(--color-text-muted, #757578)", fontSize: "var(--text-sm, 13px)", lineHeight: 1.35 }, children: s.footer }) : null
+            ] }, idx);
+          }) })
+        ]
+      }
+    );
+  }
+  return __toCommonJS(cards_entry_exports);
+})();

package/dist/dialogs.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+
+export type ChangelogDialogSection = {
+  type: string;
+  label: string;
+  emoji: string;
+  items: string[];
+};
+export type ChangelogDialogVersion = {
+  version: string;
+  date: string;
+  sections: ChangelogDialogSection[];
+};
+export type ChangelogDialogData = {
+  current_version?: string;
+  versions: ChangelogDialogVersion[];
+};
+export type ChangelogDialogProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  data: ChangelogDialogData | null;
+  title?: ReactNode;
+  confirmLabel?: string;
+};
+export declare function ChangelogDialog(props: ChangelogDialogProps): JSX.Element | null;

package/dist/dialogs.mjs

@@ -0,0 +1,194 @@
+// src/components/dialogs/ChangelogDialog.tsx
+import { useEffect, useLayoutEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+function readActiveTheme() {
+  if (typeof document === "undefined") return "conatel";
+  const el = document.querySelector("[data-theme]");
+  const t = el?.getAttribute("data-theme");
+  return t === "vivion" ? "vivion" : "conatel";
+}
+function formatDate(dateStr) {
+  try {
+    const [year, month, day] = dateStr.split("-").map(Number);
+    const date = new Date(year, month - 1, day);
+    return date.toLocaleDateString("es-AR", { day: "numeric", month: "short", year: "numeric" });
+  } catch {
+    return dateStr;
+  }
+}
+function ChangelogDialog({
+  isOpen,
+  onClose,
+  data,
+  title = "Novedades",
+  confirmLabel = "Entendido"
+}) {
+  const [mounted, setMounted] = useState(false);
+  const [theme, setTheme] = useState("conatel");
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useLayoutEffect(() => {
+    if (!isOpen) return;
+    setTheme(readActiveTheme());
+  }, [isOpen]);
+  if (!isOpen || !data || !mounted) return null;
+  const overlay = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `theme-${theme}`,
+      "data-theme": theme,
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 1e3,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "rgba(0,0,0,0.45)",
+        padding: "1rem",
+        fontFamily: "var(--font-sans, system-ui)",
+        colorScheme: "light"
+      },
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      role: "presentation",
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            background: "var(--color-surface, #ffffff)",
+            border: "1px solid var(--color-border, #e5e7eb)",
+            borderRadius: "var(--radius-lg, 12px)",
+            boxShadow: "var(--shadow-lg, 0 10px 40px rgba(0,0,0,.12))",
+            width: "100%",
+            maxWidth: "520px",
+            maxHeight: "80vh",
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden"
+          },
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": "changelog-dialog-title",
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: "1rem 1.25rem",
+                  borderBottom: "1px solid var(--color-border, #e5e7eb)",
+                  flexShrink: 0
+                },
+                children: [
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", minWidth: 0 }, children: [
+                    /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", style: { color: "var(--color-primary)", fontSize: "1.25rem" }, "aria-hidden": true, children: "auto_awesome" }),
+                    /* @__PURE__ */ jsx("span", { id: "changelog-dialog-title", style: { fontWeight: 600, fontSize: "1rem", color: "var(--color-text, #111827)" }, children: title })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onClose,
+                      style: {
+                        background: "transparent",
+                        border: "none",
+                        cursor: "pointer",
+                        color: "var(--color-text-muted, #6b7280)",
+                        display: "flex",
+                        alignItems: "center",
+                        padding: "0.25rem",
+                        borderRadius: "var(--radius-sm, 6px)"
+                      },
+                      "aria-label": "Cerrar",
+                      children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", style: { fontSize: "1.25rem" }, "aria-hidden": true, children: "close" })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: { overflowY: "auto", padding: "1rem 1.25rem", flex: 1 }, children: data.versions.length === 0 ? /* @__PURE__ */ jsx("p", { style: { color: "var(--color-text-muted, #6b7280)", textAlign: "center", margin: "2rem 0" }, children: "No hay novedades disponibles." }) : data.versions.map((ver, idx) => /* @__PURE__ */ jsxs("div", { children: [
+              idx > 0 ? /* @__PURE__ */ jsx("div", { style: { height: "1px", background: "var(--color-border, #e5e7eb)", margin: "1.25rem 0" } }) : null,
+              /* @__PURE__ */ jsxs("div", { style: { marginBottom: "0.75rem" }, children: [
+                /* @__PURE__ */ jsxs("span", { style: { fontWeight: 700, fontSize: "0.95rem", color: "var(--color-text, #111827)" }, children: [
+                  "v",
+                  ver.version
+                ] }),
+                /* @__PURE__ */ jsxs("span", { style: { marginLeft: "0.5rem", fontSize: "0.8rem", color: "var(--color-text-muted, #6b7280)" }, children: [
+                  "\u2014 ",
+                  formatDate(ver.date)
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: ver.sections.map((section) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    background: "var(--color-bg-secondary, #f9fafb)",
+                    border: "1px solid var(--color-border, #e5e7eb)",
+                    borderRadius: "var(--radius-md, 8px)",
+                    padding: "0.625rem 0.875rem"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { style: { fontWeight: 600, fontSize: "0.85rem", color: "var(--color-text, #111827)", marginBottom: "0.375rem" }, children: [
+                      section.emoji,
+                      " ",
+                      section.label
+                    ] }),
+                    /* @__PURE__ */ jsx("ul", { style: { margin: 0, paddingLeft: "1.1rem", listStyle: "disc" }, children: section.items.map((item, i) => /* @__PURE__ */ jsx("li", { style: { fontSize: "0.83rem", color: "var(--color-text-muted, #4b5563)", lineHeight: 1.5 }, children: item }, i)) })
+                  ]
+                },
+                section.type
+              )) })
+            ] }, ver.version)) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  padding: "0.75rem 1.25rem",
+                  borderTop: "1px solid var(--color-border, #e5e7eb)",
+                  display: "flex",
+                  justifyContent: "center",
+                  flexShrink: 0
+                },
+                children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: "0.375rem",
+                      background: "var(--color-primary)",
+                      color: "#fff",
+                      border: "none",
+                      borderRadius: "var(--radius-md, 8px)",
+                      padding: "0.5rem 1.25rem",
+                      fontWeight: 600,
+                      fontSize: "0.875rem",
+                      cursor: "pointer",
+                      fontFamily: "inherit"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", style: { fontSize: "1rem" }, "aria-hidden": true, children: "check" }),
+                      confirmLabel
+                    ]
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+  return createPortal(overlay, document.body);
+}
+export {
+  ChangelogDialog
+};