kr-elements 0.0.1-alpha.7 → 0.0.1-alpha.9

package/dist/types/combobox/combobox.d.ts

@@ -126,71 +126,88 @@ interface ComboboxEventMap extends HTMLElementEventMap {
   "selectstart": ComboboxEvent;
 }
 
-// Add to tag name map
 declare global {
   interface HTMLElementTagNameMap {
     'combo-box': HTMLComboboxElement;
     'box-option': HTMLComboboxOptionElement;
     'box-tag': HTMLComboboxTagElement;
   }
-}
 
-declare namespace JSX {
-  interface IntrinsicElements {
-    'combo-box': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxElement>, HTMLComboboxElement> & {
-      /** The value of internal input
-       *
-       * Internal input is visible when either "searchable" or "filterable" attribute is presented */
-      value?: string;
-
-      /** The value of internal input
-       *
-       * Internal input is visible when either "searchable" or "filterable" attribute is presented */
-      query?: string;
-
-      /** When is true, the internal input is shown.
-       *
-       * When user type something, available options are filtered by this query.
-       *
-       * Setting both "filterable" and "searchable" make no sense, the "searchable" will have priority
-       * */
-      filterable?: boolean;
-
-      /** When is true, the internal input is shown.
-       *
-       * When user type something, available options are not filtered by this query.
-       * You have to set an "input" listener to the <combo-box> and filter options by yourself
-       *
-       * Setting both "searchable" and "filterable" make no sense, the "searchable" will have priority
-       * */
-      searchable?: boolean;
-
-      /** When is true, the clear-all-button is shown in the <combo-box> itself,
-       * and the clear-button is shown for each selected tag.
-       *
-       * If multiple attribute is set to "true", this is also enabled.
-       *
-       * If multiple attribute is set to "false", i.e. the <combo-box> is used as a <select>,
-       * then setting this attribute to "true" will make the clear-button of selected tag visible
-       * */
-      clearable?: boolean;
-
-      /** The placeholder of internal input
-       *
-       * Internal input is visible when either "searchable" or "filterable" attribute is presented
-       *
-       * When <combo-box> is empty, this value is also shown as <combo-box> placeholder itself
-       * */
-      placeholder?: string;
-
-
-      multiple?: boolean
-
-      // Events
-      onChange?: (event: React.SyntheticEvent<HTMLComboboxElement>) => void;
-      onInput?: (event: React.FormEvent<HTMLComboboxElement>) => void;
-      onInvalid?: (event: React.FormEvent<HTMLComboboxElement>) => void;
-
-    };
+  // This makes it work in any framework's JSX
+  namespace JSX {
+    interface IntrinsicElements {
+      'combo-box': any; // Just tell TS it exists, framework handles the rest
+      'box-option': any;
+      'box-tag': any;
+    }
   }
-}
+}
+
+// // Add to tag name map
+// declare global {
+//   interface HTMLElementTagNameMap {
+//     'combo-box': HTMLComboboxElement;
+//     'box-option': HTMLComboboxOptionElement;
+//     'box-tag': HTMLComboboxTagElement;
+//   }
+// }
+//
+// declare namespace JSX {
+//   interface IntrinsicElements {
+//     'combo-box': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxElement>, HTMLComboboxElement> & {
+//       /** The value of internal input
+//        *
+//        * Internal input is visible when either "searchable" or "filterable" attribute is presented */
+//       value?: string;
+//
+//       /** The value of internal input
+//        *
+//        * Internal input is visible when either "searchable" or "filterable" attribute is presented */
+//       query?: string;
+//
+//       /** When is true, the internal input is shown.
+//        *
+//        * When user type something, available options are filtered by this query.
+//        *
+//        * Setting both "filterable" and "searchable" make no sense, the "searchable" will have priority
+//        * */
+//       filterable?: boolean;
+//
+//       /** When is true, the internal input is shown.
+//        *
+//        * When user type something, available options are not filtered by this query.
+//        * You have to set an "input" listener to the <combo-box> and filter options by yourself
+//        *
+//        * Setting both "searchable" and "filterable" make no sense, the "searchable" will have priority
+//        * */
+//       searchable?: boolean;
+//
+//       /** When is true, the clear-all-button is shown in the <combo-box> itself,
+//        * and the clear-button is shown for each selected tag.
+//        *
+//        * If multiple attribute is set to "true", this is also enabled.
+//        *
+//        * If multiple attribute is set to "false", i.e. the <combo-box> is used as a <select>,
+//        * then setting this attribute to "true" will make the clear-button of selected tag visible
+//        * */
+//       clearable?: boolean;
+//
+//       /** The placeholder of internal input
+//        *
+//        * Internal input is visible when either "searchable" or "filterable" attribute is presented
+//        *
+//        * When <combo-box> is empty, this value is also shown as <combo-box> placeholder itself
+//        * */
+//       placeholder?: string;
+//
+//
+//       multiple?: boolean
+//
+//       // Events
+//       onChange?: (event: React.SyntheticEvent<HTMLComboboxElement>) => void;
+//       onInput?: (event: React.FormEvent<HTMLComboboxElement>) => void;
+//       onInvalid?: (event: React.FormEvent<HTMLComboboxElement>) => void;
+//
+//     };
+//   }
+// }

package/dist/types/combobox/index.d.ts

@@ -1,2 +1 @@
-/// <reference types="src/combobox/combobox.js" />
 export * from './HTML.combobox.element.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kr-elements",
