@diniz/webcomponents 1.1.7 → 1.1.8

package/README.md

@@ -412,6 +412,71 @@ That's it! Your app now has client-side routing with:
 
 For detailed documentation on each component, see the demo implementations in `src/features/`.
 
+## TypeScript Types
+
+The library ships first-class TypeScript types. Import them with `type` to keep builds tree-shakeable:
+
+```typescript
+import type {
+  ButtonVariant,
+  ButtonSize,
+  InputType,
+  ValidationResult,
+  TableColumn,
+  SelectOption,
+  ToastConfig,
+  StepperStep,
+  Route,
+  Signal
+} from '@diniz/webcomponents';
+```
+
+### Example: Table column typing
+
+```typescript
+import type { TableColumn } from '@diniz/webcomponents';
+
+type User = { id: number; name: string; email: string };
+
+const columns: TableColumn<User>[] = [
+  { key: 'id', label: 'ID' },
+  { key: 'name', label: 'Name' },
+  { key: 'email', label: 'Email' }
+];
+```
+
+### Example: Button variants and sizes
+
+```typescript
+import type { ButtonVariant, ButtonSize } from '@diniz/webcomponents';
+
+const variant: ButtonVariant = 'primary';
+const size: ButtonSize = 'md';
+```
+
+### Example: Form validation results
+
+```typescript
+import type { ValidationResult } from '@diniz/webcomponents';
+
+const result: ValidationResult = {
+  valid: false,
+  message: 'Email is required'
+};
+```
+
+### Example: Router types
+
+```typescript
+import { createRouter, type Route } from '@diniz/webcomponents';
+
+const routes: Route[] = [
+  { path: '/', load: () => import('./pages/home'), component: 'home-page' }
+];
+
+createRouter(routes);
+```
+
 ## Core Features
 
 ### Signals & Reactivity

package/dist/README.md

@@ -412,6 +412,71 @@ That's it! Your app now has client-side routing with:
 
 For detailed documentation on each component, see the demo implementations in `src/features/`.
 
+## TypeScript Types
+
+The library ships first-class TypeScript types. Import them with `type` to keep builds tree-shakeable:
+
+```typescript
+import type {
+  ButtonVariant,
+  ButtonSize,
+  InputType,
+  ValidationResult,
+  TableColumn,
+  SelectOption,
+  ToastConfig,
+  StepperStep,
+  Route,
+  Signal
+} from '@diniz/webcomponents';
+```
+
+### Example: Table column typing
+
+```typescript
+import type { TableColumn } from '@diniz/webcomponents';
+
+type User = { id: number; name: string; email: string };
+
+const columns: TableColumn<User>[] = [
+  { key: 'id', label: 'ID' },
+  { key: 'name', label: 'Name' },
+  { key: 'email', label: 'Email' }
+];
+```
+
+### Example: Button variants and sizes
+
+```typescript
+import type { ButtonVariant, ButtonSize } from '@diniz/webcomponents';
+
+const variant: ButtonVariant = 'primary';
+const size: ButtonSize = 'md';
+```
+
+### Example: Form validation results
+
+```typescript
+import type { ValidationResult } from '@diniz/webcomponents';
+
+const result: ValidationResult = {
+  valid: false,
+  message: 'Email is required'
+};
+```
+
+### Example: Router types
+
+```typescript
+import { createRouter, type Route } from '@diniz/webcomponents';
+
+const routes: Route[] = [
+  { path: '/', load: () => import('./pages/home'), component: 'home-page' }
+];
+
+createRouter(routes);
+```
+
 ## Core Features
 
 ### Signals & Reactivity

package/dist/{button-demo-BcfxxPSq.js → button-demo-QJVH1hrf.js}

@@ -1,4 +1,4 @@
-import { B as t } from "./index-DiYekJaQ.js";
+import { B as t } from "./index-DY67xf57.js";
 const n = `<h1>🔘 Button Component Demo</h1>
 
 <div class="demo-intro">

package/dist/{card-demo-Cxp-wRGW.js → card-demo-Czal_vad.js}

@@ -1,4 +1,4 @@
-import { B as a } from "./index-DiYekJaQ.js";
+import { B as a } from "./index-DY67xf57.js";
 class d extends a {
   render() {
     this.shadowRoot.innerHTML = `

