@conatel-sa/react-ui 0.2.3 → 0.2.4

package/dist/dialogs.umd.js

@@ -0,0 +1,246 @@
+"use strict";
+var ReactLibraryDialogs = (() => {
+  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/dialogs-entry.ts
+  var dialogs_entry_exports = {};
+  __export(dialogs_entry_exports, {
+    ChangelogDialog: () => ChangelogDialog
+  });
+
+  // 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/react-dom-shim.mjs
+  var RD = typeof window !== "undefined" && window.ReactDOM ? window.ReactDOM : {};
+  var { createPortal } = RD;
+
+  // 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/dialogs/ChangelogDialog.tsx
+  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);
+  }
+  return __toCommonJS(dialogs_entry_exports);
+})();

package/dist/forms.d.ts

@@ -0,0 +1,61 @@
+export interface PasswordChecks {
+  minLength: boolean;
+  hasLower: boolean;
+  hasUpper: boolean;
+  hasDigit: boolean;
+  hasSpecial: boolean;
+}
+
+export function validatePassword(password: string): PasswordChecks;
+export function isPasswordValid(checks: PasswordChecks): boolean;
+export function getPasswordValid(password: string): boolean;
+
+export const PASSWORD_RULES: ReadonlyArray<{
+  key: 'minLength' | 'hasLower' | 'hasUpper' | 'hasDigit' | 'hasSpecial';
+  label: string;
+  ok: (c: PasswordChecks) => boolean;
+}>;
+
+export const PASSWORD_HINT: string;
+
+export type PasswordInputProps = {
+  value: string;
+  onChange: (next: string) => void;
+  placeholder?: string;
+  label?: string;
+  hint?: string;
+  error?: string;
+  disabled?: boolean;
+  required?: boolean;
+  ariaLabel?: string;
+  showValidation?: boolean;
+  id?: string;
+  inputClassName?: string;
+  className?: string;
+  minLength?: number;
+  'data-testid'?: string;
+};
+
+export declare function PasswordInput(props: PasswordInputProps): JSX.Element;
+
+export type MultiSelectOption = { value: string; label: string };
+
+export type MultiSelectDropdownProps = {
+  label?: string;
+  options: MultiSelectOption[];
+  value?: string[];
+  selected?: string[];
+  onChange: (next: string[]) => void;
+  placeholder?: string;
+  emptyLabel?: string;
+  disabled?: boolean;
+  allowAllNone?: boolean;
+  allLabel?: string;
+  noneLabel?: string;
+  maxLabels?: number;
+  labelStyle?: import('react').CSSProperties;
+  style?: import('react').CSSProperties;
+  buttonClassName?: string;
+};
+
+export declare function MultiSelectDropdown(props: MultiSelectDropdownProps): JSX.Element;