@apolopay-sdk/ui 1.0.0

package/dist/styles/modal-base.js

@@ -0,0 +1,75 @@
+import { css } from 'lit';
+export const modalBaseStyles = css `
+/* 1. Definimos las Animaciones */
+  @keyframes modal-enter {
+    from { opacity: 0; transform: scale(0.95) translateY(10px); }
+    to { opacity: 1; transform: scale(1) translateY(0); }
+  }
+
+  @keyframes modal-exit {
+    from { opacity: 1; transform: scale(1) translateY(0); }
+    to { opacity: 0; transform: scale(0.95) translateY(10px); }
+  }
+
+  @keyframes backdrop-enter {
+    from { background-color: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); }
+    to { background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); }
+  }
+
+  @keyframes backdrop-exit {
+    from { background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); }
+    to { background-color: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); }
+  }
+
+  /* 2. Estilos Base */
+  dialog {
+    border: none;
+    padding: 0;
+    margin: auto;
+    
+    /* Geometría */
+    min-width: 320px;
+    max-width: 420px;
+    width: 90vw;
+    border-radius: var(--apolo-radius);
+    
+    background-color: var(--apolo-bg);
+    color: var(--apolo-text);
+    box-shadow: var(--apolo-shadow);
+    font-family: var(--apolo-font);
+
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* 3. Estado: ABIERTO (Animación de Entrada) */
+  dialog[open] {
+    opacity: 1;
+    animation: modal-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    pointer-events: auto;
+  }
+
+  /* 4. Estado: CERRANDO (Animación de Salida) */
+  dialog.closing {
+    /* Sobrescribimos la animación de entrada */
+    animation: modal-exit 0.15s ease-in forwards;
+  }
+
+  /* 5. Backdrop (Fondo Oscuro) */
+  dialog::backdrop {
+    background-color: rgba(0,0,0,0); /* Invisible por defecto */
+  }
+
+  dialog[open]::backdrop {
+    animation: backdrop-enter 0.2s ease-out forwards;
+  }
+
+  dialog.closing::backdrop {
+    animation: backdrop-exit 0.15s ease-in forwards;
+  }
+
+  dialog:not([open])::backdrop {
+    display: none;
+    pointer-events: none;
+  }
+`;

package/dist/styles/qr-base.d.ts

@@ -0,0 +1 @@
+export declare const qrBaseStyles: import("lit").CSSResult;

package/dist/styles/qr-base.js

@@ -0,0 +1,48 @@
+import { css } from 'lit';
+export const qrBaseStyles = css `
+  .qr-frame {
+    background: white;
+    padding: 10px;
+    padding-bottom: 14px;
+    border-radius: var(--apolo-radius);
+    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
+    display: inline-block;
+    margin-bottom: 1rem;
+  }
+  
+  .qr-badge {
+    color: var(--apolo-accent);
+    font-weight: 700;
+    font-size: 1.2rem;
+    display: inline-block;
+    margin-top: 10px;
+  }
+
+  .qr-wrapper {
+    position: relative;
+    display: block;
+    width: 150px;
+    height: 150px;
+  }
+
+  .qr-code-img {
+    width: 100%;
+    height: 100%;
+  }
+
+  .qr-overlay-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    
+    width: 36px;
+    height: 36px;
+    
+    object-fit: contain;
+    background-color: white;
+    border-radius: 50%;
+    padding: 2px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  }
+`;

package/dist/styles/shared-styles.d.ts

@@ -0,0 +1 @@
+export declare const sharedStyles: import("lit").CSSResult;

package/dist/styles/shared-styles.js

