feat: add input file styling

.lintstagedrc.mjs

@@ -1,6 +1,7 @@
 export default {
-  // Lint & Prettify TS and JS files
-  "**/*.(ts|tsx|js)": () => [`pnpm lint:write `, `pnpm format:write`],
   // Type check TypeScript files
-  "**/*.(ts|tsx)": () => "pnpm check",
+  "**/*.(ts|tsx)": () => "pnpm typecheck",
+
+  // Lint & Prettify TS and JS files
+  "**/*.(ts|tsx|js)": () => [`pnpm lint`, `pnpm format:write`],
 };

resources/js/Components/Checkbox.tsx

@@ -1,4 +1,5 @@
 import type { InputHTMLAttributes } from "react";
+import Input from "@/Components/Input";
 
 export default function Checkbox({
   className = "",

resources/js/Components/Input.tsx

@@ -41,7 +41,8 @@ export default forwardRef(function Input(
         "disabled:cursor-not-allowed disabled:border-gray-300 disabled:bg-gray-100 disabled:focus:border-gray-300 disabled:focus:ring-0",
         "read-only:cursor-not-allowed read-only:border-gray-300 read-only:bg-gray-100 read-only:focus:border-gray-300 read-only:focus:ring-0",
         "invalid:border-red-500 invalid:focus:border-red-500 invalid:focus:ring-red-500",
-        +className,
+        "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-neutral-700 file:cursor-pointer",
+        className,
       )}
       ref={localRef}
     />