@dropi/ui 0.1.0

package/dist/types/utils/utils.d.ts

@@ -0,0 +1 @@
+export declare function format(first?: string, middle?: string, last?: string): string;

package/dist/types/utils/utils.unit.test.d.ts

@@ -0,0 +1 @@
+export {};

package/loader/cdn.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.d.ts

@@ -0,0 +1,24 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
+export declare function applyPolyfills(): Promise<void>;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/loader/index.es2017.js

@@ -0,0 +1 @@
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -0,0 +1,2 @@
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../dist/esm/loader.js';

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@dropi/ui",
+  "version": "0.1.0",
+  "description": "Dropi Design System — Web Components for Angular, React and Vue",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/dropi-ui/dropi-ui.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./loader": {
+      "import": "./loader/index.js",
+      "require": "./loader/index.cjs",
+      "types": "./loader/index.d.ts"
+    },
+    "./dist/components/*.js": {
+      "import": "./dist/components/*.js",
+      "require": "./dist/components/*.js"
+    },
+    "./dist/dropi-ui/dropi-ui.css": "./dist/dropi-ui/dropi-ui.css"
+  },
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "scripts": {
+    "build": "stencil build",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil-test",
+    "test:watch": "stencil-test --watch",
+    "generate": "stencil generate"
+  },
+  "devDependencies": {
+    "@stencil/angular-output-target": "^1.3.0",
+    "@stencil/core": "^4.27.1",
+    "@stencil/react-output-target": "^1.4.2",
+    "@stencil/vitest": "^1.8.3",
+    "@stencil/vue-output-target": "^0.13.1",
+    "@types/node": "^22.13.5",
+    "@vitest/browser-playwright": "^4.0.0",
+    "vitest": "^4.0.0"
+  },
+  "license": "MIT"
+}

package/readme.md

@@ -0,0 +1,89 @@
+[![Construido con Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data&colorA=16161d&style=flat-square)](https://stenciljs.com)
+
+# Dropi UI
+
+Este es el sistema de diseño y librería de componentes oficial de **Dropi**, construido utilizando *Web Components* (Componentes Web Nativos) a través de StencilJS.
+
+La gran ventaja de estar empaquetado como Web Components es que garantiza la máxima encapsulación visual y permite que **un único desarrollo funcione de manera universal** en cualquier navegador moderno o framework dominante de frontend (Angular, React, Vue, HTML puro) sin necesidad de reescribir la lógica ni perder estilos por colisiones de CSS externas.
+
+---
+
+## 🤖 Instalación Automatizada mediante IA (¡Nuevo y Recomendado!)
+
+Puedes instalar y configurar `dropi-ui` de manera totalmente automatizada en tus proyectos de **React**, **Angular** o **Vue** utilizando nuestro Agente IA de instalación. ¡Cero configuraciones manuales!
+
+1. Copia nuestro archivo maestro del agente ubicado en `.agents/workflows/install-dropi-ui.md` desde este repositorio y pégalo en la carpeta `.agents/workflows/` de tu proyecto destino.
+2. Abre tu asistente de programación con IA (Cursor, GitHub Copilot, Cline, etc.) dentro de tu proyecto.
+3. Ejecuta el siguiente "slash command" o comando rápido en el chat del asistente:
+   ```bash
+   /install-dropi-ui
+   ```
+4. Y listo. El agente de IA interpretará automáticamente qué framework usas, enlazará las dependencias exactas (`yarn` o `npm`), inyectará los estilos globales obligatorios, y comprobará compresión, reportándote cuando tu entorno esté 100% operativo.
+
+---
+
+## 🚀 Desarrollo Local
+
+Si necesitas clonar este repositorio para desarrollar la librería o modificar componentes:
+
+1. **Instalar dependencias y arrancar en modo desarrollo**:
+   ```bash
+   yarn install
+   yarn start
+   ```
+   *(También compatible con npm)*
+
+2. **Para compilar los componentes de forma definitiva para producción** (Genera los archivos para web y los wrappers para Angular/React):
+   ```bash
+   yarn run build
+   ```
+
+3. **Para correr las pruebas unitarias**:
+   ```bash
+   yarn test
+   ```
+
+---
+
+## 📦 Uso y Consumo Manual
+
+Si prefieres realizar el montaje a mano, existen dos aproximaciones:
+
+### 1. En Aplicaciones Node y Empaquetadores (Angular, React, Vite, etc.)
+
+Tras instalar localmente este módulo (`yarn add file:../dropi-ui`), puedes cargar toda la familia de componentes importando el loader inicial de Stencil:
+```typescript
+import '@dropi/ui/dist/dropi-ui/dropi-ui.esm.js';
+import '@dropi/ui/dist/dropi-ui/dropi-ui.css'; // Opcional, dependiendo del inyector
+```
+
+**Si estás utilizando React, es mejor usar el instalador de Wrapper oficial (`dropi-ui-react`)** ya que autocompleta los eventos y previene los conflictos en hooks:
+```tsx
+// App.tsx
+import { DropiButton, DropiInput } from '@dropi/ui-react';
+
+export default function MiApp() {
+  return (
+    <DropiButton 
+      type="default" 
+      severity="primary" 
+      size="normal" 
+      text="Ingresar a la plataforma" 
+    />
+  );
+}
+```
+
+### 2. Etiqueta Script Directa (HTML Puro / CDNs Lazos)
+
+Si solo quieres usar la librería en un archivo HTML tradicional sin ningún framework atado, solo debes inyectar nuestra distribución al encabezado o final del cuerpo:
+
+```html
+<script type="module" src="https://unpkg.com/@dropi/ui/dist/dropi-ui/dropi-ui.esm.js"></script>
+<!-- Asegúrate de cambiar unpkg.com por un entorno privado o ruta absoluta de ser necesario -->
+
+<!-- Úsalo como cualquier otra etiqueta HTML existente -->
+<dropi-button text="Enviar Datos"></dropi-button>
+```
+
+> **Nota:** Todos los componentes utilizan guiones e inician con el prefijo `dropi-` para asegurar que el explorador entienda que es un Custom Element.