-  "version": "0.0.1-alpha.7",
+  "version": "0.0.1-alpha.9",
   "description": "Custom elements",
   "type": "module",
   "scripts": {
@@ -20,6 +20,7 @@
   "devDependencies": {
     "@espcom/eslint-config": "latest",
     "@types/node": "22.8.6",
+    "@types/react": "^19.2.14",
     "c8": "10.1.2",
     "esbuild": "0.25.5",
     "husky": "9.1.5",
@@ -40,7 +41,7 @@
   ],
   "exports": {
     "./combobox": {
-      "types": "./dist/types/combobox/combobox.d.ts",
+      "types": "./dist/types/combobox/index.d.ts",
       "require": "./dist/cjs/combobox/index.js",
       "import": "./dist/esm/combobox/index.js"
     }

package/src/combobox/combobox.d.ts

@@ -126,71 +126,88 @@ interface ComboboxEventMap extends HTMLElementEventMap {
   "selectstart": ComboboxEvent;
 }
 
-// Add to tag name map
 declare global {
   interface HTMLElementTagNameMap {
     'combo-box': HTMLComboboxElement;
     'box-option': HTMLComboboxOptionElement;
     'box-tag': HTMLComboboxTagElement;
   }
-}
 
-declare namespace JSX {
-  interface IntrinsicElements {
-    'combo-box': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxElement>, HTMLComboboxElement> & {
-      /** The value of internal input
-       *
-       * Internal input is visible when either "searchable" or "filterable" attribute is presented */
-      value?: string;
-
-      /** The value of internal input
-       *
-       * Internal input is visible when either "searchable" or "filterable" attribute is presented */
-      query?: string;
-
-      /** When is true, the internal input is shown.
-       *
-       * When user type something, available options are filtered by this query.
-       *
-       * Setting both "filterable" and "searchable" make no sense, the "searchable" will have priority
-       * */
-      filterable?: boolean;
-
-      /** When is true, the internal input is shown.
-       *
-       * When user type something, available options are not filtered by this query.
-       * You have to set an "input" listener to the <combo-box> and filter options by yourself
-       *
-       * Setting both "searchable" and "filterable" make no sense, the "searchable" will have priority
-       * */
-      searchable?: boolean;
-
-      /** When is true, the clear-all-button is shown in the <combo-box> itself,
-       * and the clear-button is shown for each selected tag.
-       *
-       * If multiple attribute is set to "true", this is also enabled.
-       *
-       * If multiple attribute is set to "false", i.e. the <combo-box> is used as a <select>,
-       * then setting this attribute to "true" will make the clear-button of selected tag visible
-       * */
-      clearable?: boolean;
-
-      /** The placeholder of internal input
-       *
-       * Internal input is visible when either "searchable" or "filterable" attribute is presented
-       *
-       * When <combo-box> is empty, this value is also shown as <combo-box> placeholder itself
-       * */
-      placeholder?: string;
-
-
-      multiple?: boolean
-
-      // Events
-      onChange?: (event: React.SyntheticEvent<HTMLComboboxElement>) => void;
-      onInput?: (event: React.FormEvent<HTMLComboboxElement>) => void;
-      onInvalid?: (event: React.FormEvent<HTMLComboboxElement>) => void;
-
-    };
+  // This makes it work in any framework's JSX
+  namespace JSX {
+    interface IntrinsicElements {
+      'combo-box': any; // Just tell TS it exists, framework handles the rest
+      'box-option': any;
+      'box-tag': any;
+    }
   }
-}
+}
+
+// // Add to tag name map
+// declare global {
+//   interface HTMLElementTagNameMap {
+//     'combo-box': HTMLComboboxElement;
+//     'box-option': HTMLComboboxOptionElement;
+//     'box-tag': HTMLComboboxTagElement;
+//   }
+// }
+//
+// declare namespace JSX {
+//   interface IntrinsicElements {
+//     'combo-box': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxElement>, HTMLComboboxElement> & {
+//       /** The value of internal input
+//        *
+//        * Internal input is visible when either "searchable" or "filterable" attribute is presented */
+//       value?: string;
+//
+//       /** The value of internal input
+//        *
+//        * Internal input is visible when either "searchable" or "filterable" attribute is presented */
+//       query?: string;
+//
+//       /** When is true, the internal input is shown.
+//        *
+//        * When user type something, available options are filtered by this query.
+//        *
+//        * Setting both "filterable" and "searchable" make no sense, the "searchable" will have priority
+//        * */
+//       filterable?: boolean;
+//
+//       /** When is true, the internal input is shown.
+//        *
+//        * When user type something, available options are not filtered by this query.
+//        * You have to set an "input" listener to the <combo-box> and filter options by yourself
+//        *
+//        * Setting both "searchable" and "filterable" make no sense, the "searchable" will have priority
+//        * */
+//       searchable?: boolean;
+//
+//       /** When is true, the clear-all-button is shown in the <combo-box> itself,
+//        * and the clear-button is shown for each selected tag.
+//        *
+//        * If multiple attribute is set to "true", this is also enabled.
+//        *
+//        * If multiple attribute is set to "false", i.e. the <combo-box> is used as a <select>,
+//        * then setting this attribute to "true" will make the clear-button of selected tag visible
+//        * */
+//       clearable?: boolean;
+//
+//       /** The placeholder of internal input
+//        *
+//        * Internal input is visible when either "searchable" or "filterable" attribute is presented
+//        *
+//        * When <combo-box> is empty, this value is also shown as <combo-box> placeholder itself
+//        * */
+//       placeholder?: string;
+//
+//
+//       multiple?: boolean
+//
+//       // Events
+//       onChange?: (event: React.SyntheticEvent<HTMLComboboxElement>) => void;
+//       onInput?: (event: React.FormEvent<HTMLComboboxElement>) => void;
+//       onInvalid?: (event: React.FormEvent<HTMLComboboxElement>) => void;
+//
+//     };
+//   }
+// }