feat: integrate @base-ui/react

package.json

@@ -24,6 +24,7 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
+    "@base-ui/react": "^1.3.0",
     "@fontsource-variable/roboto": "^5.2.10",
     "@fontsource/orbitron": "^5.2.8",
     "@fortawesome/fontawesome-svg-core": "^7.2.0",

src/components/ui/Button.tsx

@@ -1,29 +1,22 @@
+import { useRender } from '@base-ui/react/use-render'
 import { cx } from '@styled-system/css'
 import { type ButtonVariantProps, button } from '@styled-system/recipes/button'
-import type { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react'
+import type { FC } from 'react'
 import type { MergeOmitting } from '@/types/helpers'
 
 export type ButtonProps = MergeOmitting<
-  DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
+  useRender.ComponentProps<'button'>,
   ButtonVariantProps
 >
 
-const Button: FC<ButtonProps> = ({
-  className,
-  type = 'button',
-  children,
-  ...props
-}) => {
-  const [buttonArgs, restProps] = button.splitVariantProps(props)
-  return (
-    <button
-      type={type}
-      {...restProps}
-      className={cx(button(buttonArgs), className)}
-    >
-      {children}
-    </button>
-  )
+const Button: FC<ButtonProps> = ({ render, className, ...props }) => {
+  const [buttonArgs, otherProps] = button.splitVariantProps(props)
+
+  return useRender({
+    defaultTagName: 'button',
+    render,
+    props: { className: cx(button(buttonArgs), className), ...otherProps }
+  })
 }
 
 export default Button

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     // Environment setup & latest features
-    "lib": ["ESNext"],
+    "lib": ["ESNext", "DOM"],
     "target": "ES2022",
     "module": "ESNext",
     "moduleDetection": "force",