package/dist/{date-picker-demo-B8y3zapN.js → date-picker-demo-Nh8Y6BQM.js}

@@ -1,4 +1,4 @@
-import { B as o } from "./index-DiYekJaQ.js";
+import { B as o } from "./index-DY67xf57.js";
 const c = `<h1>📅 Date Picker Component Demo</h1>
 
 <div class="demo-section">

package/dist/{form-demo-page-F1iLCgfh.js → form-demo-page-g2zcnZrj.js}

@@ -1,4 +1,4 @@
-import { B as d, c as l, h as p, v as u, g as f } from "./index-DiYekJaQ.js";
+import { B as d, c as l, h as p, v as u, g as f } from "./index-DY67xf57.js";
 const g = `<section class="form-hero">
 	<div>			
 		<h1>Form Elements</h1>

package/dist/{home-page-XUM8cHP7.js → home-page-CY0gTS-z.js}

@@ -1,4 +1,4 @@
-import { B as n } from "./index-DiYekJaQ.js";
+import { B as n } from "./index-DY67xf57.js";
 const e = `<section class="hero">
 	<div class="hero-content">
 		<h1 class="hero-title">@diniz/webcomponents</h1>

package/dist/{index-DiYekJaQ.js → index-DY67xf57.js}

@@ -358,18 +358,18 @@ class I extends g {
   constructor() {
     super(...arguments);
     p(this, "inputElement", null);
-    p(this, "isConnected", !1);
+    p(this, "isComponentConnected", !1);
     p(this, "isInternalUpdate", !1);
     p(this, "hasRendered", !1);
   }
   connectedCallback() {
-    this.setAttribute("data-ui", "date-picker"), super.connectedCallback(), this.isConnected = !0;
+    this.setAttribute("data-ui", "date-picker"), super.connectedCallback(), this.isComponentConnected = !0;
   }
   static get observedAttributes() {
     return ["value", "format", "min", "max", "disabled", "placeholder", "label"];
   }
   attributeChangedCallback(t, e, a) {
-    if (!(!this.isConnected || e === a)) {
+    if (!(!this.isComponentConnected || e === a)) {
       if (this.isInternalUpdate && t === "value") {
         this.isInternalUpdate = !1;
         return;
@@ -2206,67 +2206,67 @@ const at = [
   {
     path: "/",
     layout: "app-layout",
-    load: () => import("./home-page-XUM8cHP7.js"),
+    load: () => import("./home-page-CY0gTS-z.js"),
     component: "home-page"
   },
   {
     path: "/button",
     layout: "app-layout",
-    load: () => import("./button-demo-BcfxxPSq.js"),
+    load: () => import("./button-demo-QJVH1hrf.js"),
     component: "button-demo"
   },
   {
     path: "/layout",
     layout: "app-layout",
-    load: () => import("./layout-demo-CJsZ6DI5.js"),
+    load: () => import("./layout-demo-DmPHnT5L.js"),
     component: "layout-demo"
   },
   {
     path: "/date-picker",
     layout: "app-layout",
-    load: () => import("./date-picker-demo-B8y3zapN.js"),
+    load: () => import("./date-picker-demo-Nh8Y6BQM.js"),
     component: "date-picker-demo"
   },
   {
     path: "/table-demo",
     layout: "app-layout",
-    load: () => import("./table-demo-x2ZD8cFh.js"),
+    load: () => import("./table-demo-BZcyUIS5.js"),
     component: "table-demo"
   },
   {
     path: "/forms",
     layout: "app-layout",
-    load: () => import("./form-demo-page-F1iLCgfh.js"),
+    load: () => import("./form-demo-page-g2zcnZrj.js"),
     component: "form-demo-page"
   },
   {
     path: "/modal",
     layout: "app-layout",
-    load: () => import("./modal-demo-page-YN2KgJ31.js"),
+    load: () => import("./modal-demo-page-B0VPM0tc.js"),
     component: "modal-demo-page"
   },
   {
     path: "/tabs",
     layout: "app-layout",
-    load: () => import("./tabs-demo-BQBtZzw9.js"),
+    load: () => import("./tabs-demo-B4k7z8lN.js"),
     component: "tabs-demo"
   },
   {
     path: "/card",
     layout: "app-layout",
-    load: () => import("./card-demo-Cxp-wRGW.js"),
+    load: () => import("./card-demo-Czal_vad.js"),
     component: "card-demo-page"
   },
   {
     path: "/toast",
     layout: "app-layout",
-    load: () => import("./toast-demo-page-DLVacHXA.js"),
+    load: () => import("./toast-demo-page-CIjro0OH.js"),
     component: "toast-demo-page"
   },
   {
     path: "/stepper",
     layout: "app-layout",
-    load: () => import("./stepper-demo-page-BkcpKk_F.js"),
+    load: () => import("./stepper-demo-page-BBKHJEUF.js"),
     component: "stepper-demo-page"
   }
 ];

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/index';

package/dist/{layout-demo-CJsZ6DI5.js → layout-demo-DmPHnT5L.js}

@@ -1,4 +1,4 @@
-import { B as c } from "./index-DiYekJaQ.js";
+import { B as c } from "./index-DY67xf57.js";
 const u = `<h1>🎨 Layout Component Demo</h1>
 
 <div class="demo-intro">

