@dropi/ui 0.1.21 → 0.1.23

package/hydrate/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@dropi/ui/hydrate",
+  "description": "DropiUi component hydration app.",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "import": "./index.mjs"
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/ui",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "description": "Dropi Design System — Web Components for Angular, React and Vue",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -28,10 +28,16 @@
       "import": "./dist/dropi-ui/*.js",
       "require": "./dist/dropi-ui/*.js"
     },
-    "./dist/dropi-ui/dropi-ui.css": "./dist/dropi-ui/dropi-ui.css"
+    "./dist/dropi-ui/dropi-ui.css": "./dist/dropi-ui/dropi-ui.css",
+    "./hydrate": {
+      "import": "./hydrate/index.mjs",
+      "require": "./hydrate/index.js",
+      "types": "./hydrate/index.d.ts"
+    }
   },
   "files": [
     "dist/",
+    "hydrate/",
     "loader/",
     "assets/",
     "skills/",
@@ -60,7 +66,7 @@
   "devDependencies": {
     "@stencil/angular-output-target": "^1.3.0",
     "@stencil/core": "^4.27.1",
-    "@stencil/react-output-target": "^1.4.2",
+    "@stencil/react-output-target": "^1.5.0",
     "@stencil/vitest": "^1.8.3",
     "@stencil/vue-output-target": "^0.13.1",
     "@storybook/addon-docs": "^8.6.18",

package/readme.md

@@ -10,18 +10,13 @@ Genera componentes reutilizables para Angular, React y Vue desde una única base
 
 ## ⚡ Quick Start (Recomendado)
 
-La forma más rápida y segura de integrar la librería es usando nuestro configurador automático.
+Ejecuta este comando en la raíz de tu proyecto:
 
-### Con IA (Claude / Cursor / Windsurf)
-Si usas un asistente de IA, simplemente dile:
-> **`/install-dropi-ui`** o **"configura dropi-ui en este proyecto"**
-
-### Manual (Terminal)
-Ejecuta el siguiente comando en la raíz de tu proyecto:
 ```bash
-npx @dropi/ui setup
+npx @dropi/create-dropi-ui
 ```
-*Este comando detectará tu framework (Angular, React o Vue), instalará las dependencias necesarias y configurará estilos, iconos, animaciones Lottie y scripts automáticamente.*
+
+Detecta tu framework (Angular, React, Next.js), instala las dependencias correctas e inyecta la configuración automáticamente.
 
 ---
 
@@ -32,13 +27,50 @@ Si prefieres realizar la configuración paso a paso, consulta la [Guía de Integ
 ### 1. Paquetes
 | Framework | Paquete a instalar |
 |---|---|
+| Angular | `npm install @dropi/ui @dropi/ui-angular` |
 | React | `npm install @dropi/ui @dropi/ui-react` |
-| Angular / Vue / Vanilla | `npm install @dropi/ui` |
+| Next.js SSR | `npm install @dropi/ui @dropi/ui-react && npm install --save-dev @stencil/ssr` |
 
 ### 2. Estilos e Iconos
-- **CSS**: Importar `@dropi/ui/dist/dropi-ui/dropi-ui.css` en tu entry point.
-- **Loader**: Llamar a `defineCustomElements()` de `@dropi/ui/loader`.
-- **Iconos**: El componente `<dropi-icon>` requiere que el sprite SVG esté en `/assets/icons/symbol/svg/sprite.css.svg`.
+- **CSS**: Importar `@dropi/ui/dist/dropi-ui/dropi-ui.css`.
+- **CSS Resets**: Añade este reset para evitar saltos de layout en los iconos:
+  `dropi-icon:not(.hydrated) { width: 20px; height: 20px; display: inline-flex; }`
+- **Registro**: No hace falta llamar `defineCustomElements()`.
+- **SSR (Next.js)**: Configurar `next.config.ts` e importar siempre desde `/next`.
+- **Iconos**: El sprite SVG debe estar en `public/assets/icons/symbol/svg/sprite.css.svg`.
+
+---
+
+---
+
+## 🚀 Soporte para Next.js (SSR / Zero Flash)
+
+Para habilitar el **Server Side Rendering (SSR)** y eliminar cualquier parpadeo visual, sigue estos pasos:
+
+### 1. Configuración de Next.js
+Envuelve tu configuración en el plugin `withStencil`:
+
+```typescript
+// next.config.ts
+import withStencil from "@stencil/ssr/next";
+
+export default withStencil({
+  from: "@dropi/ui-react",
+  module: import("@dropi/ui-react/next"),
+  hydrateModule: import("@dropi/ui/hydrate"),
+})(nextConfig);
+```
+
+### 2. Configuración del Layout (Crítico)
+Añade `suppressHydrationWarning` al `<body>` en `layout.tsx` para evitar que el DevTools o extensiones rompan la hidratación.
+
+```tsx
+<body suppressHydrationWarning>{children}</body>
+```
+
+### 3. Uso de Alias para Props Dinámicas
+En componentes con `"use client"` y props dinámicas, usa un alias en el import para evitar flashes:
+`import { DropiButton as Btn } from "@dropi/ui-react/next"`
 
 ---
 

package/scripts/setup.js

@@ -52,19 +52,36 @@ async function run() {
 
   // 1. Detección de Framework
   const hasDep = (name) => !!(pkg.dependencies?.[name] || pkg.devDependencies?.[name]);
+  const isNextJs = hasDep('next');
   const isAngular = hasDep('@angular/core');
-  const isReact = hasDep('react');
+  const isReact = hasDep('react') && !isNextJs; // React puro (Vite/CRA), no Next.js
   const isVue = hasDep('vue');
-  const framework = isAngular ? 'Angular' : isReact ? 'React' : isVue ? 'Vue' : 'Desconocido';
+  const framework = isAngular ? 'Angular' : isNextJs ? 'Next.js' : isReact ? 'React' : isVue ? 'Vue' : 'Desconocido';
 
   log(`Entorno detectado: ${framework}`);
 
+  // Next.js — detectar si usa SSR
+  let isNextJsSsr = false;
+  if (isNextJs) {
+    const nextConfigFiles = ['next.config.ts', 'next.config.js', 'next.config.mjs'];
+    const hasStaticExport = nextConfigFiles.some(f => {
+      const p = path.join(projectRoot, f);
+      if (!fs.existsSync(p)) return false;
+      const c = fs.readFileSync(p, 'utf8');
+      return c.includes('output') && c.includes('export');
+    });
+    const hasAppRouter = fs.existsSync(path.join(projectRoot, 'app')) || fs.existsSync(path.join(projectRoot, 'src', 'app'));
+    const hasPagesRouter = fs.existsSync(path.join(projectRoot, 'pages')) || fs.existsSync(path.join(projectRoot, 'src', 'pages'));
+    isNextJsSsr = (hasAppRouter || hasPagesRouter) && !hasStaticExport;
+    log(`Next.js SSR: ${isNextJsSsr ? 'activo' : 'static export (sin SSR)'}`);
+  }
+
   // 2. Instalación de Dependencias
   const pkgMgr = getPkgMgr();
   const installCmd = pkgMgr === 'yarn' ? 'yarn add' : pkgMgr === 'pnpm' ? 'pnpm add' : 'npm install';
 
-  if (isReact && !hasDep('@dropi/ui-react')) {
-    log(`Proyecto React detectado → Instalando @dropi/ui-react...`);
+  if ((isReact || isNextJs) && !hasDep('@dropi/ui-react')) {
+    log(`Instalando @dropi/ui-react...`);
     try {
       execSync(`${installCmd} @dropi/ui-react`, { stdio: 'inherit', cwd: projectRoot });
       log('@dropi/ui-react instalado.', 'ok');
@@ -73,10 +90,178 @@ async function run() {
     }
   }
 
+  if (isNextJsSsr && !hasDep('@stencil/ssr')) {
+    log('Next.js SSR → Instalando @stencil/ssr...');
+    try {
+      execSync(`${installCmd} --save-dev @stencil/ssr`, { stdio: 'inherit', cwd: projectRoot });
+      log('@stencil/ssr instalado.', 'ok');
+    } catch (e) {
+      log('Error instalando @stencil/ssr. Intenta instalarlo manualmente.', 'warn');
+    }
+  }
+
   // 3. Estilos Globales
   const cssImport = "import '@dropi/ui/dist/dropi-ui/dropi-ui.css';";
   let styleTarget = null;
 
+  // ── Next.js: next.config + globals.css ──────────────────────────────────────
+  if (isNextJs) {
+    // 3a. next.config — agregar withStencil + transpilePackages
+    const nextConfigFiles = ['next.config.ts', 'next.config.js', 'next.config.mjs'];
+    const nextConfigFile = nextConfigFiles.find(f => fs.existsSync(path.join(projectRoot, f)));
+
+    if (isNextJsSsr) {
+      if (nextConfigFile) {
+        const configPath = path.join(projectRoot, nextConfigFile);
+        let cfg = fs.readFileSync(configPath, 'utf8');
+        let cfgChanged = false;
+
+        if (!cfg.includes('withStencil')) {
+          // Agregar import de withStencil después del último import existente
+          const importLine = "import withStencil from '@stencil/ssr/next';\n";
+          const lastImport = [...cfg.matchAll(/^import .+;?\s*$/gm)].pop();
+          if (lastImport) {
+            const pos = lastImport.index + lastImport[0].length;
+            cfg = cfg.slice(0, pos) + '\n' + importLine + cfg.slice(pos);
+          } else {
+            cfg = importLine + cfg;
+          }
+
+          // Envolver el export default con withStencil
+          cfg = cfg.replace(
+            /export default (nextConfig|defineNextConfig\([^)]*\));?/,
+            `export default withStencil({\n  from: '@dropi/ui-react',\n  module: import('@dropi/ui-react/next'),\n  hydrateModule: import('@dropi/ui/hydrate'),\n})($1);`
+          );
+          cfgChanged = true;
+        }
+
+        // Agregar transpilePackages si no está
+        if (!cfg.includes('transpilePackages')) {
+          cfg = cfg.replace(
+            /(const nextConfig[^=]*=\s*\{)/,
+            `$1\n  transpilePackages: ['@dropi/ui-react', '@dropi/ui'],`
+          );
+          cfgChanged = true;
+        }
+
+        if (cfgChanged) {
+          fs.writeFileSync(configPath, cfg);
+          log(`${nextConfigFile}: configuración SSR aplicada.`, 'ok');
+        } else {
+          log(`${nextConfigFile}: ya configurado, omitiendo.`, 'info');
+        }
+      } else {
+        // Crear next.config.ts desde cero
+        const newCfg = `import type { NextConfig } from 'next';
+import withStencil from '@stencil/ssr/next';
+
+const nextConfig: NextConfig = {
+  transpilePackages: ['@dropi/ui-react', '@dropi/ui'],
+};
+
+export default withStencil({
+  from: '@dropi/ui-react',
+  module: import('@dropi/ui-react/next'),
+  hydrateModule: import('@dropi/ui/hydrate'),
+})(nextConfig);
+`;
+        fs.writeFileSync(path.join(projectRoot, 'next.config.ts'), newCfg);
+        log('next.config.ts creado con configuración SSR.', 'ok');
+      }
+    }
+
+    // 3b. globals.css — agregar import + CSS resets SSR
+    const cssSsrResets = `
+/* dropi-ui.css sets *{text-align:left} — reset shadow DOM hosts */
+[class*="dropi-"], dropi-button, dropi-badge, dropi-icon, dropi-avatar,
+dropi-input, dropi-select, dropi-modal, dropi-toast, dropi-table,
+dropi-skeleton, dropi-chip, dropi-tag, dropi-checkbox, dropi-radio,
+dropi-dropdown, dropi-card-product, dropi-alert, dropi-banner-external,
+dropi-paginator, dropi-date-picker-range, dropi-file-upload,
+dropi-otp-send-code, dropi-phone-input, dropi-media-player,
+dropi-color-picker, dropi-city-selector, dropi-languages-selector,
+dropi-ilustration-icon, dropi-empty-state, dropi-favorite-button,
+dropi-logo, dropi-avatars {
+  text-align: initial;
+}
+
+/* Prevent invisible flash before hydration completes */
+[class*="dropi-"]:not(.hydrated),
+dropi-banner-external:not(.hydrated),
+dropi-logo:not(.hydrated),
+dropi-carousel:not(.hydrated) {
+  visibility: inherit !important;
+  opacity: 1 !important;
+}
+
+/* Reserve space for icons before hydration */
+dropi-icon:not(.hydrated) {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+}
+`;
+    const globalsCssCandidates = [
+      path.join(projectRoot, 'src', 'app', 'globals.css'),
+      path.join(projectRoot, 'app', 'globals.css'),
+      path.join(projectRoot, 'styles', 'globals.css'),
+      path.join(projectRoot, 'src', 'styles', 'globals.css'),
+    ];
+    const globalsCssPath = globalsCssCandidates.find(f => fs.existsSync(f));
+
+    if (globalsCssPath) {
+      let css = fs.readFileSync(globalsCssPath, 'utf8');
+      let cssChanged = false;
+      if (!css.includes('dropi-ui.css')) {
+        css = `@import '@dropi/ui/dist/dropi-ui/dropi-ui.css';\n` + css;
+        cssChanged = true;
+      }
+      if (!css.includes('text-align: initial')) {
+        css += cssSsrResets;
+        cssChanged = true;
+      }
+      if (cssChanged) {
+        fs.writeFileSync(globalsCssPath, css);
+        log(`${path.relative(projectRoot, globalsCssPath)}: estilos y resets SSR aplicados.`, 'ok');
+      } else {
+        log(`${path.relative(projectRoot, globalsCssPath)}: ya configurado, omitiendo.`, 'info');
+      }
+    } else {
+      // Crear globals.css en src/app/ o app/
+      const appDir = fs.existsSync(path.join(projectRoot, 'src', 'app'))
+        ? path.join(projectRoot, 'src', 'app')
+        : path.join(projectRoot, 'app');
+      if (fs.existsSync(appDir)) {
+        const newCss = `@import '@dropi/ui/dist/dropi-ui/dropi-ui.css';\n${cssSsrResets}`;
+        const newCssPath = path.join(appDir, 'globals.css');
+        fs.writeFileSync(newCssPath, newCss);
+        log('globals.css creado con estilos y resets SSR.', 'ok');
+        log('Recuerda importarlo en tu layout.tsx: import "./globals.css"', 'warn');
+      }
+    }
+
+    // 3c. Lottie en layout.tsx (App Router) o _document.tsx (Pages Router)
+    const layoutCandidates = [
+      path.join(projectRoot, 'src', 'app', 'layout.tsx'),
+      path.join(projectRoot, 'app', 'layout.tsx'),
+      path.join(projectRoot, 'src', 'app', 'layout.jsx'),
+      path.join(projectRoot, 'app', 'layout.jsx'),
+    ];
+    const layoutPath = layoutCandidates.find(f => fs.existsSync(f));
+    if (layoutPath) {
+      let layout = fs.readFileSync(layoutPath, 'utf8');
+      if (!layout.includes('lottie-player.js')) {
+        // Agregar script antes del cierre de </body>
+        layout = layout.replace(
+          /(<\/body>)/,
+          `        {/* lottie-player: needed by DropiAlertModal animations */}\n        <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js" async />\n      $1`
+        );
+        fs.writeFileSync(layoutPath, layout);
+        log(`${path.relative(projectRoot, layoutPath)}: Lottie script agregado.`, 'ok');
+      }
+    }
+  }
+
   if (isAngular) {
     const scssPath = path.join(projectRoot, 'src', 'styles.scss');
     if (fs.existsSync(scssPath)) {
@@ -161,10 +346,10 @@ async function run() {
   // Archivos Lottie
   setupAsset('assets/lottie-files', 'assets/lottie-files');
 
-  // 6. Lottie Player Script (index.html)
+  // 6. Lottie Player Script (index.html — solo React/Vue/Angular, Next.js lo maneja en layout.tsx arriba)
   const lottieScript = '<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>';
   const htmlFiles = ['index.html', 'src/index.html', 'public/index.html'];
-  const htmlFile = htmlFiles.find(f => fs.existsSync(path.join(projectRoot, f)));
+  const htmlFile = !isNextJs && htmlFiles.find(f => fs.existsSync(path.join(projectRoot, f)));
   
   if (htmlFile) {
     const htmlPath = path.join(projectRoot, htmlFile);
@@ -180,8 +365,8 @@ async function run() {
     }
   }
 
-  // 7. Vite Patch (React/Vue)
-  if (isReact || isVue) {
+  // 7. Vite Patch (React/Vue — no Next.js)
+  if ((isReact || isVue) && !isNextJs) {
     const viteFiles = ['vite.config.ts', 'vite.config.js'];
     const viteFile = viteFiles.find(f => fs.existsSync(path.join(projectRoot, f)));
     if (viteFile) {

package/dist/cjs/dropi-accordion-item.cjs.entry.js

@@ -1,54 +0,0 @@
-'use strict';
-
-var index = require('./index-077kM98l.js');
-
-const dropiAccordionItemCss = () => `:host{display:block;border-bottom:1px solid var(--Gray-Gray-100)}.accordion-header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px;background:white;border:none;cursor:pointer;text-align:left}.accordion-header-left{display:flex;align-items:center;gap:8px}.accordion-title{font-size:var(--font-size-m);font-weight:var(--font-weight-semibold);color:var(--Gray-Gray-700)}.accordion-chevron{transition:transform 0.3s ease}.accordion-chevron--open{transform:rotate(180deg)}.accordion-body{overflow:hidden;transition:max-height 0.3s ease-out}.accordion-content{padding:0 16px 16px 16px}`;
-
-const DropiAccordionItem = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    get el() { return index.getElement(this); }
-    /** The title of the item — matches Angular `sectionTitle` */
-    sectionTitle = '';
-    /** Index of the item — matches Angular `index` */
-    index;
-    /** Whether the section is expanded */
-    open = false;
-    /** Disable toggling */
-    disabled = false;
-    /** Icon name before title */
-    preIcon = '';
-    contentHeight = '0px';
-    contentRef;
-    openChanged(val) {
-        this.updateHeight(val);
-    }
-    componentDidLoad() {
-        this.updateHeight(this.open);
-    }
-    updateHeight(open) {
-        if (!this.contentRef)
-            return;
-        this.contentHeight = open ? `${this.contentRef.scrollHeight}px` : '0px';
-    }
-    handleToggle() {
-        if (this.disabled)
-            return;
-        // Notify parent if needed, or just toggle locally
-        this.el.closest('dropi-accordion');
-        this.open = !this.open;
-        setTimeout(() => this.updateHeight(this.open), 0);
-    }
-    render() {
-        return (index.h("div", { key: '33564d4efbb73ae0b3ec0195ebf0afed6b2a6cc0', class: { 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled } }, index.h("button", { key: '9a7e7cc044027c4d427a712c5ed352991ef622b7', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, index.h("span", { key: '17ffa01872142ab9a959104f884ce5cedada33c2', class: "accordion-header-left" }, this.preIcon && index.h("dropi-icon", { key: '8b02d875239d9ebaa42060e5dc1f4f8c6cfd3081', name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-600" }), index.h("span", { key: 'effa37d569bfcbc10774ff2a4a7787868cf83937', class: "accordion-title" }, this.sectionTitle)), index.h("span", { key: '743aa0db06415f8b763099b53d234474c82cb8e6', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, index.h("dropi-icon", { key: '2d66c4087eddaf3f139a063eadcd8b0fb668045d', name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))), index.h("div", { key: '4621aafe6d4592830cdaa32672de357c026a0b14', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, index.h("div", { key: '826b3ad470c9444ae2378e266332959f0f9f3529', class: "accordion-content" }, index.h("slot", { key: '8982c5506ecd1ed3ee44190096848ccbf9638b95' })))));
-    }
-    static get watchers() { return {
-        "open": [{
-                "openChanged": 0
-            }]
-    }; }
-};
-DropiAccordionItem.style = dropiAccordionItemCss();
-
-exports.dropi_accordion_item = DropiAccordionItem;

package/dist/cjs/dropi-accordion.cjs.entry.js

@@ -1,19 +0,0 @@
-'use strict';
-
-var index = require('./index-077kM98l.js');
-
-const dropiAccordionCss = () => `:host{display:block;width:100%;margin-bottom:-1px}*,*::before,*::after{box-sizing:border-box}.accordion{border-top:1px solid var(--Gray-Gray-100,#e6eaf2);border-bottom:1px solid var(--Gray-Gray-100,#e6eaf2);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--Size-4,16px) var(--Size-5,20px);background:transparent;border:none;cursor:pointer;gap:12px;text-align:left}.accordion-header:disabled{cursor:not-allowed;opacity:0.5}.accordion--open .accordion-header{border-bottom:1px solid var(--Gray-Gray-100,#e6eaf2)}.accordion-header-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.accordion-title{font-size:var(--font-size-m, 16px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-600, #475066);line-height:1.4}.accordion-chevron{display:flex;align-items:center;flex-shrink:0;transition:transform 0.22s ease}.accordion-chevron--open{transform:rotate(180deg)}.accordion-body{max-height:0;overflow:hidden;transition:max-height 0.28s ease}.accordion-content{padding:0 var(--Size-5,20px) var(--Size-4,16px);color:var(--Gray-Gray-600,#475066);font-size:var(--font-size-s,12px);line-height:1.6}`;
-
-const DropiAccordion = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    /** Allows multiple sections to be open at the same time. If false, only one section can be open. */
-    multiple = false;
-    render() {
-        return (index.h("div", { key: 'b4d44bde9b982a2e11cc074600f9de9424592fde', class: "accordion-container" }, index.h("slot", { key: '631732f3726d81dac4d188542180a1286c69258b' })));
-    }
-};
-DropiAccordion.style = dropiAccordionCss();
-
-exports.dropi_accordion = DropiAccordion;

package/dist/cjs/dropi-alert-legacy.cjs.entry.js

@@ -1,39 +0,0 @@
-'use strict';
-
-var index = require('./index-077kM98l.js');
-
-const dropiAlertLegacyCss = () => `:host{display:block;margin:10px 0}.alert-legacy{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:var(--Border-2);font-size:var(--font-size-s)}.alert-legacy--success{background:var(--Success-Success-50);color:var(--Success-Success-700);border:1px solid var(--Success-Success-200)}.alert-legacy--error{background:var(--Error-Error-50);color:var(--Error-Error-700);border:1px solid var(--Error-Error-200)}.alert-legacy--warning{background:var(--Warning-Warning-50);color:var(--Warning-Warning-700);border:1px solid var(--Warning-Warning-200)}.alert-legacy--info{background:var(--Info-Info-50);color:var(--Info-Info-700);border:1px solid var(--Info-Info-200)}.alert-legacy__close{background:transparent;border:none;font-size:20px;cursor:pointer;color:currentColor;opacity:0.6}.alert-legacy__close:hover{opacity:1}`;
-
-const DropiAlertLegacy = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    /** Visibility toggle */
-    visible = false;
-    /** Alert message */
-    message = '';
-    /** Semantic type: success | error | warning | info */
-    type = 'success';
-    /** Automatically close after timeout */
-    autoClose = false;
-    timer;
-    componentDidLoad() {
-        if (this.autoClose && this.visible) {
-            this.startTimer();
-        }
-    }
-    startTimer() {
-        clearTimeout(this.timer);
-        this.timer = setTimeout(() => {
-            this.visible = false;
-        }, 7000);
-    }
-    render() {
-        if (!this.visible)
-            return null;
-        return (index.h("div", { class: { 'alert-legacy': true, [`alert-legacy--${this.type}`]: true } }, index.h("div", { class: "alert-legacy__content" }, index.h("span", { class: "alert-legacy__message" }, this.message)), index.h("button", { class: "alert-legacy__close", onClick: () => this.visible = false }, "\u00D7")));
-    }
-};
-DropiAlertLegacy.style = dropiAlertLegacyCss();
-
-exports.dropi_alert_legacy = DropiAlertLegacy;

package/dist/cjs/dropi-alert-modal.cjs.entry.js

@@ -1,128 +0,0 @@
-'use strict';
-
-var index = require('./index-077kM98l.js');
-
-const dropiAlertModalCss = () => `:host{display:contents}.body-alert{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-3);width:100%;flex:1;overflow:hidden;padding-bottom:var(--Size-2)}.lottie-img{width:120px;height:120px;overflow:hidden;flex-shrink:0;align-self:center;margin-top:-8px;margin-bottom:var(--Size-2)}.lottie-img lottie-player{display:block;width:120px;height:120px}.lottie-img--loading{width:100%;height:120px;overflow:hidden;display:flex;align-items:center;justify-content:center}.lottie-img--loading lottie-player{width:300px;height:auto;flex-shrink:0}.content-alert{text-align:center;width:100%;display:flex;flex-direction:column;align-items:center}.content-alert h2{color:var(--Gray-Gray-800);font-size:19px;font-weight:var(--font-weight-semibold);margin:0}.content-alert p{color:var(--Gray-Gray-500);font-size:var(--font-size-s);margin-bottom:var(--Size-2);overflow-wrap:anywhere;max-height:100px;overflow:auto}.actions{display:flex;gap:var(--Size-3);width:100%}.actions dropi-button{flex:1;display:flex;justify-content:center}@media (max-width: 768px){.actions{flex-direction:column}.actions dropi-button{width:100%}}`;
-
-const DropiAlertModal = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.primaryButtonEvent = index.createEvent(this, "primaryButtonEvent", 7);
-        this.secondaryButtonEvent = index.createEvent(this, "secondaryButtonEvent", 7);
-        this.modalOpenChange = index.createEvent(this, "modalOpenChange", 7);
-        this.onHide = index.createEvent(this, "onHide", 7);
-    }
-    /** Controls visibility */
-    visible = false;
-    /** Modal type — determines Lottie animation */
-    type = 'question';
-    /** Bold title */
-    tittle = '';
-    /** Body message */
-    message = '';
-    /** Primary button label */
-    primaryButton = 'Accept';
-    /** Secondary button label (hidden if empty) */
-    secondaryButton = '';
-    /** Show loading state with loading.json Lottie */
-    loading = false;
-    /** Show close icon in header */
-    closable = false;
-    /** Hide action buttons */
-    displayButtons = true;
-    /** Loading title */
-    loadingTitle = 'Loading';
-    /** Loading message */
-    loadingMessage = 'Please wait a moment';
-    /**
-     * When true, primary button does NOT auto-close the modal (matches Angular `isStep`).
-     * Useful for step-by-step flows.
-     */
-    isStep = false;
-    /** Base z-index for the internal modal overlay (matches Angular `baseZIndex`) */
-    baseZIndex = 0;
-    /**
-     * Convenience object prop — matches Angular `params: ModalParams`.
-     * Fields: tittle, type, message, primaryButton, secondaryButton, loadingTitle,
-     * loadingMessage, closable, displayButtons.
-     * When provided, its values override the corresponding individual props.
-     */
-    params = null;
-    paramsChanged(val) {
-        if (!val)
-            return;
-        if (val.tittle !== undefined)
-            this.tittle = val.tittle;
-        if (val.type !== undefined)
-            this.type = val.type;
-        if (val.message !== undefined)
-            this.message = val.message;
-        if (val.primaryButton !== undefined)
-            this.primaryButton = val.primaryButton;
-        if (val.secondaryButton !== undefined)
-            this.secondaryButton = val.secondaryButton;
-        if (val.loadingTitle !== undefined)
-            this.loadingTitle = val.loadingTitle;
-        if (val.loadingMessage !== undefined)
-            this.loadingMessage = val.loadingMessage;
-        if (val.closable !== undefined)
-            this.closable = val.closable;
-        if (val.displayButtons !== undefined)
-            this.displayButtons = val.displayButtons;
-    }
-    /** Emitted when primary button is clicked — matches Angular 'primaryButtonEvent' */
-    primaryButtonEvent;
-    /** Emitted when secondary button is clicked — matches Angular 'secondaryButtonEvent' */
-    secondaryButtonEvent;
-    /** Emitted when modal open state changes — matches Angular 'modalOpenChange' */
-    modalOpenChange;
-    /** Emitted when modal is hidden — matches Angular 'onHide' */
-    onHide;
-    lottieMap = {
-        question: '/assets/lottie-files/question.json',
-        warning: '/assets/lottie-files/warning.json',
-        success: '/assets/lottie-files/success.json',
-        error: '/assets/lottie-files/failure.json',
-        loading: '/assets/lottie-files/loading.json',
-    };
-    componentWillLoad() {
-        if (this.params)
-            this.paramsChanged(this.params);
-    }
-    async show() {
-        this.visible = true;
-    }
-    async hide() {
-        this.visible = false;
-    }
-    handlePrimary() {
-        this.primaryButtonEvent.emit(true);
-        if (!this.isStep) {
-            this.visible = false;
-            this.modalOpenChange.emit(false);
-        }
-    }
-    handleSecondary() {
-        this.secondaryButtonEvent.emit(true);
-        this.visible = false;
-        this.modalOpenChange.emit(false);
-    }
-    onModalHide() {
-        this.visible = false;
-        this.modalOpenChange.emit(false);
-        this.onHide.emit();
-    }
-    render() {
-        const lottieKey = this.loading ? 'loading' : this.type;
-        const isLottieLoading = lottieKey === 'loading';
-        return (index.h("dropi-modal", { key: '42c41a88060c1039af7f85d518d93e9f5e0e8489', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, showFooter: false, size: "s", onOnHide: () => this.onModalHide() }, index.h("div", { key: 'e62b897c0b6f8c3bee4f3992e003cb88577708f3', class: "body-alert" }, this.lottieMap[lottieKey] && (index.h("div", { key: '0c1551477bcb926dc610f63a08542f3b8fc71a0d', class: `lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}` }, index.h("lottie-player", { key: lottieKey, src: this.lottieMap[lottieKey], background: "transparent", speed: "1", loop: true, autoplay: true }))), index.h("div", { key: 'b03602610b8ff78b4a7d5e0fcaf4e541d9e7ece6', class: "content-alert" }, index.h("h2", { key: 'c50ea63352df03d49ce0811a97ca02f031e654c9' }, this.loading ? this.loadingTitle : this.tittle), index.h("p", { key: '3f699157283cb48eb3948afede7291d965ae7066' }, this.loading ? this.loadingMessage : this.message)), !this.loading && this.displayButtons && (index.h("div", { key: '7d7c4282a726d82117b13ec23db36dd72b1327d5', class: "actions" }, this.secondaryButton && index.h("dropi-button", { key: '1a766fac9daded57f9b8a38ff3f5d43c7217210d', text: this.secondaryButton, severity: "secondary", onClick: () => this.handleSecondary(), fullWidth: true }), index.h("dropi-button", { key: '8c1053db7b35be9c5ceecd9c50a179f99efa9798', text: this.primaryButton, severity: "primary", onClick: () => this.handlePrimary(), fullWidth: true }))))));
-    }
-    static get watchers() { return {
-        "params": [{
-                "paramsChanged": 0
-            }]
-    }; }
-};
-DropiAlertModal.style = dropiAlertModalCss();
-
-exports.dropi_alert_modal = DropiAlertModal;