📦 SimpleModal SDK

Un modal ligero, personalizable y fácil de integrar, construido con Vite + Lit + TailwindCSS.

✨ Características

• ⚡ Rápido y liviano (Web Component nativo).

• 🎨 Estilado con TailwindCSS para máxima flexibilidad.

• 🔌 SDK simple mediante showModal(...).

• ♻️ Renderizado Shadow DOM (no afecta tus estilos globales).

• 🛠 Compilado con Vite para ES Modules y UMD.

• 📦 Fácil de integrar en cualquier framework: React, Vue, Svelte, Angular o Vanilla JS.

🧱 Tecnologías usadas

Tecnología	Uso
Lit	Creación del Web Component
TailwindCSS	Estilos internos del modal
Vite	Build del SDK para ESM y UMD
TypeScript	Tipado y DX

📥 Instalación

Via CDN

<script type="module" src="https://unpkg.com/simple-modal-sdk/dist/simple-modal-sdk.es.js"></script>

Mostrar un modal usando el SDK:

SimpleModalSDK.showModal({
  title: "Modal auto generado desde SDK",
  onClose: () => {
    console.log("El modal fue cerrado");
  }
});

🚀 Uso rápido

O usando directamente el Web Component:

<simple-modal title="Título personalizado" open="true"></simple-modal>

🧩 API del SDK

showModal(options)

Propiedad	Tipo	Descripción
title	string	Título del modal
open	boolean	Indica su display

🧪 Desarrollo local

Para levantar el entorno de desarrollo:

npm install lit tailwindcss @tailwindcss/vite
npm run dev

Esto inicia un servidor Vite con una vista de prueba (index.html).

Uso Local - Desarrollo

<script src="http://localhost:5500/dist/bundle.min.js"></script>

Luego en:

import { showModal } from './src/SimpleModal.ts';

Mostrar un modal llamando a su funcion:

<button id="open-btn">
  Abrir Modal
</button>
<script type="module">
  import { showModal } from './src/SimpleModal.ts';
  const btn = document.getElementById("open-btn");
  btn.addEventListener('click', () => showModal())
</script>

O usando directamente el Web Component:

<simple-modal title="Título personalizado" open="true"></simple-modal>

🛠 Build para producción

npm run build

Genera:

dist/
 ├── simple-modal-sdk.es.js
 ├── simple-modal-sdk.umd.js

📚 Estructura del proyecto

src/
 ├── SimpleModal.ts     # Web Component + lógica SDK
 ├── styles.css         # TailwindCSS interno
dev/
 └── index.html         # Vista para desarrollo / playground
vite.config.ts          # Configuración del build
package.json
README.md

Congiguracion de Vite

/vite.config.ts

import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
  build: {
    emptyOutDir: true,
    lib: {
      entry: 'src/SimpleModal.ts',
      name: 'SimpleModalSDK',
      fileName: (format) => `simple-modal-sdk.${format}.js`,
      formats: ['es', 'umd'],
    },
    rollupOptions: {
      external: [], // lit queda embebido
    }
  }
});

🖼 Captura de ejemplo

(Agregar acá una imagen del modal en acción)