package/dist/{modal-demo-page-YN2KgJ31.js → modal-demo-page-B0VPM0tc.js}

@@ -1,4 +1,4 @@
-import { B as w } from "./index-DiYekJaQ.js";
+import { B as w } from "./index-DY67xf57.js";
 const B = `
 	<div class="demo-container">
 		<h1>Modal Component Demo</h1>

package/dist/{stepper-demo-page-BkcpKk_F.js → stepper-demo-page-BBKHJEUF.js}

@@ -1,7 +1,7 @@
 var m = Object.defineProperty;
 var g = (n, r, e) => r in n ? m(n, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[r] = e;
 var c = (n, r, e) => g(n, typeof r != "symbol" ? r + "" : r, e);
-import { B as h } from "./index-DiYekJaQ.js";
+import { B as h } from "./index-DY67xf57.js";
 const u = `
 	<section class="stepper-hero">
 		<div>

package/dist/{table-demo-x2ZD8cFh.js → table-demo-BZcyUIS5.js}

@@ -1,7 +1,7 @@
 var u = Object.defineProperty;
 var p = (d, i, e) => i in d ? u(d, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : d[i] = e;
 var r = (d, i, e) => p(d, typeof i != "symbol" ? i + "" : i, e);
-import { B as b, h as f, q as y, a as k, b as w } from "./index-DiYekJaQ.js";
+import { B as b, h as f, q as y, a as k, b as w } from "./index-DY67xf57.js";
 const v = `<h1>Table Demo</h1>
 <p class="intro">Example of loading JSON data and rendering a table.</p>
 

package/dist/{tabs-demo-BQBtZzw9.js → tabs-demo-B4k7z8lN.js}

@@ -1,4 +1,4 @@
-import { B as i } from "./index-DiYekJaQ.js";
+import { B as i } from "./index-DY67xf57.js";
 const d = `<h1>Tabs Demo</h1>
 <p class="intro">A simple tabs component with slotted tabs and panels.</p>
 

package/dist/{toast-demo-page-DLVacHXA.js → toast-demo-page-CIjro0OH.js}

@@ -1,7 +1,7 @@
 var r = Object.defineProperty;
 var h = (i, o, n) => o in i ? r(i, o, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[o] = n;
 var s = (i, o, n) => h(i, typeof o != "symbol" ? o + "" : o, n);
-import { B as c, d as t, e as a } from "./index-DiYekJaQ.js";
+import { B as c, d as t, e as a } from "./index-DY67xf57.js";
 const d = `<div class="demo-container">
 	<h1>Toast Component Demo</h1>
 	<p>Elegant notification system with smooth animations and glassmorphic design.</p>

package/dist/webcomponents.es.js

@@ -1,4 +1,4 @@
-import { B as s, H as t, U as o, f as I, i as U, j as r, k as n, l as u, m as y, n as l, o as d, p as i, r as p, s as m, t as b, u as q, w as C, x as L, y as T, z as c, d as g, A as B, e as E, g as P, h, c as k, C as x, q as H, b as S, a as f } from "./index-DiYekJaQ.js";
+import { B as s, H as t, U as o, f as I, i as U, j as r, k as n, l as u, m as y, n as l, o as d, p as i, r as p, s as m, t as b, u as q, w as C, x as L, y as T, z as c, d as g, A as B, e as E, g as P, h, c as k, C as x, q as H, b as S, a as f } from "./index-DY67xf57.js";
 export {
   s as BaseComponent,
   t as HTTPClient,

package/dist/webcomponents.umd.js

@@ -42,7 +42,7 @@
 					<tbody>${o}</tbody>
 				</table>
 			</div>
-		`,this.shadowRoot.querySelectorAll(".action-btn").forEach(i=>{i.addEventListener("click",s=>{const n=s.currentTarget,r=n.dataset.action,l=parseInt(n.dataset.rowIndex||"0",10),c=r==="edit"?"edit-action":"delete-action";this.dispatchEvent(new CustomEvent(c,{bubbles:!0,composed:!0,detail:{row:this.rows[l],rowIndex:l}}))})})}}customElements.define("ui-table",q);class B extends b{constructor(){super(...arguments);p(this,"inputElement",null);p(this,"isConnected",!1);p(this,"isInternalUpdate",!1);p(this,"hasRendered",!1)}connectedCallback(){this.setAttribute("data-ui","date-picker"),super.connectedCallback(),this.isConnected=!0}static get observedAttributes(){return["value","format","min","max","disabled","placeholder","label"]}attributeChangedCallback(t,e,o){if(!(!this.isConnected||e===o)){if(this.isInternalUpdate&&t==="value"){this.isInternalUpdate=!1;return}t==="value"?this.updateInputValues():this.render()}}updateInputValues(){if(!this.shadowRoot)return;const t=this.shadowRoot.querySelector(".formatted-input"),e=this.shadowRoot.querySelector('input[type="date"]');if(t&&e){const o=this.getValue(),i=this.getFormat(),s=this.formatDate(o,i);t.value=s,e.value=o}}getFormat(){const t=this.getAttribute("format");return t==="DD/MM/YYYY"||t==="MM/DD/YYYY"||t==="DD-MM-YYYY"||t==="MM-DD-YYYY"?t:"YYYY-MM-DD"}getValue(){return this.getAttribute("value")||""}getMin(){return this.getAttribute("min")||""}getMax(){return this.getAttribute("max")||""}getPlaceholder(){return this.getAttribute("placeholder")||this.getFormat()}getLabel(){return this.getAttribute("label")||""}isDisabled(){return this.hasAttribute("disabled")}formatDate(t,e){if(!t)return"";const o=t.split("-");if(o.length!==3)return t;const[i,s,n]=o;switch(e){case"DD/MM/YYYY":return`${n}/${s}/${i}`;case"MM/DD/YYYY":return`${s}/${n}/${i}`;case"DD-MM-YYYY":return`${n}-${s}-${i}`;case"MM-DD-YYYY":return`${s}-${n}-${i}`;case"YYYY-MM-DD":default:return t}}parseDate(t,e){if(!t)return"";let o,i,s,n;switch(e){case"DD/MM/YYYY":if(o=t.split("/"),o.length!==3)return"";[n,s,i]=o;break;case"MM/DD/YYYY":if(o=t.split("/"),o.length!==3)return"";[s,n,i]=o;break;case"DD-MM-YYYY":if(o=t.split("-"),o.length!==3)return"";[n,s,i]=o;break;case"MM-DD-YYYY":if(o=t.split("-"),o.length!==3)return"";[s,n,i]=o;break;case"YYYY-MM-DD":default:return t}return s=s.padStart(2,"0"),n=n.padStart(2,"0"),`${i}-${s}-${n}`}attachEventListeners(){if(!this.shadowRoot)return;const t=this.shadowRoot.querySelector(".formatted-input"),e=this.shadowRoot.querySelector('input[type="date"]'),o=this.shadowRoot.querySelector(".calendar-btn");if(!t||!e)return;const i=()=>{const s=t.value,n=this.getFormat(),r=this.parseDate(s,n);this.isValidDate(r)?(e.value=r,t.classList.remove("invalid"),this.dispatchDateChange(r)):s===""?(e.value="",t.classList.remove("invalid"),this.dispatchDateChange("")):t.classList.add("invalid")};t.addEventListener("blur",i),t.addEventListener("keydown",s=>{s.key==="Enter"&&(i(),t.blur())}),e.addEventListener("change",s=>{const r=s.target.value,l=this.getFormat(),c=this.formatDate(r,l);t.value=c,t.classList.remove("invalid"),this.dispatchDateChange(r)}),o&&o.addEventListener("click",async s=>{s.preventDefault(),s.stopPropagation(),e.style.pointerEvents="auto";try{typeof e.showPicker=="function"?e.showPicker():(e.focus(),e.click())}catch(n){console.log("Date picker error:",n),e.focus(),e.click()}finally{setTimeout(()=>{e.style.pointerEvents="none"},100)}})}isValidDate(t){if(!t)return!1;const e=new Date(t);return e instanceof Date&&!isNaN(e.getTime())}dispatchDateChange(t){const e=this.getFormat(),o=this.formatDate(t,e);this.dispatchEvent(new CustomEvent("date-change",{detail:{value:t,formattedValue:o,format:e},bubbles:!0,composed:!0})),this.isInternalUpdate=!0,this.setAttribute("value",t)}getISOValue(){return this.getValue()}getFormattedValue(){const t=this.getValue(),e=this.getFormat();return this.formatDate(t,e)}setValue(t){this.setAttribute("value",t)}clear(){this.setAttribute("value","")}render(){const t=this.getValue(),e=this.getFormat(),o=this.getMin(),i=this.getMax(),s=this.isDisabled(),n=this.getPlaceholder(),r=this.getLabel(),l=this.formatDate(t,e),c=r!=="";this.shadowRoot.innerHTML=`
+		`,this.shadowRoot.querySelectorAll(".action-btn").forEach(i=>{i.addEventListener("click",s=>{const n=s.currentTarget,r=n.dataset.action,l=parseInt(n.dataset.rowIndex||"0",10),c=r==="edit"?"edit-action":"delete-action";this.dispatchEvent(new CustomEvent(c,{bubbles:!0,composed:!0,detail:{row:this.rows[l],rowIndex:l}}))})})}}customElements.define("ui-table",q);class B extends b{constructor(){super(...arguments);p(this,"inputElement",null);p(this,"isComponentConnected",!1);p(this,"isInternalUpdate",!1);p(this,"hasRendered",!1)}connectedCallback(){this.setAttribute("data-ui","date-picker"),super.connectedCallback(),this.isComponentConnected=!0}static get observedAttributes(){return["value","format","min","max","disabled","placeholder","label"]}attributeChangedCallback(t,e,o){if(!(!this.isComponentConnected||e===o)){if(this.isInternalUpdate&&t==="value"){this.isInternalUpdate=!1;return}t==="value"?this.updateInputValues():this.render()}}updateInputValues(){if(!this.shadowRoot)return;const t=this.shadowRoot.querySelector(".formatted-input"),e=this.shadowRoot.querySelector('input[type="date"]');if(t&&e){const o=this.getValue(),i=this.getFormat(),s=this.formatDate(o,i);t.value=s,e.value=o}}getFormat(){const t=this.getAttribute("format");return t==="DD/MM/YYYY"||t==="MM/DD/YYYY"||t==="DD-MM-YYYY"||t==="MM-DD-YYYY"?t:"YYYY-MM-DD"}getValue(){return this.getAttribute("value")||""}getMin(){return this.getAttribute("min")||""}getMax(){return this.getAttribute("max")||""}getPlaceholder(){return this.getAttribute("placeholder")||this.getFormat()}getLabel(){return this.getAttribute("label")||""}isDisabled(){return this.hasAttribute("disabled")}formatDate(t,e){if(!t)return"";const o=t.split("-");if(o.length!==3)return t;const[i,s,n]=o;switch(e){case"DD/MM/YYYY":return`${n}/${s}/${i}`;case"MM/DD/YYYY":return`${s}/${n}/${i}`;case"DD-MM-YYYY":return`${n}-${s}-${i}`;case"MM-DD-YYYY":return`${s}-${n}-${i}`;case"YYYY-MM-DD":default:return t}}parseDate(t,e){if(!t)return"";let o,i,s,n;switch(e){case"DD/MM/YYYY":if(o=t.split("/"),o.length!==3)return"";[n,s,i]=o;break;case"MM/DD/YYYY":if(o=t.split("/"),o.length!==3)return"";[s,n,i]=o;break;case"DD-MM-YYYY":if(o=t.split("-"),o.length!==3)return"";[n,s,i]=o;break;case"MM-DD-YYYY":if(o=t.split("-"),o.length!==3)return"";[s,n,i]=o;break;case"YYYY-MM-DD":default:return t}return s=s.padStart(2,"0"),n=n.padStart(2,"0"),`${i}-${s}-${n}`}attachEventListeners(){if(!this.shadowRoot)return;const t=this.shadowRoot.querySelector(".formatted-input"),e=this.shadowRoot.querySelector('input[type="date"]'),o=this.shadowRoot.querySelector(".calendar-btn");if(!t||!e)return;const i=()=>{const s=t.value,n=this.getFormat(),r=this.parseDate(s,n);this.isValidDate(r)?(e.value=r,t.classList.remove("invalid"),this.dispatchDateChange(r)):s===""?(e.value="",t.classList.remove("invalid"),this.dispatchDateChange("")):t.classList.add("invalid")};t.addEventListener("blur",i),t.addEventListener("keydown",s=>{s.key==="Enter"&&(i(),t.blur())}),e.addEventListener("change",s=>{const r=s.target.value,l=this.getFormat(),c=this.formatDate(r,l);t.value=c,t.classList.remove("invalid"),this.dispatchDateChange(r)}),o&&o.addEventListener("click",async s=>{s.preventDefault(),s.stopPropagation(),e.style.pointerEvents="auto";try{typeof e.showPicker=="function"?e.showPicker():(e.focus(),e.click())}catch(n){console.log("Date picker error:",n),e.focus(),e.click()}finally{setTimeout(()=>{e.style.pointerEvents="none"},100)}})}isValidDate(t){if(!t)return!1;const e=new Date(t);return e instanceof Date&&!isNaN(e.getTime())}dispatchDateChange(t){const e=this.getFormat(),o=this.formatDate(t,e);this.dispatchEvent(new CustomEvent("date-change",{detail:{value:t,formattedValue:o,format:e},bubbles:!0,composed:!0})),this.isInternalUpdate=!0,this.setAttribute("value",t)}getISOValue(){return this.getValue()}getFormattedValue(){const t=this.getValue(),e=this.getFormat();return this.formatDate(t,e)}setValue(t){this.setAttribute("value",t)}clear(){this.setAttribute("value","")}render(){const t=this.getValue(),e=this.getFormat(),o=this.getMin(),i=this.getMax(),s=this.isDisabled(),n=this.getPlaceholder(),r=this.getLabel(),l=this.formatDate(t,e),c=r!=="";this.shadowRoot.innerHTML=`
 			<style>${f}</style>
 			<div class="date-picker-container">
 				${c?`<label class="date-picker-label">${r}</label>`:""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diniz/webcomponents",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "Lightweight web components library",
   "type": "module",
   "main": "./dist/webcomponents.umd.js",
@@ -8,6 +8,7 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/webcomponents.es.js",
       "require": "./dist/webcomponents.umd.js"
     },
@@ -20,7 +21,7 @@
     "dev": "vite",
     "build": "vite build",
     "build:prod": "vite build --mode production",
-    "build:lib": "vite build --config vite.lib.config.ts && node scripts/copy-lib-assets.mjs",
+    "build:lib": "tsc -p tsconfig.build.json && vite build --config vite.lib.config.ts && node scripts/copy-lib-assets.mjs",
     "preview": "vite preview",
     "preview:prod": "vite preview --port 4173"
   },