diff --git a/bun.lockb b/bun.lockb index bcb7ba1..71936d6 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/index.html b/index.html index cf9ba7e..64ea051 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@
+ diff --git a/package.json b/package.json index 9be008b..c31ff22 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "prepare": "panda codegen" }, "dependencies": { + "@r2wc/react-to-web-component": "^2.0.4", "axe-playwright": "^2.0.3", "chromatic": "^11.20.2", "react": "^18.3.1", diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index a01eac2..2305a3e 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -1,3 +1,4 @@ +import r2wc from "@r2wc/react-to-web-component"; import { css } from "../../../styled-system/css"; export interface ButtonProps { @@ -46,10 +47,21 @@ export const Button = ({ "&:disabled": { opacity: 0.5 }, })} type={type} - onClick={onClick} + onClick={() => { + console.log("Button clicked!"); + onClick?.(); + }} {...rest} > {children} ); }; + +const WcButton = r2wc(Button, { + props: { + children: "string", + }, +}); + +customElements.define("wc-button", WcButton);