@@ -0,0 +1,28 @@
+import { css } from 'lit';
+export const sharedStyles = css `
+  :host {
+    /* --- API PÚBLICA DE COLORES (THEMING) --- */
+    --apolo-primary: var(--payment-button-primary, #0388c0);
+    --apolo-primary-darkest: var(--payment-button-primary-darkest, #041c4c);
+    --apolo-on-primary: var(--payment-button-on-primary, #ffffff);
+    
+    --apolo-bg: var(--payment-button-bg, #f6f2ec);
+    --apolo-text: var(--payment-button-text, #1c315c);
+    --apolo-text-muted: var(--payment-button-text-muted, #6b7280);
+    --apolo-accent: var(--payment-button-accent, #ea580c);
+    --apolo-border: var(--payment-button-border, #e5e7eb);
+    
+    /* --- API PÚBLICA DE FORMA Y TIPOGRAFÍA --- */
+    --apolo-radius: var(--payment-button-radius, 12px);
+    --apolo-radius-lg: var(--payment-button-radius-lg, 30px);
+    --apolo-font: var(--payment-button-font, 'Inter', system-ui, -apple-system, sans-serif);
+    --apolo-shadow: var(--payment-button-shadow, 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1));
+    --apolo-z-index: var(--payment-button-z-index, 9999);
+  }
+
+  /* Reset global para componentes internos */
+  * {
+    box-sizing: border-box;
+    font-family: var(--apolo-font);
+  }
+`;

package/dist/styles/spinner-styles.d.ts

@@ -0,0 +1 @@
+export declare const spinnerStyles: import("lit").CSSResult;

package/dist/styles/spinner-styles.js

@@ -0,0 +1,29 @@
+import { css } from 'lit';
+export const spinnerStyles = css `
+  .spinner-overlay {
+    position: absolute;
+    inset: 0;
+    background-color: rgba(255, 255, 255, 0.3);
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--apolo-radius, 12px);
+    cursor: wait;
+    backdrop-filter: blur(2px);
+  }
+
+  .spinner {
+    border: 4px solid #e5e7eb;
+    border-top: 4px solid var(--apolo-primary, #6366f1);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+`;

package/dist/styles/text-field-base.d.ts

@@ -0,0 +1 @@
+export declare const textFieldBaseStyles: import("lit").CSSResult;

package/dist/styles/text-field-base.js

@@ -0,0 +1,44 @@
+import { css } from 'lit';
+export const textFieldBaseStyles = css `
+  /* Inputs de solo lectura (Diseño Apolo) */
+  .text-field {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 1rem;
+    text-align: left;
+    position: relative;
+  }
+  .text-field-label {
+    --padding-left: 0.25rem;
+    --padding-top: 0.15rem;
+    font-size: 0.75rem;
+    color: #9ca3af;
+    border-radius: calc(var(--apolo-radius) - 1px);
+    background: #ffffff;
+    padding: var(--padding-top) var(--padding-left);
+    position: absolute;
+    top: calc(-0.5rem - var(--padding-top));
+    left: calc(1rem - var(--padding-left));
+    display: block;
+    z-index: 2;
+  }
+  .text-field-input {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 1px solid #526282;
+    border-radius: var(--apolo-radius);
+    background: #ffffff;
+    color: #4b5563;
+    font-size: 0.9rem;
+    z-index: 1;
+  }
+  .btn-secondary {
+    background-color: #526282;
+    color: #ffffff;
+    border: none;
+    border-radius: var(--apolo-radius);
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+  }
+`;

package/dist/utils/image_error.d.ts

@@ -0,0 +1 @@
+export declare function handleImageError(e: Event): void;

package/dist/utils/image_error.js

@@ -0,0 +1,5 @@
+import { iconError } from '../assets/icon_error';
+export function handleImageError(e) {
+    const img = e.target;
+    img.src = iconError;
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@apolopay-sdk/ui",
+  "version": "1.0.0",
+  "description": "Componente de UI (Web Component) para el botón de pago",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "lit": "3.0.0",
+    "tslib": "2.8.1",
+    "@apolopay-sdk/core": "1.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "devDependencies": {
+    "typescript": "5.4.5"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  }
+}