feat: update dependencies

components/FuriganaGenerator/Vocabulary/VocabularyProvider.tsx

@@ -1,5 +1,5 @@
 import { EntryFull } from "@components/Dict";
-import { Alert, Button, LoadingProgress } from "@components/ui";
+import { Alert, ButtonLink, LoadingProgress } from "@components/ui";
 import ExternalIcon from "@heroicons/react/24/solid/ArrowTopRightOnSquareIcon";
 import type {
   EntryModel,
@@ -48,16 +48,15 @@ export function VocabularyProvider({
             entry={entry}
             className="mb-4 p-4 border border-gray-300 dark:border-gray-700 rounded"
           />
-          <Button
-            as="a"
+          <ButtonLink
             href={`/entry/${entry.id}`}
             variant="default"
             target="_blank"
             className="inline-flex items-center"
           >
             Im Wörterbuch anzeigen
             <ExternalIcon className="ml-1 w-4 h-4" />
-          </Button>
+          </ButtonLink>
         </>
       )}
       {error && <Alert type="error">{error}</Alert>}

components/ui/Button/Button.tsx

@@ -1,11 +1,11 @@
-import React, { forwardRef } from "react";
-import { Box, BoxComponent, BoxProps } from "../Box";
+import { ButtonHTMLAttributes, forwardRef, HTMLProps } from "react";
+import clsx from "clsx";
 
 export type ButtonVariant = "primary" | "default" | "text";
 
-export type ButtonProps<E extends React.ElementType = React.ElementType> = {
+export type ButtonProps = {
   variant?: ButtonVariant;
-} & BoxProps<E>;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
 
 const COLOR_MAP: Record<ButtonVariant, string> = {
   default: "border-gray-700",
@@ -14,16 +14,38 @@ const COLOR_MAP: Record<ButtonVariant, string> = {
     "border-primary-700 text-primary-700 hover:bg-primary-700 hover:bg-opacity-20 focus focus:bg-opacity-40",
 };
 
-export const Button: BoxComponent<ButtonProps> = forwardRef(function Button(
-  { as, className = "", variant = "default", ...rest },
-  ref,
-) {
-  return (
-    <Box
-      as={as ?? "button"}
-      className={`select-none text-sm px-4 py-2 focus:outline-none rounded font-bold border border-gray-700 ${COLOR_MAP[variant]} ${className}`}
-      ref={ref}
-      {...rest}
-    />
-  );
-});
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button({ className = "", variant = "default", ...rest }, ref) {
+    return (
+      <button
+        className={clsx(
+          "select-none text-sm px-4 py-2 focus:outline-none rounded font-bold border border-gray-700",
+          COLOR_MAP[variant],
+          className,
+        )}
+        ref={ref}
+        {...rest}
+      />
+    );
+  },
+);
+
+export type ButtonLinkProps = {
+  variant?: ButtonVariant;
+} & HTMLProps<HTMLAnchorElement>;
+
+export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
+  function Button({ className = "", variant = "default", ...rest }, ref) {
+    return (
+      <a
+        className={clsx(
+          "select-none text-sm px-4 py-2 focus:outline-none rounded font-bold border border-gray-700",
+          COLOR_MAP[variant],
+          className,
+        )}
+        ref={ref}
+        {...rest}
+      />
+    );
+  },
+);

components/ui/index.ts

@@ -1,5 +1,4 @@
 export * from "./Alert";
-export * from "./Box";
 export * from "./Button";
 export * from "./Footer";
 export * from "./Grid";

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.