@lovince/ui-react 1.0.1 → 1.0.3

package/custom-elements.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react';
+import { MyButtonProps, MyInputProps } from '@lovince/ui-shared';
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'my-button': HTMLAttributes<HTMLElement> & MyButtonProps;
+      'my-input': HTMLAttributes<HTMLElement> & MyInputProps;
+    }
+  }
+}
+
+export {};

package/dist/index.d.ts

@@ -5,6 +5,7 @@ interface MyButtonComponentProps extends MyButtonProps {
     onButtonClick?: (detail: {
         variant: string;
     }) => void;
+    onClick?: (event: React.MouseEvent) => void;
     children?: React.ReactNode;
 }
 declare const MyButton: React.ForwardRefExoticComponent<MyButtonComponentProps & React.RefAttributes<HTMLElement>>;

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/MyButton.tsx
 import React, { useRef, useEffect, forwardRef } from "react";
 var MyButton = forwardRef(
-  ({ onButtonClick, children, ...props }, ref) => {
+  ({ onButtonClick, onClick, children, ...props }, ref) => {
     const internalRef = useRef(null);
     const elementRef = ref || internalRef;
     useEffect(() => {
@@ -11,11 +11,16 @@ var MyButton = forwardRef(
       const handleButtonClick = (event) => {
         onButtonClick?.(event.detail);
       };
+      const handleClick = (event) => {
+        onClick?.(event);
+      };
       element.addEventListener("button-click", handleButtonClick);
+      element.addEventListener("click", handleClick);
       return () => {
         element.removeEventListener("button-click", handleButtonClick);
+        element.removeEventListener("click", handleClick);
       };
-    }, [props, onButtonClick]);
+    }, [props, onButtonClick, onClick]);
     return React.createElement("my-button", { ref: elementRef }, children);
   }
 );

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/MyButton.tsx","../src/MyInput.tsx"],"sourcesContent":["import React, { useRef, useEffect, forwardRef } from 'react';\nimport { MyButtonProps } from '@lovince/ui-shared';\n\nexport interface MyButtonComponentProps extends MyButtonProps {\n  onButtonClick?: (detail: { variant: string }) => void;\n  children?: React.ReactNode;\n}\n\nexport const MyButton = forwardRef<HTMLElement, MyButtonComponentProps>(\n  ({ onButtonClick, children, ...props }, ref) => {\n    const internalRef = useRef<HTMLElement>(null);\n    const elementRef = (ref as React.RefObject<HTMLElement>) || internalRef;\n\n    useEffect(() => {\n      const element = elementRef.current;\n      if (!element) return;\n\n      // Update element properties\n      Object.assign(element, props);\n\n      // Handle events\n      const handleButtonClick = (event: CustomEvent) => {\n        onButtonClick?.(event.detail);\n      };\n\n      element.addEventListener('button-click', handleButtonClick as EventListener);\n\n      return () => {\n        element.removeEventListener('button-click', handleButtonClick as EventListener);\n      };\n    }, [props, onButtonClick]);\n\n    return React.createElement('my-button', { ref: elementRef }, children);\n  }\n);\n\nMyButton.displayName = 'MyButton';\n","import React, { useRef, useEffect, forwardRef } from 'react';\nimport { MyInputProps } from '@lovince/ui-shared';\n\nexport interface MyInputComponentProps extends MyInputProps {\n  onInputChange?: (detail: { value: string }) => void;\n}\n\nexport const MyInput = forwardRef<HTMLElement, MyInputComponentProps>(\n  ({ onInputChange, ...props }, ref) => {\n    const internalRef = useRef<HTMLElement>(null);\n    const elementRef = (ref as React.RefObject<HTMLElement>) || internalRef;\n\n    useEffect(() => {\n      const element = elementRef.current;\n      if (!element) return;\n\n      // Update element properties\n      Object.assign(element, props);\n\n      // Handle events\n      const handleInputChange = (event: CustomEvent) => {\n        onInputChange?.(event.detail);\n      };\n\n      element.addEventListener('input-change', handleInputChange as EventListener);\n\n      return () => {\n        element.removeEventListener('input-change', handleInputChange as EventListener);\n      };\n    }, [props, onInputChange]);\n\n    return React.createElement('my-input', { ref: elementRef });\n  }\n);\n\nMyInput.displayName = 'MyInput';\n"],"mappings":";AAAA,OAAO,SAAS,QAAQ,WAAW,kBAAkB;AAQ9C,IAAM,WAAW;AAAA,EACtB,CAAC,EAAE,eAAe,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC9C,UAAM,cAAc,OAAoB,IAAI;AAC5C,UAAM,aAAc,OAAwC;AAE5D,cAAU,MAAM;AACd,YAAM,UAAU,WAAW;AAC3B,UAAI,CAAC,QAAS;AAGd,aAAO,OAAO,SAAS,KAAK;AAG5B,YAAM,oBAAoB,CAAC,UAAuB;AAChD,wBAAgB,MAAM,MAAM;AAAA,MAC9B;AAEA,cAAQ,iBAAiB,gBAAgB,iBAAkC;AAE3E,aAAO,MAAM;AACX,gBAAQ,oBAAoB,gBAAgB,iBAAkC;AAAA,MAChF;AAAA,IACF,GAAG,CAAC,OAAO,aAAa,CAAC;AAEzB,WAAO,MAAM,cAAc,aAAa,EAAE,KAAK,WAAW,GAAG,QAAQ;AAAA,EACvE;AACF;AAEA,SAAS,cAAc;;;ACpCvB,OAAOA,UAAS,UAAAC,SAAQ,aAAAC,YAAW,cAAAC,mBAAkB;AAO9C,IAAM,UAAUA;AAAA,EACrB,CAAC,EAAE,eAAe,GAAG,MAAM,GAAG,QAAQ;AACpC,UAAM,cAAcF,QAAoB,IAAI;AAC5C,UAAM,aAAc,OAAwC;AAE5D,IAAAC,WAAU,MAAM;AACd,YAAM,UAAU,WAAW;AAC3B,UAAI,CAAC,QAAS;AAGd,aAAO,OAAO,SAAS,KAAK;AAG5B,YAAM,oBAAoB,CAAC,UAAuB;AAChD,wBAAgB,MAAM,MAAM;AAAA,MAC9B;AAEA,cAAQ,iBAAiB,gBAAgB,iBAAkC;AAE3E,aAAO,MAAM;AACX,gBAAQ,oBAAoB,gBAAgB,iBAAkC;AAAA,MAChF;AAAA,IACF,GAAG,CAAC,OAAO,aAAa,CAAC;AAEzB,WAAOF,OAAM,cAAc,YAAY,EAAE,KAAK,WAAW,CAAC;AAAA,EAC5D;AACF;AAEA,QAAQ,cAAc;","names":["React","useRef","useEffect","forwardRef"]}
+{"version":3,"sources":["../src/MyButton.tsx","../src/MyInput.tsx"],"sourcesContent":["import React, { useRef, useEffect, forwardRef } from 'react';\nimport { MyButtonProps } from '@lovince/ui-shared';\n\nexport interface MyButtonComponentProps extends MyButtonProps {\n  onButtonClick?: (detail: { variant: string }) => void;\n  onClick?: (event: React.MouseEvent) => void;\n  children?: React.ReactNode;\n}\n\nexport const MyButton = forwardRef<HTMLElement, MyButtonComponentProps>(\n  ({ onButtonClick, onClick, children, ...props }, ref) => {\n    const internalRef = useRef<HTMLElement>(null);\n    const elementRef = (ref as React.RefObject<HTMLElement>) || internalRef;\n\n    useEffect(() => {\n      const element = elementRef.current;\n      if (!element) return;\n\n      // Update element properties\n      Object.assign(element, props);\n\n      // Handle custom events\n      const handleButtonClick = (event: CustomEvent) => {\n        onButtonClick?.(event.detail);\n      };\n\n      // Handle standard click events\n      const handleClick = (event: Event) => {\n        onClick?.(event as any);\n      };\n\n      element.addEventListener('button-click', handleButtonClick as EventListener);\n      element.addEventListener('click', handleClick as EventListener);\n\n      return () => {\n        element.removeEventListener('button-click', handleButtonClick as EventListener);\n        element.removeEventListener('click', handleClick as EventListener);\n      };\n    }, [props, onButtonClick, onClick]);\n\n    return React.createElement('my-button', { ref: elementRef }, children);\n  }\n);\n\nMyButton.displayName = 'MyButton';\n","import React, { useRef, useEffect, forwardRef } from 'react';\nimport { MyInputProps } from '@lovince/ui-shared';\n\nexport interface MyInputComponentProps extends MyInputProps {\n  onInputChange?: (detail: { value: string }) => void;\n}\n\nexport const MyInput = forwardRef<HTMLElement, MyInputComponentProps>(\n  ({ onInputChange, ...props }, ref) => {\n    const internalRef = useRef<HTMLElement>(null);\n    const elementRef = (ref as React.RefObject<HTMLElement>) || internalRef;\n\n    useEffect(() => {\n      const element = elementRef.current;\n      if (!element) return;\n\n      // Update element properties\n      Object.assign(element, props);\n\n      // Handle events\n      const handleInputChange = (event: CustomEvent) => {\n        onInputChange?.(event.detail);\n      };\n\n      element.addEventListener('input-change', handleInputChange as EventListener);\n\n      return () => {\n        element.removeEventListener('input-change', handleInputChange as EventListener);\n      };\n    }, [props, onInputChange]);\n\n    return React.createElement('my-input', { ref: elementRef });\n  }\n);\n\nMyInput.displayName = 'MyInput';\n"],"mappings":";AAAA,OAAO,SAAS,QAAQ,WAAW,kBAAkB;AAS9C,IAAM,WAAW;AAAA,EACtB,CAAC,EAAE,eAAe,SAAS,UAAU,GAAG,MAAM,GAAG,QAAQ;AACvD,UAAM,cAAc,OAAoB,IAAI;AAC5C,UAAM,aAAc,OAAwC;AAE5D,cAAU,MAAM;AACd,YAAM,UAAU,WAAW;AAC3B,UAAI,CAAC,QAAS;AAGd,aAAO,OAAO,SAAS,KAAK;AAG5B,YAAM,oBAAoB,CAAC,UAAuB;AAChD,wBAAgB,MAAM,MAAM;AAAA,MAC9B;AAGA,YAAM,cAAc,CAAC,UAAiB;AACpC,kBAAU,KAAY;AAAA,MACxB;AAEA,cAAQ,iBAAiB,gBAAgB,iBAAkC;AAC3E,cAAQ,iBAAiB,SAAS,WAA4B;AAE9D,aAAO,MAAM;AACX,gBAAQ,oBAAoB,gBAAgB,iBAAkC;AAC9E,gBAAQ,oBAAoB,SAAS,WAA4B;AAAA,MACnE;AAAA,IACF,GAAG,CAAC,OAAO,eAAe,OAAO,CAAC;AAElC,WAAO,MAAM,cAAc,aAAa,EAAE,KAAK,WAAW,GAAG,QAAQ;AAAA,EACvE;AACF;AAEA,SAAS,cAAc;;;AC5CvB,OAAOA,UAAS,UAAAC,SAAQ,aAAAC,YAAW,cAAAC,mBAAkB;AAO9C,IAAM,UAAUA;AAAA,EACrB,CAAC,EAAE,eAAe,GAAG,MAAM,GAAG,QAAQ;AACpC,UAAM,cAAcF,QAAoB,IAAI;AAC5C,UAAM,aAAc,OAAwC;AAE5D,IAAAC,WAAU,MAAM;AACd,YAAM,UAAU,WAAW;AAC3B,UAAI,CAAC,QAAS;AAGd,aAAO,OAAO,SAAS,KAAK;AAG5B,YAAM,oBAAoB,CAAC,UAAuB;AAChD,wBAAgB,MAAM,MAAM;AAAA,MAC9B;AAEA,cAAQ,iBAAiB,gBAAgB,iBAAkC;AAE3E,aAAO,MAAM;AACX,gBAAQ,oBAAoB,gBAAgB,iBAAkC;AAAA,MAChF;AAAA,IACF,GAAG,CAAC,OAAO,aAAa,CAAC;AAEzB,WAAOF,OAAM,cAAc,YAAY,EAAE,KAAK,WAAW,CAAC;AAAA,EAC5D;AACF;AAEA,QAAQ,cAAc;","names":["React","useRef","useEffect","forwardRef"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lovince/ui-react",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "React wrappers for UI components",
   "type": "module",
   "main": "./dist/index.js",
@@ -9,10 +9,15 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
+    },
+    "./custom-elements": {
+      "types": "./custom-elements.d.ts",
+      "import": "./custom-elements.d.ts"
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "custom-elements.d.ts"
   ],
   "scripts": {
     "build": "tsup",