feat: integrate @base-ui/react

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