Update react, add some V2 components for V1 usage

resources/scripts/components/elements/button/Button.tsx

@@ -0,0 +1,36 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styles from './style.module.css';
+
+export type ButtonProps = JSX.IntrinsicElements['button'] & {
+    square?: boolean;
+    small?: boolean;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ children, square, small, className, ...rest }, ref) => {
+        return (
+            <button
+                ref={ref}
+                className={classNames(styles.button, { [styles.square]: square, [styles.small]: small }, className)}
+                {...rest}
+            >
+                {children}
+            </button>
+        );
+    },
+);
+
+const TextButton = forwardRef<HTMLButtonElement, ButtonProps>(({ className, ...props }, ref) => (
+    // @ts-expect-error
+    <Button ref={ref} className={classNames(styles.text, className)} {...props} />
+));
+
+const DangerButton = forwardRef<HTMLButtonElement, ButtonProps>(({ className, ...props }, ref) => (
+    // @ts-expect-error
+    <Button ref={ref} className={classNames(styles.danger, className)} {...props} />
+));
+
+const _Button = Object.assign(Button, { Text: TextButton, Danger: DangerButton });
+
+export default _Button;

resources/scripts/components/elements/button/index.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './Button';
+export { default as styles } from './style.module.css';

resources/scripts/components/elements/button/style.module.css

@@ -0,0 +1,30 @@
+.button {
+    @apply px-4 py-2 inline-flex items-center justify-center;
+    @apply bg-blue-600 rounded text-base font-semibold text-blue-50 transition-all duration-100;
+    @apply hover:bg-blue-500 active:bg-blue-500;
+
+    &.square {
+        @apply p-2;
+    }
+
+    &:focus {
+        @apply ring-[3px] ring-blue-500 ring-offset-2 ring-offset-neutral-700;
+    }
+
+    /* Sizing Controls */
+    &.small {
+        @apply px-3 py-1 font-normal focus:ring-2;
+
+        &.square {
+            @apply p-1;
+        }
+    }
+}
+
+.text {
+    @apply bg-transparent focus:ring-neutral-300 focus:ring-opacity-50 hover:bg-neutral-500 active:bg-neutral-500;
+}
+
+.danger {
+    @apply bg-red-600 hover:bg-red-500 active:bg-red-500 focus:ring-red-500 text-red-50;
+}