@dropi/ui 0.1.3 → 0.1.4

package/dist/cjs/dropi-radio-button.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-CuGLZVqo.js');
 
-const dropiRadioButtonCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.dropi-radio-button{display:flex;align-items:center;justify-content:flex-start;gap:20px}label{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);line-height:1.5}input[type='radio']{appearance:none;width:20px;height:20px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:50%;background-color:transparent;position:relative;cursor:pointer;outline:none;flex-shrink:0;display:flex;justify-content:center;align-items:center}input[type='radio']::before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;background-color:var(--Primary-Primary-400, #f7b46f);border-radius:50%;display:none}input[type='radio']:checked{border:2px solid var(--Primary-Primary-500, #f49a3d)}input[type='radio']:checked::before{display:block}`;
+const dropiRadioButtonCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.dropi-radio-button{display:flex;align-items:center;justify-content:flex-start;gap:20px}label{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);line-height:1.5}input[type='radio']{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:50%;background-color:transparent;position:relative;cursor:pointer;outline:none;flex-shrink:0;align-self:center;vertical-align:middle;margin:0}input[type='radio']::before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;background-color:var(--Primary-Primary-400, #f7b46f);border-radius:50%;display:none}input[type='radio']:checked{border:2px solid var(--Primary-Primary-500, #f49a3d)}input[type='radio']:checked::before{display:block}`;
 
 const DropiRadioButton = class {
     constructor(hostRef) {

package/dist/collection/components/dropi-radio-button/dropi-radio-button.css

@@ -13,6 +13,7 @@
 
 label {
   display: flex;
+  flex-direction: row;
   align-items: center;
   gap: 8px;
   cursor: pointer;
@@ -24,8 +25,10 @@ label {
 
 input[type='radio'] {
   appearance: none;
+  -webkit-appearance: none;
   width: 20px;
   height: 20px;
+  min-width: 20px;
   border: 2px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: 50%;
   background-color: transparent;
@@ -33,9 +36,9 @@ input[type='radio'] {
   cursor: pointer;
   outline: none;
   flex-shrink: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  align-self: center;
+  vertical-align: middle;
+  margin: 0;
 }
 
 input[type='radio']::before {

package/dist/components/dropi-radio-button.js

@@ -1 +1 @@
-import{t as e,p as t,H as r,c as i,h as o}from"./index.js";const n=t(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dropiChange=i(this,"dropiChange")}label="";name="radio";inputId="radioButton";checked=!1;resetTrigger=!1;dropiChange;onResetTrigger(e){e&&(this.checked=!1)}handleChange(e){this.checked=e.target.checked,this.dropiChange.emit(e)}render(){return o("div",{key:"3b31699bf088bee52465981074c0aea48b6fe112",class:"dropi-radio-button"},o("label",{key:"072d19bd9c88739b849db0e264c65183eaab2132",htmlFor:this.inputId},o("input",{key:"82d1600002e9dc2795cdc5c731997742adc8e2db",id:this.inputId,type:"radio",name:this.name,checked:this.checked,onChange:e=>this.handleChange(e)}),this.label))}static get formAssociated(){return!0}static get watchers(){return{resetTrigger:[{onResetTrigger:0}]}}static get style(){return":host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.dropi-radio-button{display:flex;align-items:center;justify-content:flex-start;gap:20px}label{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);line-height:1.5}input[type='radio']{appearance:none;width:20px;height:20px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:50%;background-color:transparent;position:relative;cursor:pointer;outline:none;flex-shrink:0;display:flex;justify-content:center;align-items:center}input[type='radio']::before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;background-color:var(--Primary-Primary-400, #f7b46f);border-radius:50%;display:none}input[type='radio']:checked{border:2px solid var(--Primary-Primary-500, #f49a3d)}input[type='radio']:checked::before{display:block}"}},[577,"dropi-radio-button",{label:[1],name:[1],inputId:[1,"input-id"],checked:[1540],resetTrigger:[4,"reset-trigger"]},void 0,{resetTrigger:[{onResetTrigger:0}]}]);function a(){"undefined"!=typeof customElements&&["dropi-radio-button"].forEach((t=>{"dropi-radio-button"===t&&(customElements.get(e(t))||customElements.define(e(t),n))}))}a();const s=n,d=a;export{s as DropiRadioButton,d as defineCustomElement}
+import{t as e,p as r,H as t,c as i,h as o}from"./index.js";const n=r(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dropiChange=i(this,"dropiChange")}label="";name="radio";inputId="radioButton";checked=!1;resetTrigger=!1;dropiChange;onResetTrigger(e){e&&(this.checked=!1)}handleChange(e){this.checked=e.target.checked,this.dropiChange.emit(e)}render(){return o("div",{key:"3b31699bf088bee52465981074c0aea48b6fe112",class:"dropi-radio-button"},o("label",{key:"072d19bd9c88739b849db0e264c65183eaab2132",htmlFor:this.inputId},o("input",{key:"82d1600002e9dc2795cdc5c731997742adc8e2db",id:this.inputId,type:"radio",name:this.name,checked:this.checked,onChange:e=>this.handleChange(e)}),this.label))}static get formAssociated(){return!0}static get watchers(){return{resetTrigger:[{onResetTrigger:0}]}}static get style(){return":host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.dropi-radio-button{display:flex;align-items:center;justify-content:flex-start;gap:20px}label{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);line-height:1.5}input[type='radio']{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:50%;background-color:transparent;position:relative;cursor:pointer;outline:none;flex-shrink:0;align-self:center;vertical-align:middle;margin:0}input[type='radio']::before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;background-color:var(--Primary-Primary-400, #f7b46f);border-radius:50%;display:none}input[type='radio']:checked{border:2px solid var(--Primary-Primary-500, #f49a3d)}input[type='radio']:checked::before{display:block}"}},[577,"dropi-radio-button",{label:[1],name:[1],inputId:[1,"input-id"],checked:[1540],resetTrigger:[4,"reset-trigger"]},void 0,{resetTrigger:[{onResetTrigger:0}]}]);function a(){"undefined"!=typeof customElements&&["dropi-radio-button"].forEach((r=>{"dropi-radio-button"===r&&(customElements.get(e(r))||customElements.define(e(r),n))}))}a();const s=n,d=a;export{s as DropiRadioButton,d as defineCustomElement}

package/dist/dropi-ui/dropi-ui.esm.js

@@ -1 +1 @@
-import{p as e,g as o,b as t}from"./p-DFz-gwFP.js";export{s as setNonce}from"./p-DFz-gwFP.js";(()=>{const o=import.meta.url,t={};return""!==o&&(t.resourcesUrl=new URL(".",o).href),e(t)})().then((async e=>(await o(),t([["p-6f0aa619",[[513,"dropi-icon",{name:[1],width:[1],height:[1],color:[1]},null,{color:[{colorChanged:0}]}]]],["p-21abf91a",[[769,"dropi-button",{type:[1],severity:[1],size:[1],state:[1],preIcon:[1,"pre-icon"],postIcon:[1,"post-icon"],text:[1]}]]],["p-a46a05a6",[[577,"dropi-input",{inputId:[1,"input-id"],name:[1],label:[1],placeholder:[1],value:[1025],maxlength:[2],disabled:[516],required:[516],showAsterisk:[4,"show-asterisk"],fixedLabel:[4,"fixed-label"],inputMode:[1,"input-mode"],passwordInput:[4,"password-input"],moneyFormat:[4,"money-format"],thousandSeparator:[4,"thousand-separator"],onlyNumbers:[4,"only-numbers"],allowDecimals:[4,"allow-decimals"],onlyLetters:[4,"only-letters"],icon:[1],iconColor:[1,"icon-color"],invalid:[4],helperText:[1,"helper-text"],showHelperOnlyOnError:[4,"show-helper-only-on-error"],showPassword:[32],touched:[32]},null,{value:[{valueChanged:0}],disabled:[{disabledChanged:0}]}]]],["p-c7b9cbda",[[577,"dropi-select",{label:[1],placeholder:[1],options:[1040],name:[1],disabled:[516],invalid:[4],errorText:[1,"error-text"],helperText:[1,"helper-text"],showObligatory:[4,"show-obligatory"],searchEnabled:[4,"search-enabled"],multiSelect:[4,"multi-select"],dropdownType:[4,"dropdown-type"],showCountryFlags:[4,"show-country-flags"],radioOptions:[4,"radio-options"],placeHolderSearch:[1,"place-holder-search"],preIcon:[1,"pre-icon"],defaultSelectedId:[1032,"default-selected-id"],value:[1040],isOpen:[32],selectedOption:[32],multiSelected:[32],filteredOptions:[32],searchTerm:[32],dropdownStyle:[32],setById:[64],setByLabel:[64],clearSelection:[64],resetMultiSelect:[64]},[[4,"click","handleOutsideClick"]],{options:[{optionsChanged:0}],defaultSelectedId:[{defaultChanged:0}],value:[{valueChanged:0}]}]]],["p-52291024",[[513,"dropi-tag",{type:[1],state:[1],showIcon:[4,"show-icon"],icon:[1],text:[1]},null,{type:[{propsChanged:0}],state:[{propsChanged:0}]}]]],["p-9c7076d3",[[577,"dropi-text-area",{inputId:[1,"input-id"],name:[1],label:[1],placeholder:[1],value:[1025],maxlength:[2],minlength:[2],rows:[2],resize:[1],disabled:[516],required:[516],showAsterisk:[4,"show-asterisk"],helperText:[1,"helper-text"],invalid:[4],touched:[32]},null,{value:[{valueChanged:0}]}]]],["p-f785011f",[[513,"dropi-badge",{state:[1]}]]],["p-dd089a60",[[577,"dropi-checkbox",{checked:[1540],disabled:[516]}]]],["p-54502c46",[[577,"dropi-radio-button",{label:[1],name:[1],inputId:[1,"input-id"],checked:[1540],resetTrigger:[4,"reset-trigger"]},null,{resetTrigger:[{onResetTrigger:0}]}]]],["p-a1944f3d",[[577,"dropi-switch",{isChecked:[1540,"is-checked"],disabled:[516]}]]]],e))));
+import{p as e,g as o,b as t}from"./p-DFz-gwFP.js";export{s as setNonce}from"./p-DFz-gwFP.js";(()=>{const o=import.meta.url,t={};return""!==o&&(t.resourcesUrl=new URL(".",o).href),e(t)})().then((async e=>(await o(),t([["p-6f0aa619",[[513,"dropi-icon",{name:[1],width:[1],height:[1],color:[1]},null,{color:[{colorChanged:0}]}]]],["p-21abf91a",[[769,"dropi-button",{type:[1],severity:[1],size:[1],state:[1],preIcon:[1,"pre-icon"],postIcon:[1,"post-icon"],text:[1]}]]],["p-a46a05a6",[[577,"dropi-input",{inputId:[1,"input-id"],name:[1],label:[1],placeholder:[1],value:[1025],maxlength:[2],disabled:[516],required:[516],showAsterisk:[4,"show-asterisk"],fixedLabel:[4,"fixed-label"],inputMode:[1,"input-mode"],passwordInput:[4,"password-input"],moneyFormat:[4,"money-format"],thousandSeparator:[4,"thousand-separator"],onlyNumbers:[4,"only-numbers"],allowDecimals:[4,"allow-decimals"],onlyLetters:[4,"only-letters"],icon:[1],iconColor:[1,"icon-color"],invalid:[4],helperText:[1,"helper-text"],showHelperOnlyOnError:[4,"show-helper-only-on-error"],showPassword:[32],touched:[32]},null,{value:[{valueChanged:0}],disabled:[{disabledChanged:0}]}]]],["p-c7b9cbda",[[577,"dropi-select",{label:[1],placeholder:[1],options:[1040],name:[1],disabled:[516],invalid:[4],errorText:[1,"error-text"],helperText:[1,"helper-text"],showObligatory:[4,"show-obligatory"],searchEnabled:[4,"search-enabled"],multiSelect:[4,"multi-select"],dropdownType:[4,"dropdown-type"],showCountryFlags:[4,"show-country-flags"],radioOptions:[4,"radio-options"],placeHolderSearch:[1,"place-holder-search"],preIcon:[1,"pre-icon"],defaultSelectedId:[1032,"default-selected-id"],value:[1040],isOpen:[32],selectedOption:[32],multiSelected:[32],filteredOptions:[32],searchTerm:[32],dropdownStyle:[32],setById:[64],setByLabel:[64],clearSelection:[64],resetMultiSelect:[64]},[[4,"click","handleOutsideClick"]],{options:[{optionsChanged:0}],defaultSelectedId:[{defaultChanged:0}],value:[{valueChanged:0}]}]]],["p-52291024",[[513,"dropi-tag",{type:[1],state:[1],showIcon:[4,"show-icon"],icon:[1],text:[1]},null,{type:[{propsChanged:0}],state:[{propsChanged:0}]}]]],["p-9c7076d3",[[577,"dropi-text-area",{inputId:[1,"input-id"],name:[1],label:[1],placeholder:[1],value:[1025],maxlength:[2],minlength:[2],rows:[2],resize:[1],disabled:[516],required:[516],showAsterisk:[4,"show-asterisk"],helperText:[1,"helper-text"],invalid:[4],touched:[32]},null,{value:[{valueChanged:0}]}]]],["p-f785011f",[[513,"dropi-badge",{state:[1]}]]],["p-dd089a60",[[577,"dropi-checkbox",{checked:[1540],disabled:[516]}]]],["p-bda1427f",[[577,"dropi-radio-button",{label:[1],name:[1],inputId:[1,"input-id"],checked:[1540],resetTrigger:[4,"reset-trigger"]},null,{resetTrigger:[{onResetTrigger:0}]}]]],["p-a1944f3d",[[577,"dropi-switch",{isChecked:[1540,"is-checked"],disabled:[516]}]]]],e))));

package/dist/dropi-ui/p-bda1427f.entry.js

@@ -0,0 +1 @@
+import{r as e,c as r,h as i}from"./p-DFz-gwFP.js";const t=class{constructor(i){e(this,i),this.dropiChange=r(this,"dropiChange")}label="";name="radio";inputId="radioButton";checked=!1;resetTrigger=!1;dropiChange;onResetTrigger(e){e&&(this.checked=!1)}handleChange(e){this.checked=e.target.checked,this.dropiChange.emit(e)}render(){return i("div",{key:"3b31699bf088bee52465981074c0aea48b6fe112",class:"dropi-radio-button"},i("label",{key:"072d19bd9c88739b849db0e264c65183eaab2132",htmlFor:this.inputId},i("input",{key:"82d1600002e9dc2795cdc5c731997742adc8e2db",id:this.inputId,type:"radio",name:this.name,checked:this.checked,onChange:e=>this.handleChange(e)}),this.label))}static get formAssociated(){return!0}static get watchers(){return{resetTrigger:[{onResetTrigger:0}]}}};t.style=":host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.dropi-radio-button{display:flex;align-items:center;justify-content:flex-start;gap:20px}label{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);line-height:1.5}input[type='radio']{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:50%;background-color:transparent;position:relative;cursor:pointer;outline:none;flex-shrink:0;align-self:center;vertical-align:middle;margin:0}input[type='radio']::before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;background-color:var(--Primary-Primary-400, #f7b46f);border-radius:50%;display:none}input[type='radio']:checked{border:2px solid var(--Primary-Primary-500, #f49a3d)}input[type='radio']:checked::before{display:block}";export{t as dropi_radio_button}

package/dist/esm/dropi-radio-button.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-DFz-gwFP.js';
 
-const dropiRadioButtonCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.dropi-radio-button{display:flex;align-items:center;justify-content:flex-start;gap:20px}label{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);line-height:1.5}input[type='radio']{appearance:none;width:20px;height:20px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:50%;background-color:transparent;position:relative;cursor:pointer;outline:none;flex-shrink:0;display:flex;justify-content:center;align-items:center}input[type='radio']::before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;background-color:var(--Primary-Primary-400, #f7b46f);border-radius:50%;display:none}input[type='radio']:checked{border:2px solid var(--Primary-Primary-500, #f49a3d)}input[type='radio']:checked::before{display:block}`;
+const dropiRadioButtonCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.dropi-radio-button{display:flex;align-items:center;justify-content:flex-start;gap:20px}label{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);line-height:1.5}input[type='radio']{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:50%;background-color:transparent;position:relative;cursor:pointer;outline:none;flex-shrink:0;align-self:center;vertical-align:middle;margin:0}input[type='radio']::before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;background-color:var(--Primary-Primary-400, #f7b46f);border-radius:50%;display:none}input[type='radio']:checked{border:2px solid var(--Primary-Primary-500, #f49a3d)}input[type='radio']:checked::before{display:block}`;
 
 const DropiRadioButton = class {
     constructor(hostRef) {

package/dist/types/index.d.ts

@@ -5,3 +5,4 @@
  */
 export type * from './components.d.ts';
 export type { BadgeState } from './components/dropi-badge/dropi-badge';
+export type { SelectOption, SelectOptionGroup } from './components/dropi-select/select.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/ui",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Dropi Design System — Web Components for Angular, React and Vue",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -33,7 +33,7 @@
     "scripts/"
   ],
   "scripts": {
-    "build": "stencil build",
+    "build": "stencil build && cd ../dropi-ui-react && npm run build",
     "start": "stencil build --dev --watch --serve",
     "test": "stencil-test",
     "test:watch": "stencil-test --watch",

package/readme.md

@@ -1,107 +1,483 @@
-[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)
+# @dropi/ui
 
-# Stencil Component Starter
+Librería de Web Components del Design System de Dropi, construida con **Stencil.js v4**.
+Genera componentes reutilizables para Angular, React y Vue desde una única base de código.
 
-> This is a starter project for building a standalone Web Components using Stencil.
+- **Paquete npm:** `@dropi/ui` (v0.1.0)
+- **React wrappers:** `@dropi/ui-react`
 
-Stencil is a compiler for building fast web apps using Web Components.
+---
 
-Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than runtime tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements specification.
+## Instalación
 
-Stencil components are just Web Components, so they work in any major framework or with no framework at all.
+```bash
+npm install @dropi/ui
+```
 
-## Getting Started
+---
 
-To start building a new web component using Stencil, clone this repo to a new directory:
+## Setup
 
-```bash
-git clone https://github.com/stenciljs/component-starter.git my-component
-cd my-component
-git remote rm origin
+### React (`main.tsx`)
+
+```typescript
+import { defineCustomElements } from '@dropi/ui/loader'
+import '@dropi/ui/dist/dropi-ui/dropi-ui.css'
+
+defineCustomElements()
 ```
 
-and run:
+### Angular (`main.ts`)
 
-```bash
-npm install
-npm start
+```typescript
+import { defineCustomElements } from '@dropi/ui/loader'
+import '@dropi/ui/dist/dropi-ui/dropi-ui.css'
+
+defineCustomElements()
+bootstrapApplication(AppComponent, appConfig)
 ```
 
-To build the component for production, run:
+En módulos o componentes Angular que usen tags `<dropi-*>`, agregar el schema:
 
-```bash
-npm run build
+```typescript
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+
+@NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })
+// o en standalone:
+@Component({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })
 ```
 
-To run the unit tests for the components, run:
+### Assets (íconos)
 
-```bash
-npm test
+El componente `<dropi-icon>` requiere el sprite en `/assets/icons/symbol/svg/sprite.css.svg`.
+
+**Angular** — en `angular.json`:
+```json
+"assets": [
+  { "glob": "sprite.css.svg", "input": "node_modules/@dropi/ui/dist/dropi-ui/assets/icons/symbol/svg/", "output": "assets/icons/symbol/svg/" }
+]
 ```
 
-Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
+**React/Vite** — copiar a `public/assets/icons/symbol/svg/`.
 
-## Naming Components
+---
 
-When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
+## Nota importante sobre eventos
 
-Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the [Ionic-generated](https://ionicframework.com/) web components use the prefix `ion`.
+Todos los eventos son `CustomEvent`. El valor emitido **siempre viene en `e.detail`**, no en `e` directamente.
 
-## Using this component
+```typescript
+// ❌ Incorrecto — e es el CustomEvent completo
+onDropiChange={(e) => console.log(e)}
 
-There are two strategies we recommend for using web components built with Stencil.
+// ✅ Correcto
+onDropiChange={(e) => console.log(e.detail)}
+```
 
-The first step for all two of these strategies is to [publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).
+---
 
-You can read more about these different approaches in the [Stencil docs](https://stenciljs.com/docs/publishing).
+## Componentes
 
-### Lazy Loading
+---
 
-If your Stencil project is built with the [`dist`](https://stenciljs.com/docs/distribution) output target, you can import a small bootstrap script that registers all components and allows you to load individual component scripts lazily.
+### `<dropi-button>`
 
-For example, given your Stencil project namespace is called `my-design-system`, to use `my-component` on any website, inject this into your HTML:
+Botón de acción principal con múltiples variantes de tipo, apariencia, tamaño y estado.
 
+**Props**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `type` | `'legacy' \| 'default' \| 'success' \| 'info' \| 'error' \| 'warning' \| 'dropdown'` | `'default'` | Paleta de color |
+| `severity` | `'primary' \| 'secondary' \| 'tertiary'` | `'primary'` | Relleno: filled / outlined / ghost |
+| `size` | `'large' \| 'normal' \| 'small'` | `'normal'` | Tamaño |
+| `state` | `'default' \| 'disabled' \| 'loading'` | `'default'` | Estado |
+| `text` | `string` | `''` | Texto del label |
+| `preIcon` | `string` | `''` | Ícono antes del texto |
+| `postIcon` | `string` | `''` | Ícono después del texto |
+
+**Eventos**
+
+| Evento | `e.detail` | Cuándo |
+|---|---|---|
+| `dropiClick` | `MouseEvent` | Al hacer click (no se emite si `state` es `disabled` o `loading`) |
+
+**Ejemplo React**
+```tsx
+<DropiButton
+  text="Guardar"
+  severity="primary"
+  size="normal"
+  onDropiClick={(e) => console.log(e.detail)}
+/>
+```
+
+**Ejemplo Angular**
 ```html
-<script type="module" src="https://unpkg.com/my-design-system"></script>
-<!--
-To avoid unpkg.com redirects to the actual file, you can also directly import:
-https://unpkg.com/foobar-design-system@0.0.1/dist/foobar-design-system/foobar-design-system.esm.js
--->
-<my-component first="Stencil" middle="'Don't call me a framework'" last="JS"></my-component>
+<dropi-button text="Guardar" severity="primary" (dropiClick)="onSave($event)"></dropi-button>
 ```
 
-This will only load the necessary scripts needed to render `<my-component />`. Once more components of this package are used, they will automatically be loaded lazily.
+---
+
+### `<dropi-checkbox>`
+
+Checkbox estilizado con soporte para formularios nativos.
+
+**Props**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `checked` | `boolean` | `false` | Estado del checkbox |
+| `disabled` | `boolean` | `false` | Deshabilita el checkbox |
 
-You can also import the script as part of your `node_modules` in your applications entry file:
+**Eventos**
 
+| Evento | `e.detail` | Cuándo |
+|---|---|---|
+| `dropiChange` | `boolean` | Al cambiar el estado (`true` = marcado, `false` = desmarcado) |
+
+> `e.detail` es el boolean directamente. Si ves "el objeto completo" es porque estás leyendo `e` en vez de `e.detail`.
+
+**Ejemplo React**
 ```tsx
-import 'foobar-design-system/dist/foobar-design-system/foobar-design-system.esm.js';
+const [checked, setChecked] = useState(false)
+
+<DropiCheckbox
+  checked={checked}
+  onDropiChange={(e) => setChecked(e.detail)}
+/>
+```
+
+**Ejemplo Angular**
+```html
+<dropi-checkbox [checked]="checked" (dropiChange)="checked = $event.detail"></dropi-checkbox>
 ```
 
-Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-y6v26a?file=src%2Fmain.tsx).
+---
+
+### `<dropi-switch>`
+
+Toggle switch on/off.
+
+**Props**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `isChecked` | `boolean` | `false` | Estado del switch |
+| `disabled` | `boolean` | `false` | Deshabilita el switch |
+
+**Eventos**
 
-### Standalone
+| Evento | `e.detail` | Cuándo |
+|---|---|---|
+| `dropiChange` | `boolean` | Al togglear (`true` = encendido, `false` = apagado) |
 
-If you are using a Stencil component library with `dist-custom-elements`, we recommend importing Stencil components individually in those files where they are needed.
+**Ejemplo React**
+```tsx
+const [on, setOn] = useState(false)
 
-To export Stencil components as standalone components make sure you have the [`dist-custom-elements`](https://stenciljs.com/docs/custom-elements) output target defined in your `stencil.config.ts`.
+<DropiSwitch isChecked={on} onDropiChange={(e) => setOn(e.detail)} />
+```
 
-For example, given you'd like to use `<my-component />` as part of a React component, you can import the component directly via:
+---
+
+### `<dropi-input>`
+
+Campo de texto con label flotante, validación, ícono, toggle de contraseña, formato monetario y asociación nativa a formularios.
+
+**Props**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `value` | `string` | `''` | Valor controlado |
+| `label` | `string` | `''` | Label flotante o fija |
+| `placeholder` | `string` | `' '` | Placeholder |
+| `name` | `string` | `''` | Nombre para formularios nativos |
+| `inputId` | `string` | `''` | ID del input (default: valor del label) |
+| `disabled` | `boolean` | `false` | Deshabilita el campo |
+| `required` | `boolean` | `false` | Marca como requerido |
+| `showAsterisk` | `boolean` | `true` | Muestra asterisco cuando `required` |
+| `fixedLabel` | `boolean` | `false` | Label fija arriba en vez de flotante |
+| `inputMode` | `'text' \| 'numeric' \| 'decimal' \| 'tel' \| 'email' \| 'url' \| 'search'` | `'text'` | Teclado en móvil |
+| `maxlength` | `number` | — | Longitud máxima |
+| `invalid` | `boolean` | `false` | Marca el campo como inválido |
+| `helperText` | `string` | `''` | Texto de ayuda o error debajo |
+| `showHelperOnlyOnError` | `boolean` | `false` | Solo muestra helperText cuando inválido |
+| `passwordInput` | `boolean` | `false` | Modo contraseña con toggle ojo |
+| `moneyFormat` | `boolean` | `false` | Formato `$1,000,000` |
+| `thousandSeparator` | `boolean` | `false` | Formato `1,000,000` sin símbolo |
+| `onlyNumbers` | `boolean` | `false` | Solo permite números |
+| `allowDecimals` | `boolean` | `false` | Permite decimales (con `onlyNumbers`) |
+| `onlyLetters` | `boolean` | `false` | Solo permite letras |
+| `icon` | `string` | `''` | Nombre del ícono (visible solo si hay valor) |
+| `iconColor` | `string` | `'Gray-Gray-400'` | Token de color del ícono |
+
+**Eventos**
+
+| Evento | `e.detail` | Cuándo |
+|---|---|---|
+| `dropiInput` | `string` | En cada tecla (keystroke) |
+| `dropiChange` | `string` | Al perder el foco (blur) |
+| `dropiFocus` | `void` | Al enfocar el campo |
+| `dropiBlur` | `void` | Al desenfocar el campo |
+
+**Ejemplo React**
+```tsx
+const [value, setValue] = useState('')
+
+<DropiInput
+  label="Nombre"
+  value={value}
+  onDropiInput={(e) => setValue(e.detail)}
+  onDropiChange={(e) => console.log('blur:', e.detail)}
+  required
+  invalid={value.length < 3}
+  helperText="Mínimo 3 caracteres"
+/>
+```
 
+---
+
+### `<dropi-text-area>`
+
+Área de texto multi-línea con label, contador de caracteres, validación y asociación nativa a formularios.
+
+**Props**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `value` | `string` | `''` | Valor controlado |
+| `label` | `string` | `''` | Label superior |
+| `placeholder` | `string` | `''` | Placeholder |
+| `name` | `string` | `''` | Nombre para formularios nativos |
+| `inputId` | `string` | `''` | ID del textarea |
+| `rows` | `number` | `4` | Número de filas visibles |
+| `maxlength` | `number` | — | Longitud máxima (muestra contador) |
+| `minlength` | `number` | `0` | Longitud mínima |
+| `resize` | `'none' \| 'both' \| 'horizontal' \| 'vertical'` | `'vertical'` | Comportamiento de resize |
+| `disabled` | `boolean` | `false` | Deshabilita el campo |
+| `required` | `boolean` | `false` | Marca como requerido |
+| `showAsterisk` | `boolean` | `false` | Muestra asterisco cuando `required` |
+| `invalid` | `boolean` | `false` | Marca el campo como inválido |
+| `helperText` | `string` | `''` | Texto de ayuda o error |
+
+**Eventos**
+
+| Evento | `e.detail` | Cuándo |
+|---|---|---|
+| `dropiInput` | `string` | En cada tecla (keystroke) |
+| `dropiChange` | `string` | Al perder el foco (blur) |
+| `dropiFocus` | `void` | Al enfocar el campo |
+| `dropiBlur` | `void` | Al desenfocar el campo |
+
+**Ejemplo React**
 ```tsx
-import 'foobar-design-system/my-component';
-
-function App() {
-  return (
-    <>
-      <div>
-        <my-component first="Stencil" middle="'Don't call me a framework'" last="JS"></my-component>
-      </div>
-    </>
-  );
+const [text, setText] = useState('')
+
+<DropiTextArea
+  label="Descripción"
+  value={text}
+  maxlength={200}
+  rows={5}
+  onDropiInput={(e) => setText(e.detail)}
+/>
+```
+
+---
+
+### `<dropi-select>`
+
+Select avanzado con búsqueda, multi-selección, opciones agrupadas, flags de países y opciones radio con imagen.
+
+**Tipos**
+
+```typescript
+interface SelectOption {
+  id: string | number
+  label: string
+  shortLabel?: string      // para showCountryFlags
+  secondLabel?: string     // subtítulo en radioOptions
+  countryCode?: string     // código de país para flags
+  imageUrl?: string        // imagen en radioOptions
+  preIcon?: string         // ícono izquierdo
+  disabled?: boolean
+}
+
+interface SelectOptionGroup {
+  category: string         // título del grupo
+  options: SelectOption[]
 }
+```
 
-export default App;
+**Props**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `options` | `SelectOption[] \| SelectOptionGroup[]` | `[]` | Lista de opciones |
+| `label` | `string` | `''` | Label superior |
+| `placeholder` | `string` | `'Seleccionar'` | Texto sin selección |
+| `name` | `string` | `''` | Nombre para formularios nativos |
+| `value` | `SelectOption \| null` | `null` | Opción seleccionada (controlado) |
+| `defaultSelectedId` | `string \| number` | `''` | Pre-seleccionar por id |
+| `disabled` | `boolean` | `false` | Deshabilita el select |
+| `invalid` | `boolean` | `false` | Estado inválido |
+| `errorText` | `string` | `''` | Texto de error |
+| `helperText` | `string` | `''` | Texto de ayuda |
+| `showObligatory` | `boolean` | `false` | Muestra asterisco de obligatorio |
+| `searchEnabled` | `boolean` | `false` | Habilita búsqueda en el dropdown |
+| `multiSelect` | `boolean` | `false` | Permite múltiples selecciones |
+| `dropdownType` | `boolean` | `false` | Trigger sin borde (inline) |
+| `showCountryFlags` | `boolean` | `false` | Muestra flag de país |
+| `radioOptions` | `boolean` | `false` | Opciones estilo radio con imagen |
+| `placeHolderSearch` | `string` | `'Buscar'` | Placeholder del buscador |
+| `preIcon` | `string` | `''` | Ícono antes del label del trigger |
+
+**Métodos públicos**
+
+| Método | Descripción |
+|---|---|
+| `setById(id)` | Selecciona una opción por su id |
+| `setByLabel(label)` | Selecciona una opción por su label |
+| `clearSelection()` | Limpia la selección actual |
+| `resetMultiSelect()` | Limpia la selección múltiple |
+
+**Eventos**
+
+| Evento | `e.detail` | Cuándo |
+|---|---|---|
+| `dropiChange` | `SelectOption` (single) o `SelectOption[]` (multi) | Al seleccionar una opción |
+| `dropiClear` | `void` | Al limpiar la selección |
+| `dropiSearch` | `string` | Al escribir en el buscador |
+| `dropiScrollEnd` | `void` | Al llegar al final del scroll (paginación) |
+| `dropiKeyEnter` | `KeyboardEvent` | Al presionar Enter en el buscador |
+
+**Ejemplo React**
+```tsx
+const [selected, setSelected] = useState(null)
+
+const options = [
+  { id: 1, label: 'Colombia' },
+  { id: 2, label: 'México' },
+]
+
+<DropiSelect
+  label="País"
+  options={options}
+  searchEnabled
+  onDropiChange={(e) => setSelected(e.detail)}
+/>
 ```
 
-Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-b6zuds?file=src%2FApp.tsx).# dropi-ui
+---
+
+### `<dropi-radio-button>`
+
+Radio button estilizado con label y soporte para grupos.
+
+**Props**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `label` | `string` | `''` | Texto del label |
+| `name` | `string` | `'radio'` | Nombre para agrupar radios |
+| `inputId` | `string` | `'radioButton'` | ID del input |
+| `checked` | `boolean` | `false` | Estado seleccionado |
+| `resetTrigger` | `boolean` | `false` | Al poner `true` resetea a desmarcado |
+
+**Eventos**
+
+| Evento | `e.detail` | Cuándo |
+|---|---|---|
+| `dropiChange` | `Event` (evento nativo) | Al seleccionar el radio |
+
+> A diferencia del checkbox, emite el `Event` nativo. Para controlar el estado, maneja la prop `checked` desde el padre.
+
+**Ejemplo React**
+```tsx
+const [selected, setSelected] = useState('a')
+
+<DropiRadioButton label="Opción A" name="grupo" inputId="opt-a" checked={selected === 'a'} onDropiChange={() => setSelected('a')} />
+<DropiRadioButton label="Opción B" name="grupo" inputId="opt-b" checked={selected === 'b'} onDropiChange={() => setSelected('b')} />
+```
+
+---
+
+### `<dropi-badge>`
+
+Badge de estado para cuentas o usuarios. Sin eventos.
+
+**Props**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `state` | `'pending' \| 'active' \| 'canceled' \| 'frozen'` | `'pending'` | Estado a mostrar |
+
+| State | Texto mostrado |
+|---|---|
+| `pending` | Pendiente |
+| `active` | Activo |
+| `canceled` | Cancelado |
+| `frozen` | Congelado |
+
+**Ejemplo React**
+```tsx
+<DropiBadge state="active" />
+<DropiBadge state="pending" />
+```
+
+---
+
+### `<dropi-tag>`
+
+Tag/chip de color para categorías, estados o etiquetas. Sin eventos.
+
+**Props**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `type` | `'primary' \| 'secondary'` | `'primary'` | `primary` = relleno, `secondary` = suave |
+| `state` | `'default' \| 'success' \| 'info' \| 'warning' \| 'error' \| 'legacy'` | `'default'` | Color del tag |
+| `text` | `string` | `''` | Texto del tag |
+| `showIcon` | `boolean` | `false` | Mostrar ícono |
+| `icon` | `string` | `''` | Nombre del ícono del sprite |
+
+**Ejemplo React**
+```tsx
+<DropiTag text="Activo" state="success" type="primary" />
+<DropiTag text="Pendiente" state="warning" type="secondary" />
+<DropiTag text="Error" state="error" showIcon icon="Warning-circle" />
+```
+
+---
+
+### `<dropi-icon>`
+
+Renderiza íconos SVG desde el sprite de Dropi. Sin eventos.
+
+**Props**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `name` | `string` | `''` | Nombre del ícono en el sprite (ej. `'Home'`, `'Search'`) |
+| `width` | `string` | `'24px'` | Ancho (valor CSS) |
+| `height` | `string` | `'24px'` | Alto (valor CSS) |
+| `color` | `string` | `'currentColor'` | Hex `#ff0000`, token sin `--` (`Primary-Primary-500`), o `currentColor` |
+
+> Requiere el sprite en `/assets/icons/symbol/svg/sprite.css.svg` de la app consumidora.
+
+**Ejemplo React**
+```tsx
+<DropiIcon name="Home" width="24px" height="24px" color="Primary-Primary-500" />
+<DropiIcon name="Search" color="#333333" />
+<DropiIcon name="Warning-circle" color="Error-Error-500" />
+```
+
+---
+
+## Build (desarrollo)
+
+```bash
+npm run build   # compilar
+npm run start   # dev con watch
+npm test        # unit tests
+```

package/scripts/postinstall.js

@@ -163,7 +163,7 @@ if (isVite) {
     const p = path.join(projectRoot, f);
     if (!fs.existsSync(p)) continue;
     const content = fs.readFileSync(p, 'utf8');
-    if (content.includes('@dropi/ui')) { vitePatchDone = 'ya'; break; }
+    if (content.includes('@dropi/ui/loader') && content.includes("exclude")) { vitePatchDone = 'ya'; break; }
     const patch = `\n  optimizeDeps: {\n    exclude: ['@dropi/ui/loader', '@dropi/ui'],\n  },`;
     const updated = content.replace(/defineConfig\(\{/, `defineConfig({${patch}`);
     if (updated !== content) { fs.writeFileSync(p, updated, 'utf8'); vitePatchDone = true; }

package/skills/install-dropi-ui/skill.md

@@ -197,7 +197,11 @@ Errores comunes y solución:
   - Sprite: [ruta destino] ✓
   - skipLibCheck: true ✓
 
-Prueba rápida:
+Prueba rápida (React):
+  import { DropiButton } from '@dropi/ui-react'
+  <DropiButton text="Hola Dropi" type="default" severity="primary" size="normal" />
+
+Prueba rápida (Angular/Vue):
   <dropi-button text="Hola Dropi" type="default" severity="primary" size="normal"></dropi-button>
 ```
 

package/dist/dropi-ui/p-54502c46.entry.js

@@ -1 +0,0 @@
-import{r as e,c as r,h as t}from"./p-DFz-gwFP.js";const i=class{constructor(t){e(this,t),this.dropiChange=r(this,"dropiChange")}label="";name="radio";inputId="radioButton";checked=!1;resetTrigger=!1;dropiChange;onResetTrigger(e){e&&(this.checked=!1)}handleChange(e){this.checked=e.target.checked,this.dropiChange.emit(e)}render(){return t("div",{key:"3b31699bf088bee52465981074c0aea48b6fe112",class:"dropi-radio-button"},t("label",{key:"072d19bd9c88739b849db0e264c65183eaab2132",htmlFor:this.inputId},t("input",{key:"82d1600002e9dc2795cdc5c731997742adc8e2db",id:this.inputId,type:"radio",name:this.name,checked:this.checked,onChange:e=>this.handleChange(e)}),this.label))}static get formAssociated(){return!0}static get watchers(){return{resetTrigger:[{onResetTrigger:0}]}}};i.style=":host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.dropi-radio-button{display:flex;align-items:center;justify-content:flex-start;gap:20px}label{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);line-height:1.5}input[type='radio']{appearance:none;width:20px;height:20px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:50%;background-color:transparent;position:relative;cursor:pointer;outline:none;flex-shrink:0;display:flex;justify-content:center;align-items:center}input[type='radio']::before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;background-color:var(--Primary-Primary-400, #f7b46f);border-radius:50%;display:none}input[type='radio']:checked{border:2px solid var(--Primary-Primary-500, #f49a3d)}input[type='radio']:checked::before{display:block}";export{i as dropi_radio_button}