@lazhus/kg-ui 0.8.6 → 0.8.8

package/custom-elements.json

@@ -3601,17 +3601,12 @@
               "default": "css` :host { display: block; --kg-modal-z-index: 2000; } .kg-modal-dimmer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; z-index: var(--kg-modal-z-index); opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: var(--kg-space-md); box-sizing: border-box; } .kg-modal-dimmer.open { opacity: 1; visibility: visible; } .kg-modal-content { background: var(--kg-bg); color: var(--kg-text); border-radius: var(--kg-radius-lg); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); width: 100%; max-width: 600px; transform: scale(0.95) translateY(10px); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; flex-direction: column; max-height: 90vh; overflow: hidden; } .kg-modal-dimmer.open .kg-modal-content { transform: scale(1) translateY(0); } /* Sizes */ .size-mini { max-width: 350px; } .size-tiny { max-width: 450px; } .size-small { max-width: 550px; } .size-large { max-width: 900px; } .size-fullscreen { max-width: 95vw; height: 95vh; } /* Basic style */ :host([basic]) .kg-modal-content { background: transparent; box-shadow: none; color: white; } .modal-header { padding: var(--kg-space-lg); font-size: 1.25rem; font-weight: 700; border-bottom: 1px solid var(--kg-border); display: flex; justify-content: space-between; align-items: center; } .modal-body { padding: var(--kg-space-lg); overflow-y: auto; flex: 1; } .modal-footer { padding: var(--kg-space-md) var(--kg-space-lg); border-top: 1px solid var(--kg-border); background: var(--kg-surface); display: flex; justify-content: flex-end; gap: 0.75rem; } .close-button { background: none; border: none; color: var(--kg-text-muted); cursor: pointer; font-size: 1.5rem; padding: 0.5rem; line-height: 1; border-radius: var(--kg-radius-sm); transition: all 0.2s; } .close-button:hover { background: var(--kg-surface); color: var(--kg-text); } `"
             },
             {
-              "kind": "method",
+              "kind": "field",
               "name": "close"
             },
             {
-              "kind": "method",
-              "name": "_handleDimmerClick",
-              "parameters": [
-                {
-                  "name": "e"
-                }
-              ]
+              "kind": "field",
+              "name": "_handleDimmerClick"
             },
             {
               "kind": "method",
@@ -3661,10 +3656,8 @@
           ],
           "events": [
             {
-              "name": "close",
-              "type": {
-                "text": "CustomEvent"
-              }
+              "description": "Dispatched when the modal is closed",
+              "name": "close"
             }
           ],
           "superclass": {
@@ -4406,7 +4399,7 @@
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: inline-block; width: 100%; position: relative; font-family: inherit; user-select: none; } .kg-select-container { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; position: relative; } .select-label { font-size: 0.875rem; font-weight: 600; color: var(--kg-text); opacity: 0.8; margin-left: 2px; } * { box-sizing: border-box; } .select-trigger { display: flex; align-items: center; justify-content: space-between; height: var(--kg-form-height); padding: 0 1rem; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); cursor: pointer; transition: all 0.2s ease; gap: 8px; flex-wrap: nowrap; overflow: hidden; } .select-trigger:hover { border-color: var(--kg-primary); } .select-trigger.open { border-color: var(--kg-primary); box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); } .select-trigger.disabled { opacity: 0.5; cursor: not-allowed; background: var(--kg-bg-secondary); } .placeholder { color: var(--kg-text-muted); opacity: 0.6; } .selected-text { color: var(--kg-text); flex: 1; } .tags-container { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; } .tag { background: var(--kg-primary); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; display: flex; align-items: center; gap: 4px; } .tag-remove { cursor: pointer; opacity: 0.8; } .tag-remove:hover { opacity: 1; } .chevron { transition: transform 0.2s ease; color: var(--kg-text-muted); flex-shrink: 0; } .open .chevron { transform: rotate(180deg); } /* Dropdown */ .select-dropdown { position: absolute; top: calc(100% + 5px); left: 0; width: 100%; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); z-index: 1000; max-height: 300px; overflow-y: auto; display: none; animation: slideDown 0.2s ease-out; } .select-dropdown.visible { display: block; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .search-container { padding: 8px; border-bottom: 1px solid var(--kg-border); position: sticky; top: 0; background: var(--kg-surface); z-index: 10; } .search-input { width: 100%; padding: 6px 10px; border: 1px solid var(--kg-border); border-radius: 4px; outline: none; font-family: inherit; font-size: 0.9rem; } .search-input:focus { border-color: var(--kg-primary); } .option-item { padding: 10px 16px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background 0.15s; color: var(--kg-text); } .option-item:hover { background: var(--kg-bg-secondary, rgba(0, 0, 0, 0.04)); } .option-item.selected { background: rgba(var(--kg-primary-rgb, 19, 103, 255), 0.08); color: var(--kg-primary); font-weight: 600; } .no-results { padding: 16px; text-align: center; color: var(--kg-text-muted); font-size: 0.9rem; } .check-icon { width: 16px; height: 16px; } .select-trigger.error { border-color: #DB2828 !important; background-color: rgba(219, 40, 40, 0.02) !important; } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 2px; font-weight: 500; animation: fadeIn 0.2s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
+              "default": "css` :host { display: inline-block; width: 100%; position: relative; font-family: inherit; user-select: none; } .kg-select-container { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; position: relative; } .select-label { font-size: 0.875rem; font-weight: 600; color: var(--kg-text); opacity: 0.8; margin-left: 2px; } * { box-sizing: border-box; } .select-trigger { display: flex; align-items: center; justify-content: space-between; height: var(--kg-form-height); padding: 0 1rem; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); cursor: pointer; transition: all 0.2s ease; gap: 8px; flex-wrap: nowrap; overflow: hidden; } .select-trigger:hover { border-color: var(--kg-primary); } .select-trigger.open { border-color: var(--kg-primary); box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); } .select-trigger.disabled { opacity: 0.5; cursor: not-allowed; background: var(--kg-bg-secondary); } .placeholder { color: var(--kg-text-muted); opacity: 0.6; } .selected-text { color: var(--kg-text); flex: 1; } .tags-container { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; } .tag { background: var(--kg-primary); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; display: flex; align-items: center; gap: 4px; } .tag-remove { cursor: pointer; opacity: 0.8; } .tag-remove:hover { opacity: 1; } .chevron { transition: transform 0.2s ease; color: var(--kg-text-muted); flex-shrink: 0; } .open .chevron { transform: rotate(180deg); } .clear-button { display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--kg-text-muted); opacity: 0.6; transition: all 0.2s; flex-shrink: 0; padding: 4px; border-radius: 50%; } .clear-button:hover { opacity: 1; background: var(--kg-bg-secondary, rgba(0, 0, 0, 0.04)); color: var(--kg-primary); } /* Dropdown */ .select-dropdown { position: absolute; top: calc(100% + 5px); left: 0; width: 100%; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); z-index: 1000; max-height: 300px; overflow-y: auto; display: none; animation: slideDown 0.2s ease-out; } .select-dropdown.visible { display: block; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .search-container { padding: 8px; border-bottom: 1px solid var(--kg-border); position: sticky; top: 0; background: var(--kg-surface); z-index: 10; } .search-input { width: 100%; padding: 6px 10px; border: 1px solid var(--kg-border); border-radius: 4px; outline: none; font-family: inherit; font-size: 0.9rem; } .search-input:focus { border-color: var(--kg-primary); } .option-item { padding: 10px 16px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background 0.15s; color: var(--kg-text); } .option-item:hover { background: var(--kg-bg-secondary, rgba(0, 0, 0, 0.04)); } .option-item.selected { background: rgba(var(--kg-primary-rgb, 19, 103, 255), 0.08); color: var(--kg-primary); font-weight: 600; } .no-results { padding: 16px; text-align: center; color: var(--kg-text-muted); font-size: 0.9rem; } .check-icon { width: 16px; height: 16px; } .select-trigger.error { border-color: #DB2828 !important; background-color: rgba(219, 40, 40, 0.02) !important; } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 2px; font-weight: 500; animation: fadeIn 0.2s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
             },
             {
               "kind": "method",
@@ -4454,6 +4447,15 @@
               "kind": "method",
               "name": "_dispatchChange"
             },
+            {
+              "kind": "method",
+              "name": "_clearValue",
+              "parameters": [
+                {
+                  "name": "e"
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_handleSearch",
@@ -4523,6 +4525,14 @@
               },
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "clearable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "_open",

package/dist/components/kg-modal.js

@@ -1,4 +1,4 @@
-var e=Object.defineProperty,o=(o,t,i)=>((o,t,i)=>t in o?e(o,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):o[t]=i)(o,"symbol"!=typeof t?t+"":t,i);import{LitElement as t,css as i,html as s}from"lit";import{classMap as a}from"lit/directives/class-map.js";class l extends t{constructor(){super(),this.open=!1,this.size="small",this.closable=!0,this.basic=!1}close(){this.open=!1,this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}_handleDimmerClick(e){this.closable&&e.target.classList.contains("kg-modal-dimmer")&&this.close()}willUpdate(e){e.has("open")&&(this.open?document.body.style.overflow="hidden":document.body.style.overflow="")}render(){const e={"kg-modal-dimmer":!0,open:this.open},o={"kg-modal-content":!0,[`size-${this.size}`]:!0};return s`
+var e=Object.defineProperty,o=(o,t,i)=>((o,t,i)=>t in o?e(o,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):o[t]=i)(o,"symbol"!=typeof t?t+"":t,i);import{LitElement as t,css as i,html as s}from"lit";import{classMap as a}from"lit/directives/class-map.js";class l extends t{constructor(){super(),o(this,"close",()=>{this.open=!1,this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}),o(this,"_handleDimmerClick",e=>{this.closable&&e.target.classList.contains("kg-modal-dimmer")&&this.close()}),this.open=!1,this.size="small",this.closable=!0,this.basic=!1}willUpdate(e){e.has("open")&&(this.open?document.body.style.overflow="hidden":document.body.style.overflow="")}render(){const e={"kg-modal-dimmer":!0,open:this.open},o={"kg-modal-content":!0,[`size-${this.size}`]:!0};return s`
       <div class="${a(e)}" @click="${this._handleDimmerClick}">
         <div class="${a(o)}">
           <div class="modal-header">

package/dist/components/kg-select.js

@@ -1,4 +1,4 @@
-var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit";import"lit/directives/class-map.js";import{F as o}from"../chunks/FormAssociated-Cx5D8YQA.js";class a extends(o(r)){static get properties(){return{...super.properties,options:{type:Array},value:{type:Object},placeholder:{type:String},label:{type:String},multiple:{type:Boolean},searchable:{type:Boolean},_open:{type:Boolean,state:!0},_searchQuery:{type:String,state:!0}}}constructor(){super(),this.options=[],this.value=null,this.placeholder="Seçiniz...",this.multiple=!1,this.searchable=!1,this._open=!1,this._searchQuery="",this._handleOutsideClick=this._handleOutsideClick.bind(this)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick)}_updateFormValue(){if(this.multiple&&Array.isArray(this.value)){const e=new FormData;this.value.forEach(t=>e.append(this.name,t)),this.internals.setFormValue(e)}else this.internals.setFormValue(this.value)}_handleOutsideClick(e){this._open&&(e.composedPath().includes(this)||this._closeDropdown())}_toggleDropdown(e){this.disabled||(this._open=!this._open,this._open&&(this._searchQuery="",setTimeout(()=>{const e=this.shadowRoot.querySelector(".search-input");e&&e.focus()},100)))}_closeDropdown(){this._open=!1}_selectOption(e,t){if(t.stopPropagation(),this.multiple){let t=Array.isArray(this.value)?[...this.value]:[];const r=t.indexOf(e.value);r>-1?t.splice(r,1):t.push(e.value),this.value=t}else this.value=e.value,this._closeDropdown();this._dispatchChange()}_dispatchChange(){this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))}_handleSearch(e){this._searchQuery=e.target.value.toLowerCase()}_removeTag(e,t){t.stopPropagation();let r=[...this.value];const i=r.indexOf(e);i>-1&&(r.splice(i,1),this.value=r,this._dispatchChange())}render(){const e=e=>this.multiple&&Array.isArray(this.value)?this.value.includes(e):this.value===e,t=(()=>{if(!this.value)return null;if(this.multiple&&Array.isArray(this.value))return this.options.filter(e=>this.value.includes(e.value));const e=this.options.find(e=>e.value===this.value);return e?e.label:null})(),r=(this.options||[]).filter(e=>e.label.toLowerCase().includes(this._searchQuery||""));return s`
+var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit";import"lit/directives/class-map.js";import{F as a}from"../chunks/FormAssociated-Cx5D8YQA.js";class o extends(a(r)){static get properties(){return{...super.properties,options:{type:Array},value:{type:Object},placeholder:{type:String},label:{type:String},multiple:{type:Boolean},searchable:{type:Boolean},clearable:{type:Boolean},_open:{type:Boolean,state:!0},_searchQuery:{type:String,state:!0}}}constructor(){super(),this.options=[],this.value=null,this.placeholder="Seçiniz...",this.multiple=!1,this.searchable=!1,this.clearable=!1,this._open=!1,this._searchQuery="",this._handleOutsideClick=this._handleOutsideClick.bind(this)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick)}_updateFormValue(){if(this.multiple&&Array.isArray(this.value)){const e=new FormData;this.value.forEach(t=>e.append(this.name,t)),this.internals.setFormValue(e)}else this.internals.setFormValue(this.value)}_handleOutsideClick(e){this._open&&(e.composedPath().includes(this)||this._closeDropdown())}_toggleDropdown(e){this.disabled||(this._open=!this._open,this._open&&(this._searchQuery="",setTimeout(()=>{const e=this.shadowRoot.querySelector(".search-input");e&&e.focus()},100)))}_closeDropdown(){this._open=!1}_selectOption(e,t){if(t.stopPropagation(),this.multiple){let t=Array.isArray(this.value)?[...this.value]:[];const r=t.indexOf(e.value);r>-1?t.splice(r,1):t.push(e.value),this.value=t}else this.value=e.value,this._closeDropdown();this._dispatchChange()}_dispatchChange(){this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))}_clearValue(e){e.stopPropagation(),this.value=this.multiple?[]:null,this._dispatchChange(),this._open&&this._closeDropdown()}_handleSearch(e){this._searchQuery=e.target.value.toLowerCase()}_removeTag(e,t){t.stopPropagation();let r=[...this.value];const i=r.indexOf(e);i>-1&&(r.splice(i,1),this.value=r,this._dispatchChange())}render(){const e=e=>this.multiple&&Array.isArray(this.value)?this.value.includes(e):this.value===e,t=(()=>{if(!this.value)return null;if(this.multiple&&Array.isArray(this.value))return this.options.filter(e=>this.value.includes(e.value));const e=this.options.find(e=>e.value===this.value);return e?e.label:null})(),r=(this.options||[]).filter(e=>e.label.toLowerCase().includes(this._searchQuery||""));return s`
       <div class="kg-select-container">
         ${this.label?s`<label class="select-label">${this.label}</label>`:""}
 
@@ -26,9 +26,19 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
             <span class="selected-text">${t}</span>
           `}
 
-          <svg class="chevron" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="6 9 12 15 18 9"></polyline>
-          </svg>
+          <span style="display: flex; align-items: center; gap: 8px;">
+            ${this.clearable&&!this.disabled&&(Array.isArray(this.value)?this.value.length>0:null!==this.value)?s`
+              <div class="clear-button" @click="${this._clearValue}" title="Temizle">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+              </div>
+            `:""}
+            <svg class="chevron" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+          </span>
         </div>
 
         <div class="select-dropdown ${this._open?"visible":""}">
@@ -63,7 +73,7 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
         </div>
         ${this.errorText?s`<div class="error-text">${this.errorText}</div>`:""}
       </div>
-    `}}((e,r,i)=>{r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[r]=i})(a,"symbol"!=typeof(e="styles")?e+"":e,i`
+    `}}((e,r,i)=>{r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[r]=i})(o,"symbol"!=typeof(e="styles")?e+"":e,i`
     :host {
       display: inline-block;
       width: 100%;
@@ -170,6 +180,25 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
       transform: rotate(180deg);
     }
 
+    .clear-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      color: var(--kg-text-muted);
+      opacity: 0.6;
+      transition: all 0.2s;
+      flex-shrink: 0;
+      padding: 4px;
+      border-radius: 50%;
+    }
+
+    .clear-button:hover {
+      opacity: 1;
+      background: var(--kg-bg-secondary, rgba(0, 0, 0, 0.04));
+      color: var(--kg-primary);
+    }
+
     /* Dropdown */
     .select-dropdown {
       position: absolute;
@@ -271,4 +300,4 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
       from { opacity: 0; transform: translateY(-4px); }
       to { opacity: 1; transform: translateY(0); }
     }
-  `),"undefined"==typeof customElements||customElements.get("kg-select")||customElements.define("kg-select",a);export{a as kgselect};
+  `),"undefined"==typeof customElements||customElements.get("kg-select")||customElements.define("kg-select",o);export{o as kgselect};

package/dist/react/KgDrawer.js

@@ -1 +1 @@
-import e from"react";import{o as t}from"../chunks/create-component-jQ1kjF1Z.js";import{kgdrawer as r}from"../components/kg-drawer.js";"undefined"==typeof customElements||customElements.get("kg-drawer")||customElements.define("kg-drawer",r);const m=t({tagName:"kg-drawer",elementClass:r,react:e,events:{}});export{m as KgDrawer};
+import e from"react";import{o as t}from"../chunks/create-component-jQ1kjF1Z.js";import{kgdrawer as o}from"../components/kg-drawer.js";"undefined"==typeof customElements||customElements.get("kg-drawer")||customElements.define("kg-drawer",o);const r=t({tagName:"kg-drawer",elementClass:o,react:e,events:{onClose:"close"}});export{r as KgDrawer};

package/dist/react/KgModal.js

@@ -1 +1 @@
-import e from"react";import{o as t}from"../chunks/create-component-jQ1kjF1Z.js";import{kgmodal as m}from"../components/kg-modal.js";"undefined"==typeof customElements||customElements.get("kg-modal")||customElements.define("kg-modal",m);const o=t({tagName:"kg-modal",elementClass:m,react:e,events:{}});export{o as KgModal};
+import e from"react";import{o}from"../chunks/create-component-jQ1kjF1Z.js";import{kgmodal as t}from"../components/kg-modal.js";"undefined"==typeof customElements||customElements.get("kg-modal")||customElements.define("kg-modal",t);const m=o({tagName:"kg-modal",elementClass:t,react:e,events:{onClose:"close"}});export{m as KgModal};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazhus/kg-ui",
-  "version": "0.8.6",
+  "version": "0.8.8",
   "type": "module",
   "files": [
     "dist",

package/types/components/kg-accordion-item.d.ts

@@ -21,6 +21,7 @@ declare global {
       open?: boolean;
       disabled?: boolean;
       title?: string;
+      onKgAccordionToggle?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/components/kg-checkbox.d.ts

@@ -39,6 +39,7 @@ declare global {
       indeterminate?: boolean;
       form?: any;
       type?: string;
+      onChange?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/components/kg-colorpicker.d.ts

@@ -36,6 +36,7 @@ declare global {
       open?: boolean;
       form?: any;
       type?: string;
+      onChange?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/components/kg-datagrid.d.ts

@@ -48,6 +48,9 @@ declare global {
       sortable?: boolean;
       pagination?: boolean;
       pageSize?: number;
+      onSelectionChange?: (e: any) => void;
+      onSort?: (e: any) => void;
+      onPageChange?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/components/kg-datepicker.d.ts

@@ -60,6 +60,7 @@ declare global {
       fullwidth?: boolean;
       form?: any;
       type?: string;
+      onChange?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/components/kg-drawer.d.ts

@@ -27,6 +27,7 @@ declare global {
       size?: string;
       closable?: boolean;
       noOverlay?: boolean;
+      onClose?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/components/kg-file-upload.d.ts

@@ -48,6 +48,7 @@ declare global {
       files?: any[];
       form?: any;
       type?: string;
+      onChange?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/components/kg-input.d.ts

@@ -42,6 +42,7 @@ declare global {
       hasRight?: boolean;
       form?: any;
       type?: string;
+      onKgInput?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/components/kg-modal.d.ts

@@ -2,6 +2,8 @@ import { LitElement } from 'lit';
 
 /** @customElement kg-modal */
 export class kgmodal extends LitElement {
+  /**  */
+  close: any;
   /**  */
   open: boolean;
   /**  */
@@ -24,6 +26,7 @@ declare global {
       size?: string;
       closable?: boolean;
       basic?: boolean;
+      onClose?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/components/kg-radio-group.d.ts

@@ -36,6 +36,7 @@ declare global {
       direction?: string;
       form?: any;
       type?: string;
+      onChange?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/components/kg-radio.d.ts

@@ -42,6 +42,8 @@ declare global {
       type?: string;
       label?: string;
       color?: string;
+      onKgRadioSelect?: (e: any) => void;
+      onChange?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/components/kg-select.d.ts

@@ -21,6 +21,8 @@ export class kgselect extends LitElement {
   /**  */
   searchable: boolean;
   /**  */
+  clearable: boolean;
+  /**  */
   form: any;
   /**  */
   type: string;
@@ -43,8 +45,10 @@ declare global {
       placeholder?: string;
       multiple?: boolean;
       searchable?: boolean;
+      clearable?: boolean;
       form?: any;
       type?: string;
+      onChange?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/components/kg-slider.d.ts

@@ -48,6 +48,7 @@ declare global {
       showPins?: boolean;
       form?: any;
       type?: string;
+      onKgInput?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/components/kg-stepper.d.ts

@@ -24,6 +24,7 @@ declare global {
       activeStep?: number;
       vertical?: boolean;
       clickable?: boolean;
+      onKgStepChange?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/components/kg-switch.d.ts

@@ -39,6 +39,7 @@ declare global {
       color?: string;
       form?: any;
       type?: string;
+      onChange?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/components/kg-tabs.d.ts

@@ -18,6 +18,7 @@ declare global {
       'kg-tabs': {
       activeTab?: string;
       vertical?: boolean;
+      onKgTabChange?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/components/kg-tag.d.ts

@@ -27,6 +27,7 @@ declare global {
       pill?: boolean;
       basic?: boolean;
       closable?: boolean;
+      onKgClose?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/components/kg-textarea.d.ts

@@ -51,6 +51,7 @@ declare global {
       resize?: string;
       form?: any;
       type?: string;
+      onKgInput?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/components/kg-toast.d.ts

@@ -27,6 +27,7 @@ declare global {
       color?: string;
       title?: string;
       message?: string;
+      onKgClose?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/components/kg-tree.d.ts

@@ -27,6 +27,7 @@ declare global {
       level?: number;
       label?: string;
       page?: string;
+      onKgSelect?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/index.d.ts

@@ -97,6 +97,7 @@ declare global {
       open?: boolean;
       disabled?: boolean;
       title?: string;
+      onKgAccordionToggle?: (e: any) => void;
       [key: string]: any;
     };
     'kg-avatar': {
@@ -162,6 +163,7 @@ declare global {
       indeterminate?: boolean;
       form?: any;
       type?: string;
+      onChange?: (e: any) => void;
       [key: string]: any;
     };
     'kg-colorpicker': {
@@ -173,6 +175,7 @@ declare global {
       open?: boolean;
       form?: any;
       type?: string;
+      onChange?: (e: any) => void;
       [key: string]: any;
     };
     'kg-column': {
@@ -195,6 +198,9 @@ declare global {
       sortable?: boolean;
       pagination?: boolean;
       pageSize?: number;
+      onSelectionChange?: (e: any) => void;
+      onSort?: (e: any) => void;
+      onPageChange?: (e: any) => void;
       [key: string]: any;
     };
     'kg-datepicker': {
@@ -214,6 +220,7 @@ declare global {
       fullwidth?: boolean;
       form?: any;
       type?: string;
+      onChange?: (e: any) => void;
       [key: string]: any;
     };
     'kg-divider': {
@@ -230,6 +237,7 @@ declare global {
       size?: string;
       closable?: boolean;
       noOverlay?: boolean;
+      onClose?: (e: any) => void;
       [key: string]: any;
     };
     'kg-file-upload': {
@@ -245,6 +253,7 @@ declare global {
       files?: any[];
       form?: any;
       type?: string;
+      onChange?: (e: any) => void;
       [key: string]: any;
     };
     'kg-grid': {
@@ -274,6 +283,7 @@ declare global {
       hasRight?: boolean;
       form?: any;
       type?: string;
+      onKgInput?: (e: any) => void;
       [key: string]: any;
     };
     'kg-link': {
@@ -306,6 +316,7 @@ declare global {
       size?: string;
       closable?: boolean;
       basic?: boolean;
+      onClose?: (e: any) => void;
       [key: string]: any;
     };
     'kg-progress': {
@@ -328,6 +339,8 @@ declare global {
       type?: string;
       label?: string;
       color?: string;
+      onKgRadioSelect?: (e: any) => void;
+      onChange?: (e: any) => void;
       [key: string]: any;
     };
     'kg-radio-group': {
@@ -339,6 +352,7 @@ declare global {
       direction?: string;
       form?: any;
       type?: string;
+      onChange?: (e: any) => void;
       [key: string]: any;
     };
     'kg-row': {
@@ -358,8 +372,10 @@ declare global {
       placeholder?: string;
       multiple?: boolean;
       searchable?: boolean;
+      clearable?: boolean;
       form?: any;
       type?: string;
+      onChange?: (e: any) => void;
       [key: string]: any;
     };
     'kg-skeleton': {
@@ -383,6 +399,7 @@ declare global {
       showPins?: boolean;
       form?: any;
       type?: string;
+      onKgInput?: (e: any) => void;
       [key: string]: any;
     };
     'kg-spinner': {
@@ -396,6 +413,7 @@ declare global {
       activeStep?: number;
       vertical?: boolean;
       clickable?: boolean;
+      onKgStepChange?: (e: any) => void;
       [key: string]: any;
     };
     'kg-switch': {
@@ -408,6 +426,7 @@ declare global {
       color?: string;
       form?: any;
       type?: string;
+      onChange?: (e: any) => void;
       [key: string]: any;
     };
     'kg-tab-panel': {
@@ -419,6 +438,7 @@ declare global {
     'kg-tabs': {
       activeTab?: string;
       vertical?: boolean;
+      onKgTabChange?: (e: any) => void;
       [key: string]: any;
     };
     'kg-tag': {
@@ -427,6 +447,7 @@ declare global {
       pill?: boolean;
       basic?: boolean;
       closable?: boolean;
+      onKgClose?: (e: any) => void;
       [key: string]: any;
     };
     'kg-text': {
@@ -453,6 +474,7 @@ declare global {
       resize?: string;
       form?: any;
       type?: string;
+      onKgInput?: (e: any) => void;
       [key: string]: any;
     };
     'kg-toast': {
@@ -461,6 +483,7 @@ declare global {
       color?: string;
       title?: string;
       message?: string;
+      onKgClose?: (e: any) => void;
       [key: string]: any;
     };
     'kg-tree': {
@@ -473,6 +496,7 @@ declare global {
       level?: number;
       label?: string;
       page?: string;
+      onKgSelect?: (e: any) => void;
       [key: string]: any;
     